Drawer
Il ouvre un espace latéral pour une tâche secondaire, sans faire disparaître la page derrière.
Ce qu’un drawer garde à portée
Un drawer glisse depuis le bord de l’écran et ouvre un espace de travail latéral, pendant que la page derrière reste visible et à portée.
Le vrai job
Gagner de la place sans perdre la page
Un drawer donne assez de place à une tâche secondaire sans couper l’utilisateur de ce qu’il faisait. C’est le bon choix quand un popover devient trop serré, mais qu’une modale interromprait plus que nécessaire.
Le bon contexte
Quand le panneau latéral vaut vraiment sa place
- Panneaux de filtres
- Édition des propriétés d’un objet
- Paniers et inspecteurs détaillés
Mauvais plan
Quand le drawer devient le parcours principal
- La tâche constitue le parcours principal
- Le contenu se limite à un contrôle compact
Dans la vraie vie
Ce qui mérite vraiment un drawer
- Filtres produits
- Inspecteur de propriétés
- Panier d’achat
Voir l’exemple technique
<dialog aria-labelledby="filters-title" className="drawer">
<header>
<h2 id="filters-title">Filters</h2>
<button aria-label="Close filters">×</button>
</header>
<form>{/* filter controls */}</form>
</dialog>Le piège classique
Le checkout n’est pas une tâche annexe
Faire passer tout le checkout dans un drawer, c’est le grand classique. Paiement, livraison et confirmation n’ont rien à faire dans un panneau latéral étroit. À ce stade, la tâche est devenue le parcours principal et mérite sa propre page.
Avant de choisir
Les questions à se poser avant d’ouvrir le panneau
- L’utilisateur a-t-il besoin de continuer à voir la page derrière cette tâche ?
- Cette tâche est-elle secondaire par rapport à ce que l’utilisateur est venu faire ?
- Le contenu serait-il à l’étroit dans un popover ?
- Est-ce en train de devenir le parcours principal plutôt qu’une tâche annexe ?
Tu hésites avec…