Stepper

Un stepper donne des informations sur la progression d’un parcours : un entonnoir de réservation, un formulaire à étapes multiples, etc.

Chaque étape est numérotée et affiche un feedback en fonction d'un état :

• Step “Done” : l'étape est validée et/ou remplie
• Step ‘Active” : l'étape est en cours/non terminée et doit être remplie
• Step “Inactive” : l'étape n'est pas encore validée et/ou remplie.

Un stepper peut être interactif, ce qui signifie qu'un utilisateur peut cliquer sur une étape pour revenir en arrière, d’où l’état “Done hovered”.

Quand utiliser

• Afficher la progression d’un parcours découpé en plusieurs étapes, par exemple un parcours checkout, un entonnoir de réservation ou bien un formulaire à étapes multiples

• Etre transparent avec l’utilisateur sur le nombre d’étapes, le rassurer sur le fait que cela va être rapide

• Paradoxalement, si le formulaire est découpé en plusieurs étapes, il paraitra moins long qu’un formulaire en une seule étape. La charge cognitive parait moins forte et génère moins de frustration vis-à-vis de la densité des informations à renseigner.

Quand ne pas utiliser

• Le stepper n’est pas un élément de navigation. Si un retour en arrière est nécessaire, il doit s’effectuer via un bouton d’action “Revenir en arrière”, “Revenir à l’étape précédente”.