Proximity and Separation #

~5 min read

Place objects that are related close together on the page.

If objects are not related, separate them.

Proximity and separation describe two extremes of spatial arrangement that can be used to help the reader understand what objects you wish them to view as similar, versus which objects you want them to consider to be different. Similar to how the use of contrast requires consistency, it is best to try to maintain a consistent proximity between objects, and then use noticeable changes in separation to signify similarity/dissimilarity between objects.

Consider the series of objects shown below. If proximity and separation are not used, then it is hard to perceive any pattern in the objects.

An image with 10 circles, each is the same size and filled with red, containing a single text character in white. The circles are not arranged in any order.

However, simply bringing these objects together, we can highlight the fact that the collection contains upper case letters, lower case letters, and numbers.

The same 10 circles as shown above, but the circles are now moved so that all circles containing capital letters are next to one another, all circles with lower case letters are moved next to one another, and all circles containing numbers are moved next to one another.

It is important to note that between these two images the relative ordering and arrangement of the objects did not change. All that has changed is to move objects we wish to be seen as connected close to one another, and create separation between those we wish to be seen as different.

This past point is a critical one: we have used proximity and separation to impose an idea of how to group objects on the viewer. The viewer will reach the conclusion that there are upper case, lower case, and numbers.

However, this is not the only possible grouping for these objects. Indeed, we can use proximity and separation to guide the reader to a different interpretation… perhaps that there are the first, second, third, and forth items of each series.

The same 10 circles as above, but now grouped by if they are the first, second, third, or forth in the series. That is, one group contains “A”, 1, and “a”.

Thus, proximity and separation are powerful tools for helping the viewer see the patterns we (the designer) wish them to see, and for reaching the conclusions that we hope they will.

The use of proximity and separation in data visualizations #

Above, we have seen that proximity and separation serves two purposes. First, it functions to make the parsing of information easy for the viewer. Second, it allows the designer to bias interpretation of the image in the way that they wish. However, despite the importance and power of these two aspects, proximity and separation it is a commonly violated principle in data visualizations.

Legends are a violation of proximity #

Given the ubiquity of legends, this heading may be hard to believe, but consider the use of a legend in the plot below:

Line plot of percent increase versus year from 2000-2023. Three trends are presented: housing costs (green), education costs (blue), and income (red). The housing and education costs generally increase over this period, and income is relatively flat. A standard legend is used to identify which line is which.

Take a moment and think about what you find to be the most interesting aspect of this plot.

For me, I think the most interesting aspect is that both housing and income costs have increased over the last 20 years, but income has been relatively flat. In other words, the most important aspect of the plot is the overall tends and relationship between the lines.

Now, consider what using a legend does. Before the viewer can focus on these interesting trends and relationships, they must first focus on the legend—looking repeatedly back and forth between data and legend in order to assign each data line appropriately. Only once this assignment is made can they focus on understanding the trends and relationships shown in the plot. In other words, a substantial amount of the time a viewer interacts with this plot is spent looking at non-interesting parts of the plot.

Now, consider the alternative: directly labeling data as shown below.

The same plot as above, but each line is directly labeled with the name of the data. The labels are black text, to the right of each line.

When data is directly labeled, instead of using a legend, assignment of data is quicker and easier. This means that the viewer is able to spend a larger fraction of their time considering the data—rather than simply trying to assign it.

This effect of using a legend is general. Thus, one should always strive for direct labeling of data whenever one can, accepting the use of a legend as only a compromise for figures where directly labeling is simply not possible.

Other types of ‘proximity’ #

Above, we considered spatial proximity. This is the most obvious type of proximity. However, there are also other kinds. As we will explore more in the chapter on color, some colors feel closer together, in terms of hue, saturation, or value. Thus, we can also use proximity in color space in order to make the reader see things as related.

Consider the plot with direct labeling. The direct labeling helps us assign the lines—that is true. However, the association between the labels and the data can be made even stronger by changing the colors of the labels to match those of the lines, as shown below.

The same line chart as above, with the same direct labeling of the lines, but now the color of the labels is the same as the color of the lines that they label.

Of course, one might also consider this to be an implementation of consistency as well. If that view makes the most sense to you, then I won’t quibble—as long as you make things that belong together as close together and as similar as possible, then you are doing the right thing!

Though I have only illustrated the use of this idea for color, I should also mention that it applies to other aspects of design, such as choices in fonts, choice of alignment, and so on.

Concluding thoughts #

The take home from this page is that, if one is trying to make things feel connected, place them close together, and also make them look as similar as possible. This last point echoes the insight from our considerations of consistency and contrast.

It is also important to remember that the primary purpose of design is to help guide the user’s interaction with the object you have created. For data visualizations, this means helping them reach the conclusion you have about your data. And, again, this is not the same as biasing the data, or leaving data out. The goal is to show all the data as accurately as you can, while also helping the reader see the same message you have taken from the data.