malcolm coles

I have been reviewing the usability of taps - avoiding arrest for getting my camera out in public toilets and showers - in order to see what lessons the design of everyday objects can tell us about web design.

Here are the findings ...

If you need massive instructions, you've cocked it up

So these are the massive instructions pinned behind one tap I came across. Er, people, it's a tap. If it needs all this, it's a rubbish tap.

A massive sign with tap instructions

The lessons

If you're writing loads of help text for your site or tools because of problems in usability testing, there's something wrong with the interface. Start again. From scratch. Help text is not the answer.

Keep important information above the fold

Virgin trains taps and soap

This is what you see when standing there. WHERE IS THE ACTUAL TAP?!? How do I operate it?

Virgin train toilet: What you see when you're standing there

This is what you see when you bend down. Oh, that's where the tap and dispenser are ... I really want to bend right over to waist level to be able to use them.

Virgin train toilet: What you see when you bend over

The lesson

I know people can scroll. And I know not everything should be visible when you first look at a webpage - but you need to give people a clue when they first get there. Making people scroll (bend over) to see important functionality is a bad idea. So don't have a massive header panel, for instance.

Degrade gracefully

These taps aren't going to degrade gracefully. The hot is on the right (the left is usual in the UK) and the blue marker for cold has fallen off the one on the left. If the red marker falls off, no one will know which tap is which.

Two taps - one is missings its hot / cold indicator

The lesson

If you use javascript for functionality, make sure the pages work with javascript off. Some mobile phones don't run javascript for instance - so making your comments run via client-side javascript or having carousels that don't work with javascript off is a bad idea.

Don't use a tiny font

If you have one of those rotating taps, it helps if people know which way to rotate the damn thing to get it to work.

Here's a tap I came across:

A tap with a tiny font

And here it is when I bent forward to inspect the tiny 6 point font that says cold and hot.

Zoomed in on the tiny font

The lesson

Typography and readability are important - I recently chided newspapers for their small fonts:

• Aim for 1em (= 16px or 12pt) for your body copy font if you want people to read it.
• Don't set your font in absolute pixels, as you stop IE6 users resizing it.
• Make sure that if someone ups the font size in your browser, your layout is still readable.

Test it works

So, look at this tap (sorry for picture quality). There's a pointy end and a large white end you hold onto. Guess what - the pointy end shows nothing. You need the large white end to obscure the setting you want for it to work ...

So when the white bit obscures hot (and the pointy bit points at cold), it's cold. And when, as pictured, the point is pointed at 'tepid', well, that's when it's off.

This points the wrong way

The lesson

I presume this is plumbed in back to front. They could have uncovered this if they had tested it with some real users. Make sure your assumptions are correct by testing your designs with users.

Be consistent

So to turn on a tap, you turn it anti-clockwise. Not with these taps! The left one works that way - but the right one works the other way. You have to turn it clockwise to get it to come on.

One goes one way, the other goes the opposite way

The lesson

Be consistent:

• For a start, be consistent on your own site.
• Secondly, be consistent with every other site. Don't invent your own icon symbols or ways of doing things - users shouldn't have to learn how to use your site. It should be obvious and intuitive.

Give feedback

Some taps that you rotate indicate which way to turn them with a blue blob for cold and a red one for hot (or with an H and a C). Here are some.

I can never, ever work these out. If I rotate it to the red side, then the red disappears round the back and I can see the blue. Does this mean it's getting hot or cold?

Four taps with a blue / red blob or H / C letters to indicate temperature

The lesson

Give users feedback that helps them understand what they've done and what's happening. This includes:

• Links that change colour when visited
• Buttons that change on mouseover
• Indications on forms that there is an error - and where it is.
• A progress bar when things are happening.

Avoid confusing feedback like:

• Links that don't change on hover
• Headlines (that aren't links) in the same colour as links.

What do you think?

Here's another interesting articles on tap usability:

• Unusable sinks on Boeing planes <-- very true!
• Modern life is rubbish (again) that features taps alongside air dryers.
• A picture of some knuckle-grazing taps.
• A water fountain where you have to press a button to be told what button to press.

You might also like

1. Five changes I'd make to the new Web User beta design
2. New design trend: Logos that change to show you they're a 'home' link
3. Sites whose appearance sucks in google news!
4. Content carousels reviewed: Yahoo loses, Sky wins
5. Design, readability and websites