UI - Law Of Proximity


I was playing one of those stupid "Which X Are You?!?!?!?" quizzes which seem to be the rage these day. I'm weak willed, I know.

One of the questions had a particularly interesting UI issue.

Labels Photos

It's not a particularly subtle problem. The image on the left related to the button on the right, and vice versa.

We know, from countless studies, that people don't read websites. They scan and they click. People are used to large target areas and are quite accustomed to assuming that an image relates to their target choice.

In some ways, it's similar to the problems with Butterfly Ballots which caused issues in the US Presidential Elections of 2000.

Butterfly Ballot, Florida 2000 (large)

Votes found it difficult to easily determine which tiny hole was specific to their candidate. The design almost seems to encourage voting mistakes when candidates select anyone other than the candidate at the top of the ballot. The "incorrect" holes are simply too close to the "correct" candidate.

One of the most obvious elements of User Interface design, is that proximity is everything.

Close, But No Cigar

The canonical example is the cooking hob. Most hobs have controls which do not easily map to the hobs they are controlling.

This is what my hob looks like:

Normal Hob-fs8

If the instructions have rubbed off - or are under a thick layer of spillage - it's pretty hard to work out which control relates to which hob. You'd probably be right in guessing the top two work the top - but it's only a guess.

How can we make this better?

You'll find some hobs try to make a literal mapping like this.
hob arranged right-fs8
This isn't much of an improvement; the controls for the left hobs are closest to the right hobs.

Inserting the controls closer to the centre is a popular space saving measure.
hob square-fs8
Again, the mapping at first blush appears closer - but the proximity of the hobs to their controls is fairly random.

The offset can also be found. Here, there is a much clearer separation between left and right.
hob offset-fs8
It's not all sunshine and roses. The upper pair of buttons are physically closest to the lower hobs.

Perhaps the most proximate solution is the following.
hob perfect-fs8

Not Just Proximity

In my opinion, proximity is one of the cornerstones of usability. Having a switch in the kitchen which controls the lighting in your bedroom is just nuts! Similarly, on computers interfaces, buttons need placement close to their intended target.

Of course, proximity isn't the only factor to consider when designing a system. Consider the most proximate placement of hob controls above. It does have three noticeable disadvantages:

  1. More horizontal space is needed.
  2. The complexity of the piping beneath the hob may increase.
  3. It encourages people to move their hands over a lit hob (dangerous).

For intuitive usage, nothing beats a short distance between control and action. But for safe usage and efficient design, sometimes compromises have to be made.


Share this post on…

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">