Usability Matters

While most of the usability work I do is confined to the web, it’s hard not to notice poor usability in the real world as well.  In fact, many of the same concepts that drive great usability design (mapping, affordances, visibility, etc) exist both in the real and virtual worlds, serving the same purpose as far as user interfaces go.

So, I was really excited when my wife (@molliebrad) brought me the following photos she snapped at a gas pump the other day.

As she was explaining the story, she said that after she had put her card in the pump, she kept pressing the button for credit, only to have nothing happen.  Here’s a picture of the keypad in mention:

As she was standing there, she says, she kept pressing the “1″ button, trying to get the machine to accept her input as selecting “Credit here”.  The number 1 is obviously labelled as such, but pressing the button didn’t seem to do anything.

The problem, as she figured out after a few moments, is that “Credit here” isn’t a label - it’s a button.  What?  Sure doesn’t look like one.  Evidently, she’s not the only one who’s made this mistake.  In fact, so many have, the gas station has affixed the following note to the top of the keypad:

Aha!  Evidence of a terrible interface design.  The ever-so-telling instructions on how to correctly use the interface.  Sad.

So, what can we learn here?  There are a least a couple things wrong:

• Poor use of affordances -  On the keypad, the numbers are clearly buttons.  They are raised and beveled, and look like they can be pressed.  However, what about the buttons around the edges?  The manufacturer, probably due to aesthetic considerations, has removed all the button-ness from the buttons!  Lesson:  let objects read like they want to read.  Buttons should look, feel and act like something that can be pressed, which involves visual cues like raised edges, bevels, shadows and sometimes texture.
  
• If you need to provide instructions on how to use an interface, something is probably wrong.  Here, there’s a note added after the fact that is attempting to prevent people from making a mistake.  The interface, however, should provide all the clues necessary through it’s physical design, not through instruction.  As my wife has proved, user’s don’t read instructions!  Despite this note hanging there, it took her several frustrating moments of failing to finally realize that there were instructions above the keypad.  All users of interfaces, on the web or in the real world, do the same thing - we try first, and read later.

If you ever find yourself feeling like an idiot because you can’t figure out an interface, rest assured, it’s not you…it’s them.