Indicateur d'étape

Utiliser un indicateur d’étape pour illustrer le progrès de l’utilisateur au fur et à mesure qu’il remplit le formulaire à étapes multiples.

  • Contenu:
    @use 'sass:math';
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    
    $ontario-icon-size: 24px;
    
    .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 .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 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 »)

Exemple


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
Capture d'écran d'un indicateur d'étape avec quatre étapes, rayée pour montrer que cette approche n'est pas recommandée.

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.