The Pin Number Screen

I use my debit card on a regular basis (thanks to mint.com tracking my spending), and have to suffer through the horrible experiences of those credit card consoles quite often. Every now and then I run across one that’s intuitive and easy to use, but I can’t remember what retailer uses those, and for good reason. You’re not suppose to remember your experience with the credit card machine! There is one in particular that has been getting on my nerves and last time I used it I took a picture. Its the “enter your pin” screen at my local Central Market.

EVERY TIME I enter my pin number, then hit Cancel. I have to start over and it drives me crazy. I hope I’m not the only idiot user to hit cancel every time I go to the store to buy some fancy beer. But that’s not the only problem (ignoring the horrible color palette). What if we got rid of the cancel button, I still wouldn’t know what to push without looking closer. Credit, Enter and Clear all look the same requiring me to read them one by one to figure out what I’m suppose to be doing. What if couldn’t read/speak English? I’d never be able to figure out what my next step is after entering my numbers. I think its safe to assume that since I’ve done it several times that I’m not the only one, so lets analyze this situation a bit.

The Goal

The goal of this screen is to allow a debit card user to enter their number into the machine, see that numbers are being recorded as they type them for reassurance, and to hit “Enter” to proceed to the next screen. The natural motion for a user after entering their pin is to move to the right or lower right to hit Enter, and since that’s the goal of this screen I think it’s usually safe to assume that it would be appropriately stylized to show that it is the most important button or action, but its not. Its the same color as all the other buttons, but what does stand out as the most important button on this screen? CANCEL! Why? I have no idea. I’m not here to cancel. I’m here to enter my pin, but it’s too late and the momentum of my fat finger and slow brain (thinking about drinking that beer I’m buying) has pushed it before I can stop myself.

Secondary Objectives

There are several other actions on this screen that are important. ADA Keypad (I’m going to have to push this next time cause I’m curious what it does), Credit (in case you don’t have a pin), Cancel, and Clear. These are all needed, but not as important as Enter.

Simple Solution

I’m assuming there are many display limitations and rules regarding the steps involved with using a credit card, thus I’ve created this solution to our Enter problem keeping the design as close to the original as possible.

Look at that! One color change and everything makes sense. It’s always a good idea to use logic instilled into users from other situations they encounter in everyday life. In this case we’re obviously playing off of “green means go, red means stop”. Its so simple, yet so effective in this case.

Redesign

Still not totally satisfied with that solution, I wanted to do a quick redesign and see what I could do in 10 or 15 minutes to improve this design with some common design and user interface principles.

I didn’t go all out here since I don’t know the limitations of the display itself, so I didn’t use any gradients or a subtle color pallet. Instead I tried to concentrate more on the layout and contrast. Once again I chose to stick with red and green to quickly convey “go” and “stop” to the user. I also kept the “Enter PIN” and display field centered above the key pad to show their relation and to make it easy for the user to see that their inputs are being recorded. If that field was centered within the window instead, it would require the user to look further away from the key pad to see their inputs, and we don’t want to cause any more work than necessary.

The other thing I tried to do was create a visual hierarchy. Most important are the numbers, enter, and then cancel. The Clear button is in white to draw some attention to itself if being looked for, and the ADA Keypad and Credit buttons are even more subtle since these two are also buttons only necessary for certain people and certain situations.

Conclusion

The key to great application and interface design is to make it as easy as possible for the most people to do what they need to do. Some serious thought about the end goals and how the user is going to complete those goals can go a long way, but this is also a perfect example of lack of user testing. I guarantee that this problem could have been discovered and fixed even without the help of a knowledgeable User Interface Designer had they just done some user testing.