Using a grid to improve information dashboards

Dashboards are a frequently encountered part of the data science landscape. When done well, they can deliver a great amount of important information in a compact area, instilling awareness and driving action by alerting users to key developments in the data and telemetry that feeds them. A challenge in creating and developing dashboards is that they too often obscure or otherwise fail to deliver the information they are intended to impart because they are poorly — or at least not thoughtfully — designed.

It’s not difficult to see why. Most of those responsible for creating and maintaining dashboards are data practitioners with little or no design background or training. And yet application of just a few basic design principles, straightforward to explain and easy to implement, can make a big difference in the final information dashboard product.

Chief among these is the grid. By that I don’t mean the built-in “snap-to grid” functionality in many desktop applications featuring a layout component, but instead a way to arrange the elements on a dashboard that follows an invisible, and yet very apparent, structured array. In this article I look to a couple examples of art to demonstrate the power of the grid in visual presentation, and then I show the results of how I applied a grid-based approach to one of many dashboards I helped develop with Power BI Desktop.

Dashboards and… Edward Hopper?

The grid is one of the foundational concepts in visual art and communications. Grids can provide the structure for an image shown in perspective (i.e., presenting a subject in three dimensions on a two-dimensional surface), or for a more orthographically presented one (i.e., presenting a subject in two dimensions on a two-dimensional surface). Within a dashboard, a grid provides a matrix to organize and present all the specific elements to convey and how they relate to one another. The following two examples show grids at work.

In the first, Early Sunday Morning, painted in 1930 by Edward Hopper, we can see a strong grid anchoring the composition. Notice how the sky at the top, the red brick second floor, the mostly green first floor, and the street below it all present four strong horizontal elements, and how the second floor windows and storefront windows and doors present strong vertical elements. Superimposing a grid on the artwork makes its structure apparent:

Figure 1: Edward Hopper’s painting with a grid overlay, showing how it anchors the composition.

In the second, a poster advertising books created in the mid-1920s by Soviet constructivist artist Alexander Rodchenko, the grid is not as immediately apparent as in the Hopper painting, because the visuals are dominated by two strong elements: A large circle to the left and a large triangle to the right. Looking more closely, however, we can see just how strongly Rodchenko has employed the grid, which anchors and defines the placement and size of these non-rectangular elements as well as everything else he includes. When superimposed on the image, the resulting grid looks like this:

Figure 2: Alexander Rodchenko’s poster with a grid overlay, showing how the strong geometric elements of the composition hew closely to a grid.

In both cases, we see how a simple two-dimensional grid brings form and function to these pieces of art. A grid can do the same for us in dashboard design, especially when used in conjunction with a few information design goals and user experience goals.

Information design and user experience goals for dashboards

Much has been written about dashboards and how to construct them effectively, especially by information designer Stephen Few. When I design a dashboard, I seek to prioritize the following information design goals in conjunction with my use of a grid:

Information design goals

1. Tell the subject matter performance story at a glance.
2. Lead with the information by bringing it to the foreground while placing the supporting elements in the background (what Edward Tufte originally called the “information to ink” ratio, which we can call the “information to pixel” ratio).
3. Optimize information density by considering all the dimensions available (i.e., left to right, top to bottom, and even “front to back” by the use of tabs, when available, or links to other pages or dashboards).
4. Enable comparisons to provide context while avoiding data repetition.
5. Group or weave similar, related, or complementary items together.
6. Provide integration points for the underlying data structure.

Figure 3: Information design goals for dashboards.

User experience goals

Additionally, I prioritize the following user experience goals when designing a dashboard with a grid:

1. Choose effective visuals. (Bar and line charts: Yes. Pie charts: Not so much.)
2. Simplify as much as possible (i.e., I want to be a “force multiplier” by making design decisions that save users’ time when they use the dashboard).
3. Use color consistently and sparingly for impact. See my article “Using color in data visualization and information dashboard design” for more details.
4. Limit the number of fonts used.
5. Align to a grid (as we’ve been discussing).
6. Keep the dashboard to one panel or screen whenever possible to eliminate or reduce scrolling.

Figure 4: User experience goals for dashboards.

This approach is consistent with the memorable design phrase “Less is more,” spoken by (or popularized by, depending on your point of view) Bauhaus founder and seminal designer Ludwig Mies van der Rohe in 1947.

Putting the principles to work

I now show a dashboard I constructed with Power BI Desktop using a grid-based approach, including the stages I used to arrive at the final arrangement.

I started by sketching some placements of elements with the above-mentioned design and experience goals in mind. I know that by mentioning sketching I will lose some readers, because many adults have come to believe (or have been told) they are incapable of sketching or drawing. I disagree, for a few reasons. First, it doesn’t require much art or design experience to draw geometric shapes, and these “geometric primitives” are at the heart of data representations in dashboards. Second, the sketch is for your own use in coming up with alternatives, and you needn’t show it to anybody if you don’t want to. Third, sketching can liberate you from having to filter your ideas through your knowledge of the capabilities of your dashboard tool.

By this I’m not recommending coming up with designs that you know can’t be executed (unless you are starting in a free association brainstorming phase, which can also have its place). But you will be able to iterate across various ideas faster, and without temptation to overly focus on the minutiae of the individual elements, by sketching. Here is my initial hand sketch for the example dashboard I’m sharing, as I thought about the visuals to use, how to arrange them, and even how to make use of an (intentionally) limited color palette:

Figure 5: Hand sketch of the example dashboard. Parts of the sketch with proprietary data are obscured.

With the sketch in hand, and as I applied a grid, a rough design began to coalesce and emerge, shown in the following example, which I chose to create in PowerPoint. Why PowerPoint? I consider this step optional, as you could go from sketching directly to executing in a dashboard tool such as Power BI Desktop. But here I wanted to play around with the elements I had in mind without yet focusing on the connection with the data on the back end:

Figure 6: Rough design of example dashboard in PowerPoint. Lorem Ipsum dummy text is used in place of proprietary data.

And with the grid scaffolding superimposed (which you would not show in any final version of the dashboard), to see how it brings everything together:

Figure 7: Rough design of example dashboard in PowerPoint with grid superimposed to make visible the structured array of the dashboard elements.

Here are the features I was able to achieve with the choice of visuals and their arrangement:

• Reading across the top for key summary information.
• Reading down the columns for each dimension of monthly grain information.
• Reading across the rows for each cohort of monthly grain information.
• Placing the daily grain information — the minority, in this case — into its own section.
• Aligning all the revenue data along the right column of the dashboard.

This approach also enabled me to socialize my work with other members of the team for their feedback and reaction before investing time in implementing it. That way, if I were off base, I could learn sooner and change my approach.

Finally, with the PowerPoint “sketch” serving as a blueprint, I was able to implement in Power BI Desktop. I used a combination of core visualizations in the tool as defaults and imported custom visualizations supplied by third parties as part of the online visualization library accompanying Power BI Desktop. Here is the result:

Figure 8: Dashboard as constructed in Power BI Desktop. As with the preceding example of the rough design, Lorem Ipsum dummy text is used in place of proprietary data.

The outcome is a completed dashboard that accomplishes the following:

• An at-a-glance view of key program metrics displays across the top.
• High information-to-pixel ratio is used throughout. The only element that is strictly for design is the grey line below the dashboard title at top left and my team’s name at top right; all other elements on the dashboard convey information.
• Left-to-right (for cohorts) and top-to-bottom (for dimensions) views are shown.
• Comparisons of dimensions, cohorts, and time are included.
• Related items are weaved and grouped together.
• Only two colors (and shading of those colors) — in addition to black — are used to draw the eye to emphasized elements. I delve into effective use of color in my article “Using color in data visualization and dashboard design.”

Conclusion

The main takeaway is that application of a few key design principles, easy to understand and straightforward to apply, can considerably improve the presentation of a dashboard. Principal among these is use of a grid, which helps to arrange, present, and make internally cohesive the elements of a dashboard in ways that improve its ability to, in the words of Stephen Few in his book Information Dashboard Design, “convey the most important information needed to achieve one or more objectives consolidated on a single display so it can be monitored at a glance.”

For more information on visual information design, see my article on using color:

Using color in data visualization and information design

Casey Doyle is on LinkedIn.