A little green button that schools us on good UX

If you’ve attended one of my UX lunch & learn sessions, this post will sound familiar. I’ve been telling this story for years, but it’s so good I never get tired of retelling it. That’s because it illustrates so perfectly the importance and benefits of good user experience design. It also shows how badly things can go without good UX. Plus, it demonstrates why UX design is not web design or UI design.

ATM enclosure

There’s an ATM enclosure in Lawrence, Kansas, that has a very interesting door. The ATM is in an enclosure that’s designed to provide safety and privacy to users. Once inside, the door automatically locks behind you. To enter, you swipe your ATM card to unlock the door.

swipe to enter device

Here’s the card swipe device that allows entry. It’s fairly well designed. There are no instructions, just a small diagram showing how to swipe your card. A red light indicating “locked” turns green after you swipe your card, at which point you can pull the door open. It’s fairly intuitive, but it does have a few flaws.

First, it assumes you know intuitively that swiping your card unlocks the door—there are no indications as to its purpose. That may be a safe assumption for most people, but not for all. Second, for best usablity, the illustration indicating the swiping action could be larger with better contrast, especially for people with poor eyesight. Finally, also from a usability standpoint, to accommodate people with color blindness, it’s not recommended that color alone be used to communicate important information (red for locked, green for unlocked). A better version would be like the one shown here.

But let’s let give them a pass on all that and assume you successfully get into the ATM enclosure. Once inside, the door automatically locks behind you so you can make your transaction in private. When you’re finished and it’s time to leave is where the story gets interesting.

push to exit button

You might think that exiting the enclosure is simple—just push the door open and go. After you try that unsuccessfully, you notice a green “PUSH TO EXIT” button next to the door, so you push the button and then push on the door. Wait for it—the door doesn’t open!

one sign next to button

You hit the button a little harder. Still no luck. A brief panic comes over you until you look around and see a sign taped to the inside of the glass that says, “TO EXIT ATM: Press & hold green button while pushing door open.” (You didn’t read the sign before because it looks like advertising, which is usually ignored.)

Those instructions seem clear. However, after reading the sign, you do need to think about it just a little. (“Didn’t I just do that?”) If you rethink what you actually did and then, instead, carefully follow the sign’s instructions to the letter, you can push the door open and exit. (“Whew, I’ve escaped.”)

Then, during a subsequent visit to the ATM, I noticed something curious. Instead of one sign to the left of the button, there were two new signs, one on either side.

two signs next to button

This time the signs have slightly different wording: “TO OPEN DOOR: PUSH AND HOLD BUTTON WHILE OPENING THE DOOR. THANK YOU!”

Once again, if you follow the instructions carefully, you can escape the enclosure.

three signs next to button

But then I returned several weeks later and noticed yet another set of instructions, this time taped to the glass in two places and also on the button case itself. The wording changed again, this time to: “PUSH & HOLD GREEN EXIT BUTTON WHILE PUSHING OPEN THE DOOR.” (All caps, because they are shouting at you, right?)

These signs piqued my curiosity, so I went into the adjoining bank lobby to inquire about the instructions inside the ATM. Do people get stuck in there, I asked? The bank employee said yes, regularly. Panicked customers who are trapped inside the ATM call the bank for help and an employee walks out and open the door for them. (I wonder what happens when people get stuck inside after banking hours. I guess they eventually figure out how to free themselves. Or perhaps they wait for the next customer who wants to use the ATM to let them out.)

If you haven’t figured it out by now, what was happening is people attempting to exit the enclosure pressed and released the green button (“hit” the button, if you will) and then tried to open the door. But it will only open if you hold the button in while at the same time pushing open the door (exactly as the instructions said, each in their own way).

UX lessons to be learned

There are so many wonderful lessons about UX design that this little green button can teach us. 

  1. Lesson one: You are not the user. The engineers who designed this ATM enclosure knew how it was supposed to work, so they assumed everyone else would also understand it. The most important dictum of user experience design is understanding that the moment you make something you know how it’s supposed to work and you can no longer understand it from the perspective of someone who doesn’t. 
  2. Lesson two: Make things intuitive. Signs don’t solve the problem, because people don’t read instructions, they just do what’s intuitive without thinking. In the case of this ATM door, they “hit” (press and release) the button and then try to push open the door. Likewise, people do not read instructions on web pages or apps. It’s imperative that everything be intuitive in our designs. Please avoid the temptation try to solve these kinds of problems by adding explanatory text or instructions to web pages. Make experiences intuitive and remove excess text.
  3. Lesson three: Poor user experiences cause brand damage. Do you think being trapped inside a locked box gave customers a better or worse impression of the bank?
  4. Lesson four: Prototyping and testing saves money. Let’s assume hypothetically that the bank has 100 of these same ATM enclosures across the country. If people are regularly getting stuck inside them, that’s a lot of time and money letting people out and apologizing for the inconvenience. In that hypothetical scenario, if the bank had built just one prototype and tested it before rolling out the design, they could have solved the problem by making it work intuitively (“hit” the button, push open the door). This same principle applies to UX design: prototyping and testing does cost some time and money during the design and development of websites, apps and devices, but it potentially saves much more money than it costs by improving user experiences, promoting better business outcomes (increasing sales, inquiries and other KPIs) and enhancing a brand’s image with customers and prospects.

I hope you got a chuckle out of this story, but it’s really no laughing matter (especially if you have claustrophobia-induced panic attacks). When we design websites, applications and other technology, it’s too easy to skip the most important parts of the process: involving users by doing up-front research and by including them in testing—early and often—during design and development.



2 thoughts on “A little green button that schools us on good UX”

  1. Rarely have I seen such a clear cut “analog” case to punctuate our online experience. Great story and, oddly amusing. Kudos.

    Another bit of grist for you – product packaging. Namely, how hard it is to open and how many times a product can even be damaged by just freeing it from it’s cardboard and plastic prison.

    Look to Apple and their imitators for the right way to package a product.

    Reply

Leave a Comment