---
title: Let's Talk About Dials
teaser:
tags: design,data
author: Joanne Cheng
published_on: 2014-08-05
---

When it comes to designing dashboards for web applications, people often turn to
dials as a way of representing a single data point that fluctuates over time.
Think of a speedometer in a car.

![Speedometer](https://images.thoughtbot.com/dials/speedometer.jpg)

It's easy to glance down and get the current speed on a car dashboard while
driving and navigating traffic. Dials work well in this context: we only
care about the current speed and the direction the speed is going. When we need
to slow down, we press down on the brake and can see our needle moving
downwards. The speedometer tells us if we're slowing down fast enough, and if
we're not, we adjust our braking so the needle moves at the right pace.

When we're monitoring our applications, our dashboards tracking our application
metrics should work the same way.
We should be able to know what's wrong with our app at a glance and respond
quickly. Because people often want to replace a familiar analog interface on the
computer screen, dials in dashboards are popular.

Dials don't work the same way on your computer screen. Let's look at Google
Chart's ["gauge"
visualization](https://developers.google.com/chart/interactive/docs/gallery/gauge).

These gauges are mostly grey with some red and orange to represent critical and
warning ranges. If our metric goes into these ranges, we should start reacting.

But our eyes are attracted to colors of greatest contrast: the red and orange
blocks. Every time we look at a dashboard with these dials, we see the areas of
bright colors, even when nothing is critical. This may not be a big deal with
one gauge, but dashboards display many other metrics.  Things get messy when we
have several graphs on a page.

Consider the following set of dials:

![''](https://images.thoughtbot.com/dials/dials1.png)

Does it look much different from the following set of dials?

![''](https://images.thoughtbot.com/dials/dials2.png)

The second set of dials some values that are barely in the critical and warning
zones. What if you had 10 other graphs on your dashboard? Would you be able to
notice a critical metric in one glance?

## Alternatives

A popular solution is to eliminate the extra "ink" around the dial and fill the
current value up to its appropriate pixel value.

![''](https://images.thoughtbot.com/dials/modern-dial.png)

This is a sleeker dial that doesn't need labels and dashes. If the designer
chooses, the color of the dial can change to reflect the state of the value. For
example, if the current value is critical, the dial could turn red.

This display is an improvement on the analog dial design for our web dashboards.
If we need to display several single values, we still lose a lot of screen real
estate to the circular shape. Instead, we can use a bullet chart, a dial
alternative designed by Stephen Few.

We can display three metrics for a lot less space, and we can see where those current
values land in their ranges.

![Bullet graph](https://images.thoughtbot.com/dials/bullet.png)

Few avoids common "status" colors like red, green, and yellow when he can to
reduce the number of contrasting, attention-grabbing colors on the page and to
account for color blind users. In this graph, the attention grabbing color is
reserved for metrics that hit the critical range.

The downside is that this type of visualization often requires explanations for
the people who are viewing them. If you want to display a current value with a
little bit of history and ranges, sometimes a simple line graph with a few
annotations does the trick.

![Line graph](https://images.thoughtbot.com/dials/linegraph.png)

While this metric isn't in a critical range yet, we can quickly see that it's
rapidly approaching that critical value and should probably take action to
resolve that.

Dials are a great way to display analog information, but it's important to keep
in mind that they work differently in a dashboard on your screen. Depending on
the situation, some of these examples will be a better alternative.

If you're interested in learning more about maximizing the effectiveness of your
dashboards, I highly recommend the writings of [Stephen
Few](http://www.perceptualedge.com/library.php).