The Magic Bullet for Designing Better Dashboards

by | Jul 14, 2014 | Healthcare, Manufacturing & Supply Chain, Wine & Spirits

Reading Time: 5 minutes

di-surgery-advisorHave you ever looked at a dashboard and been overwhelmed by the various dials, charts and gauges? Did you spend more time deciphering than analyzing? Don’t worry – you’re not alone.

As a career design professional, I often find myself involved in heated discussions around dashboard design. One thing I’ve learned is that everyone has an opinion when it comes to look and feel. And while you might not be able to completely please everyone, you can design a dashboard or any information-based view in a way that allows people to make better, faster decisions using a single element: context.

While I have been working with the display of quantitative information for years, I still wanted to make sure my own understanding of the word “context” was correct. So I went to the dictionary.

dictionary.com provides this definition:

con·text [kon – tekst] noun

1. the parts of a written or spoken statement that precede or follow a specific word or passage, usually influencing its meaning or effect: You have misinterpreted my remark because you took it out of context.

2. the set of circumstances or facts that surround a particular event, situation, etc.

When we speak of “context” in statistics, we’re referring to “the circumstances, purpose, and perspective under which an object is defined or used.”¹

This is very important to remember when developing dashboards. Although a number has a finite meaning on its own, within certain contexts that number will mean different things. A heart rate of 140 can be OK if it is a “target heart rate” while exercising, but if your resting heart rate is 140, that is a very bad thing. In an example like this, proper labeling can dispel any confusion about the context of such a number.

Before deciding which indicators to use, it’s important for developers and designers to open lines of communication with their end-users to best understand not only WHAT information users want to see, but WHAT decisions they want to make from it. Understanding the decision-making rationale helps you identify which indicators to include that will best support the contextual information relevant to your users.

Some variables that show context include:

  • Minimum
  • Maximum
  • Low threshold
  • High threshold
  • Color threshold
  • Delta
  • Base
  • Target

If your metric context contains one of these variables, use the indicator that provides the variable as an option – it’s that simple. It’s important to get to know all of the indicators and their variables in order to speed up indicator selection. (A hint to Dimensional Insight users: a full explanation of each of our available indicators can be found in the DivePort Administrator Manual – connect with [email protected] to get an electronic version if you don’t have one.)

To get started, here is a basic primer on each indicator and its variables:

Alert – A single shape whose color changes based on whether the value is above or below various thresholds indicator-examples-left-alert
Bullet chart – A bar chart with support for one or more thresholds and a target value indicator-examples-left-bullet
Dial – An arc and a knob with a needle to indicate the value indicator-examples-left-dial
Gauge – A multi-colored arc that uses a needle to indicate the value indicator-examples-left-gauge
Image indicator – Shows images based on whether the value is above or below various thresholds indicator-examples-left-image
Plus-Minus chart – A bar chart with support for values extending above or below a target/base-line value indicator-examples-left-plusminus1
Racetrack – A series of 2 to 5 lights, each representing a value in a range indicator-examples-right-racetrack
Rectangle – A single rectangular shape whose color and/or shadow color changes based on whether the value is above or below various thresholds indicator-examples-right-rectangle
Slider –Displays the selected value in a box that moves from left to right on a track depending on the value indicator-examples-right-slider
Slope – A single shape whose rotation ranges between pointing straight up for the maximum value and straight down for the minimum value indicator-examples-right-slope
Speedometer – A gauge stylized to look like a car speedometer with a needle to indicate the value indicator-examples-right-speedometer
Text – Straightforward text representation of data (add formatting to convey value) indicator-examples-right-text

These indicators are all great ways to display the context needed to understand the meaning of a number or measurement. But it’s also important to remember that the visual context of numbers on a dashboard can add or detract from a number’s meaning. It does no good to research and display all the contextual information about a given number only to bury that number under a barrage of visual details. What I mean is: if one number is the most important metric to communicate on the dashboard, make sure it stands out above all the other data and graphical items.

How do you make it stand out? A knee jerk reaction is to make the metric bigger. But on a crowded dashboard, this may be difficult. What’s important is that the metric has the highest amount of contrast on the page. It doesn’t have to be the largest; it could be the darkest, or the one with the most white space around it. Here are some design qualities one can play around with to try and achieve the highest contrast:

  • Size
  • Shape
  • Color
  • Intensity: Lightness/Darkness
  • Saturation: Brighter/Duller
  • Position
  • Positive/Negative area (white space)

The ultimate test is to show the dashboard to someone who knows nothing about the information and ask that person if he or she understands what is being measured and the results of the measurement. If a novice can “get it” … you’ve communicated clearly!

Are you interested in more articles on dashboard design? Here are some other articles on our blog to check out. Also let me know in the comments section below if there are other design topics you’d like me to explore in a future post!

————————–

Footnote:
¹ Definition of “context” courtesy of the Organisation for Economic Co-operation and Development glossary of statistical terms

Ready for a test drive of our healthcare analytics software?

Rose Curtis

You may also like