Color is just one of many visual cues one can use to direct someone’s attention to and tell stories with data. Choosing a color palette for a particular data visualization is one thing. Coming up with a scalable system for applying that same color palette across a data dashboard is a larger design problem altogether.
What if we can’t avoid multiple categories?
Recommendations for limiting color use in graphs range from 6–9, with sometimes 12 colors still possible, depending on the type of data being represented.
But what if, as in one of our cases, there are up to 17 categories in the data shown at one time, and those categories are difficult to group? In this case we are required to take a closer look at the type of data, as well as infer how we expect the user to interpret and use the data.
“A leader’s role is not to always have the answer, but to create the conditions for things to happen”
~ Chris Waugh, Chief Design & Innovation Officer Sutter Health
The intent of our dashboard is to bring to the user’s attention a range of opportunities for renewal business that they might not have otherwise pursued. But within that sphere of opportunities, it is our assumption that the user should pursue “bigger fish” opportunities first, rather than “small fish”. We inferred the big fish to be those opportunities with larger dollar amount within a group. We went ahead to use color sequentially to express the value of an opportunity category, making big fish opportunities darker and making them progressively lighter as the value dips.
Design Solution 1 derived following the Big Fish vs Small Fish concept
- Use solid colors for larger values and lighter tones for smaller values
We went ahead to test whether our solution met the user’s needs in the best possible way. The feedback we got was it is also important for the user to see the small fish and it is easy for users to get confused as to the reason for the color being so light and insignificant. This information can be easily missed.
It was time to transition to the next solution to ensure that only the best ideas are taken forward. We realized that
If data isn’t understandable, it isn’t actionable.
The team got down to find out the maximum number of categories that were required to be shown to users at one time. We created 17 colors theme of 3,6,13, and 17 which was the max number.
Design Solution 2 derived using Color Theme
- Created a color palette of 3, 6, 13, and 17 colors cascading from darkest, medium to light
- Colors chosen in palette are visually distinct
Continued testing with real time users made us realize that we even needed a 9 color chart which we later incorporated. In pie chart and also in stacked bar, the colors were not visually distinct and we realized there was scope for improvement from usability point of view.
Usability Improvements
- Inserted a thin separator between each graph segment to make it easily distinct (see above image)
What’s Coming Up?
Taking some more of our ideas forward, we will be soon running a test where we will go monochrome by showing only one color for all segments in bar charts in descending order which is the best practice. The goal is to test whether users prefer unique colors for category or an abundance of colors.
We believe there is always scope for improvements and are still experimenting with the design solutions using colors. Do keep a watch to see how the results impact what comes next, as we pursue that particular design? Following them will make our dashboards more useful and impactful. To quote Stephen Few:
“If the information is worth displaying, it’s worth displaying well”.
