On the usability of taps and the lessons for web design
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.
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?
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.
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.
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.
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:
And here it is when I bent forward to inspect the tiny 6 point font that says cold and hot.
- 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 hot. And when, as pictured, the point is pointed at 'tepid', well, that's when it's off.
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.
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.
- 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.
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?
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.