5 Layout Tips for Business Intelligence Dashboards

What can we learn from Michelangelo about good layout?

Do you know this sentiment: You are using a self-service BI tool and creating visualizations for your department, upper management or for customers. Every single visualization is meaningful. But you encounter difficulties when you try to combine them in a dashboard. It looks cluttered and confusing. You are dissatisfied with the results and so are the users.

Or have you ever encountered this scenario? You depend on daily reports and ad-hoc analyses. However, the dashboards are difficult to use, information density is low, and it takes you far too long to get the information you need.
In both cases, the difficulties lie in the layout. Layout is the intentional placement of objects such as text or images on a dashboard in a way that supports the content.

A bad layout is easy to identify: too bumpy, too gloomy, too colorful, too empty, too full - simply not right. In this blog article, I'll give you 5 easy to use tips to improve your layout. Me - and Michelangelo.

You can apply my tips directly and they are not tool specific. I use Tableau for dashboarding and developed these tips while working as a data artist. They are based on experiences from my art studies and work as an artist.

A dashboard consists of several layout elements. The dominant element is usually the header, which consists of a headline and optionally various capitalized key figures that have a focusing effect. The navigation is an optional element and allows to accommodate interactive elements like filters and parameters in a space-saving way. The central visualizations are in the main content, which is quantitatively the largest part of the dashboard. Another optional element is the footer, the lowest area of the dashboard.

Each element has at least one object. Objects can be visualizations or text modules, filters or pictograms. They form the content of the dashboard.

Each dashboard layout is a custom creation. However, the way people process sensory input visually has been researched and the findings can be used to build dashboards.
 

Tip 1: Go with the flow: design for natural eye movement

How does your eye move when you read this line? The eye moves from left to right. At the end of the line it jumps back to the left: just slightly lower. The reading direction is a familiar eye movement pattern that we can keep in mind while creating dashboards.

Eye tracking has allowed to analyze the pattern in which the eye moves across the content of a page. The most important content should be placed on the primary gaze axis and should be larger than the surrounding objects. I would like to present three different schemes of eye movement to you.

According to the F-scheme, the eye briefly scans content horizontally while quickly moving down. This scheme is well suited for dashboards with navigation (see figure).

According to the L scheme, the eye moves along the navigation and goes directly to the main content of the dashboard. It is suitable for placing few but large visualizations (e.g. maps).

According to the Z-scheme, the eye moves in a Z-movement to all four corners of the dashboard one after the another. This scheme provides orientation for dashboards without navigation.

The schematics provide guidance when considering where to best place the most important and largest visualization.

Tip 2: Play with pen and paper: never start without a sketch

This happens a lot at the beginning of a person’s career as a data artist: The leading visualizations are already developed, and you want to arrange them on one or more dashboards. In the process, you quickly lose track of the topics, forget a visualization, and must rebuild the entire dashboard every time you make a change. Too many colors make the dashboard look restless and too colorful.

To decide on a suitable scheme, it is necessary to combine the visualizations in a reasonable and consistent way in terms of content. The choice of the same colors for the same content is elementary.

There is a risk of losing track over the visualizations, and this may result in a need to add objects more than once. Rearranging and formatting can cause significant time loss.

All of this can be avoided with a quick preliminary sketch. I recommend pen and paper – at least this is the fastest option for me. But PowerPoint is also a good option.

• I make a quick sketch of each visualization on a blank index card and note how a time or dimensional filter would affect it
• I play around with different combinations before deciding on a version
• In a quick sketch, I determine the size and arrangement of the visualizations and note where I want to place filters, headings, pictograms, and so on
• The technical implementation is easy thanks to the detailed sketch
• Maintaining a consistent color choice is easier with a sketch as reference

Tip 3: Space is ace: inner padding is your secret weapon

The biggest challenge in a dashboard is to visually separate the individual elements from each other. The goal is to make the dashboard look clear, tidy, and well-structured.

Empty space on a dashboard is good - in the right place. In Tableau, I recommend using the "inner/outer padding" layout feature. This is especially important when using horizontal and vertical containers in "side by side" mode. With the "inner/outer padding" function, the objects gain distance to the container borders - and thus get a visual separation from each other.

In the dashboard on the right, the headings have been darkened - they look a bit like contracted eyebrows. At first glance, this makes the dashboard look structured, but the headings distract from the lighter bar charts and fine line charts.

Tip 4: Go for gold: learn proportions from Michelangelo

Artists and architects in antiquity and in the present day use the golden ratio to determine the size ratio of (partial) objects to each other. Proportions in the golden ratio have a pleasant and harmonious effect on people. In nature, they can be found as growth patterns, e.g. in sunflowers.

The golden ratio, about 1.6, is the division ratio of a distance into two parts, the major part and the minor part. The ratio of the total distance to the major part is the same as the ratio of the major part to the minor part.

How does this principle help with dashboard layout? For a dynamic, organic dashboard layout, three proportions should be avoided:

1. Area A should not be exactly half of area B - this looks rigid and too symmetrical.
2. Area A should not be only slightly bigger than B - this looks unintentional and irritating.
3. Area A should not be overly small compared to B - otherwise the information content disappears visually.

The golden ratio is used for orientation when setting the size of individual dashboard objects.

Tip 5: Design for the brain: use psychology to pick better colors

Our brain already associates certain colors with unique meanings. We can use this in dashboard design. Researchers proved in the lab that colors like red or yellow increase attention, while green and blue hues have a calming effect.

The base colors are used for bars or lines that are not assigned to a specific category or value. The font color does not always have to be black: a very black blue is also suitable and therefore belongs to the basic colors. Neutral, calm color tones or pastel variations of strong color tones are well suited, as they make up about 70% of the dashboard and should not appear too overwhelming.

Signal colors attract the attention of the observer. Therefore, they are usually chosen in the greatest possible contrast to the primary colors. Strong, saturated colors are well suited to draw the attention of the viewer. If a red-green gradient is chosen, it should be noted that green also plays the role of a signal color. A color blindness simulator* can be used to check whether the red-green contrast can also be seen with impairment.

* With this color generator you can generate colors that match each other and check them with a simulator: https://coolors.co/

Good layout aims to present information optimally, makes interactivity user-friendly and information pleasant to read. It is profitable to invest in good layout as it improves data communication.

In addition to practice and structured feedback, a workshop can bring about the desired progress.

Looking for specific layout suggestions? On Tableau Public I have recreated and published several dashboard layouts.

Sources:
https://coschedule.com/blog/color-psychology-marketing/
https://www.usability.de/usability-user-experience/publikationen/google-eye-tracking-studie.html
https://99designs.de/blog/design-tipps/farben-marketing-werbung/
https://en.wikipedia.org/wiki/Golden_ratio