Aller directement au contenu

UX et Animation

20/04/2016
0

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 (UX).

Animation et UX : animation de bouton d'ouverture se transformant en bouton de fermeture

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

animation de barre de progression qui se transforme en pastille verte

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 )

Animation et UX - formulaire avec des animations pour renforcer sa compréhension

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

Animation et UX - Une animation qui permet de localiser le bouton d'ouverture d'un menu

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 )

Animation et UX - Une animation d'interface

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.

 

Enregistrer

Laisser un commentaire