Alignment #

~10 min read

Most people think alignment is just about “tidiness.” But it’s one of the most powerful tools in your arsenal. Good alignment doesn’t just make a design look neat; it makes it function better.

Alignment does three things at once:

It Creates Coherence.
It Conveys Care.
It Guides Interpretation.

Let’s look at each.

Alignment Creates Coherence #

Simply put, objects that are aligned together will feel more connected than objects that do not have clear alignment. This point can be illustrated by returning to the example of the groups of circles introduced on the page discussing proximity and separation In that chapter, we saw that grouping like items helped us form associations between objects. One of the grouping we arrived at is repeated below, in which there is a clear connection between like elements, communicated by their proximity.

Ten circles, all of the same size, with red fill, and white text. Each circle contains a single character, grouped in space by if the character is a capital letter, a lower case letter, or a number,

However, the feeling of connectedness between these grouped objects can be further improved by aligning objects within the groups. Our minds simply cannot avoid noticing when things are aligned, and interpret such items as connected.$^\dagger$ This is illustrated in the figure below.

The same ten objects as shown in the figure above, but they are now aligned into three rows. The first row has capital letters, the middle row has lower case letters, and the bottom row has the numbers.

In this figure, we have preserved the grouping, communicated using proximity and separation, but have now aligned the objects within the group. This creates a much more cohesive feel. It is even more clear to the viewer which objects belong together, because of the clear alignment between them.

Alignment Conveys Care #

This is the closest aspect of design to the idea of avoiding ‘sloppy’ designs. But it is still connected to the idea of coherence. Our innate desire to see things as connected and aligned is why designs that lack clear alignment can feel sloppy. However, the sloppiness occurs when we see things we think should be aligned but are not quite aligned.

Returning to the circles, if we attempted to create the same alignment as above, but did not do so carefully, we might end up with the following.

The same ten objects as above, but now the objects are not perfectly aligned. The objects move up and down slightly along the rows.

These groupings are still clearly connected, but now the alignment is off slightly, giving the impression of a sloppy design.

It is important to note that this idea of ‘sloppiness’ is a subtle effect, because it requires that things are almost aligned, but not quite. The very first image on this page also lacks alignment, but the design is so far from being aligned, that most viewers will not assume alignment is intended. It is when people think that alignment was intended, but poorly executed, that designs appear at their sloppiest.

Though this effect has its origins in subtlety, it is important. Though we might hope that our colleagues would be able to look past our alignment problems, the truth is that people will both consciously and unconsciously form opinions based on how we present our data. If we pay proper attention to alignment, we convey that the user can have confidence that proper attention to detail was paid in other aspects of our work. Thus, tidiness in design is important in that it helps lend a sense of confidence to the rest of our work.

Alignment Guides Interpretation #

As was the case for proximity and separation, there is a yet another role of alignment—one that allows us to move beyond creating a coherent tidy whole, and helps us to control how the user interprets what is being presented to them.

Let us consider our circles one last time. Looking at versions in which we have aligned the circles into rows, we can easily see that the top row has more elements than the bottom two. However, it is harder to know why. In other words, if I were to ask you which elements are missing in the bottom two rows, it might take you just a moment to determine the answer. However, I can alter the alignment between elements to make it immediately clear which elements are missing, as shown below.

The same objects shown above, still aligned into rows. Now, however, there is meaningful alignment into four columns. The 1st column has the 1st element, the 2nd column has the second element, and so on. Here, it can be readily seen that the lower case “c” and number “4” are missing.

Now, we are using alignment to tell the viewer that we are missing the lower case letter ‘c’ and the number 4. Interestingly, though we did not change the bottom row, the shift in the lower case ‘d’ has told the reader that the column-based alignment between objects is important, and so it is more clear that the bottom row is missing the number 4. Thus, alignment is a way to communicate information across the entire design.

Alignment in data visualizations #

All of the above considerations come into play when making data visualizations.

1. Coherence #

Alignment is what makes a complex figure with multiple subplots feel like a single, cohesive unit. The most powerful tools for this are the plot axes. Aligning $x$- and $y$-axes across a grid provides strong horizontal and vertical lines that our eyes lock onto.

The same chart as above, but now the x and y axes of plots are aligned across the grid.

This is aided by ensuring consistency across data lines and markers, fonts, color, etc.

2. Care #

Conversely, a lack of alignment signals a lack of care. When subplots are almost aligned, the figure feels sloppy. This “near miss” (as shown below) is distracting and can unconsciously erode your audience’s confidence in your work.

A series of plots concerning the stock market. There are 4 plots, arranged in a 2x2 grid, but the alignment between the plots is slightly off.

3. Interpretation #

This is the most advanced use of alignment. You can use alignment—and the intentional breaking of it—to guide your user’s eye.

For example, in a culture that reads left-to-right, a 2x2 grid (like the one above) will be read like text: row by row.$^\ddagger$ But what if your data has a different logical flow?

A new grid of plots, there are now 5 plots arranged into two columns. The left column has 2 plots and the right column has three plots. The alignment between axes is preserved down the columns (along the y-axis), but not across the x-axis (rows).

This figure breaks the horizontal alignment between columns. This visual “stop” encourages the viewer to read down the first column before moving to the second.

Alignment also guides interpretation within a single plot. Of course, we rarely have control over alignment of the data, but you do for other elements. When directly labeling data, aligning the labels creates its own “column” that is easy to scan.

Two separate plots, showing the same data. These both have two lines, with different slopes. Both have the lines directly labeled with their identity. The top plot does not align the labels with one another, while the lower lot does.

The lower plot’s alignment not only feels tidier but helps the viewer instantly compare the two labels, simplifying the task of understanding the data.

Some subtleties for realizing alignment #

As we will stress again and again, design is about how the viewer perceives it. And our brains don’t perceive alignment the same way a computer does.

It can be tempting to just select objects and click the “Align Center” button. But a computer aligns based on mathematical width. The human brain, however, looks for perceptual weight.

Two columns of shapes, each containing a circle, triangle, and diamond. In the left column, the shapes are center aligned based on their width, and in the right column, they are aligned based on their center of mass.

In the left column, the shapes are “perfectly” aligned by their width. On the right, they are aligned by their perceived center of mass. For vertical objects, our brain wants to see a stable “tower,” which is why the right column feels more aligned.

Why didn’t we need to worry about this with the grides of data plots considered above? The reason is that the axes and boxes around the plots provide a stronger guide for alignment than do the center of masses. This preference for strong lines can also be seen in text. Consider all the letters on the left side of this paragraph. These letters are not aligned by center of mass, but we perceive them as aligned, because of the strong vertical line they produce on their left side.

While vertically aligned shapes may need their center of mass to be considered, horizontally aligned shapes often have preference given to their baselines. Just as our brain sees vertically aligned objects as a tower that may tumble, our brain sees horizontally aligned objects as potentially resting on a shared plane.

Again, we can see this in the text on this page. Though many of the letters have different heights, they are aligned on a common baseline, and so we judge them as neatly aligned. In turning to shapes, we can consider the three boats drawn below. In the top row, the boats appear to be comically mis-aligned—though they are aligned by center of mass. However, we do not normally think of boats as aligning by center of mass, but by waterline. Thus, the boats on the bottom line appear to be well-aligned to us.

Two rows of three drawing of boats. In the top row, the boats are aligned horizontally by the center of mass, while in the bottom, they are aligned on a common baseline.

The point of this discussion is that we need to think when using alignment. Consider the objects being aligned and if they have strong lines that will guide our eye. If not, then a more careful consideration of visual weight is needed in order to ensure the design is perceived as aligned. As long as you do so, you will be able to produce designs that the user sees as neat, cohesive, and also subtly guides them in the reading and interpretation of your data.

Concluding remarks #

This has been a deep dive into alignment. However, I hope you have learned a few things about how and why to use alignment. At the very least, I hope you are convinced it is worth your time to pay attention to alignment, in order to improve people’s judgement of your work. However, I also hope I have shown you that alignment can be a powerful tool to help guide people in their interpretation of your work. Used correctly, clever and careful use of alignment can elevate a piece of work from ‘average’ to ‘amazing.’

$^\dagger$Sometimes this idea also goes by the name continuation. More information can be found in “Universal Principles of Design” by Lidwell, Holden, and Butler.

$^\ddagger$This pattern of processing information on pages is so common and so closely tied to reading that it is called a Gutenberg diagram. This is discussed in “Universal Principles of Design,” by Lidwell, Holden, and Butler.