Menus, dialogues et panneaux

Les superpositions définissent la qualité de l'interactionLien vers la section

Les superpositions ne sont pas seulement des composants de l'interface utilisateur.

Ils définissent la manière dont les utilisateurs interagissent avec :

• workflows
• mesures prises
• confirmations
• navigation
• état du produit
• décisions contextuelles

Choisir la mauvaise superposition crée :

• Flux brisés
• problèmes d'accessibilité
• Intention de l'utilisateur peu claire
• Modèles d'interaction incohérents
• Comportement UX fragile

Choisir le bon fait sentir le produit:

• plus rapide
• plus sûr
• plus clair
• plus intentionnel

Système de recouvrementLien vers la section

Matrice de décisionLien vers la section

Règle de baseLien vers la section

• Dropdown aux micro-actions
• Dialoguer avec la tâche ciblée
• Flux de travail d’un panneau à l’autre

Règles UX fondamentalesLien vers la section

Focus et clavierLien vers la section

• Piège de focus dans la boîte de dialogue et feuille
• Restaurer le focus sur le déclencheur à la fermeture
• Support Escape pour fermer en toute sécurité
• Assurer une navigation complète du clavier

Comportement du défilementLien vers la section

• Verrouiller le défilement de la page lorsque la boîte de dialogue ou le panneau latéral est ouvert
• Autoriser le défilement à l'intérieur de la superposition
• Évitez les conteneurs de défilement imbriqués

CouchesLien vers la section

• Éviter la nidification en profondeur
• La liste déroulante vers la boîte de dialogue est acceptable lorsqu'elle est intentionnelle
• Assurez-vous que les superpositions se superposent correctement avec les portails et z-index

Comportement de fermetureLien vers la section

• Toujours fournir des actions explicites telles que Annuler et Enregistrer
• Ne pas fermer automatiquement en cas d'erreur
• Exiger une confirmation pour les actions destructrices

Flux communsLien vers la section

Créer un flux vers la boîte de dialogueLien vers la section

Utilisez la boîte de dialogue lorsque l'utilisateur commence une tâche ciblée qui doit être terminée ou annulée intentionnellement.

Filtres et flux de travail latéral vers SheetLien vers la section

Utilisez Sheet pour la divulgation progressive et les flux de travail secondaires qui doivent rester connectés à la page en cours.

Row actions to Espace clientLien vers la section

Utilisez DropdownMenu pour des actions contextuelles qui doivent rester légères et rapides.

Liste de contrôle d'accessibilitéLien vers la section

Avant les superpositions d'expédition :

• La boîte de dialogue et le panneau latéral ont un titre visible ou accessible
• La focus est piégée correctement
• Le focus revient au déclencheur à la fermeture
• L'évasion se ferme en toute sécurité
• Les boutons ont des étiquettes claires
• Les déclencheurs Icon-only incluent aria-label
• Les éléments déroulants sont accessibles au clavier
• Les changements d'état de recouvrement sont prévisibles

ExemplesLien vers la section

<Dialog>
  <DialogTrigger asChild>
    <Button>Create</Button>
  </DialogTrigger>

  <DialogContent>
    <DialogHeader>
      <DialogTitle>Create project</DialogTitle>

      <DialogDescription>Give it a name and status.</DialogDescription>
    </DialogHeader>

    {/* form */}
  </DialogContent>
</Dialog>

Guide de décisionLien vers la section

Pourquoi cela compteLien vers la section

Les superpositions sont les endroits où la qualité de l'interaction devient visible.

Un système de superposition fort rend le produit se sentir:

• plus rapide
• plus sûr
• plus clair
• plus délibéré
• plus de production

Un système de superposition faible rend l'ensemble du produit fragile.