Un jour, sur ma mission, le client m'a demandé d’ajouter une bannière animée sur la page d’accueil de son site. La bannière m’avait été fournie au format JSON car créée sur After Effects avec le plugin Bodymovin. Après quelques recherches, j’ai trouvé la librairie Lottie Web. Elle semblait répondre à toutes mes demandes concernant l’animation de fichiers JSON. Une fois la librairie installée et quelques lignes de code plus tard : boum ! Une jolie bannière qui s’anime ! Mais j’ai commencé à entendre un bruit de soufflerie provenant de mon ordinateur. Ah bah oui : le fichier JSON était très lourd et c’est ça qui faisait que l’animation consommait 100% du CPU.
Mon ordinateur avait du mal à suivre. Il m’a fallu repenser le problème et c’est là que la solution d’utiliser CSS pour gérer cette animation est apparue. En effet, CSS possède des propriétés qui nous permettent d’ajouter des animations peu complexes sur notre site en limitant notre consommation de CPU. Dans mon cas, cette consommation a été divisée par 20 (passant de 100% à 5%) !
Suite à cette expérience, j’ai commencé à me poser des questions concernant les animations. Pourquoi ont-elles mauvaise réputation dans le monde du développement web d’aujourd’hui notamment avec tout le discours de l’éco-conception. Pourquoi sont-elles décriées par les développeurs alors que le motion design est là pour favoriser la transmission visuelle d’informations via le mouvement. Le motion design, c’est une technique consistant à utiliser le mouvement comme principal outil graphique et artistique afin de véhiculer des informations ou d’attirer l’attention de l’utilisateur sur tel ou tel élément d’une présentation, d’un site internet etc.
Le mouvement est un support qui permet à l’information de rester en mémoire chez l’utilisateur. Parfois, quand on ne connaît plus le nom d’un produit, on se souvient très souvent de la publicité qui l’évoque. On va donc naturellement en parler (avec le fameux “tu sais, c’est la pub où la marmotte fait du chocolat…”). Sur un site, le motion design se traduit par l’utilisation d’animations pour différents sujets : mise en avant d’un élément du site, temps de chargement via un loader ou skeleton loading, vulgarisation d’informations complexes, transition...
Dans cet article, on va se pencher sur les différents types d’animations qui existent dans le web. Nous allons aussi voir l’impact du mouvement sur l’expérience utilisateur. Puis nous finirons sur comment le CSS est mis au service de cet impact en concevant du mouvement classé catégorie poids plume.
La question qu’il faut se poser quand on commence à avoir envie de concevoir une animation concerne le but de cette animation. Quel dessein va-t-elle servir ? Et pour répondre à cette question, il existe des patterns dont les caractéristiques doivent matcher avec la description de l’objectif de notre animation. Voici une liste des patterns les plus utilisés.
Une “stateful transition” permet de guider l’utilisateur dans les étapes d’un flux de tâches à réaliser ou le guider dans sa navigation de page en page. Par exemple : je suis sur un site de vente de chaussures et je vais aller sur la barre de recherche. Pendant que je tape ma recherche, une toile de fond va descendre du haut de ma fenêtre pour couvrir la page entière. C’est pour m’informer que je suis à la recherche d’un article en particulier et que je n’ai pas besoin de regarder le reste des informations qui sont sur la page.
Autre exemple de toile de fond (backdrop en anglais)
Ce genre de transition est utile pour aider l'orientation spatiale des utilisateurs quand ils naviguent dans le système.
Ce type d’animation sert à accentuer des informations secondaires (type alertes, notifications, mises à jour etc). Sur un blog, l’utilisateur va commencer à lire un article. Puis il va naturellement scroller vers le bas pour continuer sa lecture. Mais quand il arrive vers la fin de l’article, juste au-dessus du footer, une petite barre de navigation indiquant les réseaux sociaux va apparaître. Nous supposons que si l’utilisateur arrive à ce stade dans l’article, c’est qu’il l’apprécie et en faisant apparaître cette barre de navigation, nous lui indiquons qu’il a la possibilité de partager cet article avec son entourage. Mais cela reste très discret, c’est une information supplémentaire. Il en va de même pour les notifications :
Les fameuses notifications ou snackbars
Avec les notifications, on prévient l’utilisateur que son formulaire a bien été envoyé ou alors qu’une erreur est survenue lors du chargement de tel élément. La notification est discrète elle aussi car c’est une information supplémentaire.
Un “casual effect” indique qu’un élément a déclenché l’événement d’un autre élément : je clique sur le bouton “Envoyer” d’un formulaire et un loader apparaît sur le bouton ou encore je passe ma souris sur un bouton et celui-ci s’éclaire.
Voici un effet au survol du bouton
Voici un effet au click du bouton
Nous indiquons à notre utilisateur qu’il est la cause de ce changement, de cette animation. C’est comme si notre bouton disait à notre utilisateur “Salut, tu es en train d'interagir avec moi. Si tu cliques sur moi, il va se passer quelque chose”.Ça permet également d’inciter l’utilisateur à continuer son chemin dans le parcours utilisateur.
Elle n’est ici que pour embellir notre site, mais elle n’augmente pas la densité d’informations sur la page. Cet article nous apprend comment faire tomber de la neige sur notre site :
_“C’est la magie de Noël !”
_
Important : si on ne peut pas décrire le pourquoi de notre animation, c’est qu’elle ne vaut peut-être pas la peine d’être conçue.
Maintenant que les différents patterns d’animation ne sont plus inconnus au bataillon, il faut désormais travailler sur la perception de celles-ci par l’utilisateur. Car oui, faire des animations, c’est bien, mais si l'utilisateur a le mal de mer rien qu’en regardant son écran, bah on n'est pas sorti du sable. Voici quelques détails sur lesquels nous devons porter notre attention.
En ce qui concerne la durée d’une animation, on estime qu’il est important de rester dans l'intervalle suivant : de 100ms à 1s. C’est en moyenne la fourchette utilisée par les développeurs. Pourquoi cette fourchette ? Une étude de Jakob Nielsen sur les trois délais de l’attention de l’utilisateur en 1993 démontre trois choses :
On peut remarquer que le temps mis pour percevoir un changement est très différent en fonction de l’âge de l’utilisateur. En effet, nous avons tous un métronome interne qui influence notre manière de percevoir les choses et plus on vieillit, plus ce métronome bat lentement, plus les choses nous paraissent aller à une vitesse fulgurante. À l’inverse, plus on est jeune, plus ce métronome bat rapidement et plus les choses nous paraissent aller à une lenteur d’escargot. Certaines personnes sont même capables de percevoir des changements aux alentours de 70ms ! C’est pour cette raison que l’intervalle de 100ms à 1s est un bon intervalle pour piocher la durée de son animation.
On calcule aussi la durée de l’animation en fonction de la distance qu’elle doit parcourir sur le site. Par exemple, si nous avons une barre latérale qui se déplace de 300px sur la gauche, sa durée peut être courte. Mais si elle doit se déplacer jusqu’à l’autre bout de la fenêtre, nous pouvons lui donner une durée plus longue.
100ms : la perception du changement de taille du ballon est difficile.
1s : le changement est plus fluide.
En résumé, même si notre échelle de durée va de 100ms à 1s, nous allons souvent utiliser une durée aux alentours de 250 à 300ms pour une animation car c’est avec cette durée que l’animation va être bien perçue : ni trop longue, ni trop courte.
Les jump-cuts sont des transitions dures et rapides comme on peut le voir avec cette toile de fond sans aucune transition :
Une toile de fond sauvage apparaît !
En fonction de l’âge, le cerveau de l’utilisateur est habitué à cet exercice : il va prendre l’image avant transition, l’image après transition et jouer lui-même cette transition. Mais cela demande un effort cognitif assez important, qui est différent si nous sommes une personne relativement jeune ou relativement âgée. C’est pour cela qu’on utilise l’entre-deux (inbetweening) qui consiste à créer toutes les poses entre les deux plus importantes.
Ah, c’est quand même plus agréable !
Le processus de fluidifier un jump-cut n’est pas évident pour tout le monde. Si je simplifie et schématise à l'extrême ici pour vulgariser la chose, on pourrait penser le cerveau humain comme un petit ordinateur. On a un fil conducteur et un GPU (graphic processing unit) dans notre cortex visuel. Le but est de nourrir l’humain avec des informations via le cortex visuel sans interrompre ce à quoi il est actuellement en train de penser. Par exemple, nous pouvons conduire, lire les panneaux d’informations et parler à notre copilote en même temps.
Il existe une citation qui résume parfaitement le fait de donner des informations secondaires sans pour autant casser le fil conducteur de l’utilisateur :
“Animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised.”
Scott E. Hudson and John T. Stasko (1993)
Le fait d’être surpris par des changements radicaux sans être prévenu, on le retrouve dans les interfaces des premiers smartphones. Apple n’est pas la première compagnie à concevoir un téléphone avec écran tactile. Mais elle fait partie des premières compagnies à avoir couplé l’interaction de l’utilisateur et les animations si fortement et si proprement que lorsque l’on demande aux utilisateurs quelle interface ils préfèrent, la réponse “celle d’Apple” revient de manière récurrente. Les sursauts détruisent l’illusion de vie, d’interconnexion entre notre interaction et la réponse de l’écran.
Quand on crée une animation, la question est de savoir si c’est l’utilisateur qui impacte le site ou si c’est lui qui va être impacté. En fonction de la réponse à cette question, nous allons jouer sur le ressenti de l’utilisateur par rapport à cette animation grâce au CSS et ses fameuses timing-function ou son cubic-bezier (Voici un générateur de valeurs pour la fonction cubic-bézier).
Aperçu du générateur de valeurs pour cubic-bézier
Par exemple, dans le cas où je viens d’appuyer sur un bouton et qu’une popin s’affiche : est-ce que l’animation est causée par une interaction ?
Dans la vie, rien ne bouge de manière constante, c’est pour cela qu’on utilise rarement linear. On va alors s’appuyer sur nos expériences personnelles et les lois de la physique pour que le ressenti que nous allons créer soit au plus proche de celui que l’utilisateur pourrait ressentir en temps normal. Si une balle ralentit avec la friction, plus elle va loin, plus elle est lente dans sa progression, alors notre animation d’une balle devra avoir ce même comportement.
Le mouvement du ballon en CSS correspond au même dans la réalité.
Voici un lien vers le codesandbox avec lequel je me suis amusée à tester la propriété CSS transition → motion-design-css
L’oeil est sensible à plusieurs choses comme la couleur, la luminosité. Mais il est également sensible au mouvement : qui n’a pas déjà été déconcentré par le mouvement du vol d’une mouche qui tourne autour de soi ? Le mouvement, c’est ce qui nous attire tels des moustiques face à une lumière aveuglante. Notre attention est capturée par le fait d’augmenter l’animosité ou la vivacité d’un objet, mais pas seulement. Parfois, pour qu’une personne remarque un changement, on rend ce changement éclatant et mouvant.
Petit point d’anatomie : Les cellules coniques, ou cônes, sont des cellules photoréceptrices dans les rétines des yeux des vertébrés, y compris l'œil humain. Ils réagissent différemment à la lumière de différentes longueurs d'onde et sont donc responsables de la vision des couleurs. Nos yeux sont en constant mouvement et notre cerveau est constamment en train de rafraîchir son modèle mental. Le centre de notre vision est très détaillé et sensible aux couleurs alors que notre vision périphérique est plus sensible au mouvement et à la lumière. S’il y a trop d’informations, nous ne savons plus sur quoi nous focaliser.
Nous voulons que l’utilisateur ait l’impression que l’interface lui réponde. Nous ne voulons pas que l’utilisateur soit perdu si l’interface fait des changements trop abruptes. Il m’est arrivé d’entendre des développeurs se fâcher parce qu’ils venaient de gagner 300ms sur un appel à la base de données et qu’un développeur voulait rajouter une transition de 250ms. Mais déchiffrer une interface augmente le temps de chargement cognitif : ça peut ralentir l'utilisateur tout autant qu’un temps de chargement trop lent.
Par exemple : aller sur une page totalement différente de la précédente avec une transition qui indique ce qui se passe peut aider l’utilisateur à se réorienter plus rapidement que si on fait le changement de page en 50ms. Si une animation est trop rapide et ne peut pas être interprétée par l’utilisateur, ses bénéfices cognitifs peuvent être perdus. Alors, c’est à ce moment qu’il faut se poser la question : est-ce que nous avons vraiment besoin de cette animation ? Si elle n’aide pas l’utilisateur, il est plus judicieux de ne pas utiliser d’animations du tout.
Les devtools du navigateur peuvent nous aider pour lancer, stopper ou même ralentir une animation. Dans Chrome et Firefox, nous avons la possibilité de modifier la vitesse de toutes les animations de notre site : nous pouvons les jouer à pleine vitesse ou réduire cette vitesse à 25 % ou même à 10%. Il est conseillé de travailler avec les devtools ouverts et réglés sur 25% pour la vitesse des animations afin de se rendre compte de l’effet final de notre animation. En effet, il est parfois difficile de remarquer certains détails à une vitesse de 100%.Il existe également un autre moyen d’allier animation et accessibilité qui est la notion de motion reduction. Ça se joue notamment au niveau des media queries et du paramètre prefers-reduced-motion.
Cette fonctionnalité est utilisée pour détecter si un utilisateur a demandé au système de minimiser le total de mouvements non-essentiels qu’il utilise. Elle s’utilise avec le mot-clé reduce qui indique que l’utilisateur a notifié à son ordinateur qu’il préfère une interface qui supprime ou remplace les types d'animation basée sur le mouvement qui déclenchent soit une gêne pour les personnes ayant une sensibilité au mouvement vestibulaire, soit une distraction pour les personnes ayant des déficits d'attention.Plutôt cool comme fonctionnalité ! Vous trouverez ici la dernière version du W3C sur les media queries et plus spécifiquement, la partie sur la prise en compte des préférences de l’utilisateur.
Niveau performance technique, le CSS a un rôle important à jouer notamment grâce à ses propriétés transition et animation qui sont à peu près équivalentes : l’une ne prend pas le dessus sur l’autre. Ce ne sont que des images et des lignes de code, aucune librairie n’a besoin d’être installée pour avoir les résultats qui sont dans le codesandbox. L’utilisation de spritesheets et de la timing-function steps() peut nous permettre de réaliser des animations plus complexes sans impacter la performance technique de notre site (même si steps() est une fonction assez compliquée à comprendre et à utiliser si bien qu’elle est de moins en moins utilisée). Cette méthode est plus performante qu’un GIF qui peut peser son poids.
Ici, j’utilise la fonction steps() et j’expérimente les propriétés play-state et direction proposées par CSS
Sachant que les propriétés transition et animation sont très bien supportées par les navigateurs (sauf pour iE9 et en dessous et pour Opera Mini), les utiliser plutôt que de télécharger une librairie devrait être un réflexe dans nos développements. À noter que sur d’anciennes versions d'Android et Safari, on a encore besoin du préfixe -webkit- pour la propriété animation. Il faut aussi garder à l’esprit que chaque navigateur a son propre processus de rendu et que souvent, on a tendance à privilégier un navigateur en particulier et délaisser les autres. Il existe un site csstriggers.com qui permet de se rendre compte de l’impact des propriétés CSS sur les différents processus de rendu du navigateur (layout, paint et composite).
Les propriétés qui déclenchent le fait de repeindre la page entière sont les plus coûteuses en termes de performance. Plus on repeint, plus notre performance est pauvre. Donc toujours garder à l’esprit de tester son CSS sur les trois navigateurs “principaux” (Firefox, Chrome et Edge) car ils sont utilisés par le plus grand nombre d’entre nous.
Concevoir des animations ne veut pas dire ajouter des flocons de neige qui tombent sur la page juste pour faire joli. Il y a une réelle réflexion dans leur conception notamment autour de l’apport à l’utilisateur : est-ce que cette animation va susciter chez l’utilisateur l’envie de creuser plus sa recherche de départ et rester sur notre site ? Et ce n’est pas parce que je rajoute une animation qui masque le temps de chargement d’une page que nous allons faire fuir l’utilisateur. Bien au contraire, nous interagissons avec lui en lui montrant qu’une action est en cours : c’est ce qu’on appelle une micro-interaction en design web. Elles sont là pour guider l’utilisateur dans son parcours web, lui donner du feedback ou lui communiquer un statut.
Toutes ces réflexions, nous devons les avoir lors de la définition du besoin du client, lors de la conception des maquettes. C’est à ce moment là que nous remarquons que les échanges entre les différents corps de métier au sein d’une équipe sont extrêmement importants. Parfois, un développeur ne va voir que le côté technique et le designer ne va voir que le côté expérience utilisateur. C’est un équilibre entre les deux parties que nous devons avoir si nous voulons respecter notre objectif qui est de créer un produit à la fois optimal pour l’utilisateur et rentable pour le client.
Il est important, dans l’étape de conception de l’animation, de réfléchir à sa complexité et donc, à sa réalisation. Une animation très complexe va sûrement demander l’utilisation d’une librairie comme Lottie. Mais des animations de loader ou de vagues sur un bouton sont réalisables grâce au CSS et cela sans impacter les performances du projet. En d’autres termes, on ne laisse pas CSS dans un coin car il est capable d’apporter à l’utilisateur bien plus qu’un simple joli coup de peinture.