- Accueil
- Design
- Composants
- Notification contextuelle
Notification contextuelle
La notification contextuelle affiche un message temporaire qui apparaît à la suite d’une interaction humaine.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Il y a trois 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.
Quand l’utiliser
Ce composant est utilisé 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.
Quand ne pas l’utiliser
Ne pas utiliser ce composant lorsque le message est hautement prioritaire pour tous les utilisateurs (préférer l’alerte générale) ou lorsque le message est lié spécifiquement à une page ou section (préférer l’avis).
Anatomie
- Message transmis par la notification
- Icône de fermeture (ou libellé d’action)
Contenus
Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.
Notification contextuelle (complète)
Il n’est pas possible d’utiliser une icône de fermeture et un libellé d’action dans la même notification contextuelle ; la notification doit être accompagnée de l’un ou l’autre de ces deux éléments, mais jamais les deux à la fois.
Aucun autre icône ou élément ne peut être utilisé.
Message transmis par la notification
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.
Préciser l’état ou le résultat d’une action de façon directe (ex. : « Document enregistré », « Échec du téléchargement »).
Libellé d’action
Utiliser un verbe d’action clair (ex. : « Réessayer », « Annuler », « Ouvrir »).
Si le libellé du bouton est trop long, il peut être placé sur une 2ᵉ ou 3ᵉ ligne, mais devrait idéalement être d’un à deux mots.
Le libellé doit indiquer précisément l’action déclenchée et être cohérent avec le message affiché.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans les trousses de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Notification contextuelle (complète)
Positionnement et alignement : 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. S’il existe un bouton de retour en haut de page ou tout autre composant 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.
Dimensions : Dans le format bureau, la boîte est d’une largeur de 344 px. 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.
Espacements : Il y a un espacement de 32 px à droite et en bas.
À faire
Message transmis par la notification
Positionnement et alignement : à gauche, aligné verticalement au centre de la boîte.
Dimensions : largeur variable selon le nombre de caractères, limitée par la largeur totale du conteneur.
Icône de fermeture (ou libellé d’action)
Positionnement et alignement : à droite du conteneur, aligné verticalement au centre.
Dimensions : largeur minimale pour contenir le libellé, hauteur identique à celle du message.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Notification contextuelle (complète)
Une seule notification peut apparaître à la fois.
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.
Icône de fermeture
Une icône de fermeture « X » 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 clic déclenche immédiatement la disparition de la notification contextuelle.
Libellé d’action
Un libellé d’action tertiaire disposé à droite offre la possibilité de « Réessayer » ou d’« Annuler » l’action, par exemple.
Ne doit pas ouvrir de menu ou d’action secondaire : une seule action possible.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur l’icône de fermeture « X » pour fermer la notification avant la fin du délai d’affichage.
- Cliquer sur le bouton d’action tertiaire pour exécuter l’action associée (ex. : « Réessayer », « Annuler »).
- Aucun clic sur le corps du message n’est prévu : seule l’interaction avec l’élément interactif est possible.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser Tab pour naviguer vers l’élément interactif (icône de fermeture ou bouton d’action tertiaire).
- Utiliser Entrée ou Espace pour activer l’élément sélectionné.
- Le message n’est pas sélectionnable ni activable au clavier.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 7 octobre 2026