Steppers (Pas à pas)

Les indicateurs de progression représentent visuellement l’avancement d’un parcours utilisateur en plusieurs étapes. Ils guident l’utilisateur à travers un certain nombre de paliers afin de mener à bien un processus spécifié. L’utilisateur est informé sur le sujet et la densité globale du parcours. Les différentes étapes le rendre plus digeste. L’objectif de ce composant est de réduire le taux d’abandon des tunnels.

Usage

• L’utilisateur est guidé lors de l’exécution d’une tâche spécifique. L’exhaustivité augmente à mesure que chaque étape est terminée.
• Dans certains formulaires, l’utilisateur est autorisé à revenir aux étapes précédentes pour vérifier ou modifier les données renseignées. Ensuite, il doit valider chaque étape préremplie ou modifiée.
• Cependant, l’utilisateur ne peut pas accéder aux étapes suivantes sans avoir validé l’étape en cours.
• Les indicateurs de progression affichent l’avancée d’une séquence en la divisant en plusieurs étapes numérotées.
• Les étapes sont affichées dans un ordre logique de gauche à droite.
• La mise en avant de l’étape en cours aide l’utilisateur à savoir où il se situe dans le tunnel.
• La dernière étape est symbolisée par le numéro de l’étape. Le concepteur peut le remplacer par un check.
• Sur mobile, il n’y a pas de libellés.
• Sur desktop, des libellés accompagnent les positions. Ils définissent des attentes claires pour l’utilisateur.

Bonnes pratiques

• Chaque étape présente au minimum une action de la part de l’utilisateur. Une simple information ne nécessite pas d’étape dédiée notamment en fin de formulaire.
• Les libellés qui accompagnent l’indicateur de progression sont claires, concises et courtes (2-3 mots maximums).
• Utilisez 3 étapes minimum. Un stepper n’est pas nécessaire pour 1 ou 2 étapes.
• Utilisez 5 étapes maximum. Au-delà de ce nombre, le parcours utilisateur mérite d’être optimisé.
• Évitez d’utiliser plusieurs steppers sur une même page.

Style & code

Indicateur de progression basique

Un indicateur de progression est en fait une simple liste ordonnée (<ol>) redessinée et imbriquée dans une balise <nav>. Il peut être composé de 3, 4 ou 5 étapes, sa couleur peut dépendre du thème du site ou d’un sous-thème (comme Abonnement) et avoir au choix un chiffre ou une coche en étape finale validée.

En principe, cet indicateur de progression est cliquable sur les étapes déjà remplies par l’utilisateur pour lui permettre de revenir en arrière. Cette version basique est une version plus simple, non cliquable, à utiliser uniquement s’il vous est impossible techniquement d’offrir le retour en arrière à vos utilisateurs.

Ensuite, pour afficher correctement ce composant, il faut la classe su-stepper sur la <nav>, une classe su-stepper-step sur chaque étape, et la classe su-enabled sur l’étape en court.

À 3 étapes

<nav class="su-stepper" aria-label="Étapes du formulaire">
    <ol>
        <li class="su-stepper-step">
            <div>
                <span>Étape 1</span>
            </div>
        </li>
        <li class="su-stepper-step">
            <div>
                <span>Étape 2</span>
            </div>
        </li>
        <li class="su-stepper-step su-enabled">
            <div>
                <span>Étape 3</span>
            </div>
        </li>
    </ol>
</nav>

À 5 étapes

<nav class="su-stepper" aria-label="Étapes du formulaire">
    <ol>
        <li class="su-stepper-step">
            <div>
                <span>Étape 1</span>
            </div>
        </li>
        <li class="su-stepper-step">
            <div>
                <span>Étape 2</span>
            </div>
        </li>
        <li class="su-stepper-step su-enabled">
            <div>
                <span>Étape 3</span>
            </div>
        </li>
        <li class="su-stepper-step">
            <div>
                <span>Étape 4</span>
            </div>
        </li>
        <li class="su-stepper-step">
            <div>
                <span>Étape 5</span>
            </div>
        </li>
    </ol>
</nav>

Dans un sous-thème

Un stepper peut s’adapter à un sous-thème. À ce jour seul le sous-thème Abonnement est pris en charge avec la classe su-subscription sur le <ol>.

<nav  class="su-stepper su-subscription" aria-label="Étapes du formulaire">
    <ol>
        <li class="su-stepper-step">
            <div>
                <span>Étape 1</span>
            </div>
        </li>
        <li class="su-stepper-step">
            <div>
                <span>Étape 2</span>
            </div>
        </li>
        <li class="su-stepper-step su-enabled">
            <div>
                <span>Étape 3</span>
            </div>
        </li>
    </ol>
</nav>

Variation avec une coche finale

Par défaut, la dernière étape, une fois active, se comporte comme les autres : elle change de couleur. Il est toutefois possible de remplacer le chiffre par une coche (✓) lorsque cette dernière étape correspond à une confirmation finale. Pour cela, il suffit de rajouter la classe su-check sur le <ol>. Cette coche n’est visible que lorsque cette dernière étape est atteinte.

<nav class="su-stepper su-check" aria-label="Étapes du formulaire">
    <ol>
        <li class="su-stepper-step">
            <div>
                <span>Étape 1</span>
            </div>
        </li>
        <li class="su-stepper-step">
            <div>
                <span>Étape 2</span>
            </div>
        </li>
        <li class="su-stepper-step su-enabled">
            <div>
                <span>Étape 3</span>
            </div>
        </li>
    </ol>
</nav>

Indicateur de progression complet (cliquable)

Il s’agit ici de la version complète avec retour possible aux étapes précédentes dans le tunnel d’actions. Il pourrait exister 2 façons de faire ce genre de composant en fonction des contraintes techniques :

• Soit on a toutes les étapes présentes dans la page et le composant se contente d’afficher/masquer le contenu idoine
• Soit on a les étapes sur des URL différents et le composant permet de changer de page quand on veut revenir en arrière.

Aujourd’hui seule la seconde version est proposée par SipaUI.

Version statique via changement d’URL

Il faut ajouter la classe su-stepper-nav avec su-stepper pour activer le « hover », ainsi qu’un lien (<a href="">) portant la classe su-step-back. Il faudra bien sûr déplacer la classe su-enabled d’étape en étape sur chaque pages.

<nav class="su-stepper su-stepper-nav" aria-label="Étapes du formulaire">
    <ol>
        <li class="su-stepper-step">
            <div>
                <span>
                    <a href="url/de/etape1" class="su-step-back">Retour à --nom de l’étape 1--</a>
                    Étape 1
                </span>
            </div>
        </li>
        <li class="su-stepper-step">
            <div>
                <span>
                    <a href="url/de/etape2" class="su-step-back">Retour à --nom de l’étape 2--</a>
                    Étape 2
                </span>
            </div>
        </li>
        <li class="su-stepper-step su-enabled">
            <div>
                <span>
                    <a href="url/de/etape3" class="su-step-back">Retour à --nom de l’étape 3--</a>
                    Étape 3
                </span>
            </div>
        </li>
        <li class="su-stepper-step">
            <div>
                <span>
                    <a href="url/de/etape4" class="su-step-back">Retour à --nom de l’étape 4--</a>
                    Étape 4
                </span>
            </div>
        </li>
    </ol>
</nav>
<div>
    <h2>Etape 3</h2>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>

Accessibilité

Pour rendre un stepper accessible il faut donner le rôle de cet élément (c’est à dire : la navigation) et préciser le contexte. Pour le rôle, c’est assuré par la présence de la balise <nav>. Pour le contexte, il faut utiliser l’attribut aria-label="Context à préciser".