Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Bouton Retour

Utilisez le bouton Retour pour aider les utilisateurs à revenir à la page précédente dans un formulaire ou une application à plusieurs pages.

  • Contenu: 
    @use 'sass:math';
@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;

/**
* 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-button.ontario-button--tertiary {
	display: flex;
	align-items: center;
	margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-4;
	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;
	}
}
  • URL: /components/raw/back-button/back-button.scss
  • Chemin du système de fichiers: fractal/components/components/navigation/back-button/back-button.scss
  • Taille: 1.2 KB
  • Contenu: 
    .ontario-button.ontario-button--tertiary{display:flex;align-items:center;margin:.75rem 0 1rem;padding-left:.5rem;padding-right:1rem;min-width:3rem}@media screen and (max-width: 40em){.ontario-button.ontario-button--tertiary{width:unset}}.ontario-button.ontario-button--tertiary .ontario-icon{margin:0 .375rem 0 0;padding:0;min-width:24px;min-height:24px}
  • URL: /components/raw/back-button/back-button.css
  • Chemin du système de fichiers: fractal/components/components/navigation/back-button/back-button.css
  • Taille: 354 Bytes

Sur cette page

Skip this page navigation

Quand utiliser cette composante

Utilisez le bouton Retour pour revenir à la page précédente dans les formulaires ou demandes à plusieurs étapes. Pour les formulaires plus longs dans lesquels vous devez afficher une progression ou des étapes, utilisez la composante indicateur d’étape, qui intègre un bouton Retour.

Quand ne pas utiliser cette composante

Il n’est pas recommandé d’utiliser le bouton Retour sur les pages qui ont plus d’un point d’entrée.

Si un utilisateur peut arriver à la page par différents chemins, n’utilisez pas de bouton Retour, car vous ne saurez pas d’où il vient.

Par exemple, un utilisateur peut arriver d’un moteur de recherche ou d’une page de renvoi externe. Il pourrait penser que le bouton Retour le ramènera au moteur de recherche.

Envisagez d’utiliser une piste de navigation dans ces cas-là. N’utilisez pas à la fois une piste de navigation et un bouton Retour. Si nécessaire, effectuez des recherches auprès de vos utilisateurs pour savoir lequel d’entre eux trouve le plus d’utilité dans votre service.

Meilleures pratiques

À faire

  • Sur les transactions ou les formulaires, placez le bouton Retour en haut de la page après l’en-tête

À faire

Illustration d’un formulaire Web avec un bouton Retour placé au-dessus des autres éléments du formulaire.

À éviter

Illustration d’un formulaire Web avec un bouton Retour placé à côté du bouton principal.
  • Veillez à ce que le bouton Retour ramène les utilisateurs à la page précédente, dans l’état où ils l’ont vue pour la dernière fois.
  • Envisagez d’utiliser un texte de bouton différent pour les parcours utilisateurs complexes, comme « Retourner à [titre de page spécifique] », afin que les utilisateurs sachent clairement où ils seront redirigés.

À éviter

  • Évitez d’utiliser le bouton Retour sur les pages ou les formulaires qui ont plus d’un point d’entrée.
  • Évitez d’utiliser le bouton Retour en même temps que la piste de navigation.
  • Évitez de créer comportements inattendus pour le flux de l’utilisateur lorsqu’il interagit avec le bouton Retour.

Spécifications techniques

Il existe plusieurs façons de coder le bouton Retour. La solution dépendra du flux de votre application :

  • un lien retour JavaScript (par exemple, en utilisant <window.history.back();>) pour appeler la page précédente dans l’historique du navigateur
  • les fonctions de l’Historique API (utiles pour les applications à page unique)
  • une URL spécifique qui représente l’état précédent de l’expérience de l’utilisateur dans l’application

Comportements inattendus

Lorsque vous décidez de coder le bouton Retour, réfléchissez à la manière dont des comportements inattendus peuvent interrompre le flux de l’utilisateur.

L’état précédent sur la même page

Si l’utilisateur interagit avec un élément de la page qui modifie l’historique du navigateur (comme les onglets ou les liens dans la page), le bouton Retour doit ramener l’utilisateur à la page précédente, et non à un état antérieur de la même page.

Sortie inattendue du service

Le bouton Retour doit permettre à l’utilisateur de revenir au point précédent du service, et non d’en sortir.

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