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 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 sur l'iconographie donne plus de détails sur le sujet.

Exemple

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.