Drawer
Un espace latéral contextuel pour une tâche secondaire qui demande de la place.
Définition
Définition
Un drawer est un panneau qui glisse depuis le bord de l’écran, en laissant la page en dessous visible et accessible.
Problème résolu
Problème résolu
Un drawer donne de la place à une tâche secondaire sans cacher ce que l’utilisateur était en train de faire. C’est le bon niveau d’espace quand un popover serait trop à l’étroit et qu’une modale couperait complètement l’utilisateur de la page.
Quand l’utiliser
Quand l’utiliser
- Panneaux de filtres
- Édition des propriétés d’un objet
- Paniers et inspecteurs détaillés
Quand ne pas l’utiliser
Quand ne pas l’utiliser
- La tâche constitue le parcours principal
- Le contenu se limite à un contrôle compact
Exemple
Exemple
- 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>Contre-exemple
Contre-exemple
Un parcours de paiement construit entièrement dans un drawer est une erreur fréquente. Paiement, livraison et confirmation ne tiennent pas dans un panneau latéral étroit — la tâche est devenue le parcours principal et mérite sa propre page.
Questions à se poser
Questions à se poser
- 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 ?
Patterns liés