Indicateur d'étapes - Stepper

L’indicateur d'étapes permet d’indiquer à l’utilisateur où il se trouve dans un formulaire ou dans une démarche.

Cet indicateur d'étapes est utilisable dans le cas d’un processus linéaire, le composant ne permet pas de naviguer d’une étape à une autre (pour cela, il faudra utiliser des boutons).

Structure

La barre de progression contient autant de sections qu’il y a d'étapes, les étapes validées et l'étape en cours sont en bleu.

Aucun des éléments de l’indicateur d'étapes n’est cliquable.

Exemple d'utilisation

Exemple de première étape

Exemple de dernière étape

Règles d’utilisation

Usages

L’indicateur d'étapes ne sert pas à naviguer d’une étape à l’autre, pour cela utiliser des boutons en bas des champs de l'étape.

Il est conseillé de finir par une étape de confirmation. Il est aussi conseillé de créer une page d’introduction à la démarche, avant de commencer cette dernière pour présenter les différentes étapes, sur laquelle ne figure pas cet indicateur d’étapes.

Le nombre maximal d’étapes proposées dans le composant est limité à 8. En effet, plus le parcours du formulaire est long, plus le risque d’abandon est élevé. De ce fait, il est nécessaire d’identifier avec soin les champs demandés aux utilisateurs et les rassembler au maximum dans des sections similaires.

Contenus

  • Chaque étape doit avoir un titre clair, unique et ne comprenant pas le numéro de l'étape (car on l’a déjà dans le champ numéro de l'étape).
  • À la dernière étape, le titre de l'étape suivante ne sera pas afficher.

Personnalisation

Le style de ce composant n’est pas personnalisable.