Stepper

Un stepper affiche la progression d’un parcours en le décomposant en plusieurs étapes logiques et numérotées.

# Usage

Le Stepper permet de segmenter un processus en plusieurs étapes. Chaque étape est représentée par un indicateur distinct, souvent numéroté ou nommé, et permet aux utilisateurs de comprendre où ils se trouvent dans le processus, ce qu'ils ont déjà accompli, et ce qui leur reste à faire.

  • Formulaires multi-étapes : Pour diviser des formulaires longs et complexes en sections plus gérables.

  • Processus d'inscription : Pour guider les utilisateurs à travers les différentes étapes de création de compte.

  • Guides interactifs : Pour offrir des tutoriels pas-à-pas dans l'application d'espace client ou sur le site d'assistance

Quand utiliser
  • Vente :

    • Utiliser pour guider les utilisateurs à travers les étapes de sélection de produit, information d'expédition, paiement, et confirmation.
    • Lorsqu'un produit nécessite une personnalisation ou une configuration spécifique, un Stepper peut segmenter ce processus.
    • Simplifier le processus d'inscription en le divisant en étapes claires.
    • Etre transparent avec l’utilisateur sur le nombre d’étapes, le rassurer sur le fait que cela va être rapide
  • Assistance :

    • Guider les utilisateurs à travers une série d'étapes pour diagnostiquer et résoudre des problèmes techniques
    • Faciliter la soumission de tickets d'assistance en divisant le formulaire en sections plus faciles à gérer.
    • Offrir des tutoriels pas-à-pas pour aider les utilisateurs à résoudre des problèmes courants.
  • Application/Espace client :

    • Gestion des abonnements : Guider les utilisateurs à travers les étapes de modification, renouvellement ou annulation d'abonnements.
    • Configuration initiale : Aider les nouveaux utilisateurs à configurer leur compte et à se familiariser avec les fonctionnalités principales.
    • Mise à jour de profil : Diviser le processus de mise à jour des informations de compte en étapes gérables.
Quand ne pas utiliser
  • Actions simples : Pour des tâches qui peuvent être accomplies en une ou deux étapes, un formulaire simple ou un bouton d'action est préférable.

  • Navigation générale : Ne pas utiliser le Stepper comme outil de navigation principale ou secondaire

  • Contenu non structuré : Lorsque les informations ne suivent pas une séquence logique ou ne nécessitent pas de progression étape par étape.

# Do & Don't

Le step actif doit toujours avoir un label

Toujours permettre à l’utilisateur de revenir en arrière si nécessaire