L’animation fonctionnelle est une animation subtile qui a un but clair et logique. Elle réduit la charge cognitive, empêche la cécité du changement et établit un meilleur rappel dans les relations spatiales. Mais ce n’est pas tout …
L’animation amène l’interface utilisateur à la vie.
Le mouvement peut rendre les surfaces vivantes en les multipliant et en les divisant; en changeant leur forme et leur taille. Vous devez utiliser l’animation fonctionnelle pour transporter doucement les utilisateurs entre les contextes de navigation, expliquer les changements dans l’agencement des éléments sur un écran et renforcer la hiérarchie de ces éléments.
Une animation fonctionnelle réussie possède les six caractéristiques suivantes:
1. Responsive
Le “Visual feedback “ est extrêmement important dans la conception de l’interface utilisateur. Il fonctionne parce qu’il fait appel au désir naturel de l’utilisateur pour la reconnaissance. Dans la vie réelle, les boutons, les contrôles et les objets réagissent à notre interaction; sur le digital cela doit donc être la même chose.
Crédit image: Smart Design
L’interface utilisateur doit donc répondre rapidement à la demande (à l’entrée utilisateur) précisément à l’endroit où l’utilisateur la déclenche; et afficher la connexion entre les nouvelles surfaces et l’action qui les a créées. Il est important pour l’utilisateur de voir et comprendre les conséquences de ses interactions.
Les objets répondent de manière appropriée à l’intention de l’utilisateur. Crédit image: Material Design
2. Association
Associer les surfaces nouvellement créées à l’élément ou l’action qui en est la cause. La logique derrière la connexion associative est d’aider l’utilisateur à comprendre la modification qui vient de se produire dans la présentation de la vue, et ce qui l’a déclenchée.
Ci-dessous vous pouvez voir deux exemples de transitions de menus. Dans le premier exemple, le menu apparaît loin du point de contact qui l’a déclenché, ce qui rompt sa relation avec la méthode d’entrée.
Ce qu’il ne faut pas faire. Crédit image: Material Design
Dans le menu du deuxième exemple, il apparaît à droite du point de contact. Cela lie l’élément au point de contact.
Ce qu’il faut faire. Crédit image: Material Design
Encore un exemple?
Voici un bouton d’action dont la fonctionnalité change dans certaines conditions. Les boutons «Play» et «Stop» sont probablement les exemples les plus courants de boutons commutables. Transformer le bouton de lecture en bouton de pause signifie que les deux actions sont liées, et que le fait de presser l’un rend l’autre visible. Vous devez animer la transition entre les états de sorte qu’elle semble lisse, et non pas discontinue.
La transition douce vers un contrôle de lecture informe l’utilisateur de la fonction du bouton tout en ajoutant un élément d’émerveillement à l’interaction. Crédit image: Material Design
3. Naturel
Évitez une transition surprenante. Chaque mouvement doit être inspiré par les forces du monde réel. Dans le monde réel, la capacité d’un objet à accélérer ou à ralentir rapidement est affectée par le poids et la friction de surface. De la même manière, les démarrages et les arrêts ne se produisent pas instantanément dans une bonne conception d’interface utilisateur.
Ci-dessous vous pouvez voir un exemple dans lequel l’utilisateur sélectionne un élément dans une liste pour zoomer sur sa vue détaillée. Pendant l’expansion, la petite carte se déplace sur un arc vers sa destination, car elle se dilate en une carte plus grande.
Ce qu’il faut faire. Les éléments qui se déplacent vers le haut de l’écran doivent également représenter l’effort pendant l’accélération par un mouvement ascendant. Crédit image: Material Design
4. Intentionnel
Concentrez-vous sur le bon endroit au bon moment. Le mouvement, par sa nature, a le plus haut niveau de proéminence dans une interface utilisateur. Ni les paragraphes de texte ni les images statiques ne peuvent rivaliser avec le mouvement. Une bonne transition aide à orienter l’utilisateur vers la prochaine étape d’une interaction.
Le premier utilisateur ne peut pas vraiment prédire une interaction qui est sur le point de se produire, mais une bonne animation permet à l’utilisateur de rester orienté et de ne pas sentir que le contenu a soudainement changé.
Mac OS utilise une animation fonctionnelle pour miniaturiser une fenêtre. Cette animation relie le premier état au deuxième état.
Mac OS et l’animation des fenêtres
Un autre bon exemple est une transition de “parent à enfant » où l’utilisateur sélectionne un élément dans un élément de liste (ou élément de carte) et zoome sur sa vue détaillée. Cette interaction permet à l’utilisateur de maintenir le contexte.
Animation de la transition parent-enfant. Crédit image: Material Design
5. Rapide
Lorsque les éléments se déplacent entre des positions ou des états, le mouvement doit être assez rapide pour qu’il ne cause pas d’attente, mais suffisamment lent pour que la transition puisse être comprise. Vous l’aurez donc compris, c’est une histoire de juste milieu.
Ce qu’il ne faut pas faire. Crédit image: Material Design
L’échelonnement et le ralentissement du mouvement de nombreux éléments peuvent allonger la durée de l’animation globale; comme on peut le voir ci-dessus.
Ce qu’il ne faut pas faire. Crédit image: Material Design
Il faut donc animer assez rapidement afin que l’utilisateur n’ait pas à attendre l’animation. Ce qui est encore plus pertinent quand l’utilisateur est en fin de parcours d’achat et qu’il est sur le point d’ajouter un article à son panier.
Ce qu’il faut faire. Crédit image: Material Design
Il faut donc gardez les transitions courtes car les utilisateurs les voient fréquemment. Je vous conseille donc de limiter la durée d’animation à un maximum de 300ms.
De plus, comme on peut le voir sur ce dernier exemple, on a une gestion globale du contenu dans l’animation, ce qui évite les ralentissements et affichages manquants.
Ce qu’il faut faire. Crédit image: Material Design
6. Epuré
Les transitions doivent éviter de faire too mutch, car elles peuvent devenir déroutantes lorsque plusieurs éléments doivent se déplacer dans des directions différentes ou croiser leurs chemins.
Ce qu’il ne faut pas faire. Crédit image: Material Design
Les transitions doivent être claires, simples et cohérentes. Rappelez-vous, less is more en ce qui concerne l’animation. Donc il est important de se concentrer uniquement sur les choses « pratiques » que l’animation apporte à l’utilisateur.
Ce qu’il faut faire. Crédit image: Material Design
Conclusion
Par-dessus tout, le mouvement n’est pas aléatoire. Il y a un but derrière chaque action. Le mouvement guide et se concentre sur ce qui est important afin que vous ne perdiez pas l’utilisateur. Que votre application soit amusante et ludique ou sérieuse et directe, l’utilisation d’un principe de mouvement peut vous aider à fournir une expérience cohérente claire et rapide.
Une ligne directrice: la conception doit être soignée. L’attention portée à chaque détail est la clé de votre réussite, et rendra l’interaction homme-machine facile à appréhender, à utiliser.
Je vous remercie!
