Micro-interactions et animations

Parmi les tâches importantes d’un UI designer, il y a son travail sur les micro-interactions et les animations. C’est un aspect crucial du design d’interfaces - qui est parfois négligé quand les spécifications sont transmises directement d’un UX designer, qui porte une vision plus globale, aux équipes de développement.

Interactions et animations sur un formulaire d'entretien professionnel annuel.

Les animations n’ont pas qu’une visée esthétique. Elles garantissent une continuité visuelle qui est porteuse de sens : l’utilisateur comprend d’où il part et où il arrive, les changements d’état des éléments avec lesquels il interagit sont plus lisibles.

Enrichir le design et l'animation des éléments de formulaire permet une meilleure lisibilité des changements d'état et une intégration parfaite à la charte graphique des interfaces - et donc d'améliorer l'expérience des utilisateurs, à condition de préserver l'accessibilité et les fonctionnalités natives du navigateur.

Dans le cadre de ma mission, j’ai préconisé des animations discrètes combinant translation et fondu. Ce choix n’est pas une simple affaire de goût. La translation donne du sens, mais seule, elle donnerait une impression de lourdeur, car il faudrait déplacer l’objet sur toute la distance du bord de l’écran vers sa destination. Rapide, l’animation serait abrupte. Plus lente, elle semblerait interminable.

L’ajout du fondu permet de faire apparaître les objets à un endroit proche de leur emplacement final afin de suggérer juste ce qu’il faut de mouvement, ce qui apporte du sens tout en évitant d’être excessivement démonstratif.

Le style des animations est aussi une composante du design system à part entière, au même titre que les couleurs ou la typographie. On n'animera pas de la même façon l'apparition d'une fenêtre dans un logiciel de productivité que dans un jeu pour enfants sur une tablette.

La conception des animations et interactions tombe parfois dans une zone grise où les expertises des designers et celle des développeurs ne se rejoignent pas. Idéalement, le designer doit avoir une vraie fibre technique et le développeur être sensible aux enjeux du design. En prototypant des animations techniquement réalistes et en formalisant des préconisations de design, j’ai pu communiquer efficacement le résultat attendu aux développeurs.