Designing error-messages is easy. So many sites make a dog’s dinner of it, that people think it must be brain surgery to get it right. It isn’t.
Error messages need to do 3 things – tell the user:
- something has gone wrong
- what has gone wrong
- what to do about it
It’s really that simple.
Here’s my guide to making sure your error-messages fulfil these 3 functions:
1. Have a big, bold, red exclamation mark and error message at the top of the screen.
This will let the user know that there is an error. The fact that there is a big red exclamation mark at the top of the screen, with a message in big red text right next to it, is a dead give-away. Some designers don’t like this solution because it ‘breaks the design’ and makes a page look ugly. Well, guess what?! Making sure you get users’ attention on one part of screen sometimes requires exactly that! If the error-message just ‘blended into’ the page, what use would it be?!
2. Use the error message to tell the user what is wrong
The exclamation mark should be followed with a message reading something like this: “The following errors have been found on this page…”. The page should then present a bulleted list (again, in red) of the errors.
Obviously, avoiding nasty techno-words like “error” is a good idea if possible – on a form the user has to fill in, a site might state “The following information has not been provided”, for example. This message would have the advantage of also prompting the user on what to do to remedy the situation – i.e. provide information
3. Associate the error-message with the place on the page the user has to go to correct it
The most obvious way to do this is to have big red exclamation marks next to those bits of the page where the user can correct the error.
In the example of a user filling in a form, the exclamation marks would be next to those fields that had not been filled in, or had been incorrectly filled in.
4. Use sensible language
I’ve said it before, but it bears repeating – try not to use words like ‘error’ and other geeky, techno-babble terms. Try to explain what is wrong in terms users will understand – terms that are relevant to their understanding of what they are doing.
And there you go – you can now design error-messages.