Error Message Design Showcase
An important part of designing any kind of registration or login form is how you handle when things go wrong — a required field is missed or data is entered incorrectly.
How do you inform the user that they have made a mistake and help them in fixing it?
I thought it would be useful to collect some good examples of error message design to show how other web designers have tackled this issue.
Although often different in the specifics of their approach, these samples provide a sense of the main principles of good error message design:
- Show where the error(s) occurred in the form.
- Clearly explain what the error is (and how to fix it).
- Use color and possibly icons to make the error information stand out.
Not all of these examples are perfect. Some I've included more for the way they take a slightly different approach to a common problem.
However, in doing my research I was surprised by how poorly error messages are implemented on many sites. In many cases it seemed to have been added as an afterthought or without the involvement of a web designer.
View the error message design showcase.
Posted on: November 18, 2008 | 7 Comments
Recent Entries in "Showcases"
- Contrasting Design Conventions (17)
- Video Game Web Site Showcase: 75+ Examples of Game Site Design (15)
- 10 Quick and Dirty Ways to Lay Out a List of Links (40)
- Get Ready to Claim Your Facebook Vanity URL (13)
- Forum Design Showcase (23)
- Typography-Based Layout Contest (5)
- The Value of Paper Prototyping (18)
- LinkedIn Recommendation Generator (11)
- Exclude Dynamic IP Addresses in Google Analytics (9)
- CSS Rounded Corners 'Roundup' (82)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (40)
- Blog Comment Form Design Showcase (15)
- Blog Comment Design Showcase (36)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- How to Style 'Author' Comments Differently on Your Blog (9)
- How to Style an A to Z Index with CSS (5)
- Designing Interfaces: Patterns for Effective Interaction Design
- Blog Design Solutions
- Designing Web Usability
- 101 Essential CSS Tips, Tricks, & Hacks
- Web Standards Solutions
- Web ReDesign 2.0: Workflow that Works
- The Zen of CSS Design
- Don't Make Me Think
- Bulletproof Web Design
- DOM Scripting
- View more recommended reading…
7 Comments Posted
A very useful collection of examples. Of these only Zadby, Wufoo and SoundCard also have required form field indicators which adds to the visual noise for users to decode. But the messages seem to indicate that most of the fields are required in all of them.
The written text is just as important. Even in the highlighted example above (Professional On The Web), the field name label is "USERNAME" but the message refers to "Login" - different name, different case. This one also says "AGREE TO THE TERMS OF SERVICE AND PRIVACY POLICY" but the message is "Terms of service must be accepted". So are we agreeing to the privacy policy or not? Vox similarly have "Member name" vs. "Display name". I don't think these can therefore be "good examples".
I have an especially bad example at: http://www.clerkendweller.com/2008/11/7/Separate-the-Text-from-the-Code.
1. Posted by Clerkendweller on November 19, 2008
Any resources to having errors highlighted? jquery perhaps?
2. Posted by Sean on November 19, 2008
Very useful tips ,thanks for displaying with screen shot.
3. Posted by web designing on November 19, 2008
Here's a contact form I recently set up.
The labels themselves are used for the error messages, and the iconography is contained within the field itself (notepad for edit, green check for valid, red exclamation for invalid). Validation is done client-side if JS is enabled, and server-side in all cases.
Other usability tweaks that don't show up in screenshots: The action URL has an anchor, so when the form is submitted the user is brought directly to the form. Also, any telephone number submitted has its format standardized (to see it, enter ten digits separated by spaces, periods, nothing at all, etc.).
4. Posted by scott on November 19, 2008
while searching i found your blog after going through it i found Useful infomation from your blog.
5. Posted by reddysinfotech on November 24, 2008
this is a great post, i’ve waiting to release this after the first theme design, i’m trying to learn how to integrate it on wordpress as i’ve don’t have enough time to tweak the css for that, but now this helps me a lot to work. Thank you so much
6. Posted by Website Design Delhi on December 17, 2008
Error messages deserve a lot more thought than they're usually given... My 404 error (slightly modified for my internal server error) gives a slight Easter egg to users who've unfortunately encountered a glitch.
7. Posted by Jonathan Hayward on February 09, 2009