I’m always fumbling with the A/C controls in my car. My daily commute is in hot, sunny Southern California, home of the courteous freeway driver. I can’t afford to take my eyes off the road for too long to find the control I’m looking for. Half of the time when I’m trying to adjust the temperature, I end up blowing my beard off because I’ve spun the wrong dial. If my wife’s in the car with me, I usually resort to asking her to do it for me.

There’s a simple design principle that, had it been given greater attention, could have made this needlessly confusing interface much easier to use: proximity.

Dude, Which One’s My Car?

The human brain works by processing visual (and aural) input that occurs in proximity, either spatially or temporally. It then assembles this information into recognizable patterns and assigns meaning to it.

When I’m searching for my car in the parking lot, my eyes take in the size, shape, color and location of the cars I see (input). My brain then determines that I’m seeing an SUV, a truck, and 27 Honda Civics (patterns). Finally my brain tells me which vehicles are not mine until I “recognize” the pattern that is my car (meaning).

Tyrannosaur Attack

This pattern-making ability also causes our brains to assign meaning and create relationships even when they may not actually exist. In the film Jurassic Park2, a Tyrannosaurus Rex grabs a smaller dinosaur in its teeth and shakes it around, killing it. The sound of this attack could not be recorded while shooting the scene (dinosaurs are, much to the chagrin of every school-age boy, still very much extinct). And so sound engineer Gary Rydstrom3 set out to create a sound that would convincingly sell the on-screen images.

So what sound recording did Rydstrom use to emulate a seven-ton predator ripping through the flesh of its prey? None other than his own Russell Terrier, Buster, playing with a rope toy5! If you watch the scene knowing this, the effect is rather cheesy and unbelievable. But for the unsuspecting viewer, the brain willingly interprets the simultaneity of visual and aural inputs as indicating relationship and meaning. We see a dinosaur eating and we hear a simultaneous sound. Our brain tells us “this is the sight and sound of a T-Rex eating its prey.”

Proximity Without Purpose

In my car, as I’m trying to determine which button to press or dial to spin, my brain is analyzing the proximity of these various controls to discern a pattern which will help me make sense of their functions.

The controls are a combination of push buttons and dials that affects two basic functions: fan speed and air temperature. Each of the three control groups is comprised of one dial and one or two buttons. My pattern-seeking brain assumes that the buttons and dials are placed and grouped in a manner that has meaning. Unfortunately for my brain, in this case they aren’t.

Here’s a common two-step process I perform to cool down my car: I first turn on the A/C (step one) and then adjust the temperature (step two). To achieve this goal, I must:

press the right bottom button and

spin the left dial.

However, while avoiding collisions with tailgaters and cell-phone talkers, I often perform the wrong sequence. I:

press the right bottom button (1, correct) and

spin the same dial (2, incorrect).

By spinning the wrong dial (accidentally changing the fan speed) I end up with a hot jet blast to the face.

Reinforce Relationships

A very simple reorganization of my car’s controls would reinforce the relationships between controls and make the entire system easier to use. By placing all the controls that adjust fan speed, and all those that adjust air temperature close together, the position of each control will have assigned greater meaning and users’ overall mental effort will be decreased. The sum of these two factors (increased meaning and decreased mental effort) will result in greater user success.

7Controls are grouped by function to decrease mental effort and increase meaning.

In this revised layout, the controls’ proximity to the others reinforces their relationships. The left control group can be spun to adjust fan speed or pressed to turn the fan completely off. The right control group can be spun to adjust air temperature or pressed to further adjust the temperature (top button for automatic temperature, bottom button for A/C).

With these changes, my two-step process for cooling down the car is simplified. Step one is to turn on the A/C by pressing the bottom right button. Step two is to adjust the temperature by spinning the same dial.

Keeping Our Beards On

Understanding our brains’ fondness for creating meaning and patterns through proximity will help us create more intuitive interfaces and designs. If we take time to think about the way elements are positioned in relation to one each other, our interfaces will seem easier and more natural to our users. And nobody’s beard will get blown off.

David Cole (@davidrcole) craves simplicity.
At home, David is a foster dad to two wonderful preschoolers. At work, he navigates complex business needs to craft simple interfaces. David is a Senior UX/UI Designer in San Diego, CA.

Stefan Artmann

okjedi

I <3 my Mazda5, but the interface does indeed suck. Also, I'll never know why they did not put a control up front for the driver to turn on/off the overhead lighting. I e-mailed them about it, but I'm sure that went all the way to the top. Not. ;)

0

103

Nadeem

My Range Rover Sport 2010 (GCC/UAE Specs) has the Audio system circle button, and car ignition circle button an inch and a half away from the steering wheel. Its a usability catastrophe and it could kill people if they hit the wrong button on the highway. Quite a few times while driving, I almost pushed the wrong one, and realized how scary that was. I thought ofcourse range rover would have made sure while the car is driving, if someone hit the engine off button, nothing would happen because then this massive 5.0 v8 engine would have no brakes and no steering, and you could be on a highway. I tried this on a small alley, at a slow speed. I held the power button in gear while driving, for 2 seconds, and the engine went off. Sometimes the audio power button doesnt hit right away, either, so you have to hold it down for a second or two. I wanted to write a blog post, or tweet about it. Range rovers ux is poor in general, but this, this needs a newspaper article.
I tried linking a pic before, but my comment wasn’t approved.

bacaardi

hendrik

Got the same dials in my car as well, Mazda 5. Both, my wife and I, are still puzzled over the functionality of our AC. One could say ‘read the darn manual’, but guess what – never needed one for my iPad.

Steven Kwok

chris

I’m so glad theres others out there who can’t believe that these things are still made so badly.

I often (geekily) point out how the hobs on a cooker are arranged in a square but the dials are arranged in a line. Even after years of owning the same cooker, you still have to look at the symbols on the dials. ..Why don’t the dial arrangements match the things they control!?

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

It's finally here. Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Get the book.Free shipping.

Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.

Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.