Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Stepper (*Indicateur d'étapes*)

Stepper (*Indicateur d'étapes*)

Composant
Définition

Composant qui indique la progression de l'utilisateur dans un processus multi-étapes. Chaque étape est représentée par un numéro ou une icône, reliée aux autres par une ligne. Les étapes complétées, en cours et à venir se distinguent visuellement. Le stepper réduit l'incertitude en montrant où l'utilisateur se trouve et combien d'étapes restent. Il encourage la complétion en exploitant l'effet Zeigarnik : une tâche commencée motive à finir.

En pratique

Le nombre d'étapes doit rester inférieur à sept. Les labels d'étapes doivent être explicites : "Adresse de livraison" plutôt que "Étape 2". L'étape active doit se démarquer fortement visuellement. Permettre le retour aux étapes précédentes sans perte de données est indispensable. Sur mobile, un stepper horizontal de plus de quatre étapes devient illisible : passer à un format compact ("Étape 2/5") ou vertical.

Exemple

Le tunnel de commande d'Amazon affiche un stepper en quatre étapes : Panier, Connexion, Livraison, Paiement. La barre de progression se remplit proportionnellement, renforçant le sentiment d'avancement.

Voir aussi
Progressive disclosure
Effet Zeigarnik (*Zeigarnik Effect*)
Flux utilisateur (*User Flow*)
Taux de complétion (*Task Completion Rate*)
Sources
Progress Trackers in Web Design - Nielsen Norman Group
Material Design - Stepper
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.