3 Usability Mistakes (updated)

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.

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.

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).

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.

3. Customer Support - "Denotes Optional"

Check out this simple blunder.

This screenshot is from my web host's online customer support system. I was confused to see the red asterisks used against the bottom 2 fields (how to reproduce the issue & any other information), as these really didn't seem like they should have been mandatory/required fields.

Then I noticed the legend at the bottom, telling me that the red asterisk actually denotes an optional field!

What they've done wrong

They've used a web convention (asterisk to denote required field), but in the opposite way to its conventional use.

True, in general print, you can use an asterisk to refer to a footnote or similar additional minor comment, so in theory it can mean anything. You just have to look at the comment.

But there are 2 problems here:

• One is that the web convention is to use asterisks to denote required fields. You can almost use the asterisk on its own, without the accompanying legend, and people will almost certainly guess correctly what it means. So the convention is being used backwards… It's almost as bad as using traffic lights with green denoting “stop” and red denoting “go”!
• To make matters worse, the asterisk is also rendered in red, which is the universal colour for alert/danger/important. Whenever I see a red asterisk on a form, I assume 100% that it means “required”.

What should they have done?

Simple. If you're going to use a convention, use it conventionally. If they want to distinguish for their users which fields are required, show the ones that are required, not the ones that aren't.

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