Writing a book is easy – you just lay out words in the sequence you want the reader to read them. Obviously, this is a joke. But making a dashboard is difficult – all the things are available at once, and still, you want the reader to read all the information in the correct sequence – either following a hierarchy (from totals to details) either following a time direction (from most recent data to the history). Obviously, this is not a joke.

Dashboards are notorious for allowing to throw all the data at once, and if the creator is not careful about this, dashboards might end up in a form of a data puke. “Here are all the things – sort it out yourself”. Is it the best user experience a dashboard creator can provide? Obviously, we can do better.

To do better, there are two things to consider. One is how to group information in the dashboard so we understand what belongs to what, and this will be covered in another article about Gestalt principles (subscribe). The other is to make it clear for the users in what sequence to read the things on a page, similar to providing a map with signs – what goes first, and what goes next.

Guiding is why we need design

The act of guiding is the first and foremost purpose of adding any design to a dashboard – the point is not to make it beautiful, the point is to let the user follow visual clues while they read the data. And the next, a bit less important point is still to make it beautiful.

However, to be able to guide the user, we have to know what is the sequence of things we want them to follow. Often creators themselves have no idea how the information should be consumed.

Having this forethought before creating charts is a significant change of the whole dashboard creation process, but for now, let’s assume that the hierarchy of information is clear. We already know what is the overview users have to check first, what are the details they are going to need next, and finally, where are the details they will only access on demand – hidden behind navigation, button or some other action.

This sequence of reading a dashboard is derived from the information seeking mantra introduced by Ben Schneiderman in 1996 and is intended to describe how humans naturally seek information, so computer scientists can devise graphical interfaces allowing users to consume information naturally. The mantra is simple:

• overview first
• zoom and filter
• details on demand

We assumed that information already have this hierarchical clarity. Now let’s see what visual clues you can use to indicate these sections for dashboard readers.

Ways to guide attention with design

Layout

The first thing that makes the big picture is the layout. There are a few very obvious things that can be done in the dashboard consciously – presenting the information from left to right or presenting it from top to bottom.

If no other clues are visible, users will tend to use one of these trajectories to scan the data and to check what’s interesting.

Usually, those trajectories are combined into more complex reading patterns – the Z pattern and the F pattern, however simple utilization of left to right and top to bottom will help users to understand what is the intended hierarchy of information.

Failing to follow any of these two most natural directions, will either require more advanced design solutions for guiding, or just keep the user wandering around.

In the example below users will probably read numbers first, then follow by one of the two bar charts, the line chart will most likely be read last. Our job here is to give clues, users are still free to ignore them and inspect the page in another way.

The next techniques might be redundant, they will often emphasize the already established layout, but in some cases they work as a shortcut and allows cutting through the layout allowing for quicker navigation, especially for users more familiar with the dashboard.

Size

A common technique used in writing is size. The title of the whole article is the biggest one, the title of the section is somewhat smaller, and body text is the smallest. Captions of the images might be even smaller than that because you won’t miss much by skipping them.

We can apply the same to dashboards – Big Numbers are big – we read them first. Then there are big, clear charts – shapes are big there, however texts and labels are somewhat smaller. Probably we will read those later. Finally, there might be more detailed charts, or even tables, they will look dense, however shapes and texts will be much smaller, so they will require more intended attention to read them, which means readers will draw attention to them only when they already know what they are looking for.

Size is a powerful attention grabber, and it is possible that it can beat the layout in some cases, for example if you put a Big Number in the centre of the dashboard, it might be checked first. In most cases, it is not the best decision, but still, you can be sure the number is probably checked first.

In the example below, there is no doubt that number 600 is more important than 7 and clustered bar chart is more important than the other two.

Colour

Colour is such a powerful clue in visualization, there is no way readers will ignore it, unless they have vision deficiencies.

Here are a few ways how you can use colour to your advantage:

First, you can highlight interesting data points. This way, the user will skip all the layouts and sequences and will jump right away to the most critical place of the dashboard – where something is off and needs attention. This is an example of a shortcut!

Otherwise, you can still rely on the traditional approach of reading something at the top left first, and then proceeding to other parts of the dashboard. To make sure people really check the intended place first, you can change the background of that section to a different, bolder colour. It screams right at the user – this is the most important number (or chart) you have to check!

Finally, there is a subtle way of colouring elements in the charts themselves to communicate this hierarchy. For example, the main chart might have the boldest colour of all, while detailed charts have subdued or washed out colours. This will still indicate which chart is the first one, however a bit more subtly.

In the example below, the Big Number 600 is intended to be read first. However, highlighted things in red scream for immediate attention, and probably they will be checked first.

Arrows

Obviously, to point what piece of information is next, you can use arrows. Arrows can cut through all the structure, so they are more suitable to indicate a shortcut than to be the default way of laying out the hierarchy. Using arrows as pure graphical elements in the dashboard to show which chart should be read next might be a bit weird, but it has other good use cases.

First, after you have done reading the page you might see there is an arrow button showing somewhere outside the screen, this would mean the button invites you to go to another page, probably to check for some detail.

Second, there might be a button with an arrow pointing towards some chart, this would indicate that pressing this button might open some additional panel of information or controls related to that chart.

Of course, there is still area for experimentation for using arrows, maybe you will come up with something very useful!

In the example below, arrows have been used in multiple ways. Arrows show whether the number has gone up or down, cut through variation to emphasize general descent, used as graphical element to draw attention, and finally, indicate navigation possibilities.

Text hints

Frequently on top of products made in the USA I see full-text messages explaining how things might go wrong, probably to prevent potential lawsuits of “I did not know that you cannot put a cat in a microwave” type. “Objects in mirror are closer than they appear” – tells the rear mirror of a car. If you are from the USA, that is common for you, but for others – that is so funny.

The same can be used for dashboards – just write a piece of text explaining how to read a page.

There could be some text explaining what is the most general thing, and where and how to find details. I would see a problem with this technique – people still have to read that text first. You could use a bold background, but this works only if people are going to use the dashboard once or very rarely because otherwise this text will hang out there highlighted every time they try to open it.

What might be better is to include text explaining what’s next. I have finished reading, now I know what is the main insight in this page, how do I look for details? Is it another page waiting for me, or is there a button revealing hidden bits? Should I explore drill-through functionality in Power BI or a cool custom action in Tableau?

These things I tend to explain because not every user gets how to use this drill-through functionality at once, or if you have created smart cross-filtering – a hint encouraging users to try it might be that one thing needed. I always explain drill-through with a text.

Example below explains cross-filtering with text and adds a little attention grabber in the chart.

Icons and images

While images in dashboards are often considered chart-junk, we can still use them for the purpose of indicating what is at the top of the information hierarchy. Images and icons attract attention? Good, let them attract attention to the right place!

Placing a small and representative icon or image right next to the top level aggregated number will not only clearly indicated that this is something to start with, but also will give a clue what is the number about without reading the labels.

By using technique, make sure that the focus is still on data, not the images themselves.

The example below displays icons for every chart, this helps the user to understand which Big Number is related to which Bar Chart.

Interactivity

Interactivity is a defining property of the dashboards, which separates them from other static data visualization types. In dashboards, you can press buttons, apply filters, zoom in and do all other kinds of stuff the developer has built in.

Interactivity can aid in guiding people’s attention in three main ways.

First one is to indicate that something is selectable, editable, pressable. Usually, this can be done by simple hovering effects – hovering over a button, changes its appearance or displays a tooltip explaining what that button will do, or both.

Another way to use interactivity is to show the status of filters and navigation. So the user knows where they are and what can be done next. This includes dynamic chart titles indicating applied filters, your current position in the hierarchy of the data, or any other information that might help.

Finally, interactivity can be used in a straightforward manner, allowing people to explore additional information without leaving the page, just by hovering on things or pressing buttons. This way, users see the next level of information only if they want to.

In the example below, there are multiple ways the dashboard interacts with the user – by displaying a dynamic title and a tooltip on hover. There are multiple ways the user can interact with the dashboard – by checking details of Big Numbers or using arrows to navigate. Both ways ensure that only the most important information is displayed first, all the additional bits are shown on demand.

Map

A rare example in the world of dashboards is a map that indicates where you are in your data analysis journey. While we see maps everywhere – in the games indicating our position within an artificial world, in the apps indicating the current step of a transaction, in the websites in a form of breadcrumbs indicating how did you get here.

The simplest map we can imagine is just full navigation visible with a highlighted page you are currently in. But we can get more creative than that also indicating all the branching possibilities and how to jump from one branch to another as shown in the example below.

Consistency is as always the key

All those techniques for guiding attention will become confusing if used all at once and differently in every page.

Navigating a dashboard is like navigating the subway of a foreign city – once you learn how the lines are marked, how the stations are called, and where are the intersection points, it gets easier to navigate that one particular city. A new city is a new story.

The same goes with a dashboard – pick just a handful few techniques and use them thorough your pages. Otherwise, people will have to learn to use every page separately, which will be a frustrating experience!

I usually start dashboard from the top and go to the bottom, use background colour to indicate the hierarchy of the section, use text hints to explain what can be done next. In some other cases, I indicate most important numbers with size and icons, especially when the reading sequence is not obvious due to higher level of user interaction possibilities.

Find what works for you your readers and stick with it!

Design is for guiding

A little reminder, that design in dashboards should not be used to make them beautiful, rather it should be used to guide people, encode information and provide the best user experience with the data they can have!

I hope the tips on guiding users along the hierarchy of information in the dashboard will help you in your work!