Système d’Étapes & Progression

Que fait Système d’Étapes & Progression ?

Objectif

La compétence Système d’Étapes & Progression fournit une méthodologie pour concevoir et documenter la manière dont les utilisateurs se déplacent dans des processus en plusieurs étapes ou attendent des tâches en arrière-plan. Elle garantit que les workflows complexes (comme les processus de commande ou l’intégration) sont décomposés en morceaux gérables, réduisant la charge cognitive en indiquant où se trouve l’utilisateur, ce qu’il a terminé et ce qu’il lui reste à faire.

Cas d’Utilisation

• Checkout E-commerce : Guider les utilisateurs à travers l’expédition, le paiement et la révision.
• Formulaires Multi-étapes : Diviser les tâches de saisie de données longues en sections logiques.
• Intégration Utilisateur : Visualiser le processus de configuration d’un nouveau compte.
• États de Chargement/Téléchargement : Communiquer l’état des opérations de longue durée.
• Parcours d’Apprentissage : Afficher la progression dans un cours ou un programme.

Quand NE PAS Utiliser

• Tâches à Vue Unique : Si une tâche peut être réalisée en une seule vue sans changement de contexte, un système de progression ajoute un bruit inutile.
• Flux Infinis : Faire défiler du contenu où il n’y a pas de « fin » définie à la progression.
• Interactions Critiques à Haute Vitesse : Là où le délai d’affichage des indicateurs de progression gênerait une tâche sensible au temps (par exemple, interface utilisateur de jeu en temps réel).

Entrées

1. Inventaire des Étapes : Une liste des étapes discrètes nécessaires pour terminer la tâche.
2. Type de Tâche : S’agit-il d’une séquence pilotée par l’utilisateur (Steppers) ou d’un processus piloté par le système (Barres de Progression) ?
3. Linéarité : Les étapes doivent-elles être réalisées dans l’ordre, ou l’utilisateur peut-il sauter entre elles ?
4. Contraintes de Contenu : Étiquettes, descriptions et icônes pour chaque étape.

Sorties

1. Cadre de Progression : Une définition du type de composant (Horizontal, Vertical ou Circulaire).
2. Matrice d’États : Spécifications visuelles pour les états En Attente, Actif, Terminé et Erreur.
3. Stratégie Responsive : Comment l’indicateur s’adapte aux écrans mobiles (par exemple, masquer les étiquettes, passer en numérique).
4. Spécifications d’Accessibilité : Rôles ARIA, régions live et règles d’interaction au clavier.

Workflow

1. Catégoriser le Type de Progression

Déterminer le motif visuel le plus approprié :

• Stepper Horizontal : Idéal pour les processus linéaires avec 3 à 5 étapes sur bureau.
• Stepper Vertical : Idéal pour les processus non linéaires, les étapes avec des longueurs de contenu variables ou les flux mobiles.
• Barre de Progression Continue : Idéale pour les tâches pilotées par le système (téléchargements, chargement) ou les processus avec un grand nombre de micro-étapes.
• Cercle de Progression : Idéal pour les widgets de tableau de bord ou lorsque l’espace est extrêmement limité.

2. Définir la Hiérarchie et les Étiquettes des Étapes

• Étiquette Principale : Nom concis de l’étape (par exemple, « Expédition »).
• Étiquette Secondaire (Optionnelle) : Brève description ou statut (par exemple, « En Cours »).
• Indicateur Visuel : Chiffres (pour l’ordre), Icônes (pour le contexte) ou Points (pour un design minimaliste).

3. Établir la Visualisation des États

Définir des distinctions visuelles claires pour chaque état :

• En Attente : Faible contraste, généralement grisé.
• Actif : Contraste élevé, utilisant souvent la couleur primaire de la marque ou un effet « brillant ».
• Terminé : Utiliser une icône « coche » et une couleur distincte (souvent verte ou une version atténuée de la couleur active).
• Erreur : Utiliser une icône « avertissement » et une couleur d’erreur sémantique (rouge).

4. Concevoir pour le Mouvement et le Retour d’Information

• Transitions : Utiliser des animations subtiles lors du passage d’une étape à l’autre pour renforcer la progression.
• Clicabilité : Déterminer si les utilisateurs peuvent cliquer sur les étapes précédentes pour revenir en arrière.
• Validation : Visualiser qu’une étape est valide/terminée avant de permettre la progression.

5. Planifier les Adaptations Responsives

Les indicateurs multi-étapes sont notoirement fragiles sur mobile :

• Réduction des Étiquettes : Sur mobile, masquer les étiquettes textuelles et n’afficher que les chiffres ou icônes.
• Transition vers « Étape X sur Y » : Remplacer la barre visuelle complète par un résumé textuel ou numérique simple.
• Passage en Vertical : Convertir les barres horizontales en listes verticales sur les petits écrans.

Règles de Décision

• La Règle des 5 Étapes : Si un stepper horizontal a plus de 5 étapes, passer à un stepper vertical ou à un simple indicateur textuel « Étape X sur Y » pour éviter l’encombrement.
• Icône vs. Chiffre : Utiliser des chiffres si l’ordre de la séquence est critique ; utiliser des icônes uniquement si elles apportent une valeur sémantique immédiate (par exemple, une icône « Carte de Crédit » pour le paiement).
• Linéarité : Si les utilisateurs doivent terminer les étapes dans l’ordre, désactiver les clics sur les étapes « futures ». S’il s’agit d’une configuration flexible, autoriser les sauts.
• Préservation du Contexte : Toujours afficher les étiquettes de l’étape actuelle, précédente et suivante. Les autres peuvent être tronquées si nécessaire.

Contraintes

• Accessibilité :
  • Utiliser role="progressbar" avec aria-valuenow, aria-valuemin, aria-valuemax, et un texte lisible aria-valuetext (par exemple, « Étape 2 sur 4 : Paiement ») pour les barres continues.
  • Utiliser aria-current="step" pour identifier l’étape active dans une séquence.
  • Garantir que les rapports de contraste pour les étapes actives vs. inactives respectent WCAG AA (4,5:1).
  • Si les étapes sont cliquables, leurs cibles doivent respecter WCAG 2.2 SC 2.5.8 (24x24px minimum, 44px recommandé) et exposer des états :focus-visible visibles.
• Hiérarchie : L’indicateur de progression doit être un guide, pas le centre d’attention. Il se place généralement en haut (horizontal) ou à gauche (vertical) du contenu.
• Responsivité : Ne doit pas provoquer de débordement horizontal.

Schémas d’Échec Courants

• La « Progression Mystérieuse » : Afficher une barre sans étiquette ni pourcentage, laissant l’utilisateur se demander « combien de temps encore ? »
• États Inaccessibles : Utiliser uniquement la couleur (par exemple, vert vs. gris) pour indiquer l’achèvement sans icônes ni texte.
• Horizontales Surchargées : Forcer trop d’étapes dans une disposition horizontale, provoquant un chevauchement du texte ou des cibles tactiles minuscules sur mobile.
• Manque de Persistance : Masquer l’indicateur de progression sur certaines pages d’un flux multi-étapes, provoquant une perte de repère chez l’utilisateur.

Critères de Validation

• L’étape actuelle est clairement distinguée des étapes terminées et à venir.
• Les étapes terminées utilisent un indicateur non basé sur la couleur (comme une coche).
• La vue mobile est fonctionnelle et ne déborde ni ne sature.
• Les rôles ARIA et aria-current sont correctement appliqués.
• Le système gère les états « Erreur » pour les étapes individuelles.
• L’indicateur est placé de manière cohérente sur toutes les étapes du flux.