Pourquoi l'animation compte
Le Nielsen Norman Group décrit quatre rôles que l'animation remplit bien dans une interface. Chacun aide les gens à comprendre quelque chose qu'ils pourraient sinon manquer.
- Retour : montrer que le système vous a entendu, comme un bouton qui s'enfonce.
- Changement d'état : montrer qu'un élément a changé de mode, comme une icône lecture qui devient pause.
- Navigation : montrer où vous êtes allé, comme un panneau qui glisse depuis le côté.
- Indices : suggérer ce que vous pouvez faire, comme une carte qui dépasse pour montrer qu'on peut la faire glisser.
Timing et easing
Dans le monde réel, rien ne démarre ni ne s'arrête instantanément. L'easing, c'est la façon dont une animation accélère et ralentit, et c'est la plus grande différence entre une animation qui fait bon marché et une animation qui sonne juste. La plupart des animations d'interface sont brèves, une fraction de seconde, pour aider sans faire attendre.
Linéaire Robotique. Même vitesse du début à la fin.
Ease out Départ rapide, arrêt en douceur. Idéal pour ce qui arrive.
Ressort Léger dépassement. Ludique, à utiliser avec soin.
Les micro-interactions
Les micro-interactions sont de petits moments construits autour d'une seule tâche : aimer une publication, activer un réglage, tirer pour actualiser. Chacune a un déclencheur, une réponse et parfois un brin de personnalité. C'est là que beaucoup de produits affirment leur marque.
Une animation pour tout le monde
Certaines personnes ont des vertiges ou des nausées face aux mouvements à l'écran. Les systèmes d'exploitation leur permettent de demander moins d'animations, et les sites web peuvent respecter ce choix grâce au réglage prefers-reduced-motion. Une partie du métier consiste à concevoir une version calme de chaque animation.
Le motion design pour les marques
Au-delà des interfaces, vous animerez des éléments de marque : des logos qui se construisent d'eux-mêmes, des publications avec du texte en mouvement, de courtes boucles produit. Vous prototyperez dans Figma et utiliserez des outils d'IA pour explorer rapidement idées et storyboards.
