Bandeau d’information

Anatomie

1. Conteneur
2. Texte d'accompagnement
3. Bouton d'action (optionnel)
4. Bouton de fermeture (optionnel)

Note : For an easy web accessibility it is better to avoid adding actions and closing buttons to your snackbar.

Bonnes pratiques de conception pour les bandeau d'information

Conteneur

Les bandeaux d'information sont présentés dans des conteneurs rectangulaires avec un fond gris uni pour la lisibilité.

• Utilisez un fond uni avec une ombre pour distinguer la snackbar du contenu.
• Une légère transparence est acceptable, mais le texte doit rester lisible.
• Ne pas : modifier considérablement la forme du conteneur ou supprimer l'élévation.

Étiquette de texte

Les bandeaux d'information comprennent une étiquette de texte qui communique clairement l'action ou le processus en cours.

• Gardez les étiquettes courtes, claires et informatives.
• Ne pas inclure d'icônes dans les bandeaux d'information ; si une icône est nécessaire, envisagez un autre composant.

Action

Snackbars can include a single text button for user actions related to the process.

• Les boutons d'action doivent utiliser du texte coloré pour se démarquer de l'étiquette.
• Ne pas : utiliser la même couleur pour l'étiquette et l'action, ni utiliser des boutons remplis ou surélevés.
• Attention : Un bouton « Ignorer » est généralement inutile car les bandeaux d'information disparaissent automatiquement.y.
• À faire : autoriser des actions plus longues sur une troisième ligne si nécessaire, et inclure des actions comme « Annuler » pour permettre aux utilisateurs de modifier leurs choix.

Fréquence

Un seul bandeau d'information doit être affiché à la fois.

Quand utiliser un bandeau d'information ?

Utilisez un bandeau d'information pour un retour d'information court et non critique après une action de l'utilisateur.

Bons cas d'utilisation :

• Confirmer une action
• Afficher une mise à jour rapide du statut
• Fournir une action optionnelle simple

Idée clé : Les bandeaux d'information sont destinés aux retours d'information, pas aux décisions.

Quand NE PAS utiliser de bandeaux d'information ?

Évitez d'utiliser un bandeaux d'information lorsque le message est important ou nécessite de l'attention.

Ne l'utilisez pas pour :

• Les erreurs qui bloquent l'utilisateur
• Les avertissements importants
• Les messages longs ou complexes
• Les actions qui nécessitent une décision

Utilisez plutôt des modales, des alertes ou des messages en ligne.

Pourquoi utiliser un bandeau d'information ?

• Maintient une expérience fluide et sans interruption
• Fournit un retour immédiat aux utilisateurs
• N’interrompt pas le parcours utilisateur