Modale vs drawer : lequel choisir, et quand le popover ?

Modale, drawer, popover : de quoi parle-t-on ?

Ces trois composants d'interface affichent du contenu au-dessus de la page. Ils ne servent pourtant pas à la même chose. Leur différence tient à une question simple : à quel point faut-il interrompre le visiteur ? Les équipes produit résument souvent le débat en « modal vs drawer », le popover venant compléter le trio.

Choisir le bon composant relève de l'expérience utilisateur. Un mauvais choix ne casse pas le site. Il le rend pénible : formulaires abandonnés, clics perdus, visiteurs qui ferment tout. Sur un site qui doit vendre ou générer des contacts, ces petites frictions finissent par coûter.

Le critère qui tranche : le niveau d'interruption

• Modale : interruption forte, le reste de la page est bloqué.
• Drawer : interruption moyenne, la page reste visible derrière le panneau.
• Popover : interruption faible, le visiteur continue sa navigation.

La modale : obtenir une décision

Une modale (modal en anglais) est une fenêtre qui s'ouvre au centre de l'écran. Un voile sombre, appelé overlay, recouvre la page et la rend inactive. Le visiteur doit agir dans la fenêtre ou la fermer avant de revenir au reste. Le message est clair : arrêtez-vous, ceci compte.

Ce blocage fait sa force. Il garantit l'attention pour une décision courte. Il devient gênant dès que la tâche demande de consulter la page cachée derrière la fenêtre.

Quand utiliser une modale

• Confirmer une action irréversible : supprimer un compte, annuler une commande.
• Signaler une erreur qui empêche de continuer.
• Recueillir une saisie très courte, comme une adresse email.
• Imposer un choix obligatoire avant d'aller plus loin.

Ses limites

Une modale qui s'ouvre au chargement, sans demande, agace vite. Elle masque le contenu que le visiteur venait chercher. Sur mobile, une grande fenêtre avec un long formulaire devient difficile à faire défiler. Elle impose aussi un vrai travail d'accessibilité : le focus clavier doit rester dans la fenêtre jusqu'à sa fermeture, puis revenir au bouton d'origine. Les critères du RGAA couvrent précisément ces points.

• Usage : décision rapide, confirmation, alerte bloquante.
• Prise en main : immédiate pour le visiteur, qui comprend qu'il doit agir.
• Limites : masque la page, gênante si elle est imposée, exigeante en accessibilité.
• Pour qui : toute interface où une erreur de clic aurait des conséquences.

Le drawer : travailler sans perdre le contexte

Le drawer, ou panneau latéral, glisse depuis un bord de l'écran : à gauche, à droite, parfois en bas sur mobile. On parle aussi de side panel. Il occupe une partie de l'espace et laisse la page visible derrière lui. Le visiteur garde ainsi ses repères.

C'est l'outil idéal pour consulter ou éditer un élément d'une liste. Dans un back office, un clic sur une commande ouvre son détail à droite. On modifie, on enregistre, on passe à la suivante. Le tableau reste là, ce qui évite les allers-retours entre les pages.

Quand utiliser un drawer

• Afficher la fiche détaillée d'un élément sans quitter la liste.
• Éditer un enregistrement qui compte plusieurs champs.
• Proposer des filtres sur une page de produits.
• Héberger le menu de navigation sur mobile ou un mini-panier.

Ses limites

Un drawer peut bloquer la page ou la laisser active. S'il la bloque, il hérite des contraintes d'une modale. Sinon, il faut décider de ce qui se passe quand on clique ailleurs. Sur petit écran, il prend presque toute la largeur et perd une partie de son intérêt. Enfin, un parcours en plusieurs étapes mérite plutôt sa propre page.

• Usage : consultation et édition d'un élément, filtres, panier, navigation.
• Prise en main : naturelle, car la page reste visible.
• Limites : moins utile sur mobile, inadapté aux tâches longues.
• Pour qui : back-offices, logiciels métier, sites e-commerce.

Le popover : l'aide au bon endroit

Le popover est une petite bulle qui s'affiche à côté de l'élément cliqué. Il contient une explication, quelques options ou un mini-formulaire. Il ne bloque rien : un clic en dehors suffit à le refermer.

Il ne faut pas le confondre avec l'infobulle. Celle-ci apparaît au survol et ne contient que du texte. Le popover s'ouvre au clic et peut accueillir des liens ou des boutons.

Quand utiliser un popover

• Expliquer un terme ou un champ de formulaire.
• Proposer un petit menu d'actions sur un élément.
• Choisir une date ou une couleur.
• Donner un aperçu rapide d'un profil ou d'un produit.

Ses limites

Le popover manque de place. Au-delà de quelques lignes, il déborde ou se cache derrière le bord de l'écran. Sur mobile, il est délicat à placer et à toucher du doigt. Il ne doit jamais porter une information indispensable, car beaucoup de visiteurs ne l'ouvriront pas.

• Usage : aide contextuelle, petit menu, sélecteur.
• Prise en main : légère, sans rupture dans la navigation.
• Limites : peu d'espace, positionnement délicat sur mobile.
• Pour qui : formulaires complexes, tableaux de bord, outils riches en options.

Modale vs drawer vs popover : lequel choisir selon votre cas

Posez une question avant chaque choix : de quoi le visiteur a-t-il besoin pour finir sa tâche ? S'il doit trancher vite, prenez la modale. S'il doit consulter ou modifier en gardant la page en vue, prenez le drawer. S'il veut juste un complément d'information, le popover suffit.

• Supprimer, valider, confirmer un paiement : modale.
• Modifier une fiche client ou une commande : drawer.
• Filtrer un catalogue ou afficher le panier : drawer.
• Expliquer un champ ou un tarif : popover.
• Remplir un long formulaire ou un tunnel d'achat : une page dédiée, ni l'un ni l'autre.

Ces choix se valident tôt, dès le wireframe, avant le moindre développement. Une fois le site en ligne, mesurez. Si un formulaire en modale convertit mal, testez une version en drawer ou en page dédiée, puis comparez le taux de conversion. Nous appliquons cette méthode à chaque création de logiciel ou de back-office sur mesure.

Questions fréquentes