Composants
Avis
Les avis sont des messages contextuels qui peuvent s’afficher sur une page ou sur plusieurs pages d’un même sujet.
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
Les avis se déclinent en cinq variantes :
- Avis général (bleu)
- Avis d’avertissement (jaune)
- Avis d’erreur (rouge)
- Avis de succès (vert)
- Avis complémentaire (gris)
Quand l’utiliser
Les avis sont utilisés pour mettre en évidence des informations importantes qui doivent ressortir du contenu principal. Le message de l’avis est étroitement lié au contenu de la page.
Un avis doit servir à communiquer des informations importantes et/ou ponctuelles plutôt qu’à mettre en valeur le contenu de la page.
Les avis doivent être utilisés avec modération et idéalement limités à un seul par page.
Voici des indications sur les contextes d’utilisation selon les variantes :
- Avis général : À utiliser pour transmettre des informations complémentaires ou utiles qui ne sont pas critiques mais qui peuvent aider l’utilisateur à accomplir sa tâche. Pertinent pour annoncer une date, un changement mineur ou une mise à jour qui ne bloque pas la navigation.
- Avis d’avertissement : À utiliser pour prévenir d’un risque ou d’un changement qui peut affecter la disponibilité ou l’utilisation d’un service. Utile lorsque l’information doit être prise en compte avant de poursuivre, par exemple la fermeture prochaine d’un service ou une interruption planifiée.
- Avis d’erreur : À utiliser lorsqu’une action a échoué ou qu’une erreur bloque la progression de l’utilisateur. S’applique autant aux erreurs système qu’aux erreurs de saisie, avec un besoin d’action corrective immédiate.
- Avis de succès : À utiliser pour confirmer qu’une action ou un processus s’est déroulé correctement. Utile lorsque la confirmation rassure l’utilisateur ou lui indique la prochaine étape possible.
- Avis complémentaire : À utiliser pour apporter un conseil, une information intéressante ou une ressource optionnelle qui enrichit le contenu, mais qui n’est pas nécessaire pour accomplir la tâche principale.
Quand ne pas l’utiliser
Il ne doit pas être utilisé comme un élément de mise en page esthétique, mais plutôt comme un moyen de transmettre des informations vitales de manière immédiate, comme des mises à jour ou des informations cruciales.
Anatomie
- Titre de l’avis
- Contenu de l’avis
- Icône
- Encadré
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Titre de l’avis
Le titre de l’avis doit être explicite avec, par exemple, l’utilisation d’un groupe de mots-clés, comme « Avis important sur la réglementation ».
Contenu de l’avis
Les avis peuvent contenir :
- du texte courant (aucune autre mise en forme que le gras est possible) ;
- des mots en gras et/ou en italique ;
- un lien textuel souligné.
Pour être efficace, le message doit rester clair et concis. Sa lecture doit être rapide et aisée afin d’éviter que l’utilisateur ne le contourne : un avis trop long risque d’être ignoré au profit du contenu principal de la page.
Voici des indications sur le contenu selon les variantes :
- Avis général : Contient du texte informatif et factuel (dates, annonces, mises à jour mineures ou politiques nouvelles). Style clair et concis, sans appel à l’action urgent.
- Avis d’avertissement : Contient un message clair décrivant le risque ou le changement attendu. Peut inclure une date ou une durée, et préciser l’impact sur l’utilisateur.
- Avis d’erreur : Contient la description du problème et, si possible, une instruction précise pour y remédier. Peut lister plusieurs erreurs, chacune avec un lien direct vers l’élément à corriger.
- Avis de succès : Contient un message bref et positif confirmant la réussite d’une action. Peut inclure une recommandation pour la suite (par exemple, lien vers une autre section ou étape suivante).
- Avis complémentaire : Contient des conseils, astuces, définitions ou ressources supplémentaires. L’icône associée est choisie pour illustrer le type de contenu (ampoule, fichier, etc.).
Icône (avis complémentaire)
À l’inverse des autres types d’avis, l’icône de l’avis complémentaire peut être adaptée selon le contenu qu’il contient. Par exemple, ce peut être une icône d’ampoule pour exprimer un conseil, une icône de fichier pour indiquer qu’il y a des documents à fournir, etc.
Les icônes permises sont celles de la librairie d’icône. La fiche Iconographie donne plus de détails sur le sujet.
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 la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Avis (complet)
Positionnement et alignement : Les avis se retrouvent généralement en haut de page, en-dessous du menu d’ancres, mais peuvent parfois être positionnés à travers le texte, par exemple lorsque l’avis est contextuel à un paragraphe en particulier ou encore dans un formulaire.
Dimensions : Les avis occupent 100 % de la largeur de la zone de contenu, dont la limite est 825 px de large. La hauteur dépend quant à elle de son contenu.
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.
Avis d’erreur (rouge)
S’affiche immédiatement lorsqu’une erreur est détectée. Peut apparaître en haut de page avec une liste d’erreurs cliquables menant aux champs concernés, ou à proximité directe de l’élément en cause. Disparaît uniquement après correction.
Avis de succès (vert)
S’affiche après la réussite d’une action.
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 :
- Interaction avec les liens présents dans le contenu.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Navigation et activation des liens via tabulation et touche Entrée.
Mises à jour
Cette section présente la disponibilité actuelle des différentes versions du composant ainsi qu'un aperçu des changements passés.
| Emplacement | Statut |
|---|---|
| Trousse de design Adobe XD | Disponible |
| Trousse de design Figma | Disponible |
| Trousse de développement | Disponible |
| Québec.ca (TYPO3) | Disponible |
| Date | Description |
|---|---|
| 14 août 2025 | Simplification et standardisation de la structure de la fiche |
| 11 juillet 2023 | Modification de la section Quand l’utiliser |
| 13 avril 2022 | Modification de la section Comment l’utiliser |
| 17 février 2021 | Mise en ligne de la fiche |
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- 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 : 16 janvier 2026