Communications numériques gouvernementales Beta
  1. Accueil  
  2. Système de design gouvernemental  
  3. Composantes  
  4. Notification contextuelle

Système de design gouvernemental

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. Utilisez l’alerte générale 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 dégagement de 32 px à droite et en bas.

Dans le format mobile, la boîte prend toute la largeur, excluant le dégagement 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 dégagement de 32 px sur la version bureau et 16px pour la version 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.

États 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 : 1.5

 

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 : 1.5

 

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 : 1.5

 

Dernière mise à jour : 20 novembre 2020