Designing Message Boxes
31 May 2007I wrote the following article for the latest AussieHQ newsletter.
Message boxes are a great way to inform your users but can often be the cause of much confusion. If your user fills out a form with incorrect input and your error message is displayed at the bottom of the page, there's a good chance your user will be left sitting there wondering why nothing happened.
To design an effective message box, I suggest following these guidelines:
- Use icons
- If it's important, make sure it's eye catching
- It has to be short, to the point and readable
- Use Colour coding
Using the above guidelines, we can design a great set of message boxes for a website. I've used free icons from the silk icon set at famfamfam.com.
Information
Displaying helpful information to users is a great idea, but it shouldn't distract the user from their main goal. This is why information boxes are generally a washed out blue colour.
Success
Green is a friendly colour, so we use it to report success.
Warning
Yellow is great for invalid input messages, because it attracts attention, but it's not necessarily a "bad" colour.
Error
In theory, a user should never see this box. Red is often used to indicate danger or emergency, so it's the perfect colour for a fatal error.
Here is the CSS used to create a message box (thanks to bioneural.net.)
.warning {
background: #fff6bf url('img/warning.jpg') center no-repeat;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}
And the HTML:
<div class="warning">Invalid input message here.</div>I would also like to point out, that an effective error message should be placed above the fold, so it's the first thing the user reads.
If you would like to learn how to write good error messages, check out Error Message Guidelines by Jakob Nielson.
Tim
Those message boxes look great! I saw them in the newsletter yesterday and decided I will be stealing them soon :)