Meilleures pratiques pour déployer des indicateurs de progression animés à votre avantage

Si vous avez déjà utilisé un PC, vous pourriez tout aussi bien être conscient du symbole Windows animé qui apparaît lorsque le système démarre. Il a fallu une évolution de la conception et de l’animation pour devenir ce que nous voyons aujourd’hui, mais dans Windows 1995, l’image ne bougeait pas du tout. Certains d’entre vous se demandent peut-être pourquoi utiliser ces indicateurs animés ?

Mais considérez ceci, préféreriez-vous attendre et regarder un écran vide pour voir votre action terminée ? Ou rester diverti avec quelque chose de significatif jusqu’à ce que l’écran apparaisse à nouveau ?

Parmi les caractéristiques les plus importantes de la conception de l’interface utilisateur figure la possibilité d’afficher sa progression sous forme d’état du système. L’utilisateur doit savoir si le système est conscient de son action et y répond en conséquence. Les indicateurs de progression animés sont capables de montrer le contexte actuel de l’opération à presque tout moment sans utiliser de fonctionnalités textuelles ou vidéo étendues. Cela les rend idéaux pour fournir l’état du système pendant que la progression s’effectue en arrière-plan.

Pourquoi interagir avec l’utilisateur pendant la progression du système est important ?

Qui n’aime pas la réponse rapide d’une application ou d’un site Web ? Bien que cela signifie beaucoup pour l’utilisateur, il n’est pas possible de l’exécuter avec une cohérence sans faille. Certains facteurs sont toujours ajoutés à l’équation qui peuvent entraver la vitesse de votre application. Ces facteurs incluent principalement une mauvaise connexion Internet, des performances lentes dues à une charge importante et même une défaillance du programme. Dans de telles circonstances, la meilleure chose à faire serait de minimiser la tension de l’utilisateur et de lui donner l’assurance que l’application fonctionne et que des progrès sont réalisés. Pour ce faire, vous devez fournir des commentaires à l’utilisateur afin que le temps ne pèse pas sur la patience de l’utilisateur.

Gardez les utilisateurs accrochés avec des commentaires

Le temps d’attente commence presque immédiatement lorsqu’une action est effectuée par l’utilisateur. Mais ce qui l’aggrave, c’est l’absence d’un indicateur approprié pour représenter les progrès du système. L’utilisateur suppose naturellement que l’application n’a pas répondu lorsqu’elle n’affiche pas de notification indiquant que le système prend du temps. Les résultats peuvent s’étendre du clic rampant à l’abandon même de l’utilisateur, simplement parce que l’application n’a pas fourni de retour à temps.

Les actions qui sont câblées pour redémarrer la progression ou actualiser le système sont souvent effectuées lorsque le chargement prend plus de temps que prévu. Encore une fois, l’absence de rétroaction ne peut pas montrer la réponse de la demande même si elle est faite en arrière-plan. C’est pourquoi un indicateur animé doit être introduit pour promouvoir la progression du système de l’application à tout moment.

Comment utiliser un indicateur de progression pour toute action qui prend plus d’une seconde ?

Normalement, lorsqu’une application prend moins d’une seconde à se charger, la progression semble presque sans entrave et l’utilisateur ne perd pas sa concentration. Cependant, si le temps de chargement dépasse 1 seconde, des mesures doivent être prises pour maintenir l’utilisateur engagé. Le court délai devient perceptible et l’utilisateur commence à errer sur l’efficacité de la tâche en cours sur l’application.

C’est pourquoi l’application doit répondre via un indicateur de progression pour offrir une raison crédible à l’attente et réduire l’incertitude de l’utilisateur avant qu’elle ne devienne incontrôlable. Il convient de noter qu’une action qui prend moins d’une seconde à se charger ne nécessite pas nécessairement d’indicateur d’animation, mais l’image peut le faire. Ceci est recommandé car une animation qui continue de clignoter à l’écran à chaque fois qu’une action est effectuée peut désorienter l’utilisateur. Les indicateurs de progression animés sont mieux utilisés pour neutraliser les effets d’une attente prolongée et garder l’utilisateur engagé sur l’application ou le site Web.

Types d’indicateurs de progrès

1. Indéterminé: Les indicateurs d’attente animés sont conçus pour communiquer avec l’utilisateur et le tenir informé de sa dernière action utilisateur. Le type d’indicateur d’attente le plus courant et le plus simple est « Indéterminé ». Ces types d’indicateurs indiquent aux utilisateurs d’attendre que l’action se termine tout en les gardant inconscients du temps qu’il pourrait prendre pour terminer la progression. Il est presque entendu que l’indicateur de progression indéterminé doit être utilisé pour des actions rapides, de préférence dans un délai de 2 à 10 secondes. Tout temps plus long que cela peut affecter la patience de l’utilisateur. Cela peut augmenter le taux de rebond d’un site Web et les abandons d’applications.
2. Déterminé: En cas d’indicateur de progression « Déterminé », le temps est assez étendu dans l’animation. Ce type d’indicateurs tient l’utilisateur informé du temps approximatif ou exact nécessaire pour terminer la progression. Il s’agit plutôt du type d’indicateurs d’attente le plus populaire, car ils montrent les progrès depuis le début, tout ce qui a été accompli et combien il en faudra encore pour tuer l’attente. Cela aide l’utilisateur à rester assuré des progrès réalisés et affichés à travers l’animation, tout en augmentant sa volonté de rester engagé envers le site Web ou l’application.

Indicateur d’animation en boucle et indicateur de pourcentage de réalisation

• Animation en boucle: L’indicateur d’animation en boucle est conçu pour représenter la progression sans montrer le temps de chargement approximatif ou exact qu’il faudra. C’est pourquoi les indicateurs de progression animés en boucle majoritaire sont indéterminés. Par exemple, l’indicateur de progression de Windows 7 a été conçu pour afficher la même répétition d’animation sans aucun retour sur le temps précis nécessaire pour terminer la progression. En outre, il comprenait tout, depuis les fonctions de démarrage, la configuration du fonctionnement de l’interface et d’autres formes de chargement de données. Pour ces deux raisons, les utilisateurs ne préfèrent pas voir un indicateur d’attente en boucle pour représenter le temps de chargement du site Web ou de l’application.

• Indicateur de pourcentage de réalisation : comme son nom l’indique, l’indicateur de pourcentage de réalisation indique la progression du chargement en remplissant la durée, le cercle ou la barre de l’animation de 0 % à 100 %. Puisqu’il montre le temps nécessaire pour terminer la progression, l’indicateur de pourcentage de réalisation est classé dans les indicateurs d’attente déterminés. Pour cette qualité particulière, il est préférable d’utiliser l’indicateur de pourcentage d’exécution pour les tâches nécessitant plus de 10 secondes.

  Selon une recherche, 10 secondes est le seuil de patience moyen de l’utilisateur. Au-delà de cela, l’utilisateur devient imprudent et s’impatiente jusqu’à ce que d’autres commentaires soient fournis. En affichant un indicateur de progression en pourcentage pour les processus qui prennent plus de 10 secondes à se charger, vous pouvez garder l’utilisateur accroché au site Web ou à l’application sans compromettre sa patience.

Comment utiliser efficacement les indicateurs de progrès ?

L’utilisation efficace d’indicateurs de progression dans vos applications et sites Web peut faire la différence entre le succès et l’échec. Voici quelques conseils pour vous assurer que vos indicateurs de progression sont à la hauteur.

1. Gardez l’utilisateur informé de la raison de l’attente: c’est une erreur de débutant de garder l’utilisateur inconscient de la progression du chargement en arrière-plan. Cela augmente leur tendance à perdre patience et à quitter l’application ou le site Web. Vous pouvez tenir l’utilisateur informé en affichant un indicateur de progression animé accompagné d’un texte pour une meilleure compréhension. Vous pouvez montrer quel processus est spécifiquement ciblé. Par exemple, vous pouvez afficher la progression de l’attente d’un jeu vidéo avec une barre de chargement et un texte qui indique quel processus est en cours, par exemple, « charger des graphiques » ou « charger des cartes », etc.
2. Indiquez une estimation de temps simple pour les tâches qui nécessitent des périodes de temps plus longues: Ne prenez pas les choses à des échelles microscopiques. Vous pouvez garder l’utilisateur engagé en fournissant une simple estimation. Faire des bêtises avec des promesses que vous ne pouvez pas tenir peut irriter les utilisateurs et les forcer à partir.
3. Afficher le temps précis requis: Cependant, pour les opérations qui prennent généralement plus de temps que la limite d’attente moyenne de l’utilisateur, opter pour des indicateurs de progression déterminés sera la décision la plus intelligente. Le choix idéal serait un indicateur de progression en pourcentage, car il met en lumière le temps de chargement précis. Pour les opérations encore plus longues à gérer, pensez à utiliser le nombre d’étapes pour mettre en évidence les progrès réalisés.
4. Keep Up the Progress: Essayez de viser la cohérence dans votre barre de progression lors du chargement des tâches. Après quelques expériences, la barre de progression oblige les utilisateurs à développer une attente sur la rapidité avec laquelle l’action sera terminée. Par conséquent, tout gel au milieu des progrès peut porter un coup sérieux aux attentes des utilisateurs. Par exemple, lorsque la barre atteint 99 % et reste ainsi pendant une période prolongée, la majorité des utilisateurs sont frustrés par ce comportement et quittent l’application en pensant qu’elle s’est figée. Pour contrer cela, vous pouvez masquer ces retards incohérents dans la barre de progression en la montrant se déplacer instantanément et régulièrement.
5. Afficher la progression dans la barre plus rapidement que la vitesse réelle: la vitesse brute peut se manifester par une simple perception que vous pouvez créer afin de rendre la barre de progression plus rapide. Vous pouvez y parvenir en concevant l’animation pour qu’elle se déplace lentement au début et en choisissant son rythme à la fin. Cela créera une illusion de progrès rapides sans compromettre le temps nécessaire pour terminer la tâche.
6. Offrez une distraction: la perception du temps de l’utilisateur peut être considérablement réduite en introduisant des indicateurs de progression créatifs. Si l’application affiche des détails textuels ou visuels intéressants pendant la progression, cela peut distraire l’esprit de l’utilisateur du temps nécessaire pour terminer l’action. Vous pouvez proposer une variété de choses pour occuper les utilisateurs, par exemple de courtes vidéos, des faits intéressants, des animations et même des jeux triviaux.

Alternative – Utilisez des écrans de squelettes pour contrer les indicateurs de progression de l’animation

Bien que les indicateurs d’animation de progression puissent ébranler presque tous les mauvais sentiments qui découlent de l’attente, certains publics sont plutôt résilients à ces tactiques. Parmi les quelques bonnes alternatives pour faire attendre les utilisateurs sans utiliser d’indicateurs de progression, il y a une méthode appelée écran squelette. Aussi appelées conteneurs d’informations temporaires, ces techniques consistent à montrer la progression en temps réel à l’utilisateur au lieu d’ouvrir une barre de chargement. Imaginez un écran vide se remplissant progressivement de ses composants et éléments jusqu’à ce qu’il soit complètement approvisionné. Cela crée l’illusion que l’application agit avec le temps de chargement et que son attente est récompensée par les progrès affichés.

Cela permet non seulement à l’audience de rester engagée avec le site Web ou l’application, mais aussi de la déclencher pour qu’elle soit prête à accomplir sa prochaine tâche. Bien que les indicateurs de progression soient également d’excellents moyens de satisfaire les utilisateurs, ils ne parviennent pas à maintenir l’énergie chez les utilisateurs que l’écran squelette conserve pendant leur progression de chargement.

Dernières pensées

Peu importe la rapidité des opérations de notre application ou de notre site Web, il y a toujours un risque de temps de traitement non invité. L’utilisation d’indicateurs de progression d’attente animés tels que des indicateurs de pourcentage de réalisation et des spinners de chargement permet de rassurer les utilisateurs sur les processus en cours et l’état actuel du système. En conséquence, cela augmente la probabilité qu’ils restent sur le site Web ou l’application pour attendre le chargement et poursuivre leurs tâches restantes. En calculant le temps nécessaire pour que les processus se terminent, vous devez attribuer le type approprié d’indicateurs d’animation de progression.

Un indicateur en boucle est idéal pour les opérations qui prennent de 2 à 10 secondes, tandis que les opérations plus longues peuvent être assistées par un indicateur de pourcentage effectué. En cas d’animation en boucle et d’écrans squelettes, il est préférable d’opter pour des écrans squelettes car ils sont capables d’entreprendre n’importe quelle action qui dépasse quelques millisecondes, tout en restant cool avec les utilisateurs.