Personnalisez vos boîtes de message (X)HTML

Pouvez-vous y croire : Récemment, je suis allé à la banque vérifier l'état de mon compte. L'employé entre mes données personnelles et envoie une requête. L'application Web répond en affichant une boîte de message jaune avec un point d'exclamation indiquant que la demande était en cours. Il vérifia plusieurs autres fois, mais n'a pas fait attention qu'à un moment, le message se changea en « Compte valide ». La boîte de message n'avait pas changé. Il continua d'essayer et s'aperçut enfin que la demande avait réussi.

Je ne sais pas ce qu'il y avait dans la tête des développeurs, mais ils ne pensaient sûrement pas aux utilisateurs. Ce pauvre employé était réellement embêté. Je n'ose pas imaginer à quoi doit ressembler le reste de l'application.

Pour éviter cela, différents types de boîtes de message devraient être affichés différemment. Je pense que chaque application Web devrait prévoir quatre types de messages : information, opération réussie, alerte et erreur. Chaque type de message devrait être affiché avec une couleur et une icône spécifique. Il existe aussi un type particulier de message que sont les validations.

Je vais vous montrer un remake des boîtes de message que j'ai utilisées pour mon dernier projet. Je les ai légèrement modifiées pour qu'ils soient plus simples dans cet exemple. Vous verrez aussi comment donner un style particulier de façon similaire pour vos messages de validation.

Voyons maintenant les différents types de messages.

Le but de ce type de message est d'informer l'utilisateur de quelque chose d'important. Cela peut être présenté en bleu, car les gens associent souvent cette couleur à une information, indépendamment du contenu. Cela peut correspondre à n'importe quelle information concernant les actions de l'utilisateur.

Par exemple, les messages d'information peuvent afficher une aide ou un conseil concernant l'action en cours.

Les messages de réussite devraient être affichés après le succès d'une action de l'utilisateur. J'entends par là une opération complètement terminée, pas partiellement terminée et sans erreur jusque là. Le message pourrait dire par exemple : « Votre profil a été enregistré avec succès et un mail de confirmation vous a été adressé à l'adresse que vous avez indiquée ». Ce qui signifie que toutes les étapes ont été effectuées avec succès (enregistrement du profil et envoi de mail).

Je sais que beaucoup de développeurs considèrent ce genre de message comme un message d'information, mais je préfère les afficher avec leur propre charte - couleur verte et icône « check ».

Les messages d'alerte devraient être affichés lorsqu'une opération n'a pas pu se terminer complètement. Par exemple « Votre profil a bien été enregistré, mais nous n'avons pas pu envoyer de mail à votre adresse » ou « Si vous ne créez pas votre profil, vous ne pourrez pas chercher d'emploi ». Habituellement, ces messages sont affichés en jaune avec un point d'exclamation.

Les messages d'erreur devraient être affichés lorsque l'opération n'a pas pu se réaliser du tout. Par exemple : « Votre profil n'a pas pu être créé. » La couleur rouge est appropriée pour ces messages, car les gens l'associent à tous les types d'alertes.

Maintenant que nous savons comment présenter les messages, voyons comment les créer en CSS. Faisons un tour rapide des procédés de design.

Je vais faire cela le plus simplement possible. Le but est d'obtenir une seule div avec une classe unique. Le code HTML ressemblera donc à ça :

<div class="info">Message d'information</div>
<div class="success">Message de réussite</div>
<div class="warning">Message d'alerte</div>
<div class="error">Message d'erreur</div>

La classe CSS va ajouter une image de fond à la div sur la gauche. Nous mettrons aussi un padding pour qu'il y ait suffisamment d'espace autour du texte. Notez que le padding gauche doit être plus important pour que le texte ne chevauche pas l'image.

Et voici les quatre classes CSS (cinq avec les messages de validation) correspondant aux messages :

body{
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px;
}
.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}

Voir un exemple.

J'ai remarqué que de nombreux développeurs ne font pas de distinction entre un message de validation et les autres (comme les erreurs ou alertes). J'ai souvent vu des messages de validation affichés comme des erreurs, créant une confusion chez l'utilisateur.

La validation concerne tout ce que l'utilisateur a entré et devrait être traité comme tel. ASP.NET possède des contrôles qui permettent de vérifier toutes les données entrées par l'utilisateur. Le but de la validation est de forcer l'utilisateur à entrer toutes les informations obligatoires dans le bon format. De ce fait, il doit être évident que le formulaire ne sera pas soumis si les données ne sont pas conformes. C'est pour cela que j'aime afficher les messages de validation dans un rouge un peu moins intense et avec un point d'exclamation.

La classe CSS pour les messages de validation est similaire aux autres messages (notez que certains attributs ont été définis dans le code précédent) :

.validation {
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url('validation.png');
}

Les messages sont un élément important pour l'utilisateur et sont souvent négligés. Il existe beaucoup d'articles présentant de très belles boîtes de message, mais ce n'est pas uniquement une question d'esthétique. Ils doivent apporter une information avec un sens, que ce soit visuellement ou sémantiquement.

Voir aussi cet article pour découvrir comment animer ces messages avec jQuery.

Un grand merci à Kerod pour sa relecture avisée et ses conseils précieux !