Les animations (surtout en Javascript) alourdissent la page, nécessitent des appels vers le serveur, et des ressources pour être affichées sur un écran. Elles doivent donc être utilisées seulement si le besoin est justifié et pour améliorer l'expérience.

Limiter les animations

Les animations posent également souvent des problèmes d’accessibilité, et il n’est pas rare de voir des animations qui perturbent les utilisateurs ou pire donnent la nausée : tuiles qui tournicotent, éléments qui défilent à la verticale et à l’horizontal, chatbots qui nous sautent dessus, etc.

Souvenez-vous des débuts de PowerPoint où chaque diapo était une animation différente parce-qu’on le pouvait. Alors essayons de ne pas reproduire les erreurs du passé !

Eviter les GIFs animés et les carrousels en autoplay

En règle générale, les animations doivent pouvoir être arrêtées par les utilisateurs. Il s’agit aussi d’une bonne pratique d’accessibilité.

Ce qui pose problème notamment pour les GIFs animés qui ne sont pas contrôlables comme le souligne la checklist Opquast de qualité web :

Dès lors qu'une animation visuelle a une durée de plus de 5 secondes ou qu'un son a une durée de plus de 3 secondes, doter systématiquement l'objet multimédia des moyens de contrôle nécessaires : démarrage, arrêt, muet ou volume.

Ne pas utiliser de graphismes animés non contrôlables, ou encore partiellement contrôlables par l'utilisateur (images gif animées en particulier).

Les animations, sons et clignotements peuvent être mis en pause, Opquast

Les carrousels automatiques sont aussi à éviter de par leur poids et les ressources qu’ils nécessitent mais aussi car ils détériorent la plupart du temps l’expérience utilisateur et réduisent l’accessibilité.

Vous ne pouvez pas compter sur le fait que les gens voient l’information placée dans les carrousels sur internet comme sur intranet. Que ce soit sur un écran de 30 pouces ou de 3 pouces, les internautes descendent souvent sur la page en dessous de ces grandes images, manquant tout le contenu qui s’y situe.

Carousel Usability: Designing an Effective UI for Websites with Content Overload, Auto-Forwarding Carousels, Accordions Annoy Users & Reduce Visibility, Nielsen Norman Group, traduction par Anne Faubry

Trouver une alternative au chatbot

On voit de plus en plus de chatbots nous proposant de l’aide dès qu’on arrive sur un site. Très souvent ces chatbots sont plus un effet de mode qu’une aide réelle et bien sûr leur impact n’est pas neutre. De plus, il n’est pas rare que cela résulte en un échec et crée de la frustration.

Comme le suggère le Nielsen-Norman Group, même si dans certains cas, les chatbots peuvent avoir une valeur ajoutée, il vaut mieux investir dans l’amélioration de l’expérience utilisateur du site qui apportera un meilleur retour sur investissement, plutôt que de créer un chatbot qui sera peu utilisé. (The User Experience of Chatbots, Nielsen Norman Group)

Exemple de chatbot pouvant être remplacé

Dans cet exemple, le chatbot apparaît en bas de la page pour proposer de l’aide. L’aide consiste à poser sa question et à attendre ou laisser son email pour obtenir la réponse.

Des chatbots comme celui-ci peuvent être remplacés par un bouton “Contact” visible sur le site.

Chatbot apparaissant en bas de la page proposant de l’aide

Privilégier les changements instantanés plutôt qu'animés (Javascript)

Pour éviter des effets d’animation inutiles en Javascript, il vaut mieux privilégier les apparitions instantanées. Par exemple à l’apparition d’un formulaire d’inscription : le formulaire peut apparaître directement sans effet de fondu au noir pour l’arrière-plan.

plus d'info

Sauf mention contraire, les contenus de ce site sont mis à disposition selon les termes de la licence Creative Commons Attribution 4.0 International.

Venez échanger avec nous sur http://slack.designersethiques.org, canal #projet_ecoconception.

Autrices du guide : Aurélie Baton et Anne Faubry.