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é, notamment pour améliorer l'expérience.

Limiter les animations

Les animations posent également souvent des problèmes d’accessibilité. Il n’est pas rare de voir des animations qui perturbent les utilisateurs ou pire, leur donnent la nausée : tuiles qui tournent, éléments qui défilent à la verticale et à l’horizontal, chatbots qui nous sautent dessus, etc. Souvent utilisées comme simple "fioritures décoratives", les animations viennent gêner certains utilisateurs et alourdir la page.

Souvenez-vous des débuts de PowerPoint où chaque diapositive était une animation différente parce qu’on le pouvait. Alors ne reproduisons pas les erreurs du passé ! Idéalement, il faut se limiter à celles qui améliorent l'expérience utilisateur comme par exemple une barre de chargement.

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 d’une bonne pratique d’accessibilité et d'expérience utilisateur.

Ce qui pose problème, ce sont notamment 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. De plus, ils détériorent la plupart du temps l’expérience utilisateur et nuisent à 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. Ils posent plusieurs problèmes :

  • Impact environnemental : Codés en javascript, faisant des appels à des serveurs externes, voire recourant à de l'intelligence artificielle, ces chatbots impactent négativement le poids de la page et le nombre de requêtes.
  • Dégradation de l'expérience de navigation : Pop-ins intempestives, menu flottant masquant du contenu, animations de gigotement pour attirer l'attention, “fausse attente” (pour simuler une réponse humanisante)… Ces chatbots viennent souvent gêner la navigation sur le site.
  • Frustration : Incompréhension du contenu entré, personnel déconnecté car en dehors des heures ouvrées… Les chatbots sont souvent sources de frustration et de perte de temps.
  • Collecte de données personnelles : Souvent gérés par des entreprises tierces, les chatbots nécessitent le partage des données utilisateurs avec une autre entreprise, et donc l'acceptation de cookies.
  • Coût : Non seulement la valeur ajoutée des chatbots peut être discutée, mais en plus ils sont souvent assez coûteux. Entre les services tiers qu'il faut payer à la licence et au nombre de personnes atteintes, et les chatbots nourris à l'intelligence artificielle pouvant coûter plusieurs millions à développer, trouver une alternative sera économique.

Comme le suggère le Nielsen-Norman Group, si dans certains cas, les chatbots peuvent avoir une valeur ajoutée, il est préférable d’investir dans l’amélioration de l’expérience utilisateur du site qui assure un meilleur retour sur investissement, plutôt que de créer un chatbot 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.