Modal
Un modal est une boîte de dialogue qui apparaît au-dessus du contenu principal.
Description
Les modales sont utilisées pour présenter des informations critiques ou demander à l'utilisateur une action. Elles s'affichent par dessus la page et masque le contenu. Les modales sont conçues pour interrompre le parcours utilisateur.
Deux types de modales existent :
- Une modale dialogue : lorsqu'elle est active, un utilisateur est bloqué du contenu de la page et ne peut pas revenir à son flux tant qu'il n'a pas choisi une action
- Une modale informative : lorsqu'elle est active, un utilisateur peut simplement fermer la modale. Elle est souvent utilisée pour informer l'utilisateur.
Ce composant, bien qu'efficace lorsqu'il est utilisé correctement, se doit d'être utilisé avec parcimonie pour limiter les interruptions du parcours utilisateur.
Plateformes
Anatomie
- Bouton fermer : obligatoire dans les modales informatives
- Contenu : texte, liste, etc…
- Actions : optionnel pour les modales informatives / obligatoire pour les modales dialogue
Usage
Quand l'utiliser ?
- Lorsque vous devez afficher du contenu qui bloque temporairement les interactions sur la vue principale
- Lorsque vous devez demander une confirmation à un utilisateur avant de continuer.
- Lorsque l'utilisateur doit effectuer une action avant de continuer un flux.
- Pour les avertissements importants, comme moyen de prévenir ou de corriger les erreurs critiques.
Do's and don'ts
-
Do
Soyez clair dans les actions possibles
-
Don't
Il est interdit d'utiliser des labels de boutons trop vagues.
-
Do
Utilisez les boîtes de dialogue uniquement lorsque cela est absolument nécessaire
-
Don't
Il est interdit d’utiliser les modals pour les messages de faible importance ou les validations répétitives.
Anatomie
- Bouton fermer : obligatoire dans les modales informatives
- Contenu : texte, liste, etc…
- Actions : optionnel pour les modales informatives / obligatoire pour les modales dialogue
Usage
Quand l'utiliser ?
- Lorsque vous devez afficher du contenu qui bloque temporairement les interactions sur la vue principale
- Lorsque vous devez demander une confirmation à un utilisateur avant de continuer.
- Lorsque l'utilisateur doit effectuer une action avant de continuer un flux.
- Pour les avertissements importants, comme moyen de prévenir ou de corriger les erreurs critiques.
Attention : La sheet est très similaire à la modal, mais s'utilise dans un contexte différent. La modal est utilisée pour présenter des informations critiques ou demander à l'utilisateur d'entrer des données nécessaires à l'accomplissement de son travail, la sheet quant à elle, ne contient que des informations secondaires ou des actions que l'utilisateur peut entreprendre lorsqu'il le souhaite.
Do's and don'ts
-
Do
Soyez clair dans les actions possibles
-
Don't
Il est interdit d'utiliser des labels de boutons trop vagues.
-
Do
Utilisez les boîtes de dialogue uniquement lorsque cela est absolument nécessaire
-
Don't
Il est interdit d’utiliser les modals pour les messages de faible importance ou les validations répétitives.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.