November 9, 2007

Lessons in Usability | Credit or Debit?

It sounds simple; swipe, sign and your quickly on to enjoy your morning pick me up. Unfortunately, it seems as though most credit card pin pads were not designed with the customer in mind. What can we learn from the confusion often created by the pin pad interface?

“Could you try swiping again? It didn’t go though.”

That always happens; my card is practically falling apart it’s so old

“Oh I see, can you please flip the card over? The magnetic strip needs to face to the left; like it shows on the pin pad.”

Ok hotshot, it’s swiped.

“Credit or debit?”

“Credit.”

“Great, just hit Cancel then Yes.”

Ooh. Where is that cancel button? Why am I pressing Cancel anyway?

“Cancel is that one on the bottom.”

Okay, I found Cancel. Now I just have to hit the Yes button. It must be that bright green one right?

“Yes is the yellow button that is two buttons above the green button, dumbass sir.”

Two buttons above the green? This one or that one? The words are a little too small to read….

I’m sure you’ve had a similar experience at some point or another; it’s nearly a daily occurrence for myself. So back to the original question: What can we learn from these hard-headed pin pads and apply to our online applications?

1. Your users cannot read your mind.
It is very easy to become too comfortable with your product during development that you start to believe that since you know your product inside and out, then everyone else does also. Make it a point to consciously review this during development and regularly run simple usability tests. (my favorite: have mom or grandma run through the application. If they get it, you’re onto something.)

2. Clearly and properly labeled actions are essential.
In this case, the button labels were too small to see and the image directing the user which way to hold the magnetic field was not clear. In addition, requiring Cancel to be pressed to choose a Credit transaction is not ideal, to say the very least. Again, make sure your labels are making it through to your users.

3. A simple interface is not always easy to use.
A card pin pad is a relatively simple device: you’ve got your numerical buttons along with the action buttons. The simple task of purchasing a coffee with this simple device becomes difficult when the interface is convoluted. Choose your interface wisely and be careful not to oversimplify things. If you can’t budge on keeping things simple, tooltips and on page descriptions are great ways to clue your users in to more complicated processes.

An Echonote Example

Every time a user on Echonote initiates a new note, they select everyone they want to send the note to. Users can also save groups so that they don’t have to manually select each person every time they write a new note. To make group management usable and unobtrusive, I wanted to allow users to save and remove groups right at the time they were writing the note instead of having a separate and cumbersome group management page. Using groups had to painless.

Below you can see the Save a New Group field with the original description, “Save your selected friends to a new group.“

Apparently, what I thought was a perfectly fine description was not connecting with the users. A good portion of them had ignored this feature simply because they were confused as to what exactly to do with it.

To make a better connection, the description has been changed to, “Type a name below to automatically save everyone receiving this note into a new group to use next time around.”

It’s a little wordy, but it does help to break down the group saving process by explaining what exactly the user has to do and the benefit doing so.

Moving Forward
As you continue on with your development, keep your users in mind and involve them as early in the process as possible; it’s invaluable. Hopefully we’ll all eventually live in a pin-pad syndrome free world.