Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Account available". But the message box hasn't changed. He continued to check a few more times and eventually he realized that the request was successful.
I don't know what was in the minds of developers and designers who created this application, but it certainly wasn't the user. This poor bank official was really frustrated. I can't imagine what the rest of the application looks like.
To prevent this, different message types should be displayed differently. My opinion is that every web application should handle four main message types: information, successful operation, warning and error. Each message type should be presented in a different color and different icon. A special message type represents validation messages.
I will show you a remake of CSS message boxes I used on my latest project. I changed them slightly just to make them simpler for this example. In next article, you will see how to create ASP.NET user control that can support different message types and how to style it using CSS. You will also see how to style ValidationSummary in a similar way.
Let's first take a quick look at message types.
1. Information messages
The purpose of information messages is to inform the user about something relevant. This should be presented in blue because people associate this color with information, regardless of content. This could be any information relevant to a user action.
For example, info message can show some help information regarding current user action or some tips.
2. Success messages
Success messages should be displayed after user successfully performs an operation. By that I mean a complete operation – no partial operations and no errors. For example, the message can say: "Your profile has been saved successfully and confirmation mail has been sent to the email address you provided". This means that each operation in this process (saving profile and sending email) has been successfully performed.
I am aware that many developers consider this as an information message type, but I prefer to show this message type using it's own colors and icons – a green with a checkmark icon.
3. Warning messages
Warning messages should be displayed to a user when an operation couldn't be completed in a whole. For example "Your profile has been saved successfully, but confirmation mail could not be sent to the email address you provided.". Or "If you don't finish your profile now you won't be able to search jobs". Usual warning color is yellow and icon exclamation.
4. Error messages
Error messages should be displayed when an operation couldn't be completed at all. For example, "Your profile couldn't be saved." Red is very suitable for this since people associate this color with an alert of any kind.
Design process
Now when we know the way to present messages to users, let's see how to implement a it using CSS. Let's take a quick look at the design process.
I will keep this as simple as I can. The goal is to have a single div that implements a single CSS class. So the HTML markup will look like this:
<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>
CSS class will add a background image to the div that will be positioned top-left. It will also create a padding inside the div so that text can have enough white space around it. Note that left padding has to be wider to prevent text overlapping with the background image.
And here are the CSS classes for all four (five with validation) different message types:
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'); }
Note: Icons used in this example are from Knob Toolbar icons collection.
Validation messages
I noticed that many developers can't distinguish between validation and other message types (such as error or warning messages). I saw many times that validation message is displayed as error message and caused confusion in the user's mind.
Validation is all about user input and should be treated that way. ASP.NET has built in controls that enable full control over user input. The purpose of validation is to force a user to enter all required fields or to enter fields in the correct format. Therefore, it should be clear that the form will not be submitted if these rules aren't matched. That's why I like to style validation messages in a slightly less intensive red than error messages and use a red exclamation icon.
CSS class for validation message is almost identical to others (note that in some attributes are defined in previous code sample):
.validation { color: #D63301; background-color: #FFCCBA; background-image: url('validation.png'); }
Conclusion
Messages are an important part of the user experience that is often omitted. There are many articles that show nicely styled message boxes but it is not just a matter of design. It should provide a user with meaningful information, semantically and visually.
There are two other articles I would like to recommend you:
In my next article I will show you how to create ASP.NET user control that can wrap all of these message types and present it to a user. You will also see how to apply this style to a ValidationSummary control.
Very nice.
What a great article!
helped me a lot. Great article
This is a very nice, simple CSS example! It combines clear, concise design advice (that should be obvious, but clearly is not to many designers) Thanks…
Very nice.
this is going to come in handy for sure.
Thank you for the article!! It is so refreshing to get a story with it and the best is the layout picture of the different elements. And yes, information/warning/error messages are to much overlooked in thin client web apps!
Here’s some cleaner CSS:
.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: #D8000C;
background-color: #FFBABA;
background-image: url(‘error.png’);
}
.error {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(‘warning.png’);
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url(‘validation.png’);
}
The border’s color is inherited from the color declarations, since they are the same values.
Excellent article. Very helpful info to share.
For those reading along, notice that the only different between each of those boxes are the colors and background images. All of those message boxes could have an additional class of "messageBox" that handles the shared styles (like border thickness, background image positioning, etc.) , then use .info, .error, etc to attach just the unique css attributes.
A similar concept is built into BlueprintCSS. <a href=""http://code.google.com/p/blueprintcss/">http://code.google.com/p/blueprintcss/</a>
http://code.google.com/p/blueprintcss/
@Daniel, thank you so much for refactoring! I updated the code in the article :)
@Steve, @Marnus, you are right. Unfortunatelly this is to much overlooked. Developers and designer often do not take care of it at all. I so many times refactored what other developer messed up and I got surprised each time! :)
this is an amazing work! I will use this as an example for my framework! thanks for sharing!
Keep showing us more code.
Very slick subject to cover.
I have to agree with you that GUI Designers / Developers need to focus more on the user experience. Great coverage on how to develop some simple messages to help the designers of the future <thumbs up!>
The class names are mixed up (warning should be error, and vice versa):
.warning {
color: #D8000C;
background-color: #FFBABA;
background-image: url(‘error.png’);
}
.error {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(‘warning.png’);
}
@Mark, thank you. I fixed the sample.
Great post! I’m almost finished implementing them in our application.
I have a few questions though.
- Why is there the margin of 10px on top and bottom? This didn’t look nice here, so I removed it.
- What is in your opinion a user friendly way of closing the popup?
* use a timeout and fadeout after 2 seconds?
* use a close image button on the top right corner?
* click anywhere outside of the message?
* …?
[quote]The class names are mixed up[/quote]
Funny how I didn’t notice that, refactoring it and all. Good eyes.
[quote]All of those message boxes could have an additional class of "messageBox" that handles the shared styles (like border thickness, background image positioning, etc.) , then use .info, .error, etc to attach just the unique css attributes.[/quote]
@Tony: Normally I would agree with you, but in this case (given no other requirements of the message box, style-wise) I think a grouped selector is the clearer, more parsimonious option.
If there were other messageBoxes that weren’t getting styled with the icons, then perhaps the extra class would make sense (and not smell faintly of class-itis). But then that’d be beyond the scope of this example.
@Manu, this 10px margin is to make enough white space between this message box and other controls on the form.
I’d recomment to place close button in the top right corner. It is better to let users have a control over it. If message disappears in some uncommon way, user can be confused, especially if it happens before user read it; and that would be a poor user experience.
Not quite fixed. The colors are opposite now. It seemed only the background image was switched b/w each one.
@Manu: It depends on what type of application you’re using it for. I just used this code to show error messages when a user submits a form, like for updating profile. It only disappears once they enter all the info in the form correctly and submits it (to make the error popup go and to show the success popup). Then once they leave that page, it disappears entirely.
There is a margin for formatting reasons. Remove it if you don’t want it.
Thx for the quick reply. Since you seem to be far better in design then I am, could you maybe post a sample screenshot of how that could look like? Also the icon you’re using for it would be nice ;)
@Mark, you are right again. That’s what happens when you are doing five things at the same time :) I hope it’s ok now.
@Tony, for the purpose of this example I tried to keep it simple. Daniel suggested some changes which I applied and now it is as simple as it can be. However, I see your point, and in real-world apps this could be a way to do this.
@Manu: I’ll write another post on this subject – next post will show how to create asp.net user control that is more complex than those boxes in the example. But if you need it urgently, I could create some sample page for you during the day :)
Excellent article, I like it very much. Keep posting, Janko :)
Yup, it’s fine. I now just gotta find good gif icons b/c of the transparency problem in IE6. OR, not make these images as backgrounds, but regular images and use the png fix trick to fix it. OR, forget about IE6 lol.
Great Job, guy!
Looks good!
Congrats.
exelente !! muchas gracias!!
Good article. I’ve been using a similar approach with my projects, but using different mark-up:
<div class="message-box"><span class="success">Successful operation message</span></div>
… but it’s all down to preference. I feel it gives me more control with the CSS.
Looking forward to seeing your user control example!
Excellent article. Very helpful info to share.
THank, I think I’ll use this on my drupal website.
awesome, love you! <3
:D
another alternative:
.MsgBox {
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’);
}
HTML:
<div class="MsgBox info">Info message</div>
<div class="MsgBox success">Successful operation message</div>
Trackback from DailyCoding.com
Links – Jun 02, 2008
This is fuc*ing awesome dude, thanks a lot!
Do you have a download of the validation icon handy? As the Knob pack doesn’t come with that particular one.
@Scriptdaemon: I sent you the icon on your email :)
Another alternative, using shorthand, and set fonts to em to make more accessible:
body{
font: 0.81em Arial, Helvetica, sans-serif; /* 13px = 0.81em */
}
.msgbox {
border: 1px solid;
margin: 10px 0;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background: #bde5f8 url(info.png);
}
.success {
color: #4F8A10;
background: #dff2bf url(success.png);
}
.warning {
color: #9F6000;
background: #feefb3 url(warning.png);
}
.error {
color: #D8000C;
background: #ffbaba url(error.png);
}
this should be standard for every application!
nice work
I’ve done this on my site before. No one liked it though so I got rid of it.
[quote]Another alternative, using shorthand, and set fonts to em to make more accessible:
[/quote]
when using the shorthand version (ie. background: #ffbaba url(error.png);) the all encompassing declaration (.info, .success, .warning, .error, .validation {}) needs to be after each individual class declaration. this also eliminates the need to use multiple classes as in Justin/Norik’s examples.
css background examples , Properties , Attribute – - http://css-lessons.ucoz.com/background-css-examples.htm
Great resource thanks
Very nice.
I fav it.
Those look quite nice, may use that for my next project.Thanks!
Very handy tutorial. Thanks!
Really cool post man, original idea and clearly written. I like it.
I loved this post Janko. Really cool
Artigo Maravilhoso, muito bem feito e muito bem escrito. Eu poderia também postar minhas observações mas acho que da maneira que foi feito já está ótimo.
Parabéns.
nice. One drawback: having the icon as a background image will refrain the user/visitor of having the same experience when printing the page. Usually (by default?) backgrounds are not printed by the browser.
Thank you!!! Very nice boxes.
Thanks, very useful!
Hmm.. Now this is is a very detailed tutorial. If you combine it with some javascript, you get an excellent way to communicate with visitors.
Simple, but still very useful!
Thanks for publishing it.
Nice guide, will definitely use these in apps I’m building
That’s quite useful. I didn’t know it was that easy to customize a graphical response with CSS.
Good one!!! Keep em coming!!!:)
Thanks a lot, great and very usefull… keep it up (H)
Finally a .NET developer with a sense of style. :D
Keep up the great work, was really useful!
Odlicno.
Navistina e dobro pri programiranjeto da se obrnuva vnimanie i na izgledot i na porakata koja treba da se prenese.
ps. I hope you speak my kanguage :) (Macedonian)
Ivan, thanks for the comment. I couldn’t say I speak Macedonian, but I understand it ;) I visited Skopje several times and had a great time there!
Thanks a lot for the help, Janko!
I already started using this on my site.
very nice :)
Sweet message boxes, I’m working on implementing them right now. Thanks Janko!
very nice :) great job!
Thanks for this – I had been looking for a nice way to display various types of messages back to the user and this has been an invaluable starting point :)
thanks for this tips.. i love it
I had been looking for a nice way to display various types of messages back to the user and this has been an invaluable starting point Smile. lolz :D
Nice will have to use one of them!
Just developing our new site and have used your message boxes! Absolutely awesome… Thanks for posting it up :P
This is a very nice post man.
I will sure use this very very soon
Thanks for tutorial !
great post. it was very informative
nice guide, i will use that for my next project. thanx!
I think all web developers should know this stuff.
Yes! I would like to recommend all the webby people should know about this and about the standards as well.
Nice and informative article…
Anybody that has anything to do wit computers should read this.
Design of used icons in this case should be familiar to the user.
I really like the style! Could you also send me the validation icon? Thanks!
yea the style is great!
Awesome style, love it so much, cheers mate!
Very usefull information. Thanks for sharing.
Wicked style mate, thanks!
really nice tips for new css learners
thanks for this
Great Design of the message boxes.
Thanks
Great Article! Thanks for the great tuts on creating css based message boxes.
nice!.. Thanks You
Mind sending me your notification icon? Mine is a little hacky :)
Very nice indeed! If it is OK with you I would like to make use of these message boxes in my own web designs?
If it is no trouble for you, would you mind passing on the validation icon, please? It seems that it is missing in the knob package.
Thank you for sharing.
PS. Merry Christmas
Excellent, very well what agegare to my favorites, thanks for sharing your knowledge
Wow, this is so great, thanks so much!
Ummm, any chance you could send me that red exclamation point to use for validation messages? I couldn’t find it in that Knob Buttons package. Thanks!
Excelente articulo Janko! Gracias!
Great tips, compiling…
Thank you very much.
Yes, I wish more people would make more use of the CSS message boxes.
Thanks , great post!
what a impressive article. last days I didn’ t read post like that. I am now your blog’ s follower thanks for this useful blog. I am now your blog’s rss follower.
Excellent post, nice style and thanks for sharing it.
You’ve forgotten about color-blind people. 1 in 12 people are colorblind. To many of them, red and green are the same color. I know that to most people, green means ‘good’, but red meaning ‘bad’ is ever stronger. So I’d pick a different color for the ‘good’ dialog.
And yes, I notice that the icon is different in your examples, but the idea of the colors is to make the status known at a glance, and colorblind people won’t be able to use that.
It’s really interesting post.I immediately tried the whole code.it’s working.i hope if you have other such code you will definately share. Thanks for sharing.
I had the same error messages as you but with a little design difference. I can’ live without them :)
When doing my degree at university, we were told to make reports interesting and active for the reader. Your suggestion of using colours was what i used for different sections. This enabled the viewer to know instinctively and bring attention quickly.
thanks for the read. still trying to wrap my head around css
very good aarticle :) \thx
In respect to Jenny’s post which most seem to have ignored, I think this is a good idea, using colours to represent the type of error and using an icon to indicate the error that happened but the reason it was not liked is probably because the size, border and highlighting seems to be a bit of an overkill to me.
This is great validation and helps us understand
Can someone please e-mail me the validation icon? It’s not included in the knob pack. Thanks.
Nice job on this.
Nice article – good work dude.
very nice article
One suggestion I have would be use <p> instead of a <div>.
excellent post. ..i love the style
really usefull
ty
Thanx for these nice message boxes!
Excellent Article, very nice styles!
Simple and concise….I LIKE !
Awesome!
Really nice information indeed
Wow, great article. I never really think of that before. Thanks!
Useful article. Now I can make a nice CSS Message Boxes as I expected. Thanks a lot for sharing this useful post.
Wow, the message-boxes are very cool. Thanks for the article and the help :)
Thanks for the great post!
Does anyone know where I can get the validation icon, or can anyone send it to me?
Thanks.
wow, simple yet very well explained and beautiful tutorial – thanks!! I knew basics, but also find out few code snippets explained I didn’t know how to use right :)
very useful
thanks
Just great for applications/ websites all alike.
Thanks for the great tip.
Thanks for sharing. Very helpful
Great post.
Hey, great post! Would you mind embedding the validation icon in your sample, or send it to me directly? Thanx :-)
Hey,
can you send me the validation icon, too. Please!
Thanks for the article. I love the layout of these message boxes. Very clean!
If you need the validation icon, you can make it yourself. Download the knob icons and open the blue exclamation point icon in Photoshop. To change the color go to Image > Adjustments > Hue/Saturation… and adjust the hue to your liking. Then just save for web.
Hope this helps!