Today I was at the checkout of a national retailer and an elderly woman in front of me in line was carefully signing her digital signature on the credit card terminal. Judging by the care and evaluation she took in writing her signature, you might think she had never used one of these terminals before. After she signed, she asked the cashier which button to press: “Ok or Cancel?” — Now, before you giggle yourself into a fit about how old people don’t know how to use electronic devices, let me explain the user interface. The signature container had two buttons directly above it, both on the same horizontal line. Both buttons were exactly the same: the same style, same gradient, same color – the only difference was the words “Ok” and “Cancel” // To most people, the choice would be obvious.
What’s more, the cashier’s answer didn’t help the woman. Here’s how the conversation went:
- Customer: “Ok or Cancel?”
- Cashier: “No, press Ok”
- Customer: “This Cancel button here?”
- Cashier: [pointing at the Ok button] “No, this one here. If you cancel it, you’ll have to start over.”
- Customer presses OK button, receipt starts to print.
- Customer: “Oh good, did it get Canceled alright?”
- Cashier: “No, it worked just fine. Here you go…” [hands her the receipt]
Now, there was nothing wrong with the “design” of the interface in terms of the visual aestheic and appeal. It wasn’t complex. In fact, it was very simple: a signature area and two buttons. Further, the buttons were attractive with a nice gradient and inner shadow that communicated a raised button state. However, the designer of the system failed to use visual cues to his or her advantage and avoid the type of UX fail that happened right in front of my eyes.
You see we rely on visual cues to help us understand the world around us. Green means go, red means stop. Bigger is more important than smaller. Darker is lower, brighter is higher. These visual cues help our brains process information much faster and make decisions more quickly. Designing great UX means using as many visual cues as we can to help our users navigate the systems we create. Without visual cues, they have to think more and that takes time.
Some people might argue that the woman was a fringe case: she obviously had never used a system like this before and she clearly misunderstood the meaning of “Cancel” versus “Ok”. But the whole point of user experience design is to create interfaces that are so dead simple to use that they require little to no thought whatsoever, even for novices. She might be an exceptional case, but she has still uncovered a design flaw.
The simple solution to this problem is making the “Ok” button green and larger than the Cancel button. The Cancel button could be smaller, perhaps grey so it attracts less attention. Maybe even just a text link. (Side note: the word OK could also be replaced with “Confirm” or “Accept”)
My guess is that this interface would be much easier for that sweet old woman to use. The cashier would not have to explain it to her. The line would move faster. You see, a good interface can save your company money! How many times a day does each cashier at every store have to tell someone which button to press? Figure out that cost and you’ve got some clear motivation for taking time to evaluate the UX design at your company too. Use visual cues to your advantage. All the little old ladies will thank you.