Design Strategies for Information Dashboards

Posted: 16 Feb 2015 06:00 AM PST

An information dashboard is a single-page display that presents key performance indicators in real-time. To make its content easier to read, a modern dashboard will often utilize information graphics such as charts and tables.

When designed well, a dashboard should help you quickly see critical information and discover data patterns.

Below are some tips and techniques for designing user-friendly dashboards.

Display the Information Logically

We know from usability studies that when we are shown a web page, our eyes generally start at the top-left region of the page. As we read the contents of the screen, our eyes move from left to right. A good dashboard design takes advantage of this natural reading pattern.

As a solid design strategy, place the most important and urgent information at the top-left region of the dashboard. Lower-priority and infrequently-changing information should be placed towards the bottom region of the dashboard.

Let’s look at the dashboard below, a case where content wasn’t arranged in a logical fashion:

Incorrect information architecture of a dashboard.

The information in the two upper charts, "Top 10 Customers by YTD Revenue" and "Number of Users by Age Group", doesn’t change frequently.

On the other hand, the most frequently-changing information, "Signups per month" and "Daily Metrics", are placed at the lower portion of the dashboard, a location that’s not optimal for the charts.

In the situation above, every day the user accesses the dashboard, they will need to go through the first two charts that don’t change frequently before they get to information that changes on a regular basis.

Highlight Important Information

You should be able to look at a dashboard and have your eyes immediately be drawn to the most critical information on the page. Visual techniques can be used to achieve this. (Read Creating focal points in your web design for tips and tricks.)

Color is powerful in highlighting important information. For instance, if we use light and neutral colors for most parts of dashboard, we could make specific sections stand out by using dark or saturated colors.

When looking at the following dashboard, take note of where your eyes first naturally go to:

Highlighting important dashboard components with the use of colors.

Perhaps your eyes were drawn to the line graph at the top-left region of the dashboard, or pie chart at the bottom-right region because they were colorful.

Group Related Information Together

Grouping related information helps users understand and discover connections within them. In the same token, positioning connected information far apart can cause confusion and make it harder to holistically evaluate them.

Consider the following dashboard:

Good grouping of dashboard information graphics.

In the dashboard shown above, you can see an implied grouping of charts based on color scheme and positioning:

The first row shows overall sales metrics
The second row shows product sales metrics
The third row shows regional sales metrics

As you can see, smart use of color and positioning helps users understand and compare related information easily.

When components on a dashboard look similar, people tend to see them as being related. We must be aware that this can be a double-edged sword because similar-looking dashboard components might unintentionally suggest relationships that don’t actually exist in the data.

Let’s look at the dashboard below:

Bad grouping of dashboard information graphics.

The sameness of colors suggests there’s a shared meaning among the dashboard components. The two colors (blue and red) do in fact share the same meaning in three of the charts — blue represents the Americas and red represents Europe — but this meaning does not hold up in the fourth chart, where blue represents "Quarterly Growth" and red represents "Annual Growth".

Use Colors Sparingly and Strategically

Because dashboards are often densely packed with information, the visual content must be kept as simple as possible. Using too many colors can result in a lot of visual noise.

Colors can be used to highlight key information and to show information relationships, as we have already seen. By using too many colors, their effectiveness in helping users understand the contents of the dashboard will be reduced.

Also, some colors immediately demand our attention, while others are less eye-catching. When a color makes a particular dashboard component stand out from other components, we naturally pay attention to that component and subconsciously attempt to assign a meaning as to why it’s different from the rest. (Read Gestalt principles applied in design learn why this happens.)

The two charts below present the same data.

Bad color use in dashboard information graphics.

Good color use in dashboard information graphics.

In the first chart, the additional colors don’t convey any new information. In addition, it subconsciously tempts us to find meaning in the different colors: "Does red mean something bad happened in December?", "What positive event happened in October?"

In the second chart, the single color correctly gives us an indication that all the bars measure the same metric (i.e. sales volume), and it helps us quickly make comparisons and discover trends within the data.

Choose the Right Type of Information Graphics

One of the most common design mistakes that happens when presenting information in visual form is the chart type used isn’t appropriate or isn’t the most effective. Making an error in chart type selection will convey the wrong message. It might lead to confusion and false assumptions about the information being shown.

The two charts below present the same data.

Wrong chart type.

More appropriate chart type.

In the first chart, the viewer ends up wasting time between looking at the legends and the corresponding pie slices. It’s the incorrect chart type to use in this situation.

In the second chart, you can see that the appropriate type of chart makes the data presentation much more efficient and effective.

Here’s a handy diagram that will help you choose the right type of information graphics to use in your dashboard.

Diagram showing how to choose the right chart type. source

Allocate Screen Space to Information Based on Importance

The size of a dashboard component is a naturally strong indicator of its importance. Pieces of information are not all of equal importance, so they shouldn’t be allocated the same screen space.

If a particular section of information is relatively less important than others, try to give it less space.

Provide Context

Numbers, tables and charts are incomplete unless you mention the context in which they are measured. The right context for key performance indicators helps us understand their meaning. Descriptive chart titles, for example, help us understand what we are looking at as well as what we need to look for.

The following dashboard chart misses to inform the viewer of the proper context in which to view the data with:

Dashboard information graphics that does not have enough context.

With a slight tweak of the chart’s heading, the same chart now tells the viewer something that may not be obvious at first:

Dashboard information graphics with proper context.

Conclusion

When designed well, information dashboards can serve as an indispensible tool for gauging performance and making decisions. On the other hand, a poorly designed dashboard can lead to confusion, wasted time and inaccurate data interpretation.

About the Author

Sreeram Sreenivasan is the founder of Ubiq, a web-based dashboard reporting application. He’s also a web developer and data analyst. Connect with him on LinkedIn