Hacking Our Brain Through Data Visualization
By: Pablo Garcia Casasola
Tags: Mercadolibre, Brain, Dashboard, Data Visualization, Hacking

Hundreds of millions of data transactions are processed every day, every hour and every minute within our Mercado Libre ecosystem, which are consumed by thousands of analytical users in 18 Latin American countries. In turn, all this data generates a huge amount of information which needs to be translated into knowledge for efficient and quick decision-making.

Try to imagine how the brain could process so much information and understand its meaning without a proper data visualization.

But… what does data visualization involve?

Data visualization is the visual representation of (high-quality) information into elements such as a map or graph, with the purpose of making it easier for the human brain in order to understand and extract useful insights. Additionally, the aim is also to facilitate the identification of patterns, trends and outliers in large volumes of data.

For example, when data is represented in a visual way, we can quickly detect behaviors that might go unnoticed if we view them statistically. It makes sense that data visualization gives us more meaning, since 90% of the information transmitted into the human brain is visual. We also process visual images 60.000 times faster than text, as the brain finds it easier to remember and analyze them.

We have a premise in Mercado Libre that is to make data-driven decisions, and we take it seriously when working on the design of our dashboards, applying best practices from the field of visual and cognitive neuroscience.

And… how do we apply it?

First of all, we need to know the difference between perception and cognition. There is a very big difference between these concepts, and it’s important to understand them in terms of how the human brain works. Then we could see how to apply that within a dashboard.

Perception is the organization, identification, and interpretation of stimuli from your senses. A simple way of describing it is as the acquisition of information through the senses.

Cognition is the processing of information and acquiring of knowledge through reason, intuition, and perception. A simpler way to think of it is as the processing of perception into knowledge.

The main difference between those terms is that perception is fast while cognition is much slower.

So if we can take advantage of perception we can actually make our visuals work much more intuitively for our end-users.

How is visual and cognitive neuroscience relevant? And… how is this relevant to us?

We can make use of visual perception principles to design dashboards that result in an immediate understanding of the information arising from the data.

The recommendations derived from visuals and cognitive neuroscience are referred to as visual best practices or VBP.

Let’s take a look at the following example…one of the dashboards below applies VBP, while the other doesn’t. Let’s see if you can guess which is which. Both were made from the same data extract and both were built using the same application. In this case it is Tableau software.

The visuals above have been blurred to hide sensitive data

The visuals above have been blurred to hide sensitive data

Hacking the Human Brain

Now let’s get into the relevance of VBP when building a dashboard and from there, to the main purpose of this article: how we can hack the human brain by taking advantage of perception and getting our users to understand the visuals much more quickly.

Visual Perception and Visual Memory

Seeing (perception) and comprehending (cognition) happen all the time, every day from second to second. The shorter the time between seeing and comprehending, the more effective the visualization is, thus the more efficient our end-users in Mercado Libre will be as well.

The human brain can process a small amount of visual information very quickly, but only for a very short period of time. This is called Visual Short-Term Memory (VSTM).

Each element in the visual must be seen (perception) within roughly 40 milliseconds…any longer and it must be processed attentively (cognition). If we take advantage of VSTM, our end-users can interpret entire visuals within a few seconds.

Making use of VSTM requires us to know what works and what doesn’t when visual processing is happening. Attributes which work well with VSTM are called pre-attentive visual features.

If we don’t make use of this, the brain must send the visual information to another of its areas for more robust processing, but this additional processing is considerably slower than VSTM.

Let’s make a simple example

After showing some information we’ll have to try to understand what we are looking at. So, I am going to apply visual pre-attentive features to making the process much more understandable. The information below shows a sequence of numbers. We have to figure out how many fives there are in a quick way.

Answering this question must be done consciously, or attentively. We can process it either using linguistic skills (find the number 5s) or using pattern matching skills (find things that are shaped like 5) and both options require attentive (cognitive) processing. So, let’s make a little change to all those numbers and let’s see if you can find out how many there are much faster.

Answering this question now can be done subconsciously, or pre-attentively. We took advantage of a VSTM pre-attentive feature called color hue. This technique is known as perceptual pop-out and is often implemented as a highlight in visualization tools.

Let’s move on to another simple example

Has our GMV (Gross Merchandise Volume) increased or decreased over the last five years? And… which category has grown the fastest?

This is even worse because now we not only have to look at numbers but to do the math as well. So this is even slower for us; it’s a trying process that clearly highlights the drawback of using cross tabs or text tables in your visuals. It is the slowest possible way for a person to understand the meaning of the data that they are looking at.

This cannot be processed pre-attentively as text and math require post-attentive processing. So, we are going to take the exact same information and apply visual best practices to it making the same questions…

Now, we should be able to process the information very quickly. In fact, we should be able to put that up on the screen for about 40 milliseconds and take it away, and we would still be able to figure out that one of the lines was ahead of the others and that they all tend to go upwards. That is using pre-attentive features, in this case we are using color and position.

Our end-users don’t look at the dashboards, they scan them.

As developers and designers, we have a lot of control over what our users in Mercado Libre look at when viewing a dashboard. To create the right path the user’s eyes are going to follow, we need first to understand how our eyes process information.

Visual Patterns

How do we make sense of what we see?

There are several categories of pre-attentive processing; let’s explore a few:

Visual patterns or (visual hierarchies) allow us know what data engage our users first and which visualizations they interact with (and in what order) while on the dashboard. By establishing a visual hierarchy, we ensure that communication between our users and dashboards is seamless considering the following techniques:

Scale : Different sized elements will guide the user’s attention — larger elements draw more attention compared to smaller elements.

: Different sized elements will guide the user’s attention — larger elements draw more attention compared to smaller elements. Color: People are drawn towards bold, contrasting colors.

People are drawn towards bold, contrasting colors. Contrast: Color changes can be used to attract attention. Contrasting the color of one element against another draws focus.

Color changes can be used to attract attention. Contrasting the color of one element against another draws focus. Alignment: Columns and grids can create alignment between elements and make the user take notice.

Columns and grids can create alignment between elements and make the user take notice. Proximity: This helps separate and group certain data visualization elements together (or apart) to help distinguish between them.

This helps separate and group certain data visualization elements together (or apart) to help distinguish between them. Scanning patterns: Eye tracking studies show where the users focus their gaze once they are on a dashboard and where they proceed afterwards.

And…talking about scanning patterns, it is important to mention that there exists more than one kind, but I’m going to focus on the one we use most -or recommend- to our Data Visualization team when designing our dashboards…and that is the Z-Pattern layout.

This kind of pattern is a design concept that considers that users tend to view highly-visual information in a Z-Pattern. i.e. people tend to:

first look at the top left and then move horizontally to the top right.

then draw their eyes diagonally to the bottom left.

and finally, make one last horizontal movement to the bottom right.

This is the viewing pattern that emerges from the eye movements in one of our dashboards:

Visuals Matter…

Every day we face data challenges -both in quantity and quality- and business questions that we need to answer on the spot. That’s why we empower our users by fostering their analytical capabilities through our data visualization best practices.

At Mercado Libre, and from our DataViz team we democratize knowledge by building dashboards that respond to strategic data-driven decisions, trying to understand how the brain works in terms of cognitive and perceptual processes.

Thanks for your reading us!