Skip to Content
Author's profile photo Krishnan Raghupathi

Principles of visual perception

Preamble

Thanks for taking the time to read about my views on data visualization. Data visualization is a topic that I have always been fascinated about and is something that I continue to learn about with each passing day. This blog provides me (and hopefully others) a forum for discussing ideas, opinions and literature related to data visualization.

Introduction

We are all quite familiar with the English idiom “A picture is worth a thousand words”. This refers to the notion that a complex idea can be conveyed more effectively with an image instead of a textual description. The deeper significance of this idiom can be appreciated if we understand how our brains support visual processing. 70% of the sense receptors in our bodies are dedicated to vision. How we see is closely tied to how we think.

Colin Ware, in his book “Information Visualization: Perception for Design”, explains beautifully why we should be interested in studying about visualization:

“Because the human visual system is a pattern seeker of enormous power and subtlety. The eye and the visual cortex of the brain form a massively parallel processor that provides the highest-bandwidth channel into human cognitive centers. At higher levels of processing, perception and cognition are closely related interrelated … However, the visual system has its own rules. We can easily see patterns presented in certain ways, but if they are presented in other ways, they become invisible… The more general point is that when data is presented in certain ways, the patterns can be readily perceived. If we can understand how perception works, our knowledge can be translated into rules for displaying information. 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.”

Before we delve into the principles of visual perception, it is important to understand the inner workings of the human memory and its limitations.

Human memory and its limitations

In reality, we actually see with our brains. Visual perception – the process of interpreting what our eyes see actually takes place in our brains.  The world around us is filled with a kaleidoscope of rich colors and images. However contrary to popular belief our eyes do not sense everything that is visible around us. The process of visual perception goes through the following filters:

  • Focus – Only a part of what our eyes see becomes an object of focus
  • Attention – Only a small part of what we focus on becomes the object of our attention
  • Conscious thought – Only a small part of what we attend to is processed as conscious thought
  • Memory – A small part of what we think about is stored in our memory for future use

These built-in filters in our cognitive system ensures that we don’t get overwhelmed by what we perceive.

The visual memory system consists of the following three components:

1. Iconic memory: This is a very brief (< 1000 ms), pre-categorical, high capacity memory store. Pre-attentive processing – the body’s processing of sensory information at an extraordinarily high speed that occurs before the conscious mind starts to pay attention to any specific objects in its vicinity – happens during this stage.

Examples:

  • When a person walks out of their home, the first thing that is noticed is whether it is day or night
  • Awareness that a particular set of objects are grouped together on a page without conscious thought

2. Working memory: Unlike iconic memory which are fragile and decay rapidly, working memories are more robust and can temporarily hold information available for processing for many seconds (18-30 seconds). This also allows for manipulation of stored information. With enough practice and training, information is moved from working memory to long-term memory where it is stored more permanently for later recall.

 

3. Long term memory: This can be used to store informative knowledge for long periods of time.

Of all the above 3 components, it is the impact on the working memory that determines the effective of data visualization as well as dashboard design. The working memory has the following important characteristics that can guide us in our quest for effective visual design:

  • It is temporary
  • It has limited capacity
  • A part of it is dedicated to visual information

 

Based on extensive studies and research on the capacity of the working memory, here are a few observations on the characteristics of the working memory that significantly impacts the visual design process:

Observation: Only 3 or 4 chunks of visual information can be stored at a time in working memory

Impact:

  • Information that should be seen together should never be fragmented into different dashboards
  • Scrolling should not be required to view all the related information

 

Observation: The composition of a chunk depends on the nature of the object and our familiarity with them

Impact:

  • Several numbers on a dashboard are stored as separate chunks
  • A chart representing the pattern formed by several numerical values is stored as a single chunk

 

Pre-attentive processing vs Attentive processing

During the visual perception process, a seamless transition takes place between the pre-attentive processing and the attentive processing. The difference between the two types of processing can be easily explained with the following example

 

Scan the following list of numbers and quickly find out how many times the number zero appears in the list.

This process took you quite some time as it required to sequentially scan the numbers. In the absence of any pre-attentive attributes in the data that distinguished zero from the other numbers, your built-in visual perception process transitioned from pre-attentive processing to sequential attentive processing of the numbers in the list.

Now try the same again with the numbers listed below.

It was much easier this time, right? In this case the data display used a pre-attentive attribute (color intensity) to make the zeroes stand out in clear contrast to the other numbers. This ensured that the desired information (zeroes in this case) was perceived much earlier by the reader during the pre-attentive processing stage. Unlike certain attributes like color intensity, complex shapes like numbers are not attributes that can be perceived pre-attentively.

 

Gestalt Principles of Visual Perception

In the early 1900s, a group of researchers belonging to the Gestalt school of psychology came up with a set of principles of visual perception that determine the way we tend to group things together. These principles of visual perception offer valuable insights that can be applied to the process of visual design.  Here are the six Gestalt principles:

 

1. The Principle of proximity

This principle states that objects or shapes that are close to one another appear to form groups. Even if the objects are very different from each other they will appear as a group by virtue of being close together.

2. The Principle of Similarity

This principle states that objects which share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together.

In the figure above, the filled squares give us the impressions of three horizontal lines even though all the squares are equidistant from each other.

 

3. The Principle of Enclosure

This principle states that when objects are enclosed by anything that forms a boundary around them like a line or a background color the objects will be seen as belonging to one group.

In the figure above the visual enclosure around the circles makes us see the circles as belonging to one group.

 

4. The Principle of Closure

This principle states that individuals tend to see open structures as closed even when they are not. When parts of the whole picture is missing, our perception fills the visual gap.

 

In the figure above, we perceive a circle on the left side and a rectangle on the right side even though there are gaps in the shapes.

 

5. The Principle of Continuity

The principle states that elements of objects tend to be grouped together and therefore integrated into perceptual wholes if they are aligned within an object.

 

In the figure above, the alignment of the curved line segments makes us see this a single curved line.

 

6. The Principle of Connection

This principle states that we tend to perceive connected objects as being part of the same group.

 

In the figure above, the connecting lines between the pair of circles makes us see the circles as grouped by rows even though the rows are nearer to one another vertically than horizontally.

 

What we covered above was just a brief introduction to Gestalt’s principles. In subsequent blogs, we’ll take a more in-depth look at how these principles can be applied to solve real-world dashboard design problems.

I conclude today’s blog with a question for my readers to think about.

 

A Question for Readers

What do you think is wrong with the following variance chart?

 

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Veselina Peykova
      Veselina Peykova

      I really enjoyed reading your blog, I am looking forward to the sequel.
      However, I would like to point out a slightly different interpretation of the results in Pre-attentive processing vs Attentive processing.
      The main challenge in recognizing the zeroes in the first screenshot is not the switch in processing, but a potential failure in processing.
      The numbers in the first screenshot are with color #D9D9D9 on background #FFFFFF, which is much harder to process, than your default blog font color/background combination, which is #444444 on #FFFFFF. Considering, that contrast sensitivity decreases with age, and that the majority of the readers will be way over 20, this is probably not a good comparison to your second screenshot, where the zeroes are in #000000. Actually, if you have represented the zeroes in the second screenshot with light gray and the rest of the numbers - with black, I would have struggled reading them almost in the same way as in the first screenshot. I would see, that there is something different and probably special, but I won't be able to tell easily exactly what is the data.
      You don't really need to process these numbers sequentially - line by line. This would be rather inefficient. As it is easier to process the data in smaller chunks, you can divide the numbers area into rectangles by vertical lines, then use the fact, that Arabic numbers are very simple shapes, which your brain is trained to recognize with very little effort. What makes things easier, is that I have absolutely no idea what these numbers mean, and the risk of the brain reconstructing from partial readings and make predictions and potentially misinterpreting the data, is minimal.

      I am not an expert in the area (read as "I know next to nothing"), but I will try my luck by answering your question (please don't laugh):
      I see a few problems here:
      - lack of units in both horizontal and vertical axis: what is this - EUR/GBP/JPY; are these days or weeks; do they represent absolute dates or how long has passed after starting a project? I am not sure that a business person would be able to interpret the results in a non-ambiguous way without additional information in text form.
      - I would have probably chosen a column chart to represent the data (assuming, that we have a single measurement per displayed horizontal unit, 40 columns can still look good).
      - If I really had to use lines, then I would have added thin vertical dashed lines as well on each day/week. I know, it looks ugly and not modern, but it is heart-breaking to see somebody taking out a ruler and work with the graph (especially if he got it printed).
      - This graph is about budget and spend, probably managers and accountants will use it. Both groups like to quote exact minimum and maximum values. While for the minimum we are lucky, it is easy to get the right value (200), for the maximum, which will appear in so many reports later, you need to take the measurement by yourself.

      I hope, that in your next blog you will explain what was wrong with the graph - I am curious.

      Author's profile photo Krishnan Raghupathi
      Krishnan Raghupathi
      Blog Post Author

      Hi Veselina,

      Thank you for taking time off to read my blog. The example of zeros with contrasting color intensity used in the section on pre-attentive processing was used to emphasize the role played by a pre-attentive attribute like color intensity during the pre-attentive phase in the iconic memory. During the pre-attentive phase, the human body subconsciously processes sensory information at extraordinarily high speeds before the conscious mind takes over. For example when you walk outdoors, the first thing that you notice subconsciously is whether it is day or night. Similarly with the list of numbers if one was asked to find out the number of zeros, the only way to find out in the first image would be to do a sequential scan which would need attentive processing by the conscious mind. However in the second image, the contrasting color intensity of the zeroes allow them to be identified during the pre-attentive phase by the sub-conscious mind and without any need for a sequential scan.

      The flaws that you have pointed out in the variance chart are indeed correct but these are minor flaws. Without giving away the answer, here what I am looking for is the identification of a fundamental flaw in the way the data is represented for a variance chart.

       

       

      Author's profile photo Jayanth Sunder Kashyap
      Jayanth Sunder Kashyap

      Very nice blog to read. It would also help to have this in connection with the visualization recommendations for choosing a good chart.