Hacking the Visual Mind
.png)
.png)
The world today is a different one from when I was growing up. There’s so much data being captured every minute of the day, and everything anyone does can be a data point. And in order for us to understand data, we have data visualization. But it is a field that is evolving, and a lot can still be done to improve bad charts by adopting a design-centric mindset for data. That means understanding your audience, and understanding how information is being processed cognitively so we can influence and guide it.
There are a lot of theories put across by different psychologists on how the human brain works. I will not go into too much detail, but fundamentally each of them talks about how information is processed and retained by the brain through sensory stimulus. You can read more about them through these links.
To simplify things, this is a very reiterative process that first starts with what we already know, sitting in our long-term memory, which is shaped by our experiences in life. How you interact with information with your senses like sight, touch and sound, creates a short-term memory - which leads to information processing using our working memory that determines if that information should be discard or retained.
So the idea of a good data visualization is to reduce that processing time, and assist your brain to determine which information are retained. And this is done through applying purposeful visual design that focuses on that user experience. However, at the core of that is also understanding who your audience are, because not one design style works for everyone.
There are two parallel processes going on, mainly Bias and Stimuli. Both of them are equally important and taps on different areas of your brain to assist information flow.
Iconography is widely used in our world today, and it is something that dominates user interface design as it allows affordance in the absence of text. For the world of marketing, it is also a crucial piece. If I were to ask you how McDonald’s logo look like, chances are you would have a very clear imagery in your mind - that is the yellow M letter over a red background. This information is something that has been pounded into memory over the course of our lives, either being customers or being exposed to the marketing campaigns. However, that’s not to say we should prioritize icons over actual text because it depends on again, your audience. For example, an android user and an apple user would resonate differently to a button icon for back, simply because of how the functionality differs.
But having said that, here are some examples of how you would incorporate iconography into data visualizations. You can either use it to replace actual data points, add context, replace actual text, or even UI navigation in general.
Pre-attentive Attributes is another visual theory that is triggered by your fast-decaying iconic memory, something like picking up a lightning flash in a dark sky. Why this works is that our brain is unconsciously wired to pick up differences in the environment (which comes from a long line of evolution in survival instincts - i.e. threat identification). Pre-attentive attributes can be loosely grouped into these four buckets.
Pre-Attentive Attributes | Colors
The first one being color. How you might use this in data visualization could be something as simple as a crosstab. Hands up if you are you able to pick up where the negative sales numbers are at, just with a quick glance? Chances are, you need a couple of mins to process all this information. By applying color, you create a visual cue for your brain to speed up information searching.
Pre-Attentive Attributes | Position
The second pre-attentive attribute deals with position. Eye-tracking research shows that people scan screens in various patterns and the two most common ones are the F and Z Layout. If you take a look at the heat map above, the red spots are where you have higher cognitive traffic as opposed to the blue spots. This can be interpreted as a tendency to scan left to right then downwards, not unlike reading a book. So when you are visualizing data, do keep this in mind and place the most critical parts of it at the top left corner. Now, the two layouts have their uses - F is preferred when you have a lot of compact information, something like a dashboard or report, and Z is mostly used for creating headlines and prompting call to actions, somewhat like your powerpoint slides.
Pre-Attentive Attributes | Whitespace
Another aspect of position which is often overlooked is the use of negative space, or whitespace. It is the empty gaps between any visual element, and creates structure. By adopting this, you can improve readability, and allow groups of visual elements to be picked up and separated easily by your audience.
Pre-Attentive Attributes | Form
The next one deals with form and it is the largest component for preattentive attributes. Any visual element that stands out from the rest through either shape, length, width, size or orientation, causes your eyes to focus there instead. Similarly to color, you could use this to build visual hierarchy that allow your audience to quickly scan for insights. Here are some examples on how you would do that.
Pre-Attentive Attributes | Motion
Last piece of preattentive attributes is Motion, which is something very common in short videos and animations. Our eyes are always drawn towards a moving object rather than a stationery one and you could potentially use that to tell a data story, especially if it’s a complex idea that requires you to break down into multiple steps. One excellent example of this being used in data visualization is Hans Rosling’s 200 countries in 200 years, where he visualizes the changing landscape of life expectancy against income by each country. I’ll post a link to the slack channel later on today so you can take a look.
The theory of Gestalt has roots in philosophy and psychology dating back to the late 1800s. At its simplest, the whole form is perceived rather than the individual parts. Gestalt principles are methods by which our brain organize the visual stimuli so that it’s familiar, and easier to process. Thus, it is important to understand these laws of perception when working in data visualization, so you can guide your readers to better interpret charts and graphs, and make sense of the information visually, with exceptional speed. There are five main Gestalt principles and each of them are used in varying degrees in the visualization design.
Gestalt | Enclosure
One of the simplest Gestalt Law is the Law of Enclosure. The definition of enclosure is this: objects collected within a boundary-like structure are perceived as a group. In other words, it is essentially wrapping data by placing a line or shading around, to signify that those visual elements belong together. Here’s an example of something I did a while back, and by drawing a simple border, I’ve effectively grouped the paragraph, line chart and the filters to keep it separate from the rest of the visualization.
Gestalt | Proximity
Next up, we perceive objects that are located near one another as belonging to the same group. And the Gestalt Law of Proximity embodies that, and can also be used to direct readers to scan data predominantly in a particular direction; either left to right or top to bottom. From my past works, I have here a pictorial chart on Game of Thrones. Each bucket is a collection of 100 skull icons which represents the number of deaths in each season. The audience are able to relate each bucket as a whole as well as to the specific season due to the Laws of Proximity.
Gestalt | Continuity
When the eye is guided to move from one object to another, we speak about the law of continuity. Our perception tends to see objects arranged in lines or curves as more related or grouped, even though they may be disconnected like the one shown here. So do take caution when you have breaks in data completeness, and ensure you either apply other Gestalt laws like Enclosure and Proximity to prevent misinterpretation.
Gestalt | Figure/Ground
The figure-ground principle states that people instinctively perceive objects as either being in the foreground (figure) or the background. Now figure-ground is important because it can confuse the user when you have visual ambiguity. For visualization, this is extremely important in the area of using colors to contrast information, or even dual-axis charts. Negative space and colors when used properly, can help guide your users to read the data more easily. However, it can also confuse your users if it is not done properly.
Gestalt | Similarity
Elements that have similar visual appearance seems to be more related or grouped than the ones not sharing the same attributes. The main characteristics that boost the impression of similarity are size, shape and color. It is a powerful law of human perception as it allows you to create association out of seemingly unrelated elements. This is similar to the Form principle in preattentive attributes, but the difference is that for preattentive attributes it is used to create contrast, whereas over here it is used to build structure and organize your visual elements.
Apart from the Gestalt principles, we also have Typography that affects the cognitive load of your audience. Typography is a large field by itself, that is widely used in creative content, but not frequently advocated as much in data visualization. To understand typography, you need to also understand how fonts work. There are four main types of fonts, serif which are fonts that have extensions on alphabets like T and R. They are generally very easy to read on large screens. Sans-Serifs are more “computer-looking” in nature and works very well in all sizes, and is much preferred for user interface design. Monospaced are alphabets with equal width, similar to how a typewriter document looks but it takes up a lot of space, making it hard to use for content-dense visualizations. Script are basically handwriting styles that create creative flair, which should be used with caution on readability.
So with all that being said, what should I use? For the most part, I would recommend sans-serif due to its scalability and readability. Even with just one font, you could still build a visual hierarchy through font sizes and font styles (Like your bold & italics).
Cognitive Bias & Stimuli | Colors
Colors sit in the middle because as much as we can use colors to influence, it is also governed by cultural differences and emotions that are associated with certain colors.
So the three main points you will need to think about, when using colors are…
Colors | Emotion
The topic of color emotions are a tad subjective because of the influence of different cultures and how they are used across the world. For example, in the business world, red is often used to symbolize caution, urgency and even negativity especially when it comes to losses. But did you also know that, to the Chinese, red embodies prosperity, happiness, luck, fortune and everything good. On the contrary, green is often used to represent good luck, money and nature, and positivity when it comes to profit. You see how that already contradicts the meaning you are trying to bring, if you used those two colors? However, it is a widely accepted practice, though it’s pretty much legacy to the data visualization community.
Barring any cultural differences and adopting a universal understanding on the colors, we can attach some emotions to the color wheel. Cultural differences that may muddy these emotions should always take precedence of anything you are seeing here. By using this guideline, you can enhance your data story through color intent.
Colors | Contrast
And to add an additional layer to that, it is good practice to stick to a palette revolving the colors you choose, so you can create consistency and ensure you have sufficient contrast throughout. I will not go into too much detail on the different color palettes because really it is a fluid structure. But there are definitely tools that can make it easier for you, such as the color tool from Adobe.
Colors | Accessibility
Accessibility in colors is also another topic that is not frequently addressed. Color blindness is a condition that affects approximately 8x more men than women (go figure), and basically impedes you to seeing a specific color spectrum. To put it in perspective, the world’s population sits at around 7.8 billion and out of that, 350 million have some form of color blindness. The most problematic colors, as you would have guessed it - is red and green, but it is something that is very often used in the business world. There are alternatives to the traditional profit/loss colors such as using iconography, or even different color hues like blue and red. I do strongly advocate using tools like Adobe color to test your palette.
That was a pretty long article huh, but here's a TLDR version of it!
Hope you found this insightful or interesting... if not you know what you have to do 😉
.svg)
.png)
.png)
.png)
.png)