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éments facultatifs
La notification peut être accompagnée de 2 éléments facultatifs.
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 2e ou 3e ligne.
Exemple
Une icône X doit apparaître pour que l’utilisateur puisse fermer la boîte avant la fin du délai si la notification le gêne dans sa tâche. Aucune autre icône de fermeture ne doit être ajoutée.
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 16px 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
Notification contextuelle neutre
box-shadow: 0 3px 6px 0 rgba(34, 54, 84, 0.16);
background-color: #095797;
font-family: Open Sans;
font-weight: bold;
font-size: 14 px
line-height: 24px
Notification contextuelle positive
box-shadow: 0 3px 6px 0 rgba(34, 54, 84, 0.16);
background-color: #4f813d;
font-family: Open Sans;
font-weight: bold;
font-size: 14 px
line-height: 24px
Notification contextuelle négative
box-shadow: 0 3px 6px 0 rgba(34, 54, 84, 0.16);
background-color: #cb381f;
font-family: Open Sans;
font-weight: bold;
font-size: 14 px
line-height: 24px
Dernière mise à jour : 15 août 2022