Eyes On The Prize

Simple and Effective Dashboard Visualization Techniques

Kevin Feasel (@feaselkl)

http://CSmore.info/on/dashboards

Who Am I? What Am I Doing Here?

Catallaxy Services
@feaselkl
Curated SQL
We Speak Linux

Agenda

  1. Dashboard Basics
  2. A "Normal" Dashboard
  3. Knowledge
  4. Visual Principles
  5. Types of Visuals
  6. That "Normal" Dashboard Redux
  7. Building a Better Dashboard

Dashboards

What Are Dashboards?

Dashboards tell us about critical business or operational metrics.

Key features of a dashboard include:

  • “Single pane of glass” -- All relevant indicators are visible on the screen at the same time
  • Key performance indicators (KPIs) readily apparent
  • Relevant KPIs are bunched together in a logical fashion
  • Layouts are consistent between dashboard elements and between related dashboards

“Dashboards are not an appropriate venue for artistic impression.” -- Stephen Few

Dashboards

Types of Dashboards

There are three major types of dashboards we will discuss:

  • Operational Dashboards
  • Strategic Dashboards
  • Tactical Dashboards

These different dashboards fit the differing needs of an organization.

Dashboards

Operational Dashboards

Operational dashboards provide “day-to-day” data that assist line employees in making decisions. They tend to be specific to the nature of the user.

Dashboards

Operational Dashboards

Operational dashboards drive action by informing that a process may be “out of control” and giving operators a hint as to where the change might have occurred.

Dashboards

Strategic Dashboards

Strategic dashboards focus on KPIs which are tracked periodically. Good strategic dashboards let people get a quick view of important business measures.

Dashboards

Tactical Dashboards

Tactical dashboards tend to show business-level KPIs like strategic dashboards but let you slice and dice data.

Agenda

  1. Dashboard Basics
  2. A "Normal" Dashboard
  3. Knowledge
  4. Visual Principles
  5. Types of Visuals
  6. That "Normal" Dashboard Redux
  7. Building a Better Dashboard

A "Normal" Dashboard

Many dashboards look something like this:

A "Normal" Dashboard

We can intuitively see that this is not a good dashboard, but we might not be able to explain all the reasons why. The rest of this session will give us the tools we need to understand why this is not a good dashboard.

Agenda

  1. Dashboard Basics
  2. A "Normal" Dashboard
  3. Knowledge
  4. Visual Principles
  5. Types of Visuals
  6. That "Normal" Dashboard Redux
  7. Building a Better Dashboard

Knowledge

Know Your Audience

Key factors in knowing your audience:

  • Who is your intended audience?
  • How will they use your dashboard?
  • What actions do you want them to take as a result?
  • Are you showing the right measures in the right way?
  • What cultural differences might matter?

Know Your Audience

Intended Audience

Example: the following is great for a line worker or maybe a low-level manager, but board members don't have the time to care about your operational metrics.

Know Your Audience

Intended Audience

Who is your intended audience?

  • Technical specialists or line operators?
  • Lower or mid-level management?
  • Upper-level management?
  • C-levels?
  • The board?
  • External regulators or auditors?
  • The general public?

For each of these, we would display different measures in different ways.

Bonus Material

Continue scrolling for bonus material related to knowing your audience and your data.

Know Your Audience

Intended Use

How will users make use of your dashboard? What actions do you want them to take as a result?

Your job as a dashboard creator is to provide relevant metrics in an easy-to-understand way, requiring the user to get relevant information as easily as possible in order to make good business decisions. Critical considerations:

  • Do users need to see historical data or just the present value?
  • Is there a baseline or known good value?
  • Under what circumstances should a user act? Can you display those rules?

Know Your Audience

Intended Use

Critical considerations (cotd.):

  • What media will your audience use to view the data? Examples: phone, tablet, desktop, TV.
  • If your users are going to do eyeball comparisons and calculate differences, do the calculation yourself and visualize the difference!

Know Your Audience

Right Measures, Right Way

Are you showing the right measures in the right way?

For a sales team dashboard, you want to include sales-centric measures like leads in different steps of the pipeline, likelihood of a contact making a purchase, and number of sales by person against a quota. You don't want to include measures like server uptime, net margin, or number of high-severity issues.

Tailor your dashboards to show what people need to see in the right way: use visuals which make sense given the context. For example, a gauge might be an acceptable visual for team-wide sales versus quota, but it would be unacceptable for number of leads in a pipeline step.

Know Your Audience

Cultural Differences

What cultural differences might matter?

The meanings of colors can differ between cultures. For example, in European and American culture, red typically has one of two major meanings: love and danger. In finance, we use red to indicate negative values (going back to danger).

By contrast, in China, red has historically indicated prosperity--people give gifts of money at weddings and during major holidays in small red envelopes.

If you are tailoring your dashboard for people in a particular culture, it helps to have some understanding of the roles particlar colors play in that culture.

Knowledge

Know Your Data

Knowing your data matters as much as knowing your audience. Critical questions include:

  • What are the most important measures people need to see?
  • How do my data elements relate?
  • Am I missing any data? Are there incomplete elements?
  • Is my data source any good? What is the likelihood that my data is wrong?

Agenda

  1. Dashboard Basics
  2. A "Normal" Dashboard
  3. Knowledge
  4. Visual Principles
  5. Types of Visuals
  6. That "Normal" Dashboard Redux
  7. Building a Better Dashboard

Visual Principles

In this section, we will look at six important visual principles:

  1. Cognitive Load
  2. Less Is More
  3. Where The Eye Looks
  4. The Rule of Thirds
  5. Glanceability
  6. Color Vision Deficiency

Visual Principles

Cognitive Load

People can only process a limited amount of information at a time. Our working memory can hold approximately 3-7 items at one time. Think of this working memory like registers and our long-term memory like RAM: we move information out of long-term memory into working memory and (sometimes) vice versa.

Visual Principles

Cognitive Load

Because of this, we want to look for ways to reduce mental load. Techniques include:

  • Allow people to group things together. People naturally do this by attributes like size, shape, orientation, thickness, and color.
  • Remove "noise" from the reader--get rid of things that distract or cause unnecessary load.
  • Have your visuals tell a coherent story. Don't include things just to have them there; include them because they are an important part of your story.

Visual Principles

Less Is More

Remove unnecessary items: extraneous text, logos, etc. These simply clutter the screen.

Visual Principles

Less Is More

After removing the clutter, notice how much easier this is to read.

Visual Principles

Less Is More

Next, remove legends whenever possible. Legends require people to look up and down over and over to make sense of your visual. If you have a detailed legend, you are probably using the wrong visual.

Visual Principles

Less Is More

Reduce your color usage. Keep color usage limited and consistent. Make sure colors actually add value.

Visual Principles

Less Is More

In this case, it's clear that the colors were not in fact helping anything.

Visual Principles

Less Is More

By reducing color usage, I can easily highlight a particular value with a color, a pre-attentive attribute.

Visual Principles

Less Is More

Color is also an associative property, so people tend to link similar things with the same color together. If you break that pattern, you can confuse people.

Visual Principles

3D Pains

Humans have trouble with precise 3D measurements. In rare cases, a 3D image is better than a 2D equivalent, but that is never the case for bar or column charts.

3D "gloss" is also not helpful for getting your point across.

Visual Principles

Where We Look

In European languages, we read left-to-right, top-to-bottom.

In Middle Eastern languages (Hebrew and Arabic), we read right-to-left, top-to-bottom.

In ancient Asian languages (especially Chinese), we read top-to-bottom, right-to-left. In modern Asian languages, we read left-to-right, top-to-bottom (except when we don't).

These also bias where we tend to look.

Visual Principles

Where We Look

The Gutenberg layout:

Visual Principles

Where We Look

The Z layout:

Visual Principles

Where We Look

The F layout:

Visual Principles

Where We Look

These layouts tend to work for evenly distributed, homogeneous data, things like newspaper articles which are text-heavy in content.

For image-heavy dashboards, people follow a different principle: focal points. Our eyes look for the most dominant element on the page, and then follow a path from the dominant element to other focal points.

This means you should lay out your primary focal points in a way that makes it easy for a viewer to follow along.

Visual Principles

The Rule of Thirds

The Rule of Thirds applies to images, but also to dashboards.

Visual Principles

The Rule of Thirds

The strategic dashboard (sort of) follows the Rule of Thirds.

Visual Principles

Glanceability

Glanceability is the idea that a human can, at a glance, gain important information from your dashboard. Things which help glanceability include:

  • Clear purpose in metric design and display
  • No scrolling
  • Group metrics by function into sections: don't make users search around for related data
  • Easy to see (and differentiate) sections
  • Consistent layouts and decisions
  • Easy to read: large enough font, rounding big numbers

Visual Principles

Color Vision Deficiency: 8% of men & 0.5% of women.

Name Cones Detail Likelihood
Protanomaly Red Red, orange, and yellow appear greener. 1% M
Protanopia Red Red appears black. Some yellows, oranges, and greens appear yellow. 1% M
Deuteranomaly Green Blue and violet look the same. Yellow and green look redder. 5% M
Deuteranopia Green Reds are brownish-yellow and greens are beige. 1% M
Tritanomaly Blue Blue appears greener and yellow & red look pink. Rare M/F
Tritanopia Blue Blue appears green and yellow appears violet or grey. Rare M/F

Visual Principles

Color Vision Deficiency

A sunset in Orange County, California:

Visual Principles

Color Vision Deficiency

A sunset in Orange County, California with protanopia:

Visual Principles

Color Vision Deficiency

A sunset in Orange County, California with deuteranopia:

Visual Principles

Color Vision Deficiency

A sunset in Orange County, California with tritanopia:

Visual Principles

Color Vision Deficiency

Remember old SSIS?

Visual Principles

Color Vision Deficiency

SSIS with protanopia:

Visual Principles

Color Vision Deficiency

SSIS with deuteranopia:

Visual Principles

Color Vision Deficiency

SSIS with tritanopia:

Visual Principles

Color Vision Deficiency

Possible solutions:

  • Use color-safe palettes
  • Use grayscale for images (also helps if they're going to be printed out)
  • Use colors sparingly and consistently
  • Use patterns instead of (or in addition to) colors to highlight a particular element
  • Use a website like Coblis to simulate various forms of CVD

Agenda

  1. Dashboard Basics
  2. A "Normal" Dashboard
  3. Knowledge
  4. Visual Principles
  5. Types of Visuals
  6. That "Normal" Dashboard Redux
  7. Building a Better Dashboard

Types Of Visuals

There are a number of visuals available to us:

Types Of Visuals

Table / Matrix

Great when users need to compare data directly.

Tables and matrices generally don't belong on strategic dashboards, but do belong in tactical dashboards and sometimes operational dashboards.

Types Of Visuals

Column Chart

Great when there are few categories but potentially many periods.

Types Of Visuals

Bar Chart

Great when there are few periods with many categories. Also good when labels are lengthy.

Types Of Visuals

Bar Versus Column Chart

Choose a bar chart if:

  1. Category names are long
  2. You have a lot of categories
  3. You have relatively few periods (ideally, 1)

Choose a column chart if:

  1. Viewing across periods is important
  2. You have many periods with relatively few categories
  3. Category names are short

Types Of Visuals

Bar And Column Charts

Whichever you choose, you should have your bar/column charts start at the origin (0). That prevents these charts from being misleading.

Types Of Visuals

Cleveland Dot Plots

Named after Bill Cleveland, this is a minimalistic visual for comparing categories.

Types Of Visuals

Cleveland Dot Plots

Dot plots are not native to Power BI, but there are a couple of custom visuals which give you dot plots. They can provide a lot of information in a very small amount of space, making them great accompaniments for tables or larger visuals.

Types Of Visuals

Radar Charts

Good for showing a normalized comparison of measures across several categories.

Types Of Visuals

Line Chart

Great for time series data stretching over many periods with non-cyclical data, but showing few categories. You can also use a column chart here, especially with only 2-3 categories.

Types Of Visuals

Line And Column Chart

Risky chart, but works well with two inter-related but distinct variables. Often used with stock market levels and volumes.

Types Of Visuals

Line Charts

For bar charts, we want to start at the origin. For line charts (and dot plots), we don't need to. Instead, Cleveland, McGill, & McGill proposed making the average line slope 45 degrees. This principle reduces the potential for confusion when viewing a line chart and is why it's fine to have the bottom of a line chart start above 0.

Power BI and Excel automatically do this for you.

Types Of Visuals

Scatterplot

Great for showing relationships between two variables over a relatively small number of categories.

Types Of Visuals

Bubble Chart

Great small showing relationships between three variables over a relatively few number of categories.

Types Of Visuals

Treemap

Risky chart, but great for showing the relative share of value for a medium to large number of hierarchical, categorical values.

Types Of Visuals

Charts I Don't Like

The following charts are ones which have their uses, but I'm not particularly fond of them.

We will look at potentially good use cases, but also look at why I don't much like these charts.

Types Of Visuals

Pie Chart

Best use: simple share of a static total.

Types Of Visuals

Why We Hate Pie Charts

Pie charts have several problems:

  1. People have trouble with angles, making it hard to distinguish relative slice sizes.
  2. As percentages get lower, it becomes harder to differentiate slices.
  3. Pie charts usually require legends, which increase eye scanning.

Types Of Visuals

Pie Chart Alternatives

There are several alternatives to pie charts:

  1. Treemaps if you want to compare several categories.
  2. Column charts if you compare few categories.
  3. Simple numbers if a two-class visual (e.g., 58% - 42%).

Types Of Visuals

Gauges

Best use: showing progress toward a target or as a percent full.

Types Of Visuals

The Problem With Gauges

Gauges themselves are fine, but they need to show progress toward a goal or provide an intuitive status. This is an example of a bad gauge, one where we lack information necessary to understand whether we need to take action. We have a value of 34, but what does it mean? Is that good? Bad?

Types Of Visuals

Stacked Area Charts

Best use: showing relative and absolute differences of data which changes over time but has relatively few periods.

Types Of Visuals

The Problem With SACs

Looking at this again, what information can we know for sure? Just the top line and the bottom category.

Types Of Visuals

Stacked Area Charts

Instead, you can show information more clearly with a line chart. The downside is that you'll have to calculate the total yourself if you want it to show.

Types Of Visuals

Stacked Area Charts

Instead, you could also use a ribbon chart, which at least shows rank changes. But it's also a very noisy chart.

Agenda

  1. Dashboard Basics
  2. A "Normal" Dashboard
  3. Knowledge
  4. Visual Principles
  5. Types of Visuals
  6. That "Normal" Dashboard Redux
  7. Building a Better Dashboard

"Normal" Redux

After going through theory, let's take another look at that "normal" dashboard and see why exactly it is not great.

"Normal" Redux

Pie Charts

"Normal" Redux

Too Many Colors

"Normal" Redux

Unnecessary 3D

"Normal" Redux

Category Overload

"Normal" Redux

Scroll Bars

"Normal" Redux

Color Reuse

"Normal" Redux

Unnecessary Chrome

Agenda

  1. Dashboard Basics
  2. A "Normal" Dashboard
  3. Knowledge
  4. Visual Principles
  5. Types of Visuals
  6. That "Normal" Dashboard Redux
  7. Building a Better Dashboard

A Better Dashboard

The Feasel Challenge

After a presentation, I go get a Victory Burrito. I want to track these victory burritos over time, with the goal of having a victory burrito in 50 separate cities. Therefore, I want a dashboard. My dashboard should tell me:

  1. How close I am to 50 distinct cities
  2. Where I have had a victory burrito (city, state, country)
  3. Breakdown of victory burritos by chain/restaurant
  4. How many victory burritos I've had per year

A Better Dashboard

My cousin Joey offered to make me a dashboard. Here's Joey's attempt:

A Better Dashboard

Demo Time

Wrapping Up

Keep these tips in mind when creating a dashboard:

  • Use appropriate visuals
  • Use color consistently and as a signal
  • Avoid chartjunk and unnecessary chrome
  • Avoid legends when possible
  • Avoid scroll bars
  • Make your dashboard glanceable
  • Make appropriate use of whitespace
  • Ensure your dashboard is CVD-friendly

Wrapping Up

To learn more, go here: http://CSmore.info/on/dashboards

And for help, contact me: feasel@catallaxyservices.com | @feaselkl