Presque tous les logiciels que vous utilisez finissent par placer une fenêtre sur votre chemin. Elle assombrit la page, s'installe au milieu de l'écran et refuse de vous laisser cliquer ailleurs tant que vous n'y avez pas répondu. Ce pattern porte un nom précis, et ce nom explique son comportement : c'est une modale.
Le mot est souvent employé à la légère : on parle de pop-up, de lightbox, d'overlay, de boîte de dialogue et de modale comme s'il s'agissait de synonymes. Ce n'est pas le cas, et cette différence est la chose la plus importante à comprendre sur ce pattern, car c'est elle qui rend une modale puissante quand elle est justifiée et exaspérante quand elle ne l'est pas.
Ce guide couvre la définition, l'origine du mot, les types de modale que vous construirez réellement, la comparaison avec les patterns voisins, les huit règles qui la rendent supportable, les exigences d'accessibilité, et les cas où le bon nombre de modales est zéro.
Points clés à retenir
- Une modale bloque. Sa propriété déterminante n'est ni sa forme ni son fond assombri : c'est le fait que le reste de l'interface est inutilisable tant que la modale n'a pas été traitée.
- « Pop-up » n'est pas un synonyme. Dans le langage courant, toute modale est une pop-up ; la plupart des pop-ups ne sont pas modales, car on peut continuer à travailler autour.
- Le coût, c'est l'interruption. Une modale consomme l'attention de l'utilisateur d'emblée : elle doit donc apporter quelque chose qui vaut plus que ce qu'il était en train de faire.
- Une modale, une mission. Dès qu'une modale a deux actions principales ou trois paragraphes d'explication, elle aurait dû être une page, une infobulle ou une notification.
- L'accessibilité n'est pas facultative. Piège à focus, fermeture avec Échap,
role="dialog", focus restitué. Une modale qu'on ne peut pas fermer au clavier enferme les gens. - La plupart des messages in-app ne devraient pas être des modales. Infobulles, hotspots, bannières et fils de notifications couvrent la majorité des cas pour une fraction du coût d'interruption.
Qu'est-ce qu'une modale ?
Modale : définition
Une modale est une fenêtre qui s'ouvre par-dessus la page en cours, recouvre ou assombrit ce qui se trouve derrière, et prend le contrôle de l'interface jusqu'à ce que la personne la traite. Tant qu'elle est ouverte, le contenu situé derrière ne peut être ni cliqué, ni fait défiler, ni atteint avec la touche Tab. Le nom décrit ce comportement plutôt que l'apparence : l'application est entrée dans un mode temporaire où une seule question peut recevoir une réponse.
Cette propriété unique, le blocage, est ce qui sépare une modale de tout ce qui peut apparaître par-dessus une page. Un bandeau de cookies que vous pouvez ignorer pendant votre lecture n'est pas modal. Une bulle de chat dans un coin n'est pas modale. Une infobulle qui pointe vers un bouton n'est pas modale. Une boîte de confirmation qui vous demande si vous voulez vraiment supprimer douze enregistrements est modale, car vous ne pouvez rien faire d'autre tant que vous n'avez pas répondu.
Il vaut donc mieux voir une modale comme un échange. Vous prenez de force l'attention de l'utilisateur et, en contrepartie, vous lui promettez que ce que vous lui montrez compte davantage que ce qu'il était en train de faire. La plupart des modales mal accueillies sont simplement des échanges dont la seconde moitié n'a jamais été vraie.
D'où vient le mot « modale »
Le terme est antérieur au web. Dans les logiciels de bureau, une interface pouvait être modale ou non modale. Une fenêtre non modale vous laissait continuer à travailler dans l'application principale pendant qu'elle restait ouverte : un panneau « Rechercher et remplacer », par exemple. Une fenêtre modale verrouillait l'application jusqu'à ce que vous la fermiez. Le mot vient de l'idée de « mode » : un état temporaire dans lequel les mêmes actions ont un sens différent de d'habitude.
C'est pourquoi les expressions fenêtre modale, boîte de dialogue modale et boîte modale désignent toutes la même chose. « Fenêtre » est un héritage des systèmes d'exploitation de bureau, où les boîtes de dialogue étaient réellement des fenêtres distinctes. Sur le web, la modale n'est qu'un élément positionné au-dessus de la page sur un fond assombri, mais le comportement qu'elle emprunte est identique.
Test rapide : si vous pouvez encore cliquer sur quelque chose derrière, ce n'est pas une modale. Il peut s'agir d'un popover, d'un toast, d'une bannière ou d'un panneau latéral : tous utiles, tous moins coûteux, et tous abordés plus bas.
L'anatomie d'une modale
Presque toutes les modales, quel que soit leur usage, sont construites à partir des six mêmes éléments. Connaître cette liste est utile, car la plupart des problèmes de modale s'avèrent être un élément manquant ou en double plutôt qu'un problème de design.
Les six éléments d'une modale. La plupart des problèmes de modale viennent d'un élément manquant, le plus souvent le bouton de fermeture ou l'action principale unique, plutôt que d'un problème de style.
Deux de ces six éléments méritent qu'on s'y arrête. Le bouton de fermeture doit exister même quand vous êtes certain que l'utilisateur devrait agir, car une modale sans issue est la source de frustration d'interface la plus souvent signalée. Et la rangée d'actions doit contenir exactement un bouton principal. Deux boutons principaux, ce n'est pas un choix, c'est un blocage.
Les 6 types de modale
Les modales se répartissent en un petit nombre de rôles bien identifiables. Le type détermine presque tout le reste : son degré d'insistance, la possibilité de l'afficher plus d'une fois, et même la question de savoir si elle mérite de bloquer l'interface.
-
Modale de bienvenue
La première chose qu'une personne voit après sa toute première connexion. Son rôle est d'orienter, pas de saluer : confirmer qui elle est, poser au maximum une question qui change la suite, et proposer une première action évidente. Proche d'un écran de bienvenue complet, qui peut occuper toute la fenêtre, mais distincte de lui.
-
Boîte de confirmation
La modale d'origine et la plus facile à défendre. Une action destructive ou irréversible est sur le point de se produire et le système veut un oui explicite. Nommez la conséquence dans le titre (« Supprimer 12 enregistrements ? » vaut mieux que « Êtes-vous sûr ? ») et libellez le bouton avec le verbe plutôt qu'avec « OK ».
-
Modale d'annonce
Sert à informer les utilisateurs existants qu'un changement a eu lieu. Justifiée pour les changements qui modifient la façon dont quelqu'un travaille ; injustifiée pour chaque nouvelle version. Dans le doute, l'information a plutôt sa place dans un fil ou une bannière ; consultez comment annoncer une nouvelle fonctionnalité pour choisir le bon canal.
-
Modale de formulaire ou de tâche
Une tâche courte et autonome sortie de la page : inviter un collègue, renommer un projet, choisir une offre. Pertinente quand la tâche compte moins de cinq champs environ et que le contexte de la page derrière est utile. Inadaptée quand elle se transforme en assistant : à ce stade, elle devrait être une page avec une URL à laquelle on peut revenir.
-
Modale média ou lightbox
Ouvre une image, une vidéo ou un document en plus grand par-dessus la page. Le type le moins controversé, puisque l'utilisateur l'a demandé en cliquant. La touche Échap et un bouton de fermeture visible comptent ici plus que partout ailleurs, car les gens l'ouvrent en s'attendant à pouvoir en ressortir immédiatement.
-
Modale d'étape de visite guidée
Une étape d'un parcours guidé trop importante pour être ancrée à un seul élément, en général les étapes d'ouverture et de clôture. Les étapes intermédiaires d'une bonne visite guidée sont plutôt des infobulles. Vous trouverez des exemples réels dans nos exemples de modales de visite produit.
Une modale de bienvenue qui fait vraiment son travail : une seule question dont la réponse change ce que l'utilisateur verra ensuite, plutôt qu'un paragraphe de présentation.
Modale, pop-up, infobulle, panneau latéral ou bannière
Les patterns voisins placent tous du contenu par-dessus une page. Ce qui les distingue, c'est la part d'attention qu'ils prennent à l'utilisateur et le fait de la prendre de force ou non. Le tableau est le moyen le plus rapide de choisir.
| Pattern | Bloque la page ? | Coût en attention | À utiliser quand |
|---|---|---|---|
| Modale | Oui, rien n'est cliquable derrière | Le plus élevé | La décision doit être prise maintenant, ou la tâche mérite une attention totale |
| Popover / menu déroulant | Non, se ferme quand on clique ailleurs | Faible | Détails ou options supplémentaires rattachés à un contrôle précis |
| Infobulle | Non | Très faible | Expliquer un élément, sur place, sans interrompre le flux |
| Panneau latéral / tiroir | Parfois, selon l'implémentation | Moyen | Contenu secondaire qui a besoin de place tout en gardant la page comme contexte |
| Bannière / barre de notification | Non | Faible, et de plus en plus faible avec le temps | Messages persistants et non urgents sur lesquels on peut agir plus tard |
| Toast | Non, disparaît de lui-même | Le plus faible | Confirmer que quelque chose vient de se produire |
La règle pratique qui découle de ce tableau : partez du bas et ne remontez que si vous y êtes obligé. La plupart des messages in-app livrés sous forme de modale auraient fonctionné en infobulle ou en bannière, et ceux livrés sous forme de bannière échouent souvent pour la raison inverse : les gens finissent par ne plus les voir, un problème traité dans notre article sur la cécité aux bannières.
Quand la modale est le bon pattern
Il existe quatre situations où interrompre est réellement le bon choix, et il vaut la peine d'être strict à leur sujet.
Supprimer, annuler, publier auprès d'un public, dépenser de l'argent. Le coût d'un clic accidentel dépasse celui de l'interruption.
Moins de cinq champs, autonome, et plus pratique avec la page derrière comme contexte que sur un écran séparé.
La première connexion, avant que le moindre travail n'ait commencé. Rien n'est encore interrompu, et c'est précisément pour cela que la modale de bienvenue est le seul message qui bénéficie d'un laissez-passer.
Il a cliqué sur la miniature, sur le bouton « Inviter », sur le lien d'aperçu. Une modale ouverte à la demande n'est pas une interruption du tout.
Une personne à mi-chemin d'un formulaire ou d'un parcours fermera la modale sans la lire, et en voudra un peu plus au produit qu'avant.
Webinaires, enquêtes, versions mineures et ventes additionnelles ont leur place dans un fil, une bannière ou un e-mail ; consultez notre article sur la messagerie in-app pour les alternatives.
Bonnes pratiques UX pour les modales : 8 règles
Aucune de ces règles n'est une question de style. Chacune découle d'une manière précise dont les modales tournent mal en production.
- Une modale, une mission
- Annoncez la conséquence dans le titre
- Prévoyez toujours une issue
- N'empilez jamais les modales
- Respectez une fermeture
- Surveillez la hauteur, pas seulement la largeur
- Repensez-la entièrement sur mobile
- Déclenchez-la selon le comportement, pas selon l'horloge
1. Une modale, une mission
Une modale doit poser une seule question ou accomplir une seule tâche. Le symptôme le plus clair d'une modale qui fait deux choses, ce sont deux boutons principaux, suivis de près par un titre relié par un « et ». Si vous ne pouvez pas écrire le titre en une seule phrase courte, le contenu devrait être une page.
2. Annoncez la conséquence dans le titre
« Êtes-vous sûr ? » n'apprend rien au lecteur qu'il ne savait déjà. « Supprimer cet espace de travail et ses 34 documents ? » lui permet de décider sans même lire le texte. Il en va de même pour les boutons : libellez-les avec le verbe (Supprimer, Publier, Inviter), jamais OK. Notre guide de la microcopie UX donne les formules pour les deux.
3. Prévoyez toujours une issue
Un bouton de fermeture visible, la touche Échap et un clic sur le fond assombri doivent tous fermer la modale. La seule exception légitime est une modale de confirmation destructive où le clic sur le fond est désactivé pour éviter les accidents, et même dans ce cas, la touche Échap et le bouton de fermeture restent en place.
4. N'empilez jamais les modales
Une modale qui en ouvre une autre produit deux fonds assombris, deux pièges à focus et un utilisateur qui ne sait plus du tout ce que fera chaque appui sur Échap. Si une modale a besoin d'une question de suivi, remplacez son contenu sur place et conservez un seul conteneur.
5. Respectez une fermeture
Si quelqu'un ferme une modale, c'est une réponse. La réafficher au chargement de page suivant transforme un léger agacement en raison de partir. Les modales d'onboarding en particulier doivent s'afficher une fois, puis plus jamais, sauf si la situation de l'utilisateur change réellement ; la logique correspondante est décrite dans notre article sur les déclencheurs d'onboarding.
6. Surveillez la hauteur, pas seulement la largeur
Les designers testent les modales sur de grands écrans. Sur un ordinateur portable avec une barre d'outils de navigateur, une modale qui défile en interne masque ses propres boutons d'action, et l'utilisateur ne voit pas ce sur quoi il est censé cliquer. Limitez la hauteur du contenu, faites défiler uniquement le corps et fixez la rangée d'actions.
7. Repensez-la entièrement sur mobile
Sur un téléphone, une boîte de dialogue centrée devient une prise de contrôle plein écran, que vous l'ayez conçue ainsi ou non. Faites-en un choix délibéré : pleine largeur, un véritable en-tête avec un bouton de fermeture placé à portée du pouce, et des actions empilées plutôt que côte à côte.
8. Déclenchez-la selon le comportement, pas selon l'horloge
« Afficher après 5 secondes » interrompt quiconque se trouve en train de lire à la cinquième seconde. Déclenchez plutôt les modales sur des événements significatifs : un état vide atteint, une fonctionnalité ouverte pour la première fois, une limite d'offre atteinte. Un déclenchement fondé sur le comportement est aussi ce qui empêche la même modale d'atteindre des utilisateurs qu'elle ne concerne pas, et c'est là que la segmentation des utilisateurs prouve toute son utilité.
Accessibilité des modales : les exigences non négociables
La modale est l'un des rares patterns capables d'enfermer réellement un utilisateur. Une personne qui navigue au clavier ou avec un lecteur d'écran peut se retrouver dans l'impossibilité d'atteindre le bouton de fermeture, ou de comprendre que la page derrière est devenue inerte. Les exigences sont courtes et méritent d'être traitées comme une checklist plutôt que comme une aspiration.
| Exigence | Ce que cela signifie en pratique |
|---|---|
| L'annoncer comme une boîte de dialogue | role="dialog" avec aria-modal="true" sur le conteneur |
| Lui donner un nom | aria-labelledby qui pointe vers l'élément de titre de la modale |
| Y placer le focus | À l'ouverture, placer le focus sur le titre ou sur le premier élément interactif, pas sur la page derrière |
| Piéger le focus | Tab et Maj+Tab circulent à l'intérieur de la modale et n'atteignent jamais l'arrière-plan |
| Restituer le focus à la fermeture | Le focus revient sur le contrôle qui a ouvert la modale, pour que l'utilisateur garde sa place |
| Fermer avec Échap | Toujours, à la seule exception d'une confirmation destructive en cours |
| Masquer l'arrière-plan | Marquer la page derrière comme inerte pour que les technologies d'assistance ne lisent pas à travers le fond assombri |
| Bloquer le défilement de l'arrière-plan | Faire défiler la page derrière une modale est déroutant sur ordinateur et cassé sur mobile |
Si vous concevez un onboarding qui doit satisfaire à des exigences d'accessibilité formelles, les règles plus larges (contraste, animations, délais, utilisation au clavier dans les visites guidées et les checklists) sont détaillées dans notre guide de l'onboarding accessible.
Modales : à faire et à éviter
À faire
- Formuler le titre comme la conséquence, pas comme une question sur votre certitude
- Garder exactement une action principale et une option discrète pour fermer
- Déclencher selon le comportement : un événement, un état, une limite atteinte
- Afficher les modales d'onboarding une seule fois, puis faire confiance à l'utilisateur
- Concevoir délibérément la version mobile comme une feuille plein écran
- Tester l'ensemble au clavier avant la mise en production
À éviter
- Interrompre quelqu'un au milieu d'un formulaire ou d'un parcours
- Empiler une deuxième modale par-dessus la première
- Masquer le bouton de fermeture pour forcer une décision
- Utiliser une modale pour une actualité qui pourrait figurer dans un fil
- Laisser le contenu défiler au-delà des boutons d'action
- Réafficher une modale qui a déjà été fermée
Comment créer des modales sans code avec Kompassify
La plupart des modales dont un produit a besoin après son lancement ne sont pas des fonctionnalités du produit : ce sont des messages. Une modale de bienvenue pour un nouveau segment, une annonce pour un changement qui modifie la façon de travailler de quelqu'un, l'étape d'ouverture d'un parcours guidé. Devoir construire chacune comme un composant, la livrer dans une version et la retirer dans une autre explique pourquoi tant d'entre elles ne voient jamais le jour, et pourquoi celles qui existent restent en ligne bien après avoir cessé d'être pertinentes.
Kompassify sort cette couche de la base de code. Vous construisez la modale visuellement, décidez qui la voit grâce à des règles de segmentation, la déclenchez sur un véritable événement plutôt que sur une minuterie, et la paramétrez pour qu'elle ne s'affiche qu'une fois. Chaque modale indique combien de personnes l'ont vue, fermée et ont agi, si bien que la décision de la garder ou de la supprimer repose sur des données plutôt que sur la mémoire de celui qui se souvient de son existence. Le même éditeur couvre les patterns moins coûteux (infobulles, hotspots, checklists, annonces in-app), ce qui compte, car la réponse honnête à « faut-il en faire une modale ? » est généralement non.
Une modale d'annonce créée sans nouvelle version du produit. Comme elle vit en dehors de la base de code, la retirer se fait d'un simple interrupteur plutôt que par un ticket.
Créez votre première modale, sans ticket pour l'équipe technique
Kompassify permet aux équipes produit, onboarding et customer success de créer visuellement des modales, des infobulles, des checklists et des annonces in-app, de les cibler par segment et par comportement, et de mesurer l'effet de chacune. Gratuit jusqu'à 100 utilisateurs actifs mensuels, offres à partir de 129 $/mois, conforme au RGPD et hébergé dans l'UE.
Commencer gratuitement →La version en une phrase
Une modale est une fenêtre qui met tout le reste en pause jusqu'à ce qu'on lui réponde, ce qui en fait le pattern le plus puissant dont vous disposez, le plus coûteux que vous puissiez dépenser, et la mauvaise réponse à la plupart des questions pour lesquelles on l'utilise.
Questions fréquentes
Qu'est-ce qu'une modale ?
Une modale est une fenêtre qui s'ouvre par-dessus la page en cours, assombrit ou recouvre ce qui se trouve derrière, et prend le contrôle de l'interface jusqu'à ce que la personne la traite. Tant qu'elle est ouverte, le reste de la page ne peut être ni cliqué, ni fait défiler, ni atteint avec la touche Tab. Le mot décrit ce comportement et non l'apparence : une modale fait entrer l'application dans un mode temporaire où une seule question peut recevoir une réponse. C'est pourquoi une boîte de confirmation, une fenêtre de bienvenue à la première connexion et une invitation plein écran à passer à l'offre supérieure sont toutes des modales, même si elles ne se ressemblent pas du tout.
Quelle est la différence entre une modale et une pop-up ?
Pop-up est un mot familier et assez flou qui désigne tout ce qui apparaît par-dessus une page, y compris les fenêtres de navigateur ouvertes par script, les bandeaux de cookies, les bulles de chat et les publicités. Modale est un terme technique précis : le contenu bloque toute interaction avec ce qui se trouve derrière lui jusqu'à ce qu'il soit fermé. Toute modale peut être qualifiée de pop-up, mais la plupart des éléments que l'on appelle pop-ups ne sont pas modaux, car on peut continuer à utiliser la page autour. Dans le travail produit, la distinction compte parce que bloquer l'interface est ce qui coûte cher, et cela doit se justifier.
Qu'est-ce qu'une fenêtre modale en conception web ?
Une fenêtre modale est l'élément visible lui-même : un panneau, généralement centré, posé sur un fond assombri qui recouvre la page. Dans le balisage, il s'agit normalement d'un conteneur avec role="dialog" et aria-modal="true", d'un nom accessible tiré de son titre, d'un piège à focus qui garde le focus clavier à l'intérieur, et d'un bouton de fermeture. Fenêtre modale, boîte de dialogue modale et boîte modale désignent toutes le même pattern ; le mot fenêtre est simplement emprunté aux logiciels de bureau, où les boîtes de dialogue étaient réellement des fenêtres distinctes du système d'exploitation.
Les modales sont-elles une mauvaise pratique UX ?
Les modales ne sont pas mauvaises par nature ; elles coûtent cher. Interrompre quelqu'un se justifie quand le message est réellement plus important que ce qu'il était en train de faire : une action destructive à confirmer, une tâche courte et ciblée, ou un accueil à la première utilisation qui prépare le reste de la session. Cela devient une mauvaise UX quand l'interruption sert l'entreprise plutôt que l'utilisateur, quand elle se déclenche en pleine tâche, quand elle réapparaît après avoir été fermée, ou quand le contenu aurait pu être une infobulle, une bannière ou une entrée dans un fil de notifications.
Qu'est-ce qu'une modale de bienvenue ?
Une modale de bienvenue est la modale affichée la première fois qu'une personne se connecte à un produit. Son rôle n'est pas de dire bonjour mais d'orienter : confirmer que la personne est au bon endroit, poser au maximum une ou deux questions qui changent ce qu'elle verra ensuite, et lui proposer une seule action évidente, comme lancer une courte visite guidée ou créer son premier élément. Elle doit apparaître une seule fois, pouvoir être fermée sans pénalité, et ne jamais servir de conteneur pour une liste de fonctionnalités que personne n'a demandée.
Comment rendre une modale accessible ?
Donnez au conteneur role="dialog" et aria-modal="true", nommez-le à partir de son titre via aria-labelledby, placez le focus clavier dans la modale à son ouverture et renvoyez-le à l'élément déclencheur à sa fermeture, piégez Tab et Maj+Tab à l'intérieur pour que le focus ne puisse pas s'égarer derrière le fond assombri, fermez-la avec la touche Échap, masquez l'arrière-plan aux technologies d'assistance et bloquez le défilement de l'arrière-plan. Une modale qu'on ne peut pas fermer au clavier n'est pas seulement maladroite : elle enferme certains utilisateurs sur la page.