Hierarchy #

If you want people to perceive your designs as orderly, then make the order of processing the design clear.

In design, hierarchy is the idea that information can be presented in a way that will ensure that it is processed in a particular order.

As a simple example, consider a humble magazine page. When presented with this page, you can start reading anywhere you like. However, nearly everyone will first read the title, then the subtitle, then the callout quote, and then the first paragraph. This is not by accident. The design of the page makes it so that you will process it in this order. The hierarchy is apparent.

Here, contrast is also being used. And the idea of hierarchy is so strong that you probably attempted to read the article this way, even though it is AI generated nonsense!

The same holds true for websites. Even without any text, most people will process the mock-up of a website in the same order.

In this case, most people will start at the very top, then look the left column, then the right column, moving down until the next full width block, then go left to right across the bottom. We have created a hierarchy of design that causes people to process content by column then row (top half) and then switch to by row (bottom).

It might feel like this is just the ’natural’ order of things, but it really isn’t. Imagine you were presented with a mockup that does not have clear hierarchy, such as this grid of squares.

Most people will find it confusing to understand in what order this is intended to be processed. Most people will start in the top left, a bias known as the Gutenberg Diagram. However, after that it is unclear if this design is meant to be processed by rows or by columns. This is because there is no hierarchy. This is a design that will feel less comfortable, because it lacks hierarchy.

Importantly, this is not a result of there being 9 shapes. The first example also had 9 shapes. It is because there is a clear order of processing, communicated by how things are placed on the page.

Also, it is worth noting that the first example was using alignment to help guide the processing of the image. The Gutenberg Diagram idea states that, all else being equal, people will tend to process a page top left to bottom right, rows by columns. Thus, if you want people to process column by row, you need to give them clear signals. In the first design, this was done by breaking the alignment across the rows, which makes people want to follow the aligned objects… column by column in the top half.

Of course, one can also use tools other than placement to help establish hierarchy. For instance, using color to establish contrast can provide an entry point that is not in the top left.

Composition and Armature #

It is also worth noting that what we are discussing might also reasonably be called ‘‘composition’’ or ‘‘armature.’’ These terms more generally refer to how things are arranged on a page to tell a story or create a feeling. For instance, imagine we had a case where we had a central idea, and then there were multiple ideas that stemmed from it. These sub-ideas don’t need to be processed in a particular order, but they are all connected to the central idea. We might use an arrangement like that shown below to convey this.

Hierarchy in data visualizations #

In data visualizations, we can consider what we want the user to see and in what order. Once we have established this, then we know the hierarchy and we simply need to make it apparent.

When I am thinking about a data visualization, I think of the following things that I want people to understand:

1. What data is being plotted.
2. What is the story in the data.

The first of these is typically covered by creating an effective title and proper labeling of the axes. If you are able to place a title above the plot, then you can again leverage the Gutenberg Diagram to help people process that first. It is also important to understand that this does not necessarily mean that we need to ensure that the axes are processed first. This is because we can leverage conventions within a field. For instance, in graduate school, I was an synthetic chemist, and if I were to look at a UV-visible spectrum, I would naturally assume that the x-axis was wavelength, while the y-axis was absorption. Thus, unless these dimensions were different than the above, there was no need to call attention to them. Similarly, if someone makes a line chart of stock market returns, then most people will assume that time is on the x-axes and returns on the y-axis.

This image was taken from Kennedy, S. R.; Kozar, M. N.; Yennawar, H. P.; Lear, B. J. Synthesis and Characterization of the Gold Dithiolene Monoanion, (Bu4N)[Au(Pdt=2,3-Pyrazinedithiol)2]. Polyhedron 2016, 103, 100–104..

In general, if you are making a single plot, then you don’t really need to use hierarchy too much. However, if you are making a figure that has several plots, or a scientific poster, then you will need to carefully consider hierarchy when you are designing and creating it.

For instance, consider a figure that contains several subplots, that you might place in a journal article. Most people encountering such a figure will naturally start in the top left—again, following the Gutenberg Diagram. This suggests that the first point you wish to make should be placed in the top left.

However, once that is done, where should their attention go next? Remembering what we talked about above, if you don’t give people any indication otherwise, they will tend to want to read row by row. So, you can consider placing the next element of your story to the right. However, it may be that the structure of your data visualizations do not lend themselves to arrangement by row, and so then you need to be sure to use hierarchy to guide the eye.

Below is a design that uses the same trick of breaking alignment to force column-by-column processing.

Conclusion #

The point of this article is not to prescribe a particular arrangement or hierarchy for any given data visualization, but to raise awareness that it exists and can be leveraged to help users process your data visualizations. Similar to the idea behind alignment, if you are going to place something on the page, then you might as well think about where you are putting it and how its placement might help you communicate.