Design Principle 2. Proximity

by Ryan Goodman

2. Proximity: Proximity’s basic definition is: nearness in place, time, order, occurrence, or relation.

In dashboard design, I expand on this principle to include the visual grouping and alignment of multiple elements with intent to generate visual connections. This principle is extremely important for creating a visual interface where an end user can understand how combination of charts, analytics, text, and interactivity controls relate to one another.

In my following examples, I will address proximity at its basic form within single chart, and then expand how this principle is applied to multiple components on a page.

In the chart below, we have one measure (sales) where we compare the quarterly performance for two sales reps. Located to the right of the graph, is a legend. We can easily draw the visual connection between the graph and the legend because they are the only graphics on the screen, but the primary reasons we make this connection is because of their proximity from one another and color (we will touch on this topic next week). What if we had multiple charts on the screen, and the legend was placed in the upper right hand corner? This may seem elementary, but may help you realize the importance of proximity.

Let’s expand on this same principle and look at how multiple elements can be assembled together in 1 dashboard using proximity to draw visual connections…

In this second example, we have two graphs, and a progress bar. Because they are on the screen together in one viewlet, we assume that they are all relevant to the analysis at hand. Without looking at the data itself, you can quickly asses how components relate based on how they are aranged in relation to each other. Would you assume that the radio button control (sales & mkt share) would change all of the visualization elements on the page? What about the label based menu featuring product lines at the top of the page? If you try the model, your assumptions are probably correct. It is the alignment and orientation of components together on the page that allows you to draw these visual connections quickly.


Because we have aligned the radio button in close proximity to the growth chart, we can assume that the controls are connected. The alignment and proximity of the Sales chart and Total Sales progress bar in the bottom half also help drive visual connections between the two components.

Next week, we will take a look at Contrast and accompanying elements of design to help you in your dashboard design projects.