Avis

Les avis sont des messages contextuels qui peuvent s’afficher sur une page ou sur plusieurs pages d’un même sujet. 

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.

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 un résultat négatif ou un champ en erreur dans un formulaire. Lorsqu’il y a plusieurs champs en erreur, ils sont listés dans un seul avis qui s’affiche dans le haut du formulaire. Chaque lien est cliquable et mène directement vers le champ en erreur. Ce type d’avis indique l’échec d’une action de l’utilisateur qui requiert une nouvelle action de sa part.

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 bon à savoir 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 « bon à savoir » 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 ceux de la librairie d'icône. La fiche sur l'iconographie donne plus de détails sur le sujet. (à venir)

Exemple


Comment l'utiliser

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 et limités à 1 par page. 

Le titre de l’avis doit être explicite avec, par exemple, l'utilisation d'un mot-clé, comme « Avertissement », ou 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é 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.

Exemple

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: #D9E6F0
important: #F8E69A
succès: #BCDA9A
erreur: #EDBAB1
bon à savoir: #F2F1F1

CSS couleurs des icônes
général: #095797
important: #E0AD03
succès: #4F813D
erreur: #CB381F
bon à savoir: #83868B

Dernière mise à jour : 22 juillet 2021