Avis
Les avis sont des messages contextuels qui peuvent s’afficher sur une page ou sur plusieurs pages d’un même sujet.
Exemple
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 ponctuelles plutôt qu'à mettre en valeur le contenu de la page. 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.
Il existe 5 types d’avis.
L’avis général contient des informations non prioritaires, mais pertinentes pour la tâche utilisateur. On peut y annoncer des dates importantes, des mises à jour récentes, de nouvelles politiques, etc.
Exemple
L’avis d’avertissement est utilisé pour les messages de haute importance. Il s’affiche pour prévenir l’utilisateur de changements qui pourraient faire obstacle à sa recherche, comme la fermeture d’un site Web ou d’un service.
Exemple
L’avis d’erreur indique l’échec d’une action du système ou de l’utilisateur et requiert une nouvelle action de la part de ce dernier.
Il peut s’agir d’un retour négatif comme dans le cas d’un chargement ou d’une opération qui a échoué. L’avis s’affiche en haut de la page ou directement à proximité de l’élément (un indicateur de chargement, par exemple) et mentionne le problème suivi d’une solution. Par exemple, on pourrait demander à l’utilisateur de recommencer l’opération ou de réessayer plus tard.
Il peut également s’agir de champs en erreur dans un formulaire. L’avis s’affiche en haut de la page et liste l’ensemble des champs en erreur. Chaque lien est cliquable et mène directement vers le champ en question.
Exemple
À l’inverse, l’avis de succès indique un résultat positif ou une action réussie. Il n’y a donc pas d’action attendue en retour de la part de l’utilisateur.
Exemple
L’avis complémentaire donne un conseil ou explique un fait intéressant à l’utilisateur. L’avis ne contient pas de texte essentiel à la page, mais vient plutôt présenter de l’information supplémentaire à l’utilisateur sur un sujet en particulier.
À 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.
Exemple
Comment l'utiliser
L’avis peut contenir :
- du texte courant;
- des mots en gras et/ou en italique;
- des liens hypertextes.
Pour être efficace, le message doit être clair et concis. Il doit pouvoir être lu facilement pour éviter les risques d’ignorance de bannières : l’utilisateur aura tendance à sauter le contenu de l’avis pour passer directement au contenu de la page s’il est trop long.
Les avis doivent être utilisés avec modération. On limite leur utilisation à 1 par page, idéalement.
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 ».
Les avis se retrouvent généralement en haut de page, en dessous du menu d’ancre, 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.
Ne pas ajouter d’avis qui ne concernent pas le contenu. Tous les avis doivent être connexes au contenu de la page.
Informations techniques
La hauteur et la largeur des avis sont variables. La largeur varie selon la grille employée, mais elle devrait prendre toute la largeur de la colonne utilisée pour le contenu. La hauteur dépend quant à elle de son contenu, en plus des espaces de dégagement.
La zone colorée est d’une largeur fixe 40 px, indépendamment de la largeur totale.
L’icône est d’une dimension de 24 px par 24 px. Elle est alignée en haut de la zone colorée et comporte un dégagement de 24 px avec le haut. De plus, il y a un dégagement à gauche et à droite de 8 px.
Au format bureau, les espaces de dégagement entre le texte et la zone dédiée au contenu sont de 24 px en haut et en bas, de 32 px à droite et de 16 px à gauche.
Au format mobile, les caractéristiques restent les mêmes. Seuls les espaces de dégagement de la zone dédiée au contenu sont de 24 px de tous les côtés, sauf à gauche où il reste 16 px.
CSS du libellé
font-family: Open Sans;
font-weight: regular;
font-size: 14px;
color: #223654;
CSS du titre
font-family: Open Sans;
font-weight: bold;
font-size: 14px;
color: #223654;
CSS de la boite
background-color: #ffffff;
border: 1px solid #c5cad2;
CSS couleurs des avis
général: #dae6f0;
important: #f8e69a;
succès: #d7f0bb;
erreur: #ffdbd6;
complémentaire: #f1f1f2;
CSS couleurs des icônes
général: #095797;
important: #ad781c;
succès: #4f813d;
erreur: #cb381f;
complémentaire: #223654;
Dernière mise à jour : 3 mai 2023