Modèles de conception UX pour le chargement

• Les écrans de chargement peuvent améliorer l’expérience utilisateur en offrant de la visibilité sur ce que fait le système.
• Il y a plusieurs points à prendre en compte pour créer un écran de chargement adapté.
  • Avant de concevoir, il faut vérifier le système de chargement.
  • Il faut notamment voir si le chargement bloque les entrées de l’utilisateur, si la progression peut être connue, quelle quantité d’informations est chargée, et comment se présente l’expérience mobile.
  • Il faut aussi distinguer s’il s’agit d’un chargement passif (préchargé par le système) ou d’un chargement actif (déclenché par l’action de l’utilisateur).
• Variations selon la quantité affichée à la fois
  • Pour des composants complexes, il peut être préférable de les afficher un par un.
  • Pour des composants relativement simples, il vaut mieux les afficher d’un coup une fois le chargement terminé.
  • S’il y a beaucoup de composants, le chargement différé est nécessaire.
    • On peut alors utiliser des approches comme le scroll infini, le bouton « Voir plus » ou la pagination.
• Variations selon la fréquence
  • Si les changements sont continus, il faut minimiser l’UI qui signale le chargement.
    • On peut prendre comme référence l’UI de sauvegarde en temps réel de Google Drive.
  • Si les changements sont occasionnels, il vaut mieux les montrer immédiatement à l’utilisateur.
    • Par exemple, une fenêtre contextuelle indiquant que le contenu consulté a été mis à jour et qu’il faut actualiser l’écran.
• Variations selon le temps nécessaire
  • Il faut d’abord examiner si la progression peut être connue clairement ou si elle reste incertaine.
  • Si cela prend moins de 0,1 seconde
    • Il suffit d’afficher le résultat immédiatement.
    • Dans certains cas, il peut être préférable d’afficher un faux écran de chargement.
    • Par exemple, lorsqu’il s’agit d’une action importante du point de vue de l’utilisateur (comme l’enregistrement), ou lorsqu’un court délai permet de laisser une possibilité d’action (comme un bouton d’annulation après l’envoi d’un e-mail).
  • Si cela prend entre 0,1 et 1 seconde
    • C’est un délai très courant, et comme il passe généralement inaperçu, il vaut mieux ne pas ajouter d’écran de chargement.
  • Si cela prend plus de 1 seconde
    • Dès que l’on dépasse 1 seconde, l’utilisateur perçoit l’attente, donc il est préférable d’ajouter un écran de chargement adapté.
    • Si le composant en cours de chargement est petit, un spinner de chargement est un bon choix. (upload de fichier, etc.)
    • Si l’écran change, un écran de chargement skeleton est adapté.
    • Si l’image constitue le contenu principal, extraire les couleurs dominantes puis appliquer un flou donne un très bon résultat.
  • Si cela prend entre 2 et 10 secondes
    • Un indicateur de temps comme « cela prendra environ 5 secondes » peut être efficace.
    • Une barre de progression est toujours un bon choix.
    • Si le processus est composé de plusieurs étapes, il est aussi possible d’afficher ces étapes.
      • Même s’il n’y a pas d’étapes clairement définies, on peut utiliser des messages génériques. (connexion au serveur, etc.)
  • Si cela prend plus de 10 secondes
    • Si la progression peut être connue clairement, il est préférable d’afficher un pourcentage et le temps restant. (par exemple 50 % lors d’un upload de fichier)
      • En revanche, rester bloqué à 99 % est très problématique ; si cela peut arriver, il faut utiliser une autre méthode.
    • Si cela dure plus longtemps sans que la progression puisse être connue clairement, il est utile d’indiquer que l’utilisateur sera prévenu par e-mail ou autre une fois la tâche terminée, tout en lui laissant du contrôle.
    • Il peut aussi être judicieux d’exécuter complètement la tâche en arrière-plan sans gêner les autres actions de l’utilisateur. (comme l’état d’avancement des uploads dans Google Drive)

[thenewseason]

Merci pour ce bon article.

• Même pour des requêtes traitées immédiatement, il vaut parfois mieux afficher brièvement un état de chargement.
• Entre 0,1 et 1 seconde, il vaut mieux ne pas afficher de chargement.
  . Personnellement, je n’affiche rien jusqu’à 250 ms, mais je ne sais pas si ça reste acceptable même en allant jusqu’à 1 seconde.
• Au-delà d’1 seconde, utiliser un skeleton si l’écran change, sinon un spinner

[rlwnd1104]

Oh, j'étais justement en train de chercher des arguments sur les écrans de chargement ! Merci haha

[kuroneko]

• Fil HN

J’ai l’impression que le résumé est devenu un peu trop long... enfin bref, il y a tellement de bonnes choses dedans que j’ai essayé d’en reprendre le plus possible.

L’idée qu’un faux écran de chargement puisse inspirer davantage confiance est intéressante. Ils en ont aussi pas mal parlé du côté de Hacker News.