À retenir
- Elle bloque toute interaction avec le reste du site ou du logiciel.
- Elle oblige l'utilisateur à prendre une décision immédiate ou à prendre connaissance d'une info.
- Elle doit être utilisée avec parcimonie pour ne pas frustrer l'utilisateur.
Une fenêtre modale est un élément d'interface qui surgit au-dessus du contenu principal et interrompt l'activité de l'utilisateur. Tant qu'elle est ouverte, elle bloque l'accès au reste de l'application, forçant ainsi l'utilisateur à effectuer une action spécifique ou à la fermer pour continuer. C'est un peu comme un guichet qui fermerait tous les autres accès tant que vous n'avez pas rempli votre formulaire.
Étymologie
Le terme vient du mot « mode ». En informatique, il indique que le logiciel entre dans un état de fonctionnement spécifique (un mode) qui limite les interactions possibles à la seule fenêtre active. Le mot « fenêtre » fait référence à la métaphore classique du bureau informatique.
Exemples d'usage
- Une demande de confirmation avant de vider définitivement une corbeille.
- Une fenêtre de connexion qui s'affiche par-dessus la page actuelle.
- Une alerte de sécurité informant d'une erreur critique nécessitant une lecture immédiate.
Cas d'usage
On l'utilise principalement pour attirer l'attention sur une information cruciale, demander une validation irréversible (suppression), ou simplifier un processus de saisie sans changer de page. Elle intervient massivement dans le développement web et la conception d'applications mobiles.
Bonnes pratiques
Il est crucial de toujours offrir une porte de sortie claire : une croix de fermeture visible, la gestion de la touche Échap et, idéalement, la fermeture lors d'un clic en dehors de la fenêtre. L'arrière-plan doit être visuellement assombri (overlay) pour aider l'utilisateur à se concentrer sur la modale.
Synonymes
Antonymes
Conseil
Si vous débutez en design d'interface, évitez d'enchaîner les fenêtres modales les unes sur les autres. Cela désoriente l'utilisateur. Réservez cet outil aux moments où l'interruption du flux de travail est réellement justifiée.
Questions fréquentes
Quelle est la différence avec un popup classique ?
Un popup est souvent une nouvelle fenêtre de navigateur indépendante, alors qu'une modale est un composant interne de la page qui paralyse son utilisation.
Est-ce bon pour l'accessibilité ?
Seulement si elle est bien codée : le focus du clavier doit rester emprisonné dans la fenêtre tant qu'elle est ouverte pour aider les utilisateurs de lecteurs d'écran.