Modal vs. Popover
Une modale bloque la page jusqu'à la fin de la tâche. Une popover reste à côté de son bouton et laisse la page continuer de fonctionner.
Utilisez une fenêtre modale pour une tâche qui doit être terminée en premier. Utilisez un popover pour des détails supplémentaires ou une petite action.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Boîte de dialogue modale
Une boîte de dialogue modale est une fenêtre ciblée. Elle bloque l'écran actuel jusqu'à ce que quelqu'un la ferme ou la termine.
Pour la suppression de compte, le focus du clavier reste à l'intérieur de la boîte de dialogue. Si la personne annule, le focus revient sur le bouton qui l'a ouverte.
- Utilisez-le lorsque
- Utilisez-le pour un choix court ou une petite tâche qui doit recevoir toute l'attention.
- Ne l'utilisez pas lorsque
- N'ouvrez jamais une boîte de dialogue par-dessus une autre et n'utilisez pas une boîte de dialogue pour des informations normales ou à faible risque.
- Nom utilisé dans le code
<dialog> / role="dialog" aria-modal="true"
Popover
Une popover est un petit panneau attaché au contrôle qui l'a ouverte. Elle peut contenir du contenu structuré et des actions sans bloquer la page.
popover attribute / PopoverSélectionnez un avatar pour ouvrir un petit profil. Il montre le rôle de la personne, ses coordonnées et une action Suivre.
- Utilisez-le lorsque
- Utilisez-le lorsque le contenu appartient à côté de son déclencheur et que les gens peuvent continuer à utiliser la page.
- Ne l'utilisez pas lorsque
- N'utilisez-le jamais pour un court indice contenant uniquement un label. Utilisez un infobulle à la place.
- Nom utilisé dans le code
popover attribute / Popover
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| Boîte de dialogue modaleModal Dialog | Utilisez-le pour un choix court ou une petite tâche qui doit recevoir toute l'attention. | N'ouvrez jamais une boîte de dialogue par-dessus une autre et n'utilisez pas une boîte de dialogue pour des informations normales ou à faible risque. | <dialog> / role="dialog" aria-modal="true" |
| PopoverPopover | Utilisez-le lorsque le contenu appartient à côté de son déclencheur et que les gens peuvent continuer à utiliser la page. | N'utilisez-le jamais pour un court indice contenant uniquement un label. Utilisez un infobulle à la place. | popover attribute / Popover |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Boîte de dialogue modale (Modal Dialog), Popover (Popover) pour notre flux utilisateur réel. Utilisez cette règle : Une modale bloque la page jusqu'à la fin de la tâche. Une popover reste à côté de son bouton et laisse la page continuer de fonctionner. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.