Modale

Lorsqu'ouverte, la fenêtre de dialogue modale se superpose au contenu de la page et devient le focus principal. Elle peut contenir des contenus très variés : du texte, des images, un bref formulaire, une notification, un texte légal, etc.

Il existe deux variations de la modale :

Modale courte

Ce variant est utilisé pour un contenu court, comme une notification ou un contenu complémentaire (avec ou sans appel à l'action). Le variant court ne comporte pas de champ de saisie.

Modale longue

Ce variant est utilisé pour un contenu plus long et lorsqu'une image ou des champs de saisie sont présents. C'est dans ce variant qu'une barre de défilement pourrait apparaître. Auquel cas, il sera important de prévoir un lien supplémentaire de fermeture de la modale au bas de celle-ci, puisqu'il n'est pas souhaitable d'obliger l'utilisateur à redéfiler vers le haut pour atteindre le X de fermeture.

Principales règles d'utilisation

• L'ouverture de la modale doit toujours être déclenchée par une action de l’utilisateur.
• Tant que la modale reste ouverte, l'utilisateur ne peut plus interagir avec la page en-dessous qui devient visuellement obscurcie.
• Une modale ne peut pas en appeler une autre. Il n'est donc pas permis d'empiler ou d'imbriquer des modales.
• À l'achèvement de l'action ou à la fermeture de la modale, l'utilisateur revient toujours à la page d'où la modale a été appelée, jamais sur une autre page.
• L'utilisateur peut fermer la modale en cliquant sur l'icône X de fermeture (toujours présent), en cliquant sur un bouton d'annulation ou de fermeture à la fin de la modale (optionnel), en cliquant sur la page obscurcie à l'extérieur de la modale ou en appuyant sur la touche ÉCHAP/ESC du clavier.

La modale sert :

• quand on souhaite offrir à l'utilisateur une information ou une fonctionnalité complémentaire et contextuelle à une action qu'il a initiée ;
• lorsqu'une confirmation ou un choix de l'utilisateur est requis pour initier une action ;
• quand une action initiée par l'utilisateur affecte la page sur laquelle il se trouve ;
• quand une action que l’utilisateur s’apprête à faire est irréversible.

• Lorsque l'interruption causée par la modale risque de nuire à l'expérience utilisateur ou que l'information à transmettre est importante, mieux vaut mettre le contenu directement dans la page.
• Pour présenter un message d'erreur à l'utilisateur, opter plutôt pour l'avis.

• La rédaction du contenu de la modale doit être claire, concise et utiliser un langage simple et inclusif.
• Éviter de mettre trop d'information dans la modale.
• Attention au libellé de l'élément interactif qui fait ouvrir la modale : il doit clairement indiquer la destination à l'utilisateur et ne pas être déroutant.