Mixed Signals: Tableau Dashboards, Color, and Alerting

Long before we ever heard of Gestalt, we learned to harness color for decision-making. Some of the lessons we’ve learned from trains carry strongly to this day, building a powerful mythology along the way.

Ask anyone over the age of 5 and they’ll tell you: Trains are awesome modes of transport. Fast, efficient, and effective for carrying loads, trains have made their mark far beyond the rail and into our so many parts of the world, including dashboard design. It starts with using pre-attentive attributes to facilitate decision-making.

Look closely and you’ll see it. It’s familiar. No, not the beach, keep going past the rail and….yes…the traffic light! This one even comes with the added bonus of 2 signals, with one showing red, another green. I don’t know why, but you can’t go wrong with a track by the beach.

Quick anatomy lesson here before we go too far: You have cones and rods in your eye. Rods give you the ability to only half-stumble around in the dark, while cones add color to your world. Take a look at red and green: as these two colors have a longer wavelength, we can see them greater distances. Guess which color carries the greatest distance? Yup, red.

Mini lesson on eye anatomy complete, we’re going back to traffic lights.

In the days of yore, there was red, green, and white. Red, being the color we can see the farthest, meant stop. Green served as another warning (see above about distances) while white (not a lot of distance, BTW) signaled it was safe to keep going. Except, stars and other lights were also white which led to a number of problems. And so, green was substituted for go in many places, but not all. We carried some of this to the roadways, but initially made all signs yellow, including stop signs. Eventually, that sign also became red to accommodate distance and darkness. In some places, we even tack lights on these.

Red does not inherently mean stop. Nothing in nature says so. Poisonous berries can be any color, even blue. This association is culturally trained on roadways, as that color allows the greatest distance to begin a desired behavior (even if it’s seen as yellow by colorblind users). Let’s take a look at just colors seen by cones. Here, you can see them labeled by milkshake sizes.

Notice the heavy overlap on green and red (labelled M and L if you’re colorblind). Also notice the skew on blue (S). US Railroad conductors are required to pass a color vision test in order to do the work, as all modern signals still use red/green for safety signals.

Drivers on roadways in the US with traffic lights often only hit speeds of around 45 mph or less. Any higher and most US states require a second warning in advance of the light that comes with yellow flashing lights. In addition to color, placement helps guide what signal is being used and only one shows at a time. These three colors are the best colors for distance. This is why they are often used to manage the flow of traffic.

Color and Art

Art has long focused on complementary colors. Note: comple- not compli-, as in compleo or Latin for complete (and per wiki, overwhelming which is probably more accurate in this case). Complementary colors cancel each other out. If you’re painting, they often make shades of brown. If you’re doing lighting effects, they often go to white.

Complementary colors also have a cool trick they do, depending on lighting.

Chromostereopsis is fun when you enjoy 3D movies and have the glasses that support it. It’s far less fun when you’re staring at it on a screen for hours. If you’re like me, the above makes you queasy.

As you can see, both green and blue are atrocious on red. Take that same graphic, but with white and yellow.

You’ll notice the font no longer has a 3D effect. The red is still not the most enjoyable color to read against, but it should be more legible (again, with the usual colorblindness caveats). For some people, these may still glow. If your eyes hurt, I’m sorry. Mine do as well. I promise it gets better.

Ongoing Legacy

When we bring color to decision-making, the story of distance became one of psychology’s most powerful color myths: the intuitiveness of go vs stop, and ultimately good vs bad. Modern design, including BI, loves to incorporate the familiar. And what could be more familiar than the stoplight?

Except, we forget a few things…such as the inherent inaccessibility of the colors to select populations. See this dashboard viewed with different types of color blindness. Could you possibly figure it out? Maybe, but if it’s your boss or client struggling, you better believe you won’t like the feedback.

Fortunately, we have colorblind palettes. This should fix everything, right?

While these colors are more accessible (and for many, far more visually pleasing), there’s still a lot going on with this dashboard. Before we go much farther, let’s revisit our traffic light in the wild.

Here’s what BI forgot: One light is lit and the others are dark. The lights are even partially covered to prevent others in different directions from seeing them, as well as to concentrate the light. We have placement to help us evaluate and are not getting overwhelmed. Our decision is very clear here: go.

What happens if we take our design to the extreme and explore it in black and white only?

Is it boring? Absolutely! But, I can begin identifying my problem spots a bit easier. I can also see some of the odd callouts towards the bottom of my heatmap showing patients that are likely to readmit – and chances are, I want to see them, both in this viz and for an appointment.

Notice what happens if I use a single color for alerting? I can even use red if I must. Or, we can experiment with pulling brand colors into the mix.

So often, we want to use color when shape will do the job far more effectively. Remember, we’re often at our desks with the monitor no more than 3 feet away: distance is rarely critical in this case. In these instances, color is used to guide and signal to the key priorities. Adding color adds to the noise. Sometimes, we need that, but most often, less achieves so much more.