Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Fenêtre modale (*Modal*)

Fenêtre modale (*Modal*)

Composant
Définition

Fenêtre superposée au contenu principal qui bloque toute interaction avec la page en arrière-plan. L'utilisateur doit interagir avec la modale (confirmer, annuler, fermer) avant de revenir au contenu. Un overlay semi-transparent couvre la page pour signaler le changement de contexte. La modale se distingue du dialogue non-modal qui permet de continuer à interagir avec la page. C'est l'un des composants les plus surutilisés du web : beaucoup de modales devraient être des pages.

En pratique

Réserver la modale aux actions qui requièrent une confirmation immédiate ou une saisie brve. La fermeture doit être possible via le bouton X, la touche Échap et le clic sur l'overlay. Le focus doit être piégé dans la modale (focus trap) pour l'accessibilité. Les modales imbriquées sont un anti-pattern. Sur mobile, une modale qui couvre tout l'écran est souvent préférable à un petit dialogue centré.

Exemple

Gmail affiche une modale de confirmation quand l'utilisateur tente d'envoyer un email mentionnant une pièce jointe sans l'avoir attachée. La modale pose une question binaire avec deux boutons clairement libellés.

Voir aussi
Accessibilité (*Accessibility*)
Charge cognitive (*Cognitive Load*)
Droit à l'erreur (*Error Tolerance*)
ARIA (*Accessible Rich Internet Applications*)
Sources
Modal Dialogs - Nielsen Norman Group
Dialog Pattern - WAI-ARIA
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.