Dashboard Design Topic: Using Colors for Business Dashboard Alerts
You hear about a problem so you log on to your business dashboard looking for red alerts among your KPIs and metrics. Not an uncommon use case, right? Your dashboard should clearly alert you to the conditions most requiring attention. Well, let’s spend this post talking about how to display alert conditions.
First off, think about the “heirarchy of alerts” that exist in your organization. There are, of course, the low-level everyday advisory types of alerts. “Did you know?” style alerting includes announcements and reminders such as service advisories. Then there are more of the health status indications. These are what we think of when we want to report on the state of KPIs and metrics. The real challenge here is to design the alerts such that they stand out on your busy dashboard.
We’ll address some of the principles behind the effective design of alerts, but first I’d like you to visit this post for a humorous look at the idea of the “heirarchy of alerts“.
Getting back to designing alerts on dashboards, take a look at the “Red Alerts” in this graphic below. There are 7 of them:
Now take a look at the 7 Red Alerts in this graphic:
This visual design exercise simply shows that when you reduce visual “noise”, the “signal” becomes much easier to understand.
Let’s illustrate this principal with a great example contributed by Dashboard Spy reader Mike Gaffney, a talented software architect and dashboard designer at BoxTone, a company that monitors mobile application service levels. In his blog post titled The BoxTone Dashboard and the Blackberry Outage, Mike shares his view that dashboards must use strong color values only to indicate alert states:
If you quickly glance at the dashboard in its normal state (version 1) and the dashboard in its “alert” state (version 2), you should immediately notice that version 2 stands out more. It stands out more because of the careful and restrained use of colors.
Unlike many other dashboards, the BoxTone Dashboard uses highly saturated colors only when there is a problem. Edward Tufte’s, Envisioning Information (1990), has a chapter entitled “Color and Information” which provides an excellent overview on the use of color. When everything is normal, the BoxTone Dashboard looks, well … normal.
Our users are highly intelligent people. They do not need bright green check marks to make them feel good about themselves. They bought BoxTone to tell them when something is wrong. And when something is wrong, they want to know what it is and quickly!
A single bright red dot on a calm page screams out and demands the user’s immediate attention. On February 11, 2008 (date of the RIM Blackberry Outage), this technique is what allowed our users to know instantly that the problem was a global one.
Here are some screenshots showing what Mike is talking about.
Here is the BoxTone dashboard in it’s normal state. Click on the dashboard screenshot to enlarge the dashboard.
Now take a look at the dashboard in an alert condition:
This was captured during the RIM Blackberry outage.
It may be hard to make out the detail from these images, so here are some detail screenshots of the Blackberry Server Monitoring dashboards.
A section of the dashboard in its “Normal” state:
Here is the “alert” state version. Note the nice use of the Edward Tufte principles.
An excellent example of using color to accentuate an error condition. Be sure to check out Mike’s post for further details.
Also, be sure to read this related Dashboard Spy post on Intuitive Dashboard Design with Preattentive Variables and cognitive factors of dashboard design.
There are existing design patterns we dashboard designers can use to draw attention to our KPIs and metrics using this idea of preattentive variables:
Tags: Use of color on business dashboards, dashboard design, Boxtone dashboards, Blackberry server monitoring RIM Outage