Arrêtez d’utiliser un spinner de chargement, il y a mieux

Arrêtez d’utiliser ces spinners de chargement ennuyeux dans vos interfaces utilisateur. Sérieusement . Cela tue l’expérience de vos apps plus que vous ne le pensez.

Un spinner de chargement pourrait être la solution à vos problèmes de chargement de contenu. Mais je suis ici pour vous dire que ce n’est pas le cas.

Vous pourriez même utiliser certains de ces Spinners de chargement animés fantaisie. Mais ils ne sont pas mieux non plus.

Pourquoi le Spinner de chargement ne fonctionne pas

Depuis longtemps, nous suivons, ou plutôt nous sommes influencés par les règles dures des langages de conception. Je ne vous en veux pas, cependant.

La clé de la sagesse est celle-ci – une remise en question constante et fréquente, car en doutant nous sommes amenés à nous interroger et en interrogeant nous arrivons à la vérité. – Peter Abelard

Le Loading Spinner est l’un des indicateurs de progression les plus utilisés dans la conception d’interfaces utilisateur. Mais il a ses propres défauts qui sont généralement négligés.

Aucun signe de progression

Que vous dit le Loading Spinner ? Elle dénote que le contenu est en cours de chargement. Mais dit-elle quelle quantité a été chargée ? Dit-elle combien il reste à charger ?

Non, elle ne le fait pas.

De plus, il est difficile de le déterminer. Si c’était possible, nous utiliserions une barre de progression non ?

Cette période d’incertitude

Combien de temps avez-vous passé à regarder ça ? Vous attendiez-vous à ce que du contenu se charge après un certain temps ? Je suis désolé de vous décevoir.

Ok, supposons que le chargement du GIF s’est effectivement terminé et que du contenu s’affiche. Posez-vous ces questions et donnez-moi une réponse honnête. Je suis sûr que vous avez regardé suffisamment de Spinners de chargement pour le savoir.

1. Quand vous avez regardé le Spinner de chargement, saviez-vous combien de temps il reste pour terminer ?
2. Combien de contenu a été chargé ?
3. Combien il reste à charger ?

Nous sommes simplement assis à regarder un Spinner de chargement. En espérant qu’il se charge à temps, sans réponse à aucune de ces 3 questions.

De plus, les connexions réseau peuvent être instables. On ne peut donc jamais tenir pour acquis que le contenu se chargera toujours rapidement.

Paraître plus lent que la réalité

Les Spinners de chargement font paraître le chargement plus lent.

C’est comme une horloge, qui fait constamment tic-tac. Elle montre le temps que vous perdez en la regardant fixement. Comme ce GIF ci-dessus, que je vous ai fait regarder fixement.

http://gph.is/1MoI2wJ

Jusqu’à ce que tout soit chargé, avez-vous une idée de ce qui vous attend à l’écran ? Je parie que non. Vous pourriez même être surpris une fois que l’interface utilisateur et le contenu s’affichent.

Pensez maintenant à vos utilisateurs. Jusqu’à ce que tout soit chargé, ils n’ont absolument aucune idée de ce à quoi s’attendre à l’écran. Je parie qu’ils seront surpris aussi.

Ce ne sera pas leur faute. Vous ne leur avez pas dit à quoi s’attendre en premier lieu !

Une « surprise » n’est pas toujours une bonne chose

Un événement, un fait, etc. inattendu ou étonnant. – Surprise

Dans la définition même du mot, une surprise indique un événement ‘inattendu’. Les gens ont tendance à avoir des réactions polarisantes à de tels événements. Cela peut être positif ou négatif.

Les surprises n’ont pas souvent tendance à laisser un impact positif sur les gens. Sauf si c’est leur anniversaire. Tout dépend de la façon dont la personne la prend. Ainsi, c’est là que réside le problème.

Regardez bien les deux images. Voyez l’image de droite. Pouviez-vous honnêtement prédire que l’interface utilisateur ressemblerait finalement à ça ? Je suis sûr que non.

D’accord, l’IU finale est un design de basse fidélité. Mais vous comprenez le point.

Je n’ai délibérément pas tiré des exemples d’applications existantes. Parce que vous et moi savons à quoi cela va ressembler. Avec une application connue, nous avons déjà vu l’interface, avant même son chargement.

Les émotions affectent notre sens du temps

Le saviez-vous ? Nous, les humains, pouvons en fait prédire le temps. Et ce, de manière assez précise.

Mais sous l’influence d’une émotion, notre sens du temps est considérablement obscurci.

http://gph.is/1XcuFKh

Nous en avons tous fait l’expérience. Le temps semble s’envoler lorsque vous faites ce que vous aimez. Mais si c’est quelque chose que vous détestez, le temps semble traîner. Même lorsque vous vous ennuyez, que vous regardez l’horloge en attendant votre émission préférée. Le temps passe alors encore plus lentement.

Il en va de même pour nos interfaces.

Ce que j’essaie de dire, c’est . Votre contenu pourrait ne pas prendre beaucoup de temps à charger. En fait, cela pourrait ne pas être un gros problème. Mais il peut sembler plus long que ce qu’il prend réellement. C’est juste la façon dont les gens pourraient le percevoir, et il n’y a rien que nous puissions faire pour le changer.

Mais ce que nous pouvons faire, c’est aider à changer leur perception. Nous pouvons faire en sorte que notre application semble plus rapide qu’elle ne l’est réellement.

NOTE
Ne vous laissez pas trop emporter en essayant de faire semblant. Votre interface a besoin d’une combinaison de vitesse réelle et perçue pour réussir.

L’illusion des alternatives

Typiquement, nous avons deux options pour indiquer le chargement du contenu :

1. Barre de progression finie – si nous pouvons déterminer les temps de chargement
2. Loading Spinner (progression infinie du chargement) – si les temps de chargement sont inconnus

Mais regardez de plus près les choix à nouveau. Vous vous rendez compte, il n’y a pas de véritable choix ici ?

Nous ne pouvons pas utiliser une barre de progression finie car nous ne pouvons pas mesurer les temps de chargement. De plus, nous savons déjà que le Loading Spinner n’est pas bon.

Un bon indicateur de progression

Un bon indicateur de progression est celui qui n’a évidemment aucun des points négatifs que j’ai mentionnés ci-dessus. Mais pour un ton plus optimiste, laissez-moi les énumérer.

• Donne un feedback immédiat
• Fournit un sens du temps ( combien a progressé, et combien est en attente)
• Supprime le doute (les progrès graduels rassurent les gens que l’application fonctionne)

Une certaine preuve comme sauvegarde

Certains d’entre vous pourraient ne pas croire ce que j’ai dit. Mais croyez-moi. Si j’étais moi, je ne croirais pas non plus ce que j’ai dit. Après tout, où est la preuve ? Les indicateurs de charge font-ils vraiment du mal ? Qui en a fait l’expérience ?

Et bien, considérez-vous chanceux. Vous avez la possibilité d’apprendre des erreurs de quelqu’un d’autre. L’application iOS Polar suggère fortement d’éviter le Spinner.

Polar a reçu de nombreuses plaintes concernant la lenteur de son application. C’était à cause des spinners de chargement qu’ils incluaient dans leur appli.

Avec les indicateurs de progression, nous avions fait en sorte que les gens regardent l’horloge. Par conséquent, le temps a ralenti et notre appli aussi. Nous nous sommes concentrés sur l’indicateur et non sur la progression, c’est-à-dire faire comprendre que vous avancez vers votre objectif et non que vous attendez.
– Polar

Je suppose que j’ai assez divagué sur les raisons pour lesquelles les Spinners de chargement sont mauvais. Le problème du Spinner réside dans le fait qu’il ne fournit pas un sentiment de progrès. Bien que, nous pouvons remédier à cela.

Comment, vous demandez ? La réponse est « Écrans squelettes ».

Des écrans squelettes à la rescousse

Contrairement aux Spinners de chargement, où l’interface utilisateur s’affiche en une seule fois. Un écran squelette aide à charger une interface utilisateur progressivement, un peu à la fois.

Cela signifie que l’IU dépouillée s’affiche en premier. Puis le contenu chargé est progressivement peuplé à l’écran.

« Un écran squelette est essentiellement une version vierge d’une page dans laquelle les informations sont progressivement chargées. »
– Luke Wroblewski

Les écrans squelettes déplacent l’attention des utilisateurs. Il fait en sorte que les gens se concentrent sur la progression, plutôt que sur le temps d’attente.

Les écrans squelettes indiquent visuellement aux utilisateurs ce qu’ils doivent attendre de l’interface. Il leur donne un aperçu de ce qui va venir et crée un sentiment de progrès progressif.

Par-dessus tout, il fait en sorte que les gens perçoivent votre site comme étant plus rapide qu’il ne l’est en réalité. N’oubliez pas que nous concevons des interfaces destinées à être utilisées par des personnes réelles. Nous devons donner aux gens l’illusion de la vitesse.

Plus le système donne des informations sur le temps d’attente, plus la satisfaction de l’utilisateur est grande.
– Comment améliorer le temps d’attente perçu en HCI

L’utilisation d’un écran squelette vous donne les avantages suivants :

• Aide les gens à percevoir que votre écran se charge plus rapidement
• Elimine les surprises
• Chargement progressif de l’interface utilisateur – indication claire de la progression
• Montre exactement ce qui est chargé et ce qui reste à charger

Progression progressive

Je sais que c’est un terme fantaisiste. Ce que cela signifie, c’est de charger votre contenu progressivement. Les gens de la conception et du développement web connaissent cela sous le nom de ‘Lazy-loading’.

Déférer l’initialisation d’un objet jusqu’au moment où il est nécessaire.
– Lazy Loading

D’abord, disposez l’interface utilisateur de base nue (écran squelette). Ensuite, charger les données du texte. L’utilisateur sait qu’il a reçu le contenu. Enfin, charger les images paresseuses. L’utilisateur comprend que la plupart du contenu a été chargé. Ce qui reste, ce sont les images.

De cette façon, vous avez donné aux utilisateurs :

• un sens clair du progrès
• quoi s’attendre ensuite
• quoi reste à attendre

Notez comment Instagram gère intelligemment le chargement ici.

D’abord, Instagram affiche un spinner de chargement pendant une brève période. Ensuite, il présente l’interface utilisateur de base. Il s’agit de l’écran squelette ou de l’interface utilisateur de type Placeholder. Cela indique l’endroit que le contenu finira par remplir.

Aussi, remarquez que les données textuelles ont déjà peuplé l’écran. Enfin, dans la troisième capture d’écran, les images sont progressivement chargées en place.

Voici quelques sites web qui utilisent des écrans squelettes pour montrer le chargement.

Vous pourriez argumenter que ces sites web utilisent des Spinners de chargement. Mais remarquez comment il est utilisé. Un Spinner seul n’est pas affiché du début à la fin. Il n’est affiché que pendant une brève période, suivie de l’écran squelette.

TIP
Si votre temps de chargement est plus long, vous pouvez afficher brièvement un Loading Spinner, avant l’interface utilisateur squelette. Cela peut acheter votre tâche un peu plus de temps à compléter.

Chargement progressif pour les images

Vous pouvez même appliquer une progression graduelle au chargement des images. Par exemple, Medium et Google utilisent le chargement progressif pour leurs images.

Je suis sûr que vous avez vu l’un ou l’autre. Peut-être que vous ne saviez pas qu’il avait un nom propre jusqu’à maintenant.

Voici les étapes génériques sur le chargement progressif des images.

1. Afficher l’écran squelette
2. Charger une version de très basse qualité (pixellisée) de l’image (ou une couleur proéminente)
3. Charger l’image de haute qualité en arrière-plan
4. Faire apparaître en fondu l’image de haute qualité, remplaçant la précédente de basse qualité

Bien sûr, ce qu’il faut afficher en premier varie. Medium choisit d’utiliser une image pixélisée extrêmement petite et applique un filtre de flou dessus. Plus tard, il charge une image de meilleure qualité pour la remplacer. Alors que Google affiche d’abord la couleur proéminente de l’image.

Notez que vous n’avez pas donné ensuite une indication claire de QUAND la tâche sera terminée. Il n’y a toujours pas d’estimation de temps solide. Mais vous avez dit que ce qui a été complété et ce qui reste. Cela même est un signe clair de progrès.

Écrans squelettes sur Android et iOS

Vous pourriez argumenter en disant que la plupart des exemples d’écrans squelettes sont des sites Web. Alors comment faire sur mobile ? Vous avez tout à fait raison. Lire tout cela ne vaudrait pas la peine si je ne vous donnais même pas d’indice sur la façon de le faire.

Facebook a écrit une bibliothèque appelée Shimmer pour Android et iOS.

Il fonctionne exactement comme la façon dont Facebook utilise l’interface utilisateur squelette pour charger le contenu entrant. L’animation de shimmer dépeint que le contenu est en cours de chargement.

Vous pouvez utiliser cette bibliothèque pour afficher des écrans squelettes pour dénoter le chargement dans vos applications.

Gestion des échecs avec les écrans squelettes

Il n’y a aucune garantie qu’une requête s’exécutera toujours avec succès. Ainsi, nous ne pouvons pas supposer que si un contenu se charge progressivement, il finira par se terminer. Il y a de fortes chances qu’il échoue à mi-chemin. Les raisons les plus courantes sont une connectivité défectueuse, lente ou inexistante.

Supposons que vous ayez lancé une requête pour charger du contenu. Ensuite, l’écran du squelette s’affiche également. Puis, soudainement, votre internet s’éteint. Comment géreriez-vous cela ?

Typiquement, vous devez informer l’utilisateur et lui permettre de réessayer.

N’oubliez pas que donner une rétroaction est un bon design d’interaction et une expérience utilisateur positive.

Les états vides se produisent lorsque le contenu d’un élément ne peut pas être affiché.

TIP
Pensez à utiliser ‘ Empty States ‘. Cela vous permet de fournir une rétroaction claire avec un bouton ‘Call to Action’ (CTA).

Connectivité dans Android et iOS

Voici quelques ressources qui peuvent vous aider à gérer la connectivité.

Android

• Utiliser Snackbar pour fournir une rétroaction avec le bouton CTA
• Connectivité – classe de gestion du réseau

iOS – Swift

.

• Alertes iOS – collection de bibliothèques d’alertes parmi lesquelles choisir
• Atteignabilité – gestion du réseau

Wrapping Up

Les applications deviennent intelligentes. Les gens commencent à réaliser que le Loading Spinner nuit à leur UX. Il est temps que vous le fassiez aussi.

Les écrans squelettes fournissent une progression incrémentale dans le chargement de votre interface. Un tel retour incrémental donne une meilleure expérience utilisateur, et réduit l’incertitude. De plus, les gens seraient prêts à attendre un peu plus longtemps.