Categories
Design It Depends

Optical Illusions and Data Viz

What do optical illusions have to do with data visualization?

Aside from being kind of fun, optical illusions tell us a lot about how human visual perception changes how we interpret what we see. These illusions expose to us areas to be aware of when presenting information visually, and how perception can change the interpretation of the information when presented to different individuals or in different circumstances. As data visualization practitioners, we are communicating with images. Our work is subject to these same visual systems, but the result is less fun when your charts are misinterpreted, but they can also be used to benefit the user.

Let’s take a few examples:

  • Size
  • Color
  • Attention
  • Pattern Completion

Size

Which of the two orange circles is larger?
Ebbinghaus illusion showing distortion of perception of size based on relative objects
Ebbinghaus Illusion | Source Wikimedia Commons

Our brains interpret the right circle as larger due to its size relative to the smaller circles around it. In reality, the circles are the same size.

Ebbinghaus illusion showing distortion of perception of size based on relative objects with lines showing the equal sizes

When we use size to encode data, being aware of how a mark appears relative to other objects in a chart can help avoid misinterpretation of the data. For example, from the Superstore dataset, I have placed Discount on size.

Scatter plot demonstrating difficulty identifying size

It’s difficult to see what marks have the same discount, until they are highlighted using color.

Scatterplot with colors to identify identically sized marks

We can run into this effect any time we are encoding data on size, so double encoding the data may be needed to make the visual more clear.

Which Line is Longer?
Müller-Lyer illusion shows distortion of size based on arrows added to the ends of the lines
Müller-Lyer illusion | Source UChicago News

This illusion illustrates the effect additional shapes can have on the perception of length.

If the additional shape equally impacts all marks, such as with a dumbbell or lollipop chart, this is less of a concern. The precision of the chart can be affected, but the interpretation won’t be heavily impacted.

If we are using additional marks to encode more information, we should be aware of the fact that it can alter the interpretation, or change the perceived (or actual) size of the primary mark.

Now, this doesn’t mean you can’t use shapes with other marks. If the actual value is less important than the information conveyed with additional marks, perhaps this is ok. It depends on the goals of the visual.

Color and Shade

Which Color is Darker?
Illusion demonstrating changing color perception based on background gradient
Color Saturation Illusion
Illusion demonstrating changing color perception based on background gradient

In this illusion, we can see that the circles appear darker on a lighter background, and lighter on a darker background, even though they are the same color.

When using a continuous color palette, we want to beware that a color can be interpreted differently depending on how the shades are distributed.

So a similar value could be interpreted as being good or bad simply based on the other marks in close proximity, even though the number itself is the same. This can be used to call attention to outliers, like an unusual seasonal ordering pattern, if that is the intention of the chart.

Heatmap demonstrating relative color distortion

When using gradient backgrounds, it can also alter the perception of the colors used in the visual, making those on the lighter section of the background appear darker, and those on the darker section of the background appear lighter.

Bar chart demonstrating distortion by background gradient

Many of us have seen the famous dress illusion or the pink sneaker illusion. Color is tricky! When using color to show dimensions, depending on the other colors used, those colors may be misinterpreted.

Using fewer colors and ensuring they are different enough in hue and value will help ensure this doesn’t hinder or alter the interpretation.

Bonus! It’s also better for users with color vision deficiency and impaired vision.

Attention

Look at right side of the fork. How many tines are there?
Now look at the left side of the fork. How many tines are there?
Impossible Trident illusion shows how changing focus point can alter illusion
Blivets or Impossible Trident Illusion | Source Wikimedia Commons

If we call attention to one thing, we are necessarily calling attention away from something else.

We can use this to our advantage to guide a story, if that is the goal. But, this also means that different users may see different things in a dashboard.

Is this a duck or a rabbit?
Duck-Rabbit Illusion | Source Wikimedia Commons

How, and how carefully, we use other visual attributes like color, labels, layout, and helper text can direct the attention and ensure the takeaway is consistent.

Giving the context needed to orient the viewer will take away the ambiguity. Even just a couple of crude lines to show feet, and a pink nose, and now it’s definitely a bunny.

Duck Rabbit illusion demonstrates different perception of same illustration
Duck-Rabbit Illusion with Markup

Pattern Finding

Humans have a brain that is made to find patterns. It’s what we do. And, it’s why data visualization can be so effective.

Do you see the white triangle?
Kanizsa triangles demonstrates how an object can be created by connecting whitespace
Kanizsa figures | Source Wikipedia

A shape or pattern can be suggested simply by the pattern of those objects (object completion). The brain is going to be looking for patterns, and things can be created out of the white space. This can help identify patterns or trends.

However, this can also trick the user into seeing a pattern that is incorrect based on the context, as this illusion illustrates.

Which lines connect?
Poggendorff illusion demonstrates potential inaccuracy in object completion phenomenon
Poggendorff Illusion | Source Wikimedia Commons

Using visual attributes to help ensure the eye follows the correct pattern can ensure the visual isn’t misinterpreted.

If we know that the human eye is going to be identifying a trend, we can call attention to specific areas to counter this effect. We can also visually identify when a pattern is or isn’t significant. Things like control lines or specifically calling out whether a trend is statistically significant can keep the brain’s pattern finding instinct from causing misunderstanding of what the data actually show or to force a focus on the purpose of the visualization.

For example, all my eye wants to see here is that the totals seem to be trending upward. There are spikes and lulls, but that’s not what my brain is focusing on.

basic bar chart

This may be fine if the visual is purely informational, and open to that type of interpretation and analysis. It is often helpful if we can anticipate this and identify if a trend is or is not significant. We can identify things like the impact of seasonality in data. Or we can use things like control charts or highlight colors and indicators to drive attention to the outliers rather than the trend.

basic bar chart with control lines

This post could probably go on forever, but I’ll stop here. Enjoy, go down the rabbit hole and look up some other optical illusions.

And Remember:

With great power comes great responsibility | Giphy

3 replies on “Optical Illusions and Data Viz”

Thank you! There are some studies about the perception of charts, such as the study of pie charts vs. donut charts and the accuracy of interpreting angles vs. area. It’s a very interesting topic, but I haven’t seen a lot of academic papers on it.

Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s