UX et Animation

Tant du point de vue utilisateur que de celui du concepteur, l’animation nourrit une certaine méfiance.  Elle nuirait à la simplicité en diminuant l'efficacité. Elle serait une source d’erreurs et de bugs. En définitive, elle n’apporterait rien d’autre qu’une surcharge de travail en conception pour un résultat souvent mitigé.

Pourtant l’animation a toute sa place lorsqu’il s’agit de bâtir une expérience utilisateur robuste, agréable et intelligente :

• Elle attire l’attention de l’utilisateur sur des zones et objets importants de l’interface
• Elle donne des indices sur la marche à suivre
• Elle donne un feedback rassurant à l’utilisateur après une action
• Elle explique visuellement le fonctionnement de l’interface.

Il faut voir l’animation comme un mode de dialogue avec l’utilisateur. Il s’agit d’un guide discret, capable d’intervenir au bon moment, pour offrir une aide, voire même une solution.

Les qualités requises d’une animation sont plus difficiles à lister tant l’objectif et le contexte changent. Mais voici quelques grandes règles :

• Elle ne doit ni polluer ni parasiter l’expérience utilisateur.
• Elle ne doit être composée que d’éléments utiles.
• Elle doit avoir le bon timing pour être fluide et compréhensible.

Voici quelques exemples d’animations réussies qui enrichissent l'expérience utilisateur.

L'animation permet ici de limiter le nombre de boutons ainsi que le temps nécessaire pour les localiser ( Alexander Lehnert – Dribble )

Ici l'animation transforme un élément pour qu'il reflète plus précisément et plus visiblement son état qui a changé ( Simon van Acht – Dribble )

L'animation permet d'accentuer et de mieux identifier les changements de l'interface et les nouvelles interactions possibles ( Jade Tan SP – Dribble )

L'animation d'ouverture et de fermeture créent un lien visuel entre le bouton et les fonctionnalités qu'il permet d'afficher​ ( Roman Shelekhov – Dribble )

Les étapes de ce scénario simple sont visuellement et logiquement liées entre elles ( Tyler Zenk – Dribbble )

Comme nous le voyons le diable est dans les détails et l'animation peut apporter un supplément d'âme à l'interface tout en facilitant sa compréhension. La conception d'une interface ne s’arrête donc pas à la juxtaposition de composants fonctionnels statiques, mais implique également une mise en mouvement.

Pour aller plus loin : nous abordons en détail l'apport des animations dans l'expérience utilisateur dans notre formation ergonomie mobile et tactile.