Written by Ben Hunt from web design agency . For more information about his agency visit scratchmedia.co.uk

Usability Mistakes

Sometimes the best way to see a usability principle clearly is when someone gets it badly wrong.

I'll use this page to show snippets of usability mistakes I find round the web, hopefully to illustrate what better usability would look like.

There are only 2 for now, but from a tiny acorn the mighty oak doth grow, and there's plenty of material out there!

1. Passport Office - “Guess a Number”

Here's a nice one to start with. When trying to report my passport lost to the relevant UK Government agency, I wrote my explanation in a box, only to be told that it could only be max 90 characters.

Error message saying text is too long, with no feedback on count

Now, I don't know what 90 characters looks like. So I tried to edit it down, and got the same error.

Here's what I did to work out just how far out my text was…

Copied & pasted my text into my trusty text editor, where I found out I'd written 170 characters.

Screenshot of my text editor, showing character count on long line of text

What principle has been broken?

If you're going to tell someone they've done something wrong (as if supplying a bit too much helpful information in a field entitled “Circumstances…” is wrong!), you have the responsibility to tell them exactly what it is they've done wrong, and how they can remedy it most easily.

What could have been done better?

There are several things the designers could have done to make this situation more manageable:

Ideally, don't limit the maximum length for an important free-text input like this to something so piddly as 90 characters.
If you do have technical or design limitations that mean you can only let people enter a fortune-cookie amount of text, don't give them a textarea to do it - a simple text input would set their expectations better. When I see a <textarea>, I think I have plenty of scope to write.
Show a Javascript-powered counter, saying "43 characters left".
Don't let me make a mistake in the first place, by limiting the maxlength parameter of a field.
If you can't manage any of these, and I've made a quantifiable “error”, at least give me specific feedback so that I can quantify by how far out I am, i.e. Tell me I've written 170 charaters, so I know I need to cut it down by 50%.

2. Tradebit - “Guess a Percentage”

In a similar vein, here's what I see every time I log into my Tradebit system (Tradebit is a great solution for selling electronic files using PayPal).

Box is solid bright green - is this full or empty?

I get a useful warning: “Over 100% usage will disable your account!”, complete with exclamation mark. And when I look at the Disk Usage indicator above, I see it's solid green.

Does that mean I'm already at my limit? Does that mean my account is disabled? Or am I using 0% of my disk space? How can I tell?

What principle has been broken?

Clearly, the indicator isn't working. I can't discern from the indicator exactly how much of my disk space I'm using.

What could have been done better?

Just relying on a coloured bar to indicate how full/complete something is doesn't necessarily work at the extremes, unless you can definitely discern fullness from the properties of the bar itself.

We're more familiar with seeing this type of component to represent progress, where you start empty and end up full, and you can see the progress change over time. That doesn't apply here, because it's giving you a static snapshot of fullness, which doesn't change as you look at the screen.

It might be possible to use an indicator alone, say if it's a beer glass full of beer, because I can see the glass is full. I know what a full glass looks like, and I know what an empty glass looks like, because I'm familiar with seeing that in the real world.

The problem with this indicator is that I have no prior knowledge, or reference, to tell me whether greenness is fullness or emptiness.

Some solutions…

One option would be to display a quantitative indicator, e.g. "0% full" alongside my bar. That would do 2 things:
- It would let me see quite quickly exactly how much disk space I'm using.
- It would teach me the correlation between colour and fullness/emptiness.
Or just show the percentage on its own. It's precise, it's universal, and it's quick & easy to understand.

Recommended reading

Don't Make Me Think, 2nd edition

By Steve Krug

Level Introductory

This is the one must-read usability book for all web designer and developers.

Steve Krug's masterpice (now in its second edition) achieves the amazing feat of making very complex concepts simple enough for anyone to understand.

It's a very easy, lighthearted and quick read, thanks to great writing, smart page design and lots of pictures.

The second edition has several worthwhile additions over the classic original book, with 3 new chapters covering important stuff like accessibility.

Buy now from