Votre Loading Spinner est un tueur UX ! Voici une alternative

Nous savons que vous détestez attendre. Tout le monde le fait.

Dans une étude de 2017, Google a constaté que :

• Les temps de chargement de 1 à 3 secondes ont augmenté les taux de rebond de 32 %.
• Les temps de chargement de 1 à 5 secondes ont augmenté les taux de rebond de 90 %.
• Les temps de chargement de 1 à 6 secondes ont augmenté les taux de rebond de 106 %.

Les gens n'aiment pas attendre à moins qu'il y ait une bonne raison de le faire, et plus l'attente est longue, moins cette raison se cumule. C'est pourquoi la visibilité de l'état du système est l'une des 10 heuristiques d'utilisabilité de Nielsen pour la conception d'interface utilisateur. La visibilité de l'état du système signifie :

"La conception doit toujours tenir les utilisateurs informés de ce qui se passe, grâce à des commentaires appropriés dans un délai raisonnable."

Et c'est là que les indicateurs de chargement entrent en jeu. Un bon indicateur de chargement :

1. Permet aux utilisateurs de savoir que l'application fonctionne.
2. Rend l'attente tolérable.
3. Donne aux utilisateurs quelque chose à regarder.

L'indicateur de chargement le plus courant dans la conception de l'interface utilisateur est - vous l'avez deviné - le spinner de chargement.

Mais parfois, il faut remettre en question les pratiques courantes pour repousser les limites et découvrir des solutions innovantes. Dans ce cas, le spinner de chargement présente des défauts que les concepteurs ont trop longtemps ignorés.

Spinner Design : pourquoi charger les spinners est nul

En ce qui concerne le chargement des animations, le spinner de chargement est un choix malheureux, en particulier pour les attentes de plus de 10 secondes. Pourquoi?

Commençons par une petite histoire.

Mon premier souvenir d'un spinner de chargement date d'il y a plus de dix ans, bien avant que j'apprenne l'expérience utilisateur. C'est dans le laboratoire informatique de l'école que j'ai rencontré la chose fatidique et redoutée que mes amis et moi avons appris à appeler le rouet de la mort. Il s'avère que ce n'est pas un nom inhabituel pour le curseur d'attente macOS.

Image du curseur d'attente macOS de How-To Geek.

Tout comme le Spinning Wheel of Death, les spinners de chargement ne donnent aucun retour – aucun signe de progrès. Ils tourbillonnent à l'infini, ne nous disant rien de l'avancée qu'une application a ou n'a pas faite. C'est frustrant pour les utilisateurs et carrément énervant quand on est pressé.

Vous vous retrouvez à vous poser des questions comme :

• Quand va-t-il finir de se charger ?
• C'est presque fini ?
• Est-ce cassé?

Mais vos questions restent sans réponse, alors vous abandonnez.

Pire encore, les spinners ralentissent le temps.

Avez-vous déjà été au milieu d'une séance d'entraînement, désespéré qu'une minuterie se termine ? Ou impatient d'échapper aux cours ? Dans ces cas, regarder l'horloge et attendre sans but fait ramper le temps. Les filateurs font la même chose, moins le bénéfice d'un compte à rebours. C'est comme attendre de la nourriture dans un restaurant avec un estomac qui gargouille ; seulement, vous ne savez pas si le chef a reçu votre commande.

Bien sûr, le chargement des animations ne contrôle pas réellement le temps, mais notre plaisir d'une tâche influence notre perception de celle-ci. Quand on passe un bon moment, l'horloge s'accélère. Quand on déteste attendre, ça ralentit.

Et encore une fois, le spinner incite les utilisateurs à abandonner.

De plus, vous voulez que votre contenu soit précieux pour les utilisateurs - pour répondre, voire dépasser, leurs attentes. Si, par hasard, la page n'est pas ce qu'ils espéraient, la frustration supplémentaire d'avoir regardé un spinner trop longtemps aggrave les dégâts.

Pour revoir, un spinner de chargement :

1. Ne donne aucun signe de progrès.
2. Ne répond pas aux questions d'un utilisateur.
3. Rend l'attente plus longue qu'elle ne l'est.
4. Ne prépare pas les attentes des utilisateurs.

Vos options de chargement d'animation

La meilleure façon de résoudre la frustration d'un utilisateur avec un spinner de chargement est de supprimer cette frustration dès le départ. Cela signifie réduire le temps d'attente jusqu'à ce qu'il soit inexistant ou utiliser un autre indicateur de progression.

Encore une fois, un bon indicateur de chargement ou de progression :

1. Rend la perception du temps d'un utilisateur plus rapide.
2. Donne l'impression que l'application progresse.

Les deux principaux types d'indicateurs de progrès utilisés dans la conception UX sont les indicateurs de progrès indéterminés et les indicateurs de progrès déterminés. Le facteur déterminant est le temps.

L'idée est que vous utilisez un spinner de chargement typique lorsque vous ne savez pas combien de temps le chargement prendra, et que vous utilisez un indicateur déterminé, comme une barre de progression, lorsque vous le savez. Une animation de chargement déterminée indique combien de temps un utilisateur doit attendre avec des indices comme le pourcentage terminé, les minutes restantes ou une barre qui se remplit.

Indicateur de progression indéterminé vs déterminé de Material Design.

Le problème avec cette stratégie est que vous ne savez jamais exactement combien de temps quelque chose prendra pour se charger. Vous pouvez faire une supposition éclairée, mais c'est à peu près tout. C'est pourquoi de nombreux indicateurs de compte à rebours compteront comme ceci : 10 minutes restantes, 9 minutes restantes, 8 minutes restantes, 7 minutes restantes, 10 minutes restantes, 8 minutes restantes et ainsi de suite. Il terminera le chargement et finira par atteindre 0, mais pas avant d'emmener l'utilisateur faire un tour.

Comment tirer le meilleur parti du chargement des animations

Nous discutons d'une solution alternative aux spinners et aux barres de progression ci-dessous. Néanmoins, si vous êtes déterminé à emprunter une voie plus traditionnelle ou à effectuer des recherches UX et que vous avez trouvé que c'était le choix préféré de votre public, il y a quelques lignes directrices à suivre.

Tout d'abord, n'utilisez un spinner de chargement que pour des attentes inférieures à 10 secondes. Pour les retards supérieurs à 10 secondes, créez l'illusion d'une progression avec des indicateurs déterminés pour maintenir l'intérêt des utilisateurs plus longtemps.

Lorsque vous concevez des spinners ou d'autres animations de chargement :

1. Soyez aussi créatif et divertissant que possible
2. Faites-le sur la marque
3. Fournir une estimation d'achèvement aussi précise que possible
4. Expliquer pourquoi l'utilisateur attend
   – Veuillez patienter pendant que nous calculons vos résultats.
   – Veuillez patienter pendant que nous préparons les choses pour vous.
   – Nous recueillons vos données.
   – 21 dossiers sur 30 vérifiés.
5. N'utilisez pas d'animation si la page se charge en moins d'une seconde.

Exemple de gifs d'écran de chargement de Hacker Noon.

Nous pourrions continuer à améliorer vos animations de chargement, mais ce n'est pas le sujet de cet article. Parce que peu importe à quel point votre animation de chargement est divertissante, elle met l'accent sur le temps d'attente et ne donne pas une idée claire de la progression.

C'est à cela que servent les écrans squelettes.

Chargement progressif avec écrans squelettes

Des recherches comparant les filateurs et les écrans squelettes ont révélé que les écrans squelettes sont perçus comme plus rapides et laissent les utilisateurs plus heureux. Alors, quel est ce supposé héros ?

Comme vous le savez, les spinners de chargement occupent un écran jusqu'à ce que l'interface utilisateur soit complètement chargée, moment auquel tout apparaît en même temps.

Les écrans squelettes utilisent une tactique différente et révèlent chaque partie de l'interface utilisateur au fur et à mesure que le chargement progresse. Il commence par un aperçu du squelette de la conception de l'interface, puis affiche les éléments au fur et à mesure qu'ils se chargent. Cette stratégie est appelée progression progressive, et les détails apparaissent généralement dans l'ordre du contour du squelette (également appelé interface utilisateur d'espace réservé), du texte, puis des images.

Exemple d'écran squelette Facebook de Facebook Engineering.

Utilisés par de grandes entreprises comme LinkedIn, Instagram, Facebook et Google, les écrans squelettes offrent une meilleure expérience d'écran de chargement en transformant l'attente passive en attente active.

L'attente passive, c'est quand vous êtes juste assis là à attendre sans rien à faire, comme lorsque vous regardez une roulette tourner en rond et en rond. L'attente active, c'est quand vous faites quelque chose qui ressemble à un progrès pendant que vous attendez. Le chargement squelette encourage l'attente active en donnant à l'utilisateur de nouvelles informations à traiter à chaque mise à jour de l'écran.

De cette façon, l'écran squelette met l'accent sur le temps que vous attendez et le place sur la preuve réelle des progrès qui se déroulent devant vous, ce qui accélère le processus de chargement. Et comme il révèle ce qui a été chargé et ce qui reste, il permet à l'utilisateur de créer des attentes précises en matière d'interface utilisateur.

Le chargement progressif d'Instagram en action.

Lors de la mise en œuvre d'un écran squelette, assurez-vous que l'interface utilisateur de votre espace réservé est une représentation précise de l'apparence de l'interface utilisateur finale. Sinon, vous créez un écart entre les attentes et la réalité.

Certains outils et sites Web, comme Medium et Google Images, utilisent le chargement progressif des images pour ajouter une autre étape dans la progression. Le chargement progressif de l'image consiste à afficher la couleur prédominante ou la version floue d'une image avant son chargement complet.

Vous pouvez également concevoir des animations de chargement dans des écrans squelettes pour indiquer le chargement. Facebook, par exemple, fait en sorte que les barres de texte grisées sur son écran squelette exécutent leur propre mouvement de chargement lors du chargement de la page.

Les utilisateurs perçoivent les écrans avec des mouvements de chargement de gauche à droite et des mouvements de chargement lents et réguliers comme étant plus rapides.

Problèmes d'écran squelette

Il y a, comme toujours, des critiques - la plus grande préoccupation étant que les blocs gris sont une solution ennuyeuse et peu attrayante pour les utilisateurs qui s'attendent à voir un excellent contenu.

Dans une certaine mesure, cette préoccupation passe à côté de l'objectif de l'écran squelette : faire allusion à l'excellent contenu qui est rapidement en route. Aucun utilisateur n'attend ou ne veut un écran de chargement, mais les écrans squelettes offrent le confort de savoir qu'une interface fonctionne et sera disponible en quelques secondes.

Bien sûr, les blocs gris deviennent agaçants lorsqu'il y a trop d'attente entre chaque phase de progression. Plus le temps d'attente est long, pire c'est. C'est le cas de tous les indicateurs de chargement car, comme nous l'avons établi au début, personne n'aime attendre longtemps.

Avec les écrans squelettes, il est utile de mettre en œuvre plusieurs phases de progression pour continuer à activer la concentration de l'utilisateur. Il existe des écrans squelettes mal conçus qui vont de l'interface utilisateur d'espace réservé gris à tout à la fois, ce qui va à l'encontre de l'objectif. Un chargement progressif efficace affiche le contenu dès qu'il est prêt pour tenir les utilisateurs informés, intéressés et pleins d'espoir.

Si le temps d'attente est un peu plus long que l'idéal, vous pouvez envisager d'utiliser un spinner pendant quelques secondes avant de révéler l'interface utilisateur de l'espace réservé et de charger votre contenu. Cela peut vous faire gagner un peu de temps tant que l'interface utilisateur de l'espace réservé apparaît pour montrer des progrès substantiels.

Si votre temps de chargement est trop long, réduire votre temps d'attente est toujours la meilleure option et devrait être votre priorité. Il existe de nombreuses raisons pour lesquelles votre site Web peut être lent.

Testez-le : une bonne UX commence par l'utilisateur

L'expérience utilisateur commence avec l'utilisateur, et aucune réponse n'est bonne pour tout le monde, même quand c'est pour la plupart. C'est pourquoi offrir une bonne expérience utilisateur commence par tester vos idées pour déterminer ce qui fonctionne le mieux pour votre public.

À l'époque, offrir le meilleur design de spinner était le mieux que vous puissiez faire.

Maintenant, un chargement progressif bien conçu est une alternative à considérer. Il accélère les temps d'attente perçus, donne une impression de progrès, implique ce qu'il reste à charger et conseille les attentes des utilisateurs.

Mais cela ne signifie pas qu'il est temps d'arrêter de remettre en question les meilleures pratiques. Les jours d'utilisation d'animations de chargement longues et non informatives sont peut-être derrière nous, mais un jour, quelque chose surmontera les limites des écrans squelettes de la même manière qu'ils l'ont fait pour charger les spinners.

Jusque-là, si vous souhaitez en savoir plus sur la façon d'améliorer votre UX, contactez-nous. Nous aimons parler de stratégie.