Feature Article (Pub: August 03) Design vs Usability by Tim Fidgeon
There's a perennial debate about how design and usability can co-exist.
The theory is that design is all about making things pretty, usability is all about making things usable and that the two are inherently at odds with each other.
Now, some people try and cop out of the debate by arguing for co-operation and peaceful co-existence and getting the best of both worlds.
"Can't we all just get along?"
Well, obviously, that's the ideal situation, and is mostly achievable if you have mature, sensible people working on a project. But sometimes (even with mature, sensible people) there's a disagreement that needs resolving and you have to take sides.
I'm here to tell you that you should always, always side with usability. Why? Because if your site is not usable you may as well pack up and go home, because it's going to be game over. Now, designers will argue the toss, and whinge that since the web has been going for a while now that users have learnt how to use websites and don't need hand-holding, etc. Don't listen to them. These are the voices of the Dark Side trying to sabotage your business and glorify their own design-ego.
You only have to have read a comedy email about real-life questions to PC helplines to know that there are large chunks of the population who barely know how to use Word. Assume users know nothing. Your business will live longer that way.
Error Messages - What to do by Tim Fidgeon
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.
Tim Fidgeon (MSc HCI) has worked as information architect and usability consultant for a number of FTSE100 companies for 9 years leading a variery of projects, and heads the usability team at CommerceTuned.