Whitespace in Dashboard Design

Applying basic design principles, Part 2: Using clear formatting to support information display

This is the second in a series of articles that illustrate how basic design principles can improve information display. In the previous article, we looked at how whitespace can improve the overall clarity and readability of a restaurant menu. In the next installment, we will look at the details of chart design. Here, we’ll use small changes to whitespace and text hierarchy to improve the overall design of a data dashboard.

This example is an actual dashboard that I found online, redrawn and edited to anonymize the information:

This article focuses on the page layout and text hierarchy, to show how we can use whitespace and text headings to clarify the content of the page. It does not get into visualization choices and recommendations. The goal here is not to re-design or completely change the dashboard, but to work with its existing contents to improve the visual display with a few minimally-invasive changes. At the moment, it’s hard to tell how the page is organized, or what sequence the information should have. A few small tweaks will clarify the page layout and make the dashboard much clearer:

  • Text and headers need to be more visually separated. Right now, the headers don’t really stand out enough, making it hard to tell the difference between body text and header.
  • Too many text sizes and styles. To maintain a strong page hierarchy, text that shows similar information should be the same size and style. There are at least three different text sizes for the chart axis labels, and two sizes for the table text in boxes. A close observer will also notice that some text is gray, and some is black.
  • Choose a single text alignment. Currently, the page uses a mixture of left-aligned and center-aligned text, making it hard to tell how the headers relate to items on the page.
  • Stronger grouping and separation between items. The page actually has a decent amount of whitespace on it already, but it’s not structured in a way that makes it useful. Enhancing and clarifying the page structure will make it easier to see which items are grouped together.
  • Better alignment. This page contains several boxes to help group information together, but none of them line up in a systematic way. This creates a lot of visual noise, and the lack of padding inside the boxes makes things feel congested and cluttered. Creating a stronger page structure may help us to soften the boxes, or get rid of them altogether.

1) Align headers

Simply left-aligning all of the text and matching the content alignment to the header makes a big difference. The page header could be left-aligned as well, or kept as-is.

This version moves the section headers to the left.
This version moves the section headers to the left.

2) Separate sections

The next step is to give the headers a little bit more breathing room, to make a stronger separation between sections. Making sure that the gap between header and content is consistent also helps a lot, especially for the headers with boxes and horizontal bar charts for content.

Adding a little more space between sections helps to open up the page.
Adding a little more space between sections helps to open up the page.

3) Add structure

At this point, I’m not enforcing a full-page horizontal grid; this page is currently shown as two main columns, divided into sub-columns where necessary. This implies that you would read the columns on the left first, and then the columns on the right. Drawing some boxes behind the different page items helps to clarify these relationships (and also points out how lax I am being about enforcing regular spacing/padding relationships).

Gray boxes show how the page is divided into sections, highlighting the space allocated for each chart.
Gray boxes show how the page is divided into sections, highlighting the space allocated for each chart.

Alternatively, I could enforce a page-wide horizontal grid, so that the boxes in one column line up with the other. This makes all of the items feel more equal, and reduces the sense that there’s a particular reading direction. Now, Citizenship Assessment could be related to Citizenship Factors or to MS End of Course.

This image has a slightly more regular grid, that enforces alignment between columns, as well as within a column.
This image has a slightly more regular grid, that enforces alignment between columns, as well as within a column.

Depending on the intended reading sequence, it could be helpful to retain the two column format, so my final recommendation here would depend on the specific use case for this information. I’m going to assume that the two columns are preferable but not critical. For either case, maintaining a strong grid across the dashboard makes it easier to navigate.

We could also use those boxes to help distinguish between different groupings on the page. This is often (not always) a useful strategy when you have many charts on a page, since axis labels and different chart shapes can make them look very irregular and reduce the structural clarity of the page. You shouldn’t need boxes if your structure is clear enough and you have enough whitespace between items, but in some cases container grids can help. They are also a lot less disruptive than the outline boxes in the original dashboard. Adding a little extra gap between columns moves us back toward a two-column view.

This version uses the grid boxes as part of the design, to help separate the page content.
This version uses the grid boxes as part of the design, to help separate the page content.

4) Anchor using headers

We can make the headers more distinct by making them 1 pt larger and heavy instead of bold, and making the sub-headers dark gray instead of black. Adding a bit more whitespace between page sections allows us to get rid of the boxes altogether. (I actually prefer to keep the boxes for this one, but we’ll take them out in the spirit of staying as close to the original design as possible.)

This page removes the container boxes and increases whitespace, to make the sections easier to read.
This page removes the container boxes and increases whitespace, to make the sections easier to read.

This also illustrates what the boxes were doing for us. Notice how much more you feel the irregular shapes of the page contents without the gray background containers to group items together. I needed to add extra space between the Academic Achievement bar charts to make this version work. The stronger headers and page structure are enough to hold things together here, but the background tiles do help to reinforce separation between items, especially when there’s a lot of information on the page.

4) Clean up the details

Now that our page headers are working better, we can start to focus on the finer details of the display. There’s no reason that the figure text can’t be the same size everywhere. Making the axis labels adopt a uniform size helps keep the text hierarchy clear, and making them gray reduces their competition with the table text and other text on the page (be careful not to make them too light, though, or you’ll decrease legibility). Increasing the text size does squish the chart in a couple of cases, but this could be fixed by reducing the label length or making the chart area wider on the page.

Without background tiles, the grouping of text and values tends to get lost in the table items. This could be fixed by reducing the gap, adding guides to connect the items, or rearranging the table content to be more clear. There are a few different options for how to improve this:

This image shows some different options for how to handle the table contents.
This image shows some different options for how to handle the table contents.

If we had kept the background boxes, I would probably choose to show the tables with the numbers first, and the text that describes the number afterward. This minimizes the space between items and mimics a more natural reading sequence. Notice how this alignment leaves an uneven left margin, though. Without the background boxes to create strong groupings, this weakens the structure of the page: I would stick with the text-first tables instead.

Tables display numbers first, right-aligned to their text labels. This creates an uneven line of text on the left.
Tables display numbers first, right-aligned to their text labels. This creates an uneven line of text on the left.

Most of these changes are fairly subtle, but together they add up to a clearer, more cohesive design that supports the information content of the page.

Before

After

This page removes the container boxes and increases whitespace, to make the sections easier to read.
This page removes the container boxes and increases whitespace, to make the sections easier to read.

Stay tuned for the next installment in this series, where we will look at how these details apply in the context of an individual chart.

Image for post
Image for post

Erica Gunn is a data visualization designer at one of the largest clinical trial data companies in the world. She creates information ecosystems that help clients to understand their data better and to access it in more intuitive and useful ways. She received her MFA in information design from Northeastern University in 2017. In a previous life, Erica was a research scientist and college chemistry professor. You can connect with her on Twitter @EricaGunn.

Originally published at http://ericagunn.com on August 9, 2020.

Nightingale: The Journal of the Data Visualization Society footer
Nightingale: The Journal of the Data Visualization Society footer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store