I don’t really know if this falls under product design or user experience design.

Today I stopped at my local AM/PM to get gas — $3.17 a gallon for Premium. Not bad. Not great, but not bad. As I slipped my ATM card into the pump’s interface, it asked if I agreed to the .45 cent charge. On the keypad next to the flat (i.e. not raised like the rest of the keypad) green “okay” label is the actual key with the number 1 on it. So I hit it and it took me to the next screen – “Do you want to buy a carwash”. Next to the flat red “No” is the number 4 on the keypad. So, being that the 1 on the keypad worked, naturally the 4 should as well.

As computer users, and just users of technology devices that have contextual menus, the keypad could either be used to enter one’s PIN or ZIP code, or in this case, act as the yes and no keys, as well as cancel (which was a flat yellow label next to the physical “Clear” button). So I pressed the number 4, or what I assumed to be NO…and pressed, and pressed. Nothing happened. “Do you want to buy a car wash” was still on screen, as though the pump had a camera, some for of AI, and saw my dirty yellow car (I live on a dirt road, so, well, you get the picture).

So I go in the store. “You have to touch the ‘No” button” the attendant informs me. So I go back out. Hmm, no “No” button. What if..? So I insert my card, this time trying the green label– AHA! It’s a membrane button. Same with the No button. Okay. So I get that they wanted separate  buttons for these actions. Good idea, bad follow through. Below is a graphic I put together of what they have and what I think they should have instead..

Of course there are other ways to do this and this is only one of many solutions. Whoever designed the current implementation should not be working as a designer, and most likely they aren’t anyway.

So next time you get gas, check to see if what looks like a label is actually a button.

• User Experience Design