Michael Gaigg: Über UI/UX Design

Design Guidelines: Error Messages

Posted by Michael Gaigg

Just some weeks ago I wrote about Design Guidelines for 404 Pages. Closely related are Error Messages in general, and believe me, they will save your life. That's why you need to get them right!

Why bad error message can hurt your company

Error messages are like saying "You are stupid", or "Come on old fart, you still don't get it?" - and that's bad, it's almost like constantly telling your kid "No, no, no". Be preventive, defensive and avoid Design Bloopers like the the one at Cingular: Having tried to log into my account the following error message appears "My Account is Currently Closed". Can you imagine the horror that bubbles up and the thoughts of who to call (but how?)? As it turns out Cingular was just maintaining their server and the only flawed thing was the error message. Is it possible to measure how much this little flaw will hurt the company?

Misleading and almost terrifying error message at Cingular

Defensive Web Design

The beauty of usability design is to think of ways to prevent showing error messages at the first place. The most prominent example is probably Google. Have you ever seen an error message on Google? How great is the "Did you mean:" function... I even use it day by day as a spell checker, like I use google images to visualize words I didn't know (do you know what a vicuna is?).

Design Guidelines: Error Messages

1. Avoid error messages if possible.
2. Explicit indication that something has gone wrong
3. Human-readable language
4. Polite phrasing without blaming the user or imply that user is stupid or is doing something wrong
5. Precise descriptions of exact problems
6. Constructive advice on how to fix the problem
7. Visible and highly noticeable, both in terms of message itself and how it indicates which dialogue element users must repair
8. Preserve as much of the user’s work as possible
9. Reduce the work of correcting the error (e.g. list of possibilities)
10. Hypertext links may be used to connect a concise error message to a page with additional background information or explanation of the problem.

Did you ever encounter a 'special' error message?

Send me a screenshot and/or tell me the story behind it.