Charte graphique numérique

Animations

L'animation est un des aspects à traiter quand on conçois une interface, au même titre que la couleur ou le choix des icônes.

Les animations doivent aider à comprendre ce qui se passe. Il ne faut ni négliger leur usage, ni en abuser. De bonnes animations d'interface sont discrètes et utiles.

Aucune animation : le panneau apparaît brutalement et on ne sait d'où
Avec une animation : on comprends que le panneau arrive depuis le côté, on saura où chercher pour le retrouver.

Quoi animer ?

L'animation sert à faire un retour à l'utilisateur. L'aider à trouver, à comprendre.

Exemples d'animations :

Toute action de l'utilisateur doit avoir un retour de l'interface instantanément, pour indiquer que l'ordre a bien été reçu, avant même sa possible exécution.

Il ne faut donc pas animer dans l'interface ce qui est passif (éléments décoratifs non fonctionnels) au détriment des éléments utiles.

Durées et mouvements

Une règle simple à appliquer est celle de la cohérence physique : le poids d'un objet définit sa façon de se déplacer. Concrètement un objet petit aura une animation très courte (peu d'inertie) et un objet plus grand aura une animation lègèrement plus lente.

Attention, des animations trop lentes donnent donc une impression de lourdeur, ce qui n'est pas l'effet souhaité. Par ailleurs il ne faut pas faire attendre l'utilisateur inutilement.

Animation à différentes vitesses : la taille des objets influe sur leur inertie et leur vitesse

Généralement, les durées d'animations doivent être comprises entre 0.1 seconde et 0.7 seconde.

Éléments Durée
Boutons, liens, petits éléments 100-200 ms
Messages, fenêtres modales, éléments moyens 300-400 ms
Écrans, grands éléments 500-700 ms

Pour améliorer l'aspect naturel de l'interaction avec l'utilisateur, il faut privilégier les accélérations et/ou ralentissement progressifs (ease in, ease out, …). Des éléments qui se déplacent avec des mouvements linéaires donnent un sentiment très mécanique. Consultez les différents types d'animation.

Animation à vitesse progressive : le déplacement est plus naturel

Éviter les principes d'animation qui sont plutôt appropriés au dessin animé qu'à une interface graphique "sobre" (Les 12 principes de base de l'animation). Encore une fois, il convient d'être efficace et discret. Pas ludique.

Performances

Attention, l'usage d'animations implique des calculs sur l'appareil qui les exécute (ce n'est pas pré-calculé comme dans une vidéo). Par exemple un zoom de 5 secondes sur tout l'écran avec un changement de transparence et un flou gaussien, même si c'est joli (et utile !), va demander de gros calculs et induit une perte plus ou moins prononcée de la fluidité de l'interface, et le cas échéant, une plus grande consommation électrique et donc un raccourcissement de l'autonomie de l'appareil.

Personne n'aime utiliser un site "lourd" et pas fluide ou une application qui consomme toute la batterie de son téléphone.