STROOPIFIED! Tableau Dashboards, Color, and Functional Aesthetics

How much does color affect our understanding of dashboards? We know bad choices in palettes can definitely break a good dashboard. We’ve seen how designing in grey and monochrome can bring our data forward. What other color tricks exist?

If you’ve spent any time with me, you know I’m a massive fan of researchers and scientists. And Tableau loves research. To answer this, let’s look no farther than my Wisconsin TUG tour buddy, Vidya.

Vidya Setlur is a researcher at Tableau studying semantics and how to automatize it to facilitate understanding. She’s the same mind pioneering and supporting Ask Data, a Google-esque ability to ask a question and get a chart. She’s also explored color and its use to support or hinder understanding.

In her own words:

Much of my research at Tableau is focused on developing effective techniques and algorithms to help facilitate visual communication of information. Producing effective and expressive visualizations often requires considerable artistic skill and can consume days. I am always inspired by methodology and concepts stemming from other disciplines such as visual art, perceptual psychology, information processing, natural language and cognitive science to facilitate our customers in creating, understanding and interpreting their data. I like to collectively group these concepts as “functional aesthetics.” 

How much does color affect us? I give you Vidya’s favorite user group test.

Did you hesitate? How many colors did you name, not read? Vidya’s done the road tour with this and you can see how some people do reasonably well with a bit of hesitation at the start while others rattle off the colors they see versus reading them. In almost every case, it’s work. You can thank the Stroop Effect.

And, it gets better.

A similar but smaller effect is found for words with strong color associations, such as ‘blood’ and ‘grass’. This is recognized as interference between the color term evoked by reading (language) and the color name associated with the perceived color.

Vidya Setlur

I’ll emphasize the smaller effect, as well as there is a cultural and linguistic component to this. Beyond its party trick abilities, psychologists will often use this as a test of selective attention. Yet, here’s what we haven’t discussed: attention itself is a limited resource. You have to work to pay attention as much as we demand it in our modern environment. Numerous books on the topic highlight just how overwhelmed we are.

There are things we can do to either ease or challenge our burdens on attention. Want to make things Olympic level challenging? Put a ton of color and unnecessary lines on something. All of this creates noise we have to sift through to achieve a particular action. Want to make that action easier? Use color functionally to support your desired outcomes, or apply functional aesthetics as Vidya would say.

In the area of data visualization, the work by Lin et al., showed that semantically naming the categorical colors used in a visualization improved cognitive performance in humans comprehending and gathering insights from the data representation. They hypothesize that at the minimum, viewers can more easily memorize the categories, reducing the need to access the legend.

Vidya Setlur

So we know we’re sensitive to color when it has potential color-bound meaning. How do we use this to make better dashboards?

Stroopified!

Take a look at this viz. What conclusions can you draw?

If you cook, something likely feels amiss. You may or may not be able to put your finger on it. Something about this feels unlikable. Mostly, because you’ve just been Stroopified (no, this is not a real word, but I’ve made it one here).

The colors don’t line up to any semantic association. Compare the above to this viz.

In this case, the colors line up with semantic associations in a very literal fashion. This was a pilot version, but proved too overwhelming.

Enter the final version:

In this pass, the colors are limited to 5 options. It’s not that these are wholly accurate to the color, but represent some type of value that’s shared. Most of your darker colored warming spices are in that burnt sienna. Basics that are lighter are in yellow, while lighter spices are purple. Peppers are orange while leaves are green. Spices don’t have the strongest shared semantic association within the US. Based on cooking experience, culture, and tastes, you’re highly likely to assign the colors differently. If you have a strong semantic relationship to spices, this may still frustrate you if it doesn’t line up.

In linguistics, semantics is all about meaning. Food and common objects may have a semantic value, leading to a Stroop-like effect when conflicting colors are used. Some of these are highly individualized, while others are normed by family, culture, or even workplaces. For items without a semantic association, you can create it.

Here’s one of my favorite findings: Tableau even experimented with automating these associations. More from Vidya:

As part of a Tableau research project from 2015, my colleague Maureen Stone and I explored how natural language and image processing can come up with semantically resonant colors that help in visual analysis. The algorithm generates “semantically meaningful colors” by measuring color name frequencies from Google n-grams, then retrieving a representative color from Google Images.

For example, an n-gram search for the word “taxi” returns a strong association with the color name “yellow”, in addition to other color names like “green” and “black.” A Google image search for “taxi” then brings up photos of various colored taxis, but with a higher percentage of yellow cabs. The algorithm applies image clustering to the returned image set, coming up with an RGB color value for “yellow.”

Here’s an example of a categorical set of farm produce with a Tableau default palette on the left, and a palette generated by our algorithm on the right.

Designing with Function in Mind

So far we’ve seen Stroop used mostly with known nouns with some level of association. How else can we use functional aesthetics?

In this example, it’s used to cue metric associations. All sales are a light blue, while anything to do with profit leans more green. Quantities are grey and the KPIs are boxed in at the top. It’s a subtle example, one that doesn’t require legends, but long term helps guide the end user.

Need to encourage certain actions? Here’s an example that helps guide actions.

Notice the restricted use in color. Multiple colors are restricted to only the first chart. The rest leverages the selected color. Pick a different option and the whole dashboard updates.

Long term, users learn what colors tether to certain actions. This helps cue with less reading.

By designing towards action and using Strooplike associations, we ease the curve in mental processing.

---

This post owes a debt to Vidya Setlur, who coined the term “functional aesthetics,” and to Kelly Martin who pioneered functional design in Tableau.