Des animations pour une meilleure expérience

A quoi servent les animations ?

Nous sommes constamment confrontés à des phénomènes de mouvement, de transformation ou de métamorphose. On les comprend parce que notre cerveau est capable d’analyser une multitude d’informations, et de recréer une logique, et finalement de déduire à une cohérence. Cette cohérence est l’animation : une succession d’étapes qui crée un effet de déplacement.

Notre cerveau est bien fait, il a tous les outils qu’il faut pour interpréter ces phénomènes. C’est une succession d’étapes qu’on a pu analyser, mais si ce mouvement est logique, on pourra jusqu’à anticiper les prochaines étapes, m’voyez ?

Par exemple, vous lâchez une pomme depuis le haut du bâtiment. Elle chute alors en prenant de la vitesse. Elle n’a pas encore touché le sol que déjà, vous anticipez la collision au pied du bâtiment, et pourtant elle n’a pas encore atteint le sol. C’est parce qu’il y a une cohérence, une logique. Vous avez donc eu une intuition, précisément une expérience intuitive !

Les mauvaises utilisations.

On ne cessera jamais de préciser qu’une bonne navigation permet d’optimiser l’expérience de votre site web. Mais savez-vous que vous pouvez la rendre encore plus intuitive ? Non, pas la pomme… mais l’animation !

Mouvement, transition, rotation, effet de fondu ou pourquoi pas changement d’opacité. Ces animations sont perçues par nos beaux yeux.

Cependant, il y a plusieurs choses à savoir :
Dans un premier temps, elles doivent être claires et visibles. Entre les clignements des yeux et notre capacité de perception limitée, les animations risquent de passer inaperçues. Prenez bien le temps de réfléchir à la durée de vos animations : si elles sont trop longues ou trop courtes, elles risqueraient de rendre plus difficile la navigation.

Pensez aussi à créer un lien logique entre une fonctionnalité et ses effets, ainsi qu’au mouvement que vous allez lui associer : les accélérations et décélérations d’une animation peuvent faire comprendre l’importance des conséquences d’une action sur votre site web.

Enfin, la durée de l’animation permet de garder l’attention de vos utilisateurs. Ce phénomène est une succession de différentes étapes, d’images (comme dans un film). Mais l’œil n’est capable de l’apercevoir qu’à partir d’une certaine durée, 1/25 de seconde en moyenne, c’est la persistance rétinienne.

Des animations qui améliorent l’expérience utilisateur.

L’affichage de vos articles peuvent être différé avec un effet de fondu. Il est d’ailleurs conseillé de les afficher un par un en suivant une priorité d’affichage : du haut vers le bas. Le regard de l’utilisateur suivra cet effet jusqu’en bas de l’écran, lui indiquant finalement que quelque chose d’autre se passe en dessous de la ligne de flottaison !

Ouvrez grands vos yeux !

Les alertes et les notifications peuvent être animés par un effet de tremblement. Nos yeux sont constitués de plusieurs photorécepteurs : les cônes et bâtonnets. Les bâtonnets captent précisément l’intensité de la lumière perçue et sont donc sensibles aux effets de mouvements. Les yeux de vos utilisateurs ne pourront détourner du regard des éléments qui vibrent et qui bougent dans leur champ de vision. Mais c’est à utiliser avec parcimonie. L’abus de ces animations pourrait provoquer un sentiment de stress, de gêne ou de distraction qui pourrait diminuer le taux de conversion !

Variez les effets.

Le mouvement ne doit pas être linéaire. Apportez de la consistance en modifiant la courbe de progression. Je vous invite à voir les préconisations de Google en ce qui concerne les animations. Cette courbe apportera une signification à l’animation, et permettra de mieux l’apercevoir. Un élément qui bouge et qui subit une forte décélération permettra à notre cerveau d’anticiper sa position d’arrivée, et donc de pouvoir atteindre ce dernier sans devoir attendre que l’animation soit finie. Cela apportera un peu plus de fun dans l’animation, faites-moi confiance !

Plus c’est long, plus c’est… pas bon.

Il est aussi important de choisir la bonne durée. Je parlais de persistance rétinienne, mais n’oubliez pas la charge mentale qui s’accumule avec des animations complexes. Une image qui se déplace est facile à comprendre, mais des icônes qui se métamorphosent en d’autres, là, ça devient un peu plus compliqué. Il faudra faire durer plus longtemps l’animation pour qu’elle soit comprise ! Mais attention, cela ne doit pas être ennuyant ou pénible.