Styler les messages du système

Ils sont souvent oubliés, laissés sans style, ce qui les rend invisibles. Pourtant ces messages sont d’une importance capitale : ce sont les réponses que nous fait le « système » lorsque nous inter-agissons avec lui, au travers de formulaires. Autant dire que c’est là, précisément là, que tout ce joue.

À l’instar de Janko Jovanovic, les webdesigners devraient accorder davantage d’attention à ces messages au lieu de les ignorer comme s’ils étaient intouchables, les présupposant sans doute pris en charge, voire imposés par le système. Amis créas, allez plutôt y jeter un œil, oui, entrez dans la matrice et mettez-y des fleurs : vos utilisateurs seront soudain plus réceptifs et coopératifs !

En attendant, nous pouvons prévoir un minimum stylistique, qui évitera de les laisser nus et insignifiants. Au fait, styler quoi ? On pense immédiatement au message d’erreur, celui qui fait peur... mais il n’y a pas que lui. Qu’il s’agisse d’un site web, d’un CMS ou d’une application, on peut distinguer quatre types de messages, caractérisés par des couleurs conventionnelles :

• .error : message d’erreur, en rouge alertant
• .notice : avertissement, en jaune orangé
• .success : message de réussite, en vert rassurant
• .info : message d’information, en bleu froid et banal

J’ai choisi d’adopter la nomenclature des messages de formulaire du framework CSS Blueprint, parce qu’elle me semble pertinente, simple et suffisamment répandue pour se faire conventionnelle.

Je prévois toujours un sélecteur supplémentaire, commun à tous les messages, .reponse, car il n’est pas toujours possible, pour les développeurs, de distinguer la nature de chaque message. Non, le système ne se laisse pas toujours complètement dompter. Mieux vaut alors se reposer sur un sélecteur générique, qui affecte au moins l’habillage par défaut, neutre, mais néanmoins visible, généralement un encadré qui isole le message du reste du site, pour qu’il ne passe pas inaperçu.

La structure HTML de ces messages est très simple :

<div class="reponse">Exemple de message de réponse.</div>
<div class="reponse error">Oooops ! Exemple de message d'erreur.</div>
<div class="reponse notice">Attention ! Exemple de message d'alerte.</div>
<div class="reponse success">Bravo ! Exemple de message de succès.</div>
<div class="reponse info">Exemple de message d'information.</div>

Ces boîtes pourront contenir quelques enrichissements typo et des liens, éventuellement en plusieurs paragraphes, dont il faudra donc s’assurer de l’harmonie. Mais pour commencer, voici — toujours sur le modèle de Blueprint, dont la base stylistique, sobre et passe-partout, est très bonne sur ce point — ce que l’on peut ajouter systématiquement dans nos feuilles de styles de base, typiquement dans form.css :

.reponse { margin-bottom: 1.5em; padding: 1em; border: 2px solid; }
.error { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info { background: #d5edf8; color: #205791; border-color: #92cae4; }

Et le résultat en image :

Il ne restera plus qu’à compléter chaque message d’un picto assorti à la charte : une croix rouge, un point d’exclamation jaune, une coche verte ou un « i » bleu ; d’ajouter un fond hachuré, etc. en suivant l’exemple de Janko Jovanovic :