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.
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.
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).
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.
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.
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 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:
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.
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
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.
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.
