The Visual Breakdown of Information

The Visual Breakdown of Information

We’re going to talk about how we process visual information and interpret it. In other words, we’re going to study how we look at an image and interpret it as a webpage or a potato.

We tend to break down images in three different stages.

The Three Stages

Stage One

In the first stage, our eyes break down our visual field into a set features. The features can be things like colours, different shades, shapes, lines, angles, etcetera. We then arrange these features into patterns that create objects we recognize, like a potato.

Our eyes can rapidly detect a set of primitive features. We see colour instantly, and we begin to break up the visual field into different colour regions, values, and shades.

We’re also very good at noticing different lines or edges, and how they relate to each other. So we can very quickly discern different orientations, lengths, or sizes of these elements. We’re also pretty good at noticing the different textures an object might have; for example, we can instantly tell if an item is smooth or rough.

We’re especially good at motion detection, to the point that we almost instantly detect when something has just entered our visual field.

To recap, when we first look at an image, we break it down to its primitive features.

Stage Two

After we’ve broken down an image, and have decomposed it, we begin to create sets of information. We use these sets to search for visual patterns that help us make sense of their arrangement.

Here’s a classic example of this:

A series of dots that are placed closed to each other to create a scene of a dog in a manner that shows how gestalt vision works

Image source unclear, but the image is extracted from ResearchGate

When we look at an image like the one above, most of us can see a scene. We can tell that there’s a dog, that might be on the patio, and oriented towards a road. A small number of people might only see inkblots, but that’s beyond our scope for this article. Objectively speaking, we are looking at a series of inkblots, but our eyes break down the image (or information) in a manner that makes the most sense to them. Just imagine how different your experience of the image would have been if you never saw a dog in your life! You’d also be looking at a series of inkblots, or your mind might try to create another understandable image.

The principles of Gestalt play a huge role here and determine how we perceive an environment based on the following principles:

  • Similarity
  • Continuity
  • Closure
  • Proximity
  • Proximity
  • Figure-Ground

These principles heavily influence how we turn these patterns into understandable information.

Stage Three

In the third stage, we build upon pattern recognition and use our past knowledge to identify particular objects in the scene we previously broke down. This stage helps us recognize things like tree, bushes, and flowers that make up a forest.

So for example, if we’re looking at a basket of fruits:

After we’ve broken down the image into primitive shapes and patterns, our minds borrow from our past knowledge to help us recognize what we’re viewing. In other words, we know what bananas look like because most of them have the same edge, texture, colours, patterns, and construction.

To summarize the stages:

  1. Breakdown the Visual Field to Elements
  2. Create patterns out of the Elements
  3. Apply previously acquired knowledge to make sense of these elements.

Okay, lets put this to practice.

In Practice

Here’s an image of different shapes scattered randomly.

Can you find the triangle?

A series of squares and one triangle using the same colour. It's easy to spot the triangle even though the colours are the same because it's form stands out

Notice how we quickly notice the triangle. Our eyes are good at detecting primitive shapes and don’t struggle to point the odd one out.

You can see this in eCommerce websites where product lists will typically have the same format, but items on sales or running out of stock will typically have a flashy sale sign or message to call out for your attention.

A series of squares with only one square that is coloured differently. The colour difference quickly allows the eye to spot the coloured square out.

Alternatively, the same thing could happen if we decide to use the same shapes but highlight only one of them.

Do you want to see this in practice? Head out to any SAAS website and jump over to the Pricing page. There’s almost always going to be one plan that stands out to encourage you to consider that specific plan over the others. Sneaky, but very impactful when done correctly.

A series of triangles with only one pointing to the left. It's harder to point the add one out because there are different distracting elements that take away from the ability of people to notice it.

Can you find the darker shaded triangle that’s pointing to the left?

You’ll probably have a hard time finding it. This specific task is more difficult since many distractions jumble up your ability to differentiate between the shapes and single out a specific one.

How can we make the shape easier to notice? We can remove the different distracting elements to ensure that our composition only presents the necessary information.

A series of triangles with only one pointing to the left but coloured differently. It's much easier to point out the odd one out now because it's differentiated by both colour and direction.

Designing for Optimised Information Processing

Let’s take what we’ve learnt above, and use the idea to improve “human data processing”.

Take a look at this field of different shapes:

A series of squares, triangles, and circles with differing colours arranged randomly in a field.

I want you to count how many squares, rectangles, and circles we have, and then list them by colour counts. Time yourself while you’re doing this.

If you’re anything like me, it should have taken you a bit of time, and you’d probably have to list things down to be able to give a proper answer.

Why do we struggle to list these items down? It mostly goes back to the fact that we have limited information we can store in our short term memory at once.

How do we make this easier to process?

A series of squares, triangles, and circles with differing colours arranged in sets according to their shapes.

It’s significantly faster to list out shapes present, but listing them down by colour is hard because they’re still not arranged in a way to promote colour identification.

A series of squares, triangles, and circles with differing colours arranged in sets according to their shapes and colours.

Notice how much easier it is to list out the information here?

Why is it easier to do so here?

We’ve taken out the processing time for we need to make sense of the shapes, keep track of them, and do the same for colour.

By arranging items more efficiently, our brains only really need to focus on counting, we no longer need to track and try to make sense of the information.

Final Thoughts

Understanding how we visually break down and process information can give us the tools needed to selectively decide where our users should pay attention, and how they should visually process what they’re viewing.

If you’re acquainted with the Gestalt Principles of Design, a lot of this information might seem familiar to you. If not, I highly recommend that you read up on my post on Gestalt. Understanding how Gestalt Principles work will help tie in the information and solidify your knowledge of how we visually process information.

Further Reading

Akindunjoye, O. (2019, February 10). Visual perception in user experience design - UX Collective. Medium. https://uxdesign.cc/visual-perception-in-user-experience-design-7943c97b14f4

Hachem, M. (2020, August 24). The Gestalt Principles of Design. The M Blog. https://theblog.mghachem.com/gestalt-principles-of-design/

Hachem, M. (2021, January 31). The Visual Perception of Information. The M Blog. https://theblog.mghachem.com/the-visual-perception-of-information/

Lumen Learning. (n.d.). Introduction to Perception Boundless Psychology. Retrieved February 7, 2021, from https://courses.lumenlearning.com/boundless-psychology/chapter/introduction-to-perception/

MeyeSight. (n.d.). Stages of Visual Processing. Retrieved February 7, 2021, from http://www.meyesight.net/visual-system-intro/

Wikia. (n.d.). Visual perception Psychology Wiki. Psychology Wiki. Retrieved February 7, 2021, from https://psychology.wikia.org/wiki/Visual_perception