Le bureau des UX : L’affaire du chargement

En terme d’interactions avec une application, les temps d’attentes et de chargement sont le nerf de la guerre. Que l’attente soit courte, ou au moins ludique !

Nous avons vu dans notre précédente étude du Bureau des UX comment gérer un écran vide. Maintenant, l’utilisateur possède des données, et souhaite les afficher. Pas de problème. Avec l’avènement des nouvelles technologies (4G, 5G, Fibre, …) les temps de chargements sont toujours plus courts. Mais jamais zéro, et tout le monde n’a pas accès au meilleur réseau. Quoi de plus frustrant que de cliquer sur un bouton et que ne rien se passe ? L’intérêt de designer un écran de chargement est double : il informe, et fait patienter. L’humain détecte des évènements aussi rapide que 150ms (environ). On ne fait pas des films à 24 images par secondes pour rien ! Si rien ne change après ce laps de temps, on est déjà en train de perdre l’utilisateur : soit il doute, soit il s’impatiente. Un loading state rend l’attente ludique, que ça soit par des informations ou par des animations.

Les différents types de loader

Textuel : c’est le plus simple, il suffit d’afficher un message explicitant ce qu’il se passe. C’est aussi l’opportunité de faire passer des messages. Astuces de la plateforme, citations, ou autre, le texte n’a pas besoin d’être simplement « Chargement… » !

Imagé : le texte, c’est bien, mais c’est un peu pauvre et ça manque de caractère. Réaffirmez votre identité à travers un design engageant.

Animation : probablement le plus répandu de nos jours, il suffit de rajouter une petite animation qui se répète à l’infini (un « spinner »). Si vous rechargez cette page, vous en verrez un apparaître sur l’onglet ! Les spinners ont l’avantage d’être petits, discrets, et passe-partout. Dans un onglet, dans un bouton, … Évidemment, on peut s’inspirer d’un loader imagé et faire des animations plus grandes, plus graphiques, plus ludiques, etc. L’inconvénient du spinner c’est qu’hormis l’état de chargement il n’amène aucune information (progression, temps d’attente estimée, etc), on pourra donc le coupler avec autre chose.

Ici la répétition est très importante. Si l’animation est fluide, on pourra sans vraiment s’en rendre compte observer plusieurs fois la boucle (en pendant ce temps là, le traitement s’effectue derrière !)

Barre de progression : c’est un genre d’animation, mais celle-ci propose en plus la notion de progression. L’utilisateur sera d’autant plus prompt à patienter si il voit la fin du chargement arriver ! On peut aussi transformer un spinner en barre de progression : un cercle vide au commencement et plein sur la fin.

Placeholder/Squelette : Le but de ce type de chargement est de montrer à l’utilisateur à quoi va ressembler à peu près la page quand les données seront là. En plus de faire patienter, il prépare l’utilisateur. En utilisant des formes reconnaissable, il permet d’identifier à l’avance l’endroit où les données qui nous intéressent vont se trouver. L’exemple parfait est une carte : on saura d’avance où trouver la photo, le titre, et le contenu.

Shimmer Effect : on repart de l’idée du squelette, mais avec une animation « d’éclats » (shimmer en anglais) pour montrer que la page est encore en vie, et qu’il se passe bien quelque chose. Valable aussi sur une barre de progression dont on ne connait pas le statut exact.

 

…et bien d’autres, autant que votre imagination le permet !

Le défaut de tout ce qui vient d’être présenté est que tout ça est vraiment très visuel. Il faudra donc porter une attention particulière à l’accessibilité, vaste sujet que nous couvrirons dans un autre opus du Bureau des UX.

Temps d’attente et affichages

Un dernier conseil sur les loading states : nous pouvons tous entendre qu’une opération va prendre du temps, mais attention au chiffrage ! Il doit toujours être légèrement supérieur au maximum (estimé). Si le message dit « L’opération va se terminer dans 2min » et que l’utilisateur attend 1min45s, il sera satisfait. Par contre, si l’opération met 3min, ou même seulement 2min30, il sera mécontent. Même si l’appréciation n’est pas précise, nous avons tou·te·s une notion instinctive du temps qui passe. De même, on s’efforcera de faire une progression linéaire, ou qui s’accélère. Personne ne veut passer plus de la moitié du temps d’attente coincé à 90%. Au contraire une accélération donnera l’impression que le reste est plus court que le temps déjà passé à attendre, et l’effort paraîtra amoindri.

Chargement… du chargement

Bon, nous avons vu qu’il est possible d’ajouter tout un tas de loader différents, du plus simple, au plus complexe. Mais attention justement à cette complexité ! En effet, si l’état de chargement est trop lourd et trop compliqué, la plateforme (web, mobile ou desktop) va mettre un certain temps à charger cet état de chargement. Et on retombe dans le premier problème : l’utilisateur ne doit pas attendre que l’animation se lance. De même, si l’animation est trop gourmande en ressources, et qu’elle « bugue », on perd son bénéfice. Il faudra donc être attentif à la méthode employée. Une vidéo ? Lourd, souvent mal supportée, c’est mauvaise idée. De nos jours les navigateurs supportent très bien le format SVG, qui va être très léger, et de nombreux outils permettent de créer des animations avancées avec des logiciels tels que Adobe After Effect (spécialisé dans les animations et les effets spéciaux) et de les exporter vers un format compatible. Pour aller plus loin sur cette voie, allez voir du côté de Lottie ou de GreenSock.

Au bureau des UX, on aime prendre soin de l’utilisateur. Et cela veut dire aussi pendant les temps d’attentes ! Sans rentrer dans le cliché de la musique d’ascenseur, il existe plein de façons de faire de ce temps mort un temps de partage.