Rien n’est plus frustrant pour un utilisateur de ne pas savoir si ça demande a bien été prise en compte ou de ne pas savoir dans quelle étape il se trouve et ce qu’il lui reste à faire pour arriver à la fin d’un processus. Nous verrons dans cet article comment réduire la frustration des visiteurs et optimiser l’expérience utilisateur.
Commençons par définir ce qu’est une barre de progression :
Selon le dictionnaire, une barre de progression est un composant de base des interfaces graphiques qui permet d’indiquer à l’utilisateur l’état d’avancement d’un travail qu’est en train d’effectuer l’ordinateur.
Nous pouvons par exemple observer l’utilisation de barre de progression lors du chargement d’une page internet dont le poids est conséquent, entrainant alors un temps de chargement plus important.
Une barre de progression (progress bar en anglais) affiche un indice de progression souvent représenté par l’animation d’une barre qui se charge où d’un cercle tournant. Il peut également avoir un indicateur en pourcentage ou en unité de temps, indiquant plus facilement le temps d’attente de l’utilisateur en le quantifiant.
En affichant une barre ou un spinner, nous limitons le risque de friction et rassurons l’utilisateur que le site web n’est pas en erreur et que nous avions bien pris sa demande en compte.
Pour rassurer encore davantage l’utilisateur, nous pouvons ajouter sous la barre de chargement les étapes que passe le système. En indiquant son état d’avancement, nous indiquons que le site est bien en chargement.
De plus, nous avons souvent tendance à attendre plus longtemps sur une page qui affiche des indicateurs de progression de temps plutôt que s’il n’y en avait pas, auquel cas nous risquons de quitter le site précipitamment sur le coup de la frustration.
Mais les barres de progression peuvent également représenter l’avancée d’un utilisateur dans un parcours comme un processus d’achat par exemple.
Nous parlons alors de barre d’étapes (en anglais, Step bar) puisque la barre de progression est segmentée en plusieurs phases correspondant à une action que doit réaliser l’utilisateur.
Au fur et à mesure que les étapes se remplissent, la barre de progression se complète jusqu’à l’action finale.
La barre d’étape est un bon moyen pour permettre à l’utilisateur d’avoir une visibilité sur les actions qu’il doit réaliser, celles qu’il a déjà validées et celles à venir. En séparant un processus en plusieurs étapes, nous offrons une représentation visuelle de la progression de l’utilisateur et nous simplifions le parcours utilisateur en le rendant plus clair et fluide.
Les barres de progression ont un effet psychologique positif sur les internautes, car ils ont le sentiment d’être accompagnés dans l’utilisation de votre site web ou application.
Un indicateur déterminé possède une animation dont la durée a été définie en amont, selon le temps moyen que prend la tâche à s’exécuter.
La plupart du temps, il est représenté sous forme d’une barre ou d’un cercle qui se remplit progressivement. Il peut également être accompagné d’un indice numérique en pourcentage ou en unité de temps (minutes, secondes).
Cet indicateur peut être utilisé dans le cas où le chargement de la page est connu et qu’il est suffisamment conséquent pour communiquer la durée du chargement à l’utilisateur.
Souvent représentée par une roue qui tourne, cette animation est infinie tant que le processus n’est pas finalisé.
Contrairement aux indicateurs de progression déterminés, ceux dits indéterminés sont destinés à des temps très courts, où l’utilisateur n’a pas besoin de connaitre l’état d’avancement.
Cet indicateur est certes moins précis, mais suffit à faire patienter l’utilisateur sur quelques secondes, le temps que la page se charge.
Besoin d'améliorer le design de votre site internet ou de votre application ?
Rencontrons-nous dans notre agence web à Caen pour discuter de votre projet.
Le design d’une barre de progression est important pour de multiples raisons.
Tout d’abord, elle doit être clairement reconnaissable dans l’interface de votre site internet ou votre application. Pour mieux la distinguer du reste du contenu de la page et faire comprendre à l’utilisateur qu’il doit attendre la fin du chargement avant d’accéder au contenu, vous pouvez utiliser un fond de couleur foncé avec une certaine opacité de la même manière que pour afficher une fenêtre de pop-up.
Les couleurs jouent également un rôle clé dans la perception de la progression.
Il est essentiel que les couleurs bénéficient d’un contraste important pour garantir une lisibilité optimale et indiquer clairement l’avancement, notamment pour les personnes ayant des déficiences visuelles.
Nous utiliserons davantage de couleurs neutres comme le bleu ou le vert, signe de confiance et stabilité, plutôt que des couleurs vives comme le rouge ou l’orange, souvent assimilée à une urgence ou erreur.
Pour un formulaire par étape (formulaire multi step) par exemple, vous pouvez mettre les icônes et les labels des étapes qui ne sont pas encore réalisées dans une couleur plus pâle pour montrer qu’elles restent à faire.
Une autre façon de faire comprendre à l’utilisateur qu’il doit patienter le temps que les données de la page s’affichent est d’utiliser le principe de l’écran squelette (Skeleton Screen).
Son principe est d’afficher des blocs de couleur grise et de la taille du contenu qui sera affiché une fois le contenu complètement chargé. Nous affichons ainsi la structure de la page le plus rapidement possible et le reste des données dans un second temps via un chargement asynchrone. Nous avons souvent recours à cette technique pour afficher des listes de résultats ou tableaux de données importants qui ne s’affichent pas instantanément, le temps que le serveur web fournisse le contenu.
Une simple barre visuelle peut ne pas suffire à indiquer une progression.
Ajouter un pourcentage ou une estimation en temps (minutes, secondes) peut améliorer la compréhension. Par exemple, un texte tel que « Chargement en cours : 75 % » ou « Encore 30 secondes restantes » aide l’utilisateur à situer son avancement
Dans le cas d’une progression par étape, il est important d’avoir des labels clairs ou des textes supplémentaires pour expliciter en quelques mots l’action attendue. Vous pouvez également ajouter une icône en lien avec l’étape pour renforcer le message sur l’étape en question tout en apportant un effet visuel sympathique.
Les icônes peuvent être utilisées sur tous types de barres de progression. S’il s’agit d’une barre de téléchargement d’un fichier, il peut être judicieux d’ajouter un pictogramme de téléchargement pour appuyer la raison du chargement.
Pour garantir l’accessibilité des barres de progression, il est crucial de respecter plusieurs concepts.
- Veillez d’abord à avoir un contraste suffisant entre l’arrière-plan et la barre elle-même.
- Ajoutez des textes alternatifs pour que les utilisateurs malvoyants puissent se situer dans la progression grâce à des outils d’assistance.
- Ajouter des attributs HTML pertinents. Les lecteurs d’écran ne peuvent pas interpréter les barres de progression visuelles sans aide. Il est donc essentiel d’inclure des balises ARIA appropriées, comme aria-valuenow, aria-valuemin et aria-valuemax, pour permettre aux technologies d’assistance d’annoncer la progression en pourcentage aux visiteurs.
- Limiter l’utilisation d’animations trop complexes. Certaines animations peuvent poser des problèmes aux personnes sensibles aux mouvements rapides, comme celles souffrant de vertiges ou d’épilepsie photosensible. Les bonnes pratiques de développement recommandent d’inclure une option permettant de désactiver les animations ou d’utiliser des effets de transition plus doux.
Les barres de progression améliorent l’expérience utilisateur en rendant les processus plus clairs et intuitifs. Bien conçues, elles réduisent la frustration et favorisent l’engagement.