Working all day to improve the effectiveness of websites, our eyes get trained to notice things in everyday life that work really well — or really poorly.

In earlier posts I’ve looked at specific online retailer e-commerce pages, outlining common usability pitfalls and solutions.

Today I’m not going to focus on a website. Today I am going to talk about a new refrigerator.

Have a look at the image below:

This is the control panel for a new fridge. I labeled the buttons because the image was fuzzy. The white labels are exactly what is printed on the control panel. On the left-hand side of the picture we have the controls for the freezer, on the right hand side the controls for the refrigerator.

At first glance everything appears straightforward. When we look dig deeper, we’ll see how out of sync these temperature controls really are.

Joel Spolsky said it best,

“A user interface is well designed when the program behaves exactly as the user thought it would.”

Keeping Joel’s excellent advice in mind,

Which button would you use to lower the temperature for the refrigerator?

Me, I instinctively hit the button with the large down arrow.

Oddly, hitting the down arrow “cold” button increases the number in the center screen from 3 to 4.

Hmm?

Looking to the right of the number screen, we see a button with an up arrow labeled “Colder.”

It’s counterintuitive: you have to press “Colder” (not “Cold”) to lower the temperature on the fridge or freezer.

These controls violate Joel’s First Law of usability in a couple of ways:

1. The arrow buttons don’t correspond to the system’s response. I hit a down arrow and the number goes up, I hit the up arrow and the number goes down.
2. The buttons are mislabeled. Why are they cold vs. colder? When changing the temperature we don’t think in relative degrees of chill. We think of temperature as warm vs. cold. Red vs. Blue. I want to make the fridge warmer - not less cold.
3. Control placement doesn’t match the user’s mental model of the system. Did I mention this fridge has its freezer across the bottom, and the top food section has doors which open in the middle, like French doors to a patio? Instinctively I thought the two temp controls — left and right — correspond to the two top zones of the fridge — left and right. Nope: left corresponds to down (the freezer), and right corresponds to top (the fridge). Again, not intuitive.

I wonder if the refrigerator’s engineers ever conducted simple usability tests. I doubt it. I’d guess that bringing a handful of people into their lab to try out these controls would’ve helped immensely.

The same is too often true of websites.

You and your design team can be too close to your own product and your own site. What makes sense to you, your designers, and your developers might not make sense to the average consumer.

We are big fans of guerrilla usability and site testing. Watching typical folks shop your site is enlightening. It can also be ego-bruising, when your favorite “brilliant” shopping wizard trips up real users in the real world. But, as Faulkner suggested, you sometimes have to kill your darlings.

Strange controls on a fridge have little impact. It just takes me an extra minute or so to adjust it so it stops freezing the lettuce in the back of crisper. Bad controls are annoying, but not fatal. We’ve already bought the fridge, we’ll have it for many years, we’re committed.

For a visitor to a retail web site, there’s no similar level of commitment. Design oddities, poorly-labeled buttons, and counter-intuitive shopping processes lead directly to abandons, brand damage, and lost sales.