Dashboards and Data Viz | Design | Tips & Tricks

Our brains are unimaginably complex. Neuroscience is sometimes considered the true final frontier; our internal selves are as expansive as the universe itself. While there are many aspects of cognitive processing that we have yet to understand, the area of visual perception has been extensively researched and unpacked. We were particularly interested to see how we could relate the principles of visual perception to data visualizations, and what insights we could uncover there.

Visual perception is “the ability to see and interpret (analyze and give meaning to) the visual information that surrounds us.” If you’re looking to create meaningful infographics, data visualizations, or simply reports that don’t make your audience snooze, it’s useful to cut through the clutter to the core of what makes our lobes tingle. Making powerful data stories is about much more than creating pretty charts and graphs though—it is about implementing elements and creating patterns that the human brain responds to. Understanding some basic principles of visual perception can help us do that.

Pre-Attentive vs. Attentive Processingwhere's waldo visual perception

Pre-attentive processing refers to the way our brains take in the basic visual attributes of an object and identifies them. It requires little brainpower and can be done in a matter of seconds. For instance, if you were looking at a screen full of grey dots, and one dot was red, that red dot would jump out at you without you having to think about it. Much like if you were to spot a man dressed in a red and white striped shirt, blue pants, and a striped knit cap, your brain might say, “There’s Waldo!”

Attentive processing, on the other hand, requires a bit more brainpower. Our brains use attentive processing to consciously make sense of what we are seeing. For instance, if you are looking for Waldo in one of his book tableaus, you would need to use more of your attention to the task of locating him in the hodgepodge, thereby utilizing attentive processing.

where's waldo attentive processing

Go ahead, look for him. The rest of the post can wait.

Pre-attentive processing is the type of brain processing we’re shooting for with data visualization. Some pre-attentive attributes that you can take advantage of when creating your dashboards include:

  • Form: Orientation, shape, size, line length, line width, curvature, added marks, and enclosure.
  • Color: Value and hue.
  • Spatial position.

For instance, size can denote import or lack of it, as well as provide contrast and context to your dashboard’s elements. Different colors can also affect how your audience reacts to your data and retains the information present. A metric in red will evoke a sense an urgency compared to the metrics in grey. Orange can communicate a feeling of optimism, as does yellow. Green conveys the feeling of growth and resilience, while gray is a color associated with transition. In addition to affecting audience reaction, color can also help your audience make distinctions between data sets, allowing for easier consumption of what you’re presenting.

Color can be understood in two ways; value refers to the relative lightness or darkness of a tone, while hue connotes the placement on the spectrum of colors as we might understand a rainbow. Both are useful when activating pre-attentive processing, because the variance is what stands out to our brains. When trying to draw attention to metrics or data points, be judicious with the colors you choose and the hues you use, as too many differences can confuse our brains and negate the impact of the choices.

Read next: Neuroaesthetics and Informative Art

Learning the Laws of Gestalt

The Law of Gestalt states that every stimulus is perceived in its most simple form, or basically, that the whole is greater than the sum of its parts. In regards to data visualization, three of four principles apply: Similarity, Proximity, Enclosure, and Figure and Ground.

  • Similarity: Gestalt theorizes that objects with shared visual properties will be lumped into the same group. When it comes to data visualization, you can take advantage of this principle in order to help your audiences make important correlations between different numbers and number sets.
  • Proximity: When two dashboard elements are close to each other, it lends a strong indication of similarity. Again, this can help your audience make swift correlations, but more so, it will help them to more easily digest the data being presented to them. Likewise, when an element is spaced away from the others, it denotes importance, thereby enticing your audience to give more thorough attention to that particular data set.
  • Enclosure: Sadly, enclosure is not a technique commonly used in data visualization, but it should be! While similarity and proximity certainly help data audiences to make connections, enclosure takes it one step further by actually setting data sets apart from one another. Enclosure, if done right, makes dashboards as simple as they can possibly be.
  • Figure and Ground: Figure and ground is useful for directing an audience’s attention to a particular piece of information. An example of this would be a chart that is both an area chart and a bubble chart. The background of the area chart is shaded lavender, while the bubbles – which appear in the foreground – are fluorescent green. Clearly, the designer wants the audience to delve deeper into the information presented in the bubbles, which is why they made the bubbles the “Figure” and the area chart the “Ground.”

When used properly, Gestalt principles can greatly increase the data visualization experience and give significant meaning to what would otherwise be construed as “just another set of numbers.”

Numbers Can Still Tell a Storynumbers in visual perception

Sometimes, numbers by themselves are the best visuals. On its own, a number is exact, easily understood, and commands attention all by itself. If there is one significant number that you want your audience to see, place it off on its own. Doing so will draw attention to it immediately. To make it stand out even further, overlay it on a relevant image to indicate what, precisely, the number means.

According to Colin Ware, author of Information Visualization: Perception for Design, “The human visual system is a pattern seeker of enormous power and subtlety…[that] has its own rules. We can easily see patterns presented in certain ways, but if they are presented in other ways, they become invisible….Following perception-based rules, we can present our data in such a way that the important and informative patterns stand out. If we disobey the rules, our data will be incomprehensible or misleading.”

Make it Move

Many data visualization platforms offer dynamic colors, editorial powers, and connections to multiple data sources, but a truly engaging digital dashboard is interactive and animated. Our brains are hard-wired to respond to movement, and fast-twitch motion in particular. Quick twitches are associated with action and agitation; a flick in the grass naturally draws our attention because it could be prey or predator. That means when a data point flashes when you hover over a correlating element, your attention becomes focused in a way it might not have otherwise.

By understanding the power of visual perception and using it your advantage, you can create dashboards that are not only beautiful to look at, but that also actively draw the brain’s attention to certain data sets and encourage unfailing understanding of what those sets mean.

Visit our gallery of live dashboard examples and leave a comment below; what elements that we discussed are at play there?

Post Series: The Psychology of Data
Alternative Text

Jennifer Horne Sr. Digital Marketing Coordinator @iDashboards

Jennifer Horne handles SEO, PPC, content and digital marketing for iDashboards. She has won multiple 30 Rock trivia competitions, makes a mean green curry, and loves living in Detroit.


Your email address will not be published. Required fields are marked *