Too Close for Comfort — or Clarity

My obsessive-compulsive disorder reared its ugly head yesterday, and I had to take several deep breaths in order to calm myself. You see, my family’s attempt to help me put away the groceries (which–if you’re reading this, Bret and Annie–I truly DO appreciate!) caused me a small anxiety attack. Instead of stashing them according to the design principle of proximity, they put things away in the refrigerator and pantry using their own such principle, “random shoving.”

The principle of proximity is quite simple: when several items are physically close to each other, they become a single visual unit rather than several separate ones.

The basic purpose of proximity is to organize for improved analysis and understanding. In the case of groceries, the cans of soup should be together, and the boxes of rice should be together, and even the yogurts should be stacked nicely, preferably according to flavor. This of course makes everything easier to see, to find, and to understand–and virtually guarantees flawless inventory control.

If however, containers of stuff are all mixed together, and I grab refried beans instead of cranberry sauce to serve with turkey dinner, there will be hell to pay. And trust me, I won’t let the opportunity to lecture my family (yet again) on the power of proximity slip by.

Proximity is also an important design principle as you are creating reports and dashboards. When used effectively, the groupings that result from proximity can reduce complexity and clarify the relations between and among the elements that you are reporting.

A word of caution, however: proximity is so powerful an indicator of relatedness in a design that it often overwhelms competing visual cues–some of which are crucial to understanding the full data picture.

Consider the following example in graphs of patient falls at different hospital sites, and of patient falls resulting in injury.

proximity graphs 01

Because the two graphs are very close together, the viewer’s eye moves straight across the page from left to right and relates the figure for patient falls in the first graph to the figure for patient falls resulting in injury in the second graph. (This is called the principle of continuity – where elements arranged in a straight line are perceived as a group, and are interpreted as being more related than elements no on the same line). But if you look closely, you will see that the data bars in each graph are ranked from highest to lowest number of falls, rather than in alpha order by lettered hospital sites. And even though the bars showing data for Site E, for example, are highlighted in dark orange on both graphs, and are not on the same horizontal axis, the color is not enough of a visual cue to counterbalance the other indicators and help the viewer understand that the two graphs are ordered differently. Some design elements are incapable of overcoming the power of proximity and in this example, continuity as well.

Now consider the following arrangement of the same two graphs. The one on the left is still displaying the data in size rank order, but the one on the right is now organized to list the data in the same hospital site order as the one on the left. Now the totals represented by the bars in both graphs are ranked so that their relation is much clearer; the viewer can easily read from one graph to the other and understand how many falls (out of all falls) at each site resulted in injury to patients.

proximity graphs 02

When you’re designing reports and dashboards, be conscious of where your eye is going. Where do you start looking; what path do you follow; where do you end up? After you have read a data display, where does your eye go next?

You should be able to follow a logical progression through the piece, from beginning to end, without excessive effort, and fairly quickly. As with all data reporting and display, it is important to build on how humans see, consume, and process information.

And of course don’t illustrate or imply relations between elements that don’t belong together at all. Move unrelated data segments well apart from each other, and leave plenty of white space between them.

OK, I have stood it as long as I can. I have to go use the proximity design principle in my pantry before I have a nervous breakdown. The thought of the refried beans stored next to the cranberry sauce is more than one woman should have to endure.

Leave a Reply