Monday, 2 September 2013

Water fountains, hearing aids, pelican crossings and thoughts on button placement

As designers, when we think about buttons, we tend to focus on what they look like. Should they be shiny, three dimensional and "clickable"? Or should they be starkly simple and borderless? But my experiences this past week have reminded me that there is one feature of a button that is even more important than its appearance - and that is its position.

This weekend, while I was out for a run, I stopped at a water fountain, waiting my turn behind a rather confused lady who couldn't find how to turn the thing on. I pointed the button out to her, she took a quick swallow and then hurried away sheepishly.

I'd used this water fountain on many occasions before during my runs. So frequently in fact, that I didn't even think about where the button was as I pressed it. But now, reappraising the water fountain with the critical eye of a user interface designer, I could see it was flawed. The lady in front of me had expected the button to be close to the water nozzle. She had been trying to push the metal shield that curved over the nozzle, expecting the button to be integrated in some way. Not a bad idea at all. But in fact, the button was on the side of the fountain, partially concealed below the rim of the receiving bowl. It was a convenient position once you knew where it was, but I wonder how many users never found it.

So...  button position learning 1: buttons need to be discoverable - locate them where users will look for them. Usually close to the function they perform.

I may have no trouble using the water fountain, but the position of another button has been giving me grief recently.. Last month I treated myself to a fancy new pair of Siemens Aquarius waterproof hearing aids.  They came with a "Minitec" wireless accessory, which is necessary for adjusting volume and making Bluetooth phone calls. Every time I squeeze the clip on the device to attach it to my lapel, I accidentally press the "Call" button, which is located on the opposite face from the clip. The button is located such that it is virtually impossible to use the clip without pressing the button.  And every time it's pressed, there's a temporary interruption to the essential function of the device: amplification of ambient sound. In other words, this button position makes me temporarily deaf.

Learning 2: buttons should not be located where they are likely to be accidentally triggered.

Finally, I was intrigued by a hidden button concealed on an interface we all use every day - the pelican crossing control box. Hidden on the underside of the box is a button (or rather, a nob) which rotates whenever the green pedestrian light is on. It's designed to provide a tactile feedback to those with visual and hearing impairments.

The nob is so well concealed that you would never know it was there unless you were in the know. So for most crossing users, this extra nob provides no distraction - the front of the control box remains uncluttered, with a single button and a "Wait" light which appears above it. But for those who need it, this essential extra nob is easily accessible.

Learning 3: reveal extra buttons only to those who need them, without distracting those who don't.