Dialogue modal

Le dialogue modal est une boîte qui se superpose au contenu de la page, en plein centre, à la suite d’une action déclenchée directement par l’utilisateur. Il sert à communiquer de l’information contextuelle.

Lorsque le dialogue modal est activé, l’arrière-plan de la page devient plus sombre pour qu’il soit en évidence.

Exemple


Quand l'utiliser

Le dialogue modal est utilisé pour attirer l’attention de l’utilisateur sur des informations contextuelles à la tâche (par exemple, confirmer ou non la suppression d’un compte) ou pour demander des informations à l’utilisateur (par exemple, les informations de connexion à un compte).

On l’utilise seulement lorsque l’information communiquée est essentielle puisque son apparition peut distraire ou même perturber le cheminement de l’utilisateur. Il est préférable de limiter l’utilisation du dialogue modal, car il peut être perçu comme étant du bruit visuel plutôt qu’une boîte communiquant de l’information.

Il existe 3 types de dialogue modal.

Dialogue d’alerte

Il apparaît lorsqu’une action immédiate est requise. Le dialogue d’alerte contient un message ainsi qu’un ou plusieurs boutons d’action. 

Dialogue de confirmation

Contrairement au dialogue d’alerte, le dialogue de confirmation n’est pas de nature urgente. Il offre un retour d’information à l’utilisateur, lui permettant de confirmer ou non la réussite de la tâche effectuée. Ce type de dialogue peut inclure des champs de formulaire, mais ne doit pas remplacer un formulaire complet. Par exemple, il peut servir à renommer le nom d’un dossier et à le sauvegarder. 

Dialogue d’action

Le dialogue d’action sert à effectuer une courte tâche contextuelle, par exemple la création d’un nouvel événement au calendrier, et requiert la complétion de 1 à 4 champs de formulaire. 

Comment l'utiliser

Peu importe le type de dialogue utilisé, les critères suivants doivent être respectés:

  • Le dialogue demeure affiché jusqu’à ce que l’utilisateur prenne une décision.
  • Il n’apparaît jamais par défaut. Il est uniquement déclenché par une action de l’utilisateur.
  • L’information contenue dans le dialogue doit être claire et concise. Un dialogue n’est pas une page de contenu. Ne pas dépasser l’équivalent de 3 phrases.
  • Ne pas insérer de données complexes, d’images ni de tableaux.
     

Idéalement, un dialogue modal ne devrait pas comporter de barre de défilement. Cette option est ajoutée seulement en cas de nécessité et la barre de défilement doit être désactivée de la page en arrière-plan pour éviter tout conflit. 

Informations techniques

La hauteur et la largeur du dialogue modal sont variables en fonction du contenu et du support. La largeur maximum est cependant de 600 px.  

Des marges intérieures de 32 px de chaque côté sépare le contenu des bords de la fenêtre modale. Le bouton «X» de fermeture est à une distance de 16 px horizontalement et verticalement du bord.

Le dialogue modal comprend toujours un titre de niveau 4. Le dégagement entre le titre et le contenu est de 24 px. 

Dans un dialogue d’action ou de confirmation, le dégagement entre la fin du contenu et les boutons d’actions est de 24 px. 

Pour les espacements et les caractéristiques entre les différents styles de contenu présents dans le dialogue d’action, référez vous à leur fiche respective.

Mobile

Toutes les caractéristiques restent les mêmes au format mobile. 

Si le libellé d’un bouton d’action est trop long, il est possible de superposer les boutons. Le bouton d’action principal est toujours en haut, et le bouton secondaire ou tertiaire se situe sous ce dernier.

Exemple


CSS de la boîte
background-color: #FFFFFF

CSS du contenu
font-family: Open Sans
font-weight: regular
font-size: 16px
color: #223654
 

CSS de l’icône de fermeture
color: #095797

CSS du titre
font-family: Roboto
font-weight: bold
font-size: 24px
color: #223654

Dernière mise à jour : 12 août 2021