Modales et notifications

Owned by MATHIEU Côté
May 08, 2023
4 min read

Les modales et les notifications permettent d'informer, de confirmer ou d'interrompre les actions de l'utilisateur. Les fenêtres modales sont des fenêtres qui apparaissent directement à l’intérieur de la fenêtre courante du navigateur, au-dessus de la page web qui les appelle.

 

Bannière en haut d'un formulaire, toast qui arrive du bas de l'écran et fenêtre modale qui se place au-dessus du contenu

 

Avantages

Inconvénients

  • Permet d'attirer l'attention de l'utilisateur sur un message important

  • Permettent faire une tâche secondaire sans quitter la tâche principale

  • Très forte visibilité, capte l'attention

  • Une modale est distincte du contenu principal, ce qui permet une plus grande liberté de mise en page

  • Évite le chargement d'une nouvelle page

  • Permet aux utilisateurs qui ont besoin de plus de détails d'y accéder sans déranger ceux qui n'en ont pas besoin

  • À utiliser pour des tâches critiques ou essentielles, sinon on ajoute de la friction à la tâche de l'utilisateur.

  • Les modales ne peuvent contenir beaucoup d'information.

  • La modale bloque partiellement ou complètement l'accès au contenu principal.

  • La fenêtre ne fait pas parti de l'historique de navigation même si elle peut avoir l'air d'une nouvelle page. Il y a donc une ambiguïté sur la fonction Précédente du navigateur ou de l'appareil.

  • Le contenu de la modale n'a pas son propre URL et ne sera pas référencé.

Déclinaisons

Bannières

Alias alerte, avertissement, bannière, banners, confirmation, callout, dialog, notification contextuelle

Éléments

Description et interactions

Couleur de fond

Selon la nature de l'avertissement : jaune, rouge, vert, gris

Texte

Environ 60 caractères, simple et clair

Action (facultatif)

Libellé, 2-3 mots maximum

Fermeture (facultatif)

Un bouton avec l'icône X

Ouvrir et fermer

  • À l'affichage de la modale, le focus se place sur l'action ou le bouton fermeture.

  • À la fermeture de la modale, le focus retourne à l'endroit du clic précédent ou au titre de la page en cours de lecture.

  • Le lecteur d'écran aria-live="polite" ?

Toast

Alias alerte, avertissement, dialog, notification, prompt, toaster, snackbar

Éléments

Description et interactions

Icône

Selon la nature de l'avertissement : confirmation, avertissement, erreur critique, information

Texte

Environ 60 caractères, simple et clair

Action (facultatif)

Libellé, 2-3 mots maximum. Cette action doit être disponible ailleurs dans la page.

Fermeture (facultatif)

Un bouton avec l'icône X

Ouvrir et fermer

  • Le toast se ferme après un certain délai. Un bon délai serait de garder le message affiché 5 secondes pour 60 caractères ou moins, plus 1 seconde en extra par tranche de 20 caractères. Le toast resterait donc minimum 5 secondes affiché.

  • À l'affichage du toast, le focus ne doit pas changer de position. Puisque c'est une alerte non intrusive, l'utilisateur doit pouvoir continuer à naviguer sans interruption.

  • À la navigation clavier, il est possible de naviguer jusqu'au toast pour le fermer, mais généralement, il va se fermer automatiquement suite à un certain délai.

  • À la fermeture de la modale, le focus se place au dernière endroit focusser.

  • Au lecteur d'écran, annoncer directement le contenu du toast.

Fenêtre modale

Alias lightbox, dialog, modal window, popup

Élément

Description et interactions

Titre de la modale (facultatif)

Environ 60 caractères, simple et clair

Contenu de la modale

Libre, sans limite caractères

Fermeture

Un bouton avec l'icône X

Fond cliquable

Un fond noir ou blanc semi-transparent qui est en fait un bouton pour fermer la modale

Touches

Actions

Tab

Lorsque la popin est affichée, déplace successivement le focus clavier vers chacun des éléments interactifs contenus dans la popin. Si le focus clavier est positionné au niveau du dernier élément interactif contenu dans la popin au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier élément interactif contenu dans la popin.

Maj +  Tab

Même comportement qu’avec la touche, mais cette fois dans l’ordre inverse de lecture. Si le focus clavier est positionné au niveau du premier élément interactif contenu dans la popin au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier élément interactif contenu dans la popin.

Esc

Lorsque la popin est affichée, ferme la popin et déplace le focus clavier sur l’élément interactif qui a déclenché l’ouverture de la popin.

Références

Dernières modifications

 

 

16/03/2022

Cette composante a été retravaillée dans le contexte de connexion au centre des membres / Mon espace. Voir Linda Hersant ou Olivier Taillon, designer interactifs.

Annexe

Exemples d'utilisations sur les plateformes de RC

Incitatif à la connexion sur Tou.TV