There are numerous English idioms that are used when talking about visualizations;“A picture is worth a thousand words,” and “Show, don’t tell.” These sentiments are not limited to English. In Chinese, there is an expression ”hearing something a hundred times isn’t better than seeing it once”; in Russian “the drawing shows me at one glance what might be spread over ten pages in a book”; or French “A good sketch is better than a long speech.” Regardless, the value of visual representation is clear.
What is also clear is how primed the human mind is to visual representations of data. We have an entire section of the brain dedicated to processing visual information. We are hard-wired to find patterns in visual information and to draw conclusions.
Yet with all this cognitive power towards visual reasoning, our eyes and brains can be tricked into seeing patterns or reach conclusions that are not accurate. We are most familiar with illusions of forced perspective, as seen in The Hobbit and Lord of the Rings films.
But there are other optical illusions that, if present in visualizations, that can lead viewers, to misunderstand data and reach incorrect conclusions.
The following examples of optical illusions can show up in our visualizations, and unfortunately color our perception of the underlying data.
Example A
The red lines are the same size
In Example A, we see two read lines which appear to be different sizes. This inability for the human eye to tell relative sizes is hampered by surrounding context. Consider a stacked bar-chart. Just like in Example A, we are unable to easily gauge relative sizes of each stack because of the surrounding context. The stacks above and below a given bar (as well as the neighboring bars) create a relative context. This relative context tricks our eyes so we judge two stacks on different bars to be different sizes when the may be the same.
Example B
The lines are the same length
In example B, we see two lines which appear to be different sizes due to the embellishments at the endpoints. This same illusion can happen when lines or other edges in charts are embellished too much with styling, glows, or other decorations that are not central to the content being shown. So while styling can be great, it can distort the conclusions.
Example C
The arcs are the same size
Example C is a favorite of mine. This is just one of the myriad of problems when employing Radial Bar Charts, multi-level donut/pie charts and radial heat-maps to display data.While these may be super “trendy” visualization for consumer applications, the size of two identical wedges cannot be easily determined by the human eye.
Example D
The red circles are the same size
The last example is a double challenge with relative sizes. First, the colored circles themselves are the same sizes (though the gray circles are different sizes). This throws a huge damper on bubble charts and on tag-clouds. Bubble charts show each item as a unique bubble, whose size represent its value. But given the above illusion, visually comparing two bubbles is confounded by the surrounding circles. Not only are tag-clouds susceptible to the same problem as bubble charts, but the desired-size indicated by a tag could be further distorted by the word length. For example, the wors ‘banana’ and ‘bed’ contain different number of characters, but bed will need to be font size 2-3x bigger than bananas to take up the same about of screen area, and 3-5x bigger to take up the same length.
With all these issues with visualizations, it may feel that no visualization can ever be optical illusion free. And that is partially correct. Color, size, axes, ticks, etc can all contribute to the distortion of a viewer’s perception of data. Even using a visualization with the wrong type of data (categorical data used in a line chart) can create an incorrect interpretation (implying that the data is continuous and you can infer in between points). Even layout algorithms in network diagrams can imply relationships that do not exist. There are many issues to unpack and consider when using visualizations.
While books can (and have) be written on visualization usage and selection, one key thing to always consider is that every visualization in a product should answer ONE question very well – and all supporting elements should reinforce answering that question. Common questions are: uncovering outliers, comparing elements, or seeing a trend. Once you know the question your visualization is asking, you can look at each element and ask:
- Are we using the right visualization for this situation?
- Can we optimize the style and annotations to allow the end-user to focus on solving the exact problem
- While there may be optical illusions in this visualizations, do they directly impact what this visualization is solving for?
In almost every situation, there are more useful alternatives or variations that can be used to achieve the same end goal – you just need to find the right one!
Cover Image Photo by Faris Mohammed on Unsplash
