Proximity Matters

On a recent road trip, we drove past a sign that looked like something like this: Image of a Road Sign showing two destinations with arrows pointing in opposite direction.

At first glance, it is hard to tell if Proximity is to the left or to the right; or if you should go right or left to get to Matters. Perhaps after a more careful look, you can figure it out, especially if you're familiar with the territory, but it should be much easier. And it would be much easier if only the person who designed the template for this sign (and others like it I'm sure) understood how proximity can impact usability.

Dictionary.com defines proximity as "nearness in place, time, order, occurrence, or relation". When two "things" are placed near to each other, it demonstrates a relationship. Understanding this principle is critical to good design.

Not all signs are like the one depicted above. A couple of good examples can be found here and here. This one is not so much of a good example.

So, back to the sign in question. Maybe this particular sign could be improved by using a line to separate the two city listings. That might help - what do you think?

Second version of sign listing two cities with arrows pointing in either direction.

I'll admit that is a step in the right direction toward improving the readability of this sign. And this is a pretty common treatment if memory serves me correctly. But I think it could be better. This is a road sign meant to direct people driving in a car and needing to make a decision — usually a pretty quick decision. This is no time to provide ambiguous clues for the driver.

Confusion can be avoided by paying attention to proximity. In my opinion, the city name should appear next to the arrow that it belongs with. And the position of the arrow being next to the name instead of below/above it is what clarifies the relationship. Like this:

Third version of sign listing two cities with arrows pointing in either direction.

The same principles apply to interface design. Labels should be noted next to the item they describe; buttons should be positioned next to the fields they relate to; photos should appear next to the content they support.

This is a concept that is easy to get right and you don't see many examples of poor use of proximity in the wild. But when you do come across one — like the one I saw on the side of the road — they really do stand out.