When I had the opportunity to help design a dashboard for a client, I knew it was a good case for using color to make sense of sales data. “Information management” and “color” don’t always coincide, but I’ve worked out a practical approach to using hue and value as tools instead of decoration.
The dashboard’s centerpiece was a view that compared sales, potential sales, and geography. The designer had colored each map for meaning: green for parts, red for labor. The bars were also color coded, with dark green for potential sales and orange for actual sales.
The chart held data, but data is not understanding. I felt we could help the client make better sense of the information with color.
Color as an Organizing Tool
Color coding is a powerful way to help people make sense of raw numbers. But choosing colors is often aesthetic and arbitrary. At most, people may follow brand guidelines. There’s a better way.
We start by using hues to create major categories within the data.
Blue and orange are complimentary colors, which means opposites on the additive color wheel. Even though they’re evenly spaced, these blocks obviously belong to two groups. The same can apply to text.
Even when we don’t know what the data are, we know how they’re organized.
If hues create major groups, then values create subdivisions.
Here, three hues (red, green, and blue) create contrast that indicates groups. Shades of each hue create distinct colors within each column.
Organized color, applied
The first step was to organize the dashboard’s visual elements. We could do that with a simple bar, but I argued that would add more clutter than comprehension.
Instead, I made a version that used hues to create a strong relationship between the maps and their respective stacked bars. Since they’re part of the same data sets, I also changed the maps’ hues to match the appropriate bars. Then, to show sales vs. potential sales, I used color vs. lighter color within each stacked bar.
With these few changes, the final dashboard said more about its data without having to explain itself — infographics without more exposition.