Personnalisez vos boîtes de message (X)HTML

Date de publication : 29 janvier 2009

Par Janko Jovanovic (Auteur)
 Didier Mouronval (Traducteur)
 

Cet article est la traduction de l'article : CSS Message Boxes for different message types.
Dans cet article, nous allons voir comment faire des boîtes de message personnalisées en fonction du type de message.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Introduction
Les messages d'information
Messages de réussite
Messages d'alerte
Messages d'erreur
Procédé de design
Messages de validation
Conclusion
Remerciements


Introduction

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çu 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.


Les messages d'information

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.

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


Messages de réussite

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).

Message de réussite
Message de réussite
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".


Messages d'alerte

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.

Message d'alerte
Message d'alerte

Messages d'erreur

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'alerte.

Message d'erreur
Message d'erreur

Procédé de design

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 ai suffisamment d'espace autour du texte. Notez que le padding gauche doit être plus important pour que le texte ne chevauche pas l'image.

Modèle
Modèle
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');
}
info Les icônes utilisées dans cet exemple proviennent de Knob Toolbar icons.
Voir un exemple.


Messages de validation

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.

Message de validation
Message de validation
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');
}

Conclusion

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.


Remerciements

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



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2009 Janko Jovanovic. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum CSS

Blogs

Hébergement

 
Partenaires

Hébergement Web