I hate to admit it, but I really am a data visualization purist. When I joined my current company, one of the first things I did was to attend an eye-opening seminar conducted by Edward Tufte. It changed my life.
Since then, I've read countless other sources on proper data visualization from a long list of authors. Sure, sometimes I think some of these heroes sound like Statler and Waldorf in their critiques, but there's no denying that our industry's awareness of the psychology of information consumer has had many positive effects.
This personal history made it all the more shocking to me when I violated one of my cardinal rules about dashboards--never use gauges! Gauges are the epitome of skeuomorphic design for a data visualizer. If the product is "a dashboard", then of course the user should feel like the pilot of a Boeing 747, right? Wrong!
When I think of dashboards with gauges, I usually imagine something that looks like this real-world example:
While some might love this kind of thing, I could never present this kind of design to a client as a "well designed data visualization". It violates so many best practices, I just don't know where to start!
So how did I arrive at using a gauge?
Well, I was trying to find a good way to pack a lot of information in a tight spot. Since the target device was an iPhone screen, this is a challenge not just in space, but also in terms of navigation. The information I needed to pack in to less than 20% of a 4" iPhone display:
- The cumulative values of a metric on four time scales (WTD, MTD, QTD, YTD)
- The target for each time scale
- Percentage to a target value
- Visual indication of progress to goal
- Visually differentiated (e.g. color/shape) indication when a goal was exceeded
- Show both percentage and actuals
- Provide navigational elements to "show details" for any of the four time scales
Wow! A lot to pack in to a small space, made more challenging that the UI is touch, so any navigation had to be large enough to be hit by a finger.
After running through all of the obvious best practices: bullet charts, sparklines, bar charts and the like, it occurred to me that a gauge control (the present but never before touched element in my toolbox) might actually work--if I could take a lot of the "gauginess" out of it.
So the following is the design I arrived at, which has the following benefits:
- Packs a lot of information in a small space
- Provides text, color and geometry that tells the data's story
- Allows the user to quickly and easily ascertain which data is most important to examine
- Since each "gauge" doubles as a large, finger-friendly navigational button, no additional space needs to be provided for drill-down switching
I'm still am not a fan of skeumorphic gauges--the kind with dials, radial tick marks and the like. But I realize I need to have a more open mind, and as our target devices proliferate, perhaps we need to revisit some of the data visualization tenets we hold as sacred.