Notification contextuelle
La notification contextuelle affiche un message temporaire qui apparaît à la suite d’une interaction humaine.
Exemple
Quand l'utiliser
Cette composante est utilisée pour donner un retour d’information à l’utilisateur, par exemple pour lui confirmer l’ajout d’un item à son panier d’achats. La notification rassure l’utilisateur en l’informant que sa tâche est complétée ou en cours.
Le message transmis par la notification n’est pas prioritaire. L’alerte générale est utilisée pour les messages hautement prioritaires destinés à l’ensemble des utilisateurs ou l’avis pour les messages contextuels à une page ou une section du site.
Il y a 3 types de notification contextuelle :
- Positif, pour indiquer le succès d’une action;
- Négatif, pour indiquer l’échec d’une action ou une erreur;
- Neutre, pour tout autre message.
Exemple
Comment l'utiliser
La notification contextuelle apparaît en bas à droite de l’écran sur la version bureau et en bas de l’écran, en pleine largeur, sur un appareil mobile.
Une seule notification peut apparaître à la fois.
La notification peut contenir un maximum de 2 lignes de texte. Le message doit être concis et facile à interpréter puisqu’il est affiché de façon temporaire.
La durée de visibilité de la notification devrait être de 3 secondes en moyenne.
La règle suivante peut être appliquée pour mieux évaluer la durée d’affichage : 1 caractère équivaut à 100 millisecondes. Pour un message d’environ 30 mots, la durée est de 3 secondes.
Élément interactif
La notification doit être accompagnée de l’un ou l’autre de ces deux éléments, mais jamais les deux à la fois.
Une icône de fermeture « X » disposée à droite permet à l’utilisateur de fermer la boîte avant la fin du délai si la notification le gêne dans sa tâche.
Un bouton d’action tertiaire disposé à droite offre la possibilité de « Réessayer » ou d’« Annuler » l’action, par exemple. Si le libellé du bouton est trop long, il peut être placé sur une 2ᵉ ou 3ᵉ ligne.
Exemple
Il n’est pas possible d’utiliser une icône de fermeture « X » et un bouton d’action tertiaire dans la même notification contextuelle. Aucun autre icône ou élément ne peut être utilisé.
Informations techniques
Dans le format bureau, la boîte est d’une largeur de 344 px.
Il y a un espacement de 32 px à droite et en bas.
Dans le format mobile, la boîte prend toute la largeur, excluant l'espacement sécuritaire de 16 px à gauche, à droite et en bas de l’écran.
S’il existe un bouton de retour en haut de page ou toute autre composante fixe au bas de l’écran, la notification contextuelle doit apparaître au-dessus de cet élément avec un espacement de 32 px au format bureau et 16 px au format mobile.
À faire
Le dégagement à prévoir autour du contenu de la notification contextuelle est de 16 px.
Une marge de 8 px doit se trouver entre le contenu et l’icône de fermeture ou le bouton d’action tertiaire.
Variantes de la notification contextuelle
Exemple
CSS de la notification neutre
background-color: #095797;
box-shadow: 0 4px 16px rgba(34, 54, 84, 0.24);
font-family: Open Sans;
font-weight: semibold;
font-size: 14px;
line-height: 20px;
CSS de la notification positive
background-color: #4f813d;
box-shadow: 0 4px 16px rgba(34, 54, 84, 0.24);
font-family: Open Sans;
font-weight: semibold;
font-size: 14px;
line-height: 20px;
CSS de la notification négative
background-color: #cb381f;
box-shadow: 0 4px 16px rgba(34, 54, 84, 0.24);
font-family: Open Sans;
font-weight: semibold;
font-size: 14px;
line-height: 20px;
Dernière mise à jour : 30 août 2023