Les animations sur le web : une surcharge cognitive ?

Les tendances du web cette année sont au rétro : grands textes, couleurs vives et curseurs personnalisés !

D’ailleurs, vous vous rappelez des PowerPoints où l’on mettait des animations étoiles, vagues, glissements. De la même manière, une tendance reste obligatoire depuis quelques années sur les animations : les fondus ! (Et non, pas le fromage.) Mais cette animation a des concurrents sérieux : les bannières interactives (vidéos sous forme de bannière) et les animations au scroll (défilement), notamment avec la parallaxe.

Quels sont les rôles des animations ?

Les animations ont de multiples rôles que nous allons détailler.

Attirer l’attention ! (Hey, listen !)

Effectivement, les animations permettent de recentrer l’attention du public ciblé, tout comme les pop-ups. Les actions de surprise fonctionnent sur nos cerveaux. La personne peut donc porter son attention sur certains contenus. Particulièrement, lorsque l’ensemble du site reste statique. Mais cela peut avoir des effets positifs autant que des impacts négatifs, comme le démontrent les exemples de dark patterns qu’on peut trouver très facilement sur le web.

Indiquer un changement de statut

Une des règles primordiales pour améliorer l’expérience des utilisateurs et utilisatrices est de transmettre un retour de ce qu’il se passe dans l’interface :

• Un article et ajouté dans le panier ? Une indication visuelle et une petite animation permettent de notifier la personne.
• Un téléchargement est en cours ? Une témoin visuel permet d’afficher que le téléchargement s’est bien lancé.
• Il faut faire attendre le public ? Une animation indique que des éléments sont en train de charger. Rappelons-nous des animation de chargement à l’époque de l’ADSL. Cela fait longtemps que les animations sont présentes pour nous faire attendre : que ce soit pour réserver un voyage, commander des produits, ou prendre la dernière place du concert de Taylor Swift. Avoir un retour permet de ne pas laisser les personnes en haleine et d’éviter qu’elles spamment l’élément déclencheur de l’action (rafraîchir, réserver, acheter, etc.).

Hiérarchiser l’information

Pour éviter d’avoir beaucoup d’éléments en même temps présents sur une même page, ou écran, il est possible d’avoir des animations afin de zoomer, ouvrir plus grand certains contenus dans le but de faciliter la lecture et l’UX. Voici un exemple provenant du site de Nielsen Norman Group :

Indiquer un mouvement ou une action précise à faire

Beaucoup d’onboarding, de jeux ou de contenus complexes peuvent être compliqués à mettre en place. Il peut donc être utile de faciliter la compréhension des actions à faire sur l’interface. Souvent, nous voyons des indicateurs visuels, des clignotements ou des flèches qui bougent pour indiquer les éléments intéressants à appréhender.

Dynamiser son contenu

Changer l’expérience textuelle ou une expérience dynamique, visuelle et plus ancrée dans le média. Un certain pourcentage de la consommation numérique provient des vidéos (live, stream, TikTok…), il est donc intéressant de voir que le dynamisme des sites essaye de tendre sur une vision portée sur le mouvement et la vidéo.

Quels sont les impacts des animations sur la charge cognitive ?

La charge cognitive peut être importante dans de nombreux cas.

• Nécessité de scroller plus longtemps sur la page : trouver l’information dans une page est plus compliqué, car non visible à première vue.
• La multiplication des animations (que ce soit en parallaxe ou autres animations) peut rendre étouffante la navigation sur le site. Et aura donc l’effet inverse de tous les rôles escomptés des animations.
• Pour les personnes lumino-sensibles et épileptiques, cette surcharge peut provoquer des crises.
• Pour les personnes avec un trouble de l’attention, les animations peuvent être complexes à traiter.
• Les durées longues ou très courtes des animations et leurs interactions entre elles peuvent être compliquées à assimiler (de nombreuses personnes ont des gênes avec leur oreille interne — 35 % pour les personnes de plus de 40 ans. Ce genre d’interactions peut donc déboussoler une personne, comme dans une attraction à sensation). L’inconfort est à l’opposé des objectifs d’une bonne expérience utilisateur.
• La navigation au clavier est plus compliquée à gérer, notamment si l’interface est dans une balise <canvas>, donc l’interface peut ne pas être accessible aux personnes en situation de handicap.

Mais l’impact cognitif n’est pas le seul problème

Surcharger les animations et particulièrement les « nouvelles » animations de parallaxe peuvent avoir plusieurs effets négatifs sur le site.

L’utilisation des animations peut allonger le temps de chargement de la page et ralentir la navigation. Et une page qui met du temps à charger se fera déprioriser dans les résultats des moteurs de recherche.

Effectivement, le code se basant sur les animations, comme avec le CSS, SVG, <canvas>, WebGL ou autre utilisation de JavaScript peut impacter les performances même si la bande passante pour lancer ces animations est minime. Elles utilisent le CPU, ce qui entraîne des longueurs.

Pour un taux de 60 images par seconde, le navigateur dispose de 16,7 millisecondes pour exécuter les scripts, recalculer les styles et la mise en page si nécessaire, et repeindre la zone mise à jour.
— Animation performance and frame rate

Ainsi, des scripts lents et des animations jugées « lourdes » au niveau des propriétés CSS ralentissent le chargement de la page. À noter que des tests de performance peuvent être réalisés directement dans la console de votre navigateur, dans l’onglet « Performances ».

De même, le numérique responsable devient un critère de plus en plus important dans les entreprises et pour le public. Une page plus longue à charger, avec des vidéos, des images lourdes et beaucoup d’animations… va évidemment à l’encontre de cette tendance.

Comment doser les animations et quelles sont les implémentations nécessaires ?

Lors de la conception d’un site web, il faut déjà identifier le contenu et voir si les animations sont pertinentes ou non. Identifier les rôles et déterminer quelles sont les animations les plus utiles pour justifier le propos.
Les micro-animations sont presque tout le temps nécessaires, par exemple (changement dans le panier, téléchargement de fichiers…).
Il est donc primordial, en design d’interactions, d’intégrer cette composante.

En outre, il faut identifier où et comment vont s’adapter les animations :

• Quels types d’interfaces (mobile, tablette, ordinateur…) ? Il faut souvent privilégier seulement les animations sur ordinateur car pour mobile et tablette, l’écran est beaucoup plus petit et il convient d’avoir une expérience plus claire et concise sur ces interfaces. Cela n’inclut pas les micro-animations.
• Éviter de mélanger trop d’animations. Ne pas ajouter d’animations fortes type parallaxe avec des fondus ou des animations qui ont des mouvements complexes.
• Ajouter une option pour désactiver les animations au niveau de l’en-tête du site. Cela permet de désactiver dès le départ les animations et de consulter un site statique. Il vaut mieux prévenir que guérir !
• Mettre en pause les vidéos ou GIFs dès l’arrivée sur la page, et laisser le contrôle à l’utilisateur ou l’utilisatrice.
• En développement, prendre en compte l’option des préférences système via la requête média : prefers-reduced-motion.
  Exemple tiré de MDN, code HTML :

  <div class="animation">boîte animée</div>

  et CSS correspondant :

  .animation { animation: vibrate 0.3s linear infinite both; }
  
  @media (prefers-reduced-motion: reduce) { .animation { animation: none; } }

  Comme cela, les animations sont désactivées par défaut et aucune action utilisateur ou utilisatrice n’est nécessaire.

• Implémenter des animations inférieures à 3 secondes mais supérieures à 0,2 seconde, pour éviter les lenteurs et le manque de réponse des composants, mais aussi les effets de flash.
• Éviter au maximum l’utilisation de l’élément <canvas> pour vos contenus interactifs, car il est plus compliqués à rendre accessible.
• Pour les utilisateurs ou utilisatrices, vous pouvez également paramétrer vos préférences système, notamment via le processus suivant :
  • Pour Windows : Paramètres > Options d’ergonomie > Vision > Afficher > Afficher les animations dans Windows.
  • Pour macOS : Préférences système > Accessibilité > Affichage > Réduire les animations.

  Vous avez donc toutes les cartes en main pour proposer des actions claires et définies sur le choix des animations !

  Alors mettre des animations ou ne pas mettre des animations ?

  Les animations ajoutent du dynamisme aux contenus numériques. Cependant, il faut savoir doser, comme tout !

  Penser à vos utilisateurs et utilisatrices, ainsi qu’aux objectifs que vous voulez montrer sur votre site. Les animations, comme toute autre fonctionnalité, doivent être pensées et imaginées selon les objectifs de la conception de l’interface.

  Pensez également :

  • aux troubles qu’une personne peut avoir (et oui, les animations sont une surcharge cognitive !) ;
  • aux rôles que ces animations peuvent avoir ;
  • aux impacts dans le cadre du numérique responsable ;
  • et enfin, aux impacts sur les performances du site et par extension à son référencement.