Indicateur d'étape

Passer à la directive principale


        
        
            <!-- Default -->
<div class="ontario-step-indicator">
    <div class="ontario-row">
        <div class="ontario-columns ontario-small-12">
            <div class="ontario-step-indicator--without-back-button">
                <span class="ontario-h4">Étape&nbsp;1 sur&nbsp;5</span>
            </div>
            <hr />
        </div>
    </div>
</div>


        
            <!-- Indicateur des étapes après 1 (avec bouton Retour) -->
<div class="ontario-step-indicator">
    <div class="ontario-row">
        <div class="ontario-columns ontario-small-12">
            <div class="ontario-step-indicator--with-back-button">
                <button class="ontario-button ontario-button--tertiary">
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-left"></use>
                    </svg>Retour
                </button>
                <span class="ontario-h4">Étape&nbsp;2 sur&nbsp;5</span>
            </div>
            <hr />
        </div>
    </div>
</div>

Contenu:


                                @use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;

$ontario-icon-size: 24px;

.ontario-step-indicator {
	margin-bottom: spacing.$spacing-7;
}

.ontario-step-indicator .ontario-step-indicator--without-back-button,
.ontario-step-indicator .ontario-step-indicator--with-back-button {
	display: flex;
	align-items: center;
}

.ontario-step-indicator .ontario-step-indicator--without-back-button {
	justify-content: flex-end;
}

.ontario-step-indicator .ontario-step-indicator--with-back-button {
	justify-content: space-between;
}

.ontario-step-indicator .ontario-h4 {
	margin: (spacing.$spacing-4 + math.div(spacing.$spacing-1, 2)) 0;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		margin: spacing.$spacing-4 0;
		text-align: right;
	}
}

/**
* Tertiary button defaults are overridden to achieve the mini-button specifications
* width is unset in small screen size to remove unnecessary space being added to the button
* min-width and max-width are set for small screen size to ensure the "back" button doesn't break and protrude into the text to the right
*/
.ontario-step-indicator .ontario-button.ontario-button--tertiary {
	display: flex;
	align-items: center;
	margin: spacing.$spacing-3 spacing.$spacing-0;
	padding-left: spacing.$spacing-2;
	padding-right: spacing.$spacing-4;
	min-width: spacing.$spacing-8;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		width: unset;
	}

	.ontario-icon {
		margin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;
		padding: spacing.$spacing-0;
		min-width: $ontario-icon-size;
		min-height: $ontario-icon-size;
	}
}

.ontario-step-indicator hr {
	padding: spacing.$spacing-0;
	margin: spacing.$spacing-0;
}

.ontario-step-indicator p {
	max-width: globalVariables.$standard-width;
}

URL: /components/raw/step-indicator/step-indicator.scss
Chemin du système de fichiers: fractal/components/components/form/step-indicator/step-indicator.scss
Taille: 2.1 KB

Contenu:


                                .ontario-step-indicator{margin-bottom:2.5rem}.ontario-step-indicator .ontario-step-indicator--without-back-button,.ontario-step-indicator .ontario-step-indicator--with-back-button{display:flex;align-items:center}.ontario-step-indicator .ontario-step-indicator--without-back-button{justify-content:flex-end}.ontario-step-indicator .ontario-step-indicator--with-back-button{justify-content:space-between}.ontario-step-indicator .ontario-h4{margin:1.125rem 0}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-h4{margin:1rem 0;text-align:right}}.ontario-step-indicator .ontario-button.ontario-button--tertiary{display:flex;align-items:center;margin:.75rem 0;padding-left:.5rem;padding-right:1rem;min-width:3rem}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-button.ontario-button--tertiary{width:unset}}.ontario-step-indicator .ontario-button.ontario-button--tertiary .ontario-icon{margin:0 .375rem 0 0;padding:0;min-width:24px;min-height:24px}.ontario-step-indicator hr{padding:0;margin:0}.ontario-step-indicator p{max-width:48rem}

URL: /components/raw/step-indicator/step-indicator.css
Chemin du système de fichiers: fractal/components/components/form/step-indicator/step-indicator.css
Taille: 1.1 KB

Principe directeur : Commencer simplement.

Quand utiliser cette composante

Les indicateurs d’étape d’un formulaire sont utilisés pour illustrer la progression. Ils sont utilisés dans des formulaires à étapes multiples qui comprennent plusieurs pages.

Utilisez-les lorsqu’un formulaire est linéaire et ne suit pas les principes de logique conditionnelle.

Pratiques exemplaires

À faire :

Équilibrer le nombre de questions et la longueur de chaque page dans le formulaire
- Limiter le nombre de questions sur chaque page afin d’éviter de surcharger l’utilisateur
- Regrouper les questions apparentées pour éviter qu’il y ait trop d’étapes dans le formulaire
- Effectuer des essais d’utilisabilité pour s’assurer que les questions se suivent logiquement et que les étapes sont cohérentes pour l’utilisateur
Intégrer les boutons « Retour » et « Suivant » pour passer d’une étape à l’autre
S’assurer que le bouton de retour du navigateur Web permet à l’utilisateur de revenir à l’étape précédente, sauf si l’utilisateur est à une étape qui ne peut être effectuée qu’une seule fois (comme soumettre un paiement)
Définir un en-tête unique h1 pour chaque page du formulaire. Cet en-tête doit porter sur l’information demandée sur la page actuelle
Étiqueter les boutons principaux afin d’indiquer clairement à quel endroit ces boutons mèneront l’utilisateur (par exemple « Continuer »)

Diagramme d'une page formulaire qui montre les positions de l'en-tête, l'étiquette d'étape, le bouton retour, le titre h1, le contenu du formulaire, et le bouton primaire pour avancer.

À ne pas faire :

Inclure des indicateurs du progrès supplémentaires, comme un pourcentage ou une durée
Créer des indicateurs d’étape emboîtés – les sections individuelles d’un formulaire à étapes multiples n’ont pas besoin d’indicateurs de progrès
Utiliser des accordéons ou d’autres éléments à afficher/masquer comme cadres pour les étapes ou les questions
Créer de longs formulaires à une seule page
Inclure le bouton « Annuler » sur chaque page du formulaire
Inclure un indicateur d’étape sur des pages où les utilisateurs ne saisissent pas de données (par exemple, des pages d’introduction ou des pages de confirmation)

Éviter d’utiliser les anciens indicateurs

Les indicateurs d’étape horizontaux qui montrent les étapes étiquetées étaient populaires au début de l’époque de la conception Web.

Ces types d’indicateurs ne sont plus recommandés pour les raisons suivantes :

Ils prennent trop d’espace
Ils ne s’affichent pas bien sur les écrans plus petits
Ils peuvent déranger certains utilisateurs ou créer de la confusion