Win the Attention Battle with Visual Saliency Map

October 21, 2021

Designers Fight for the User’s Attention

Whether it is in packaging of a product, a print ad or a button on a webpage, a designer always faces the challenge to get noticed and grab the attention of the ever busy users. Understanding why certain design features grab more attention than others is important. In this article, we will discuss the idea of visual attention and possible ways to achieve it.

How Humans Decide Where to Look

Our visual system is now one of the best-understood processes of the brain, and neuroscientists have made a lot of progress in modelling and understanding what captures our attention. One of the striking findings is that we humans are attracted to contrast. Our eyes are drawn to things that are different from their surroundings.

Look at the examples below.

our-eyes-are-drawn-towards-different

our-attention-is-drawn-to-things-which-are-different

It is not only the color contrast which makes something noticeable but also patterns. Look at the example below-

something-with-difference-draws-attention

How Our Brain Processes Visual Input

As the brain receives visual input through the eyes, it starts processing the input in two different ways:

The Bottom-Up Processing: The brain processes the raw visual elements such as colors, contours, shapes, contrasts, luminosity, movements, textures etc. It tries to decode the basic visual features before it can recognize what it actually is seeing. This processing is happening automatically, without any extra effort. Neuroscientists call this stage of visual processing as pre-attentive i.e., it occurs before we pay any focused attention to what we are looking at.

brain-first-decode-high-level-details-before-going-into-deep

The Top-Down Processing: Once the brain decodes the basic features, it begins to categorize what it is seeing based on memory. For example, it may categorize the visual input as human, animal, insect, face, car etc. As soon as this information is processed, we begin to understand what we are seeing.

Though our brain can perform the above processing effortlessly and seamlessly, our eyes are designed to capture detailed input one at a time. Our eyes have a small field of high-definition (HD) vision, which is surrounded by a large field of low-definition (LD) vision. When we look at any object or design, our eyes make a series of quick movements to fill in the details of what we are seeing.

how-eyes-see-things

How the Brain Prioritizes What to Look at First

Given the brain can process visual inputs of a thing one at a time, the brain needs a quick and automatic way to prioritize what to look at first – to make the process efficient. Our brain has evolved to prioritize the things that move and the things that are different from their surroundings.

Motion always draws our attention.

running-drawas-attention

The Visual Saliency Map

Given our brain needs to process a large number of inputs, in order to process these inputs efficiently, it first needs to produce a map to navigate through the sea of information – called visual saliency map. Saliency at a given location is determined primarily by how different this location is from its surroundings in color, orientation, motion, depth etc. This idea was first proposed by two neuroscientists- Christof Koch and Shimon Ullman, in the mid-1980s.

Our brain is continuously mapping the colors, shapes, shades, patterns etc. of our surroundings. These inputs then are passed on to our visual system that tells our eyes to focus on the area that is visually salient i.e. areas that look different from its surroundings – maybe because it is moving , has a contrasting color or appears brighter.

Items that are visually salient get noticed earlier, more often and for longer.

While movement is particularly attention-grabbing, in case of still visuals three features for saliency are most important: color, pattern and size. Other visual features can also affect saliency which includes: depth, shape, flicker and offset.

Designs and design elements can have high or low saliency, depending upon its surrounding context. For example, a bright red packaging will not pop out on the shelf which has many such packages surrounding it. Red may often be an eye-catching color but if you are just one of the many others – you are not distinctive or salient.

This explains why, using a design that is bright, moving or unusual doesn’t mean it will be salient or noticeable. The saliency depends upon the viewer’s saliency map.

Once we understand how the viewer is expected to map the design, we have a powerful tool in our arsenal. Let’s look at how we can apply this concept in website design.

Making Your Website Visually Salient

When people are making quick choices, or while they are somewhat distracted, making a visually salient design can increase the likelihood of getting their attention. The concept of saliency mapping can be used to design pages that gets the user to focus on things we want the user to look at.

A user’s visual entry point i.e; the point where the user will begin their browsing on the webpage – can be influenced by mapping the visual saliency of elements. For example, the navigation, or the key information can be made easier to find and focus, by making them more salient.

There are three ways to make a design element visually salient.

Colors: Bright, high luminescent and contrasting colors within design are more likely to make an element visually salient. In particular, more the edges of contrasting colors within the design, the more salient it is.

using-contrasting-colors-to-draw-attention-on-web-page

Size: Larger objects in a design are more likely to draw attention. It is also true for text/ fonts which are larger and bolder. Thinner and smaller fonts will be less salient compared to larger and thicker fonts.

using-size-to-draw-attention-web-design

Patterns: Patterns that stand out from their surroundings, shapes that are unique or areas of contrast where one shape overlaps with another are highly salient.

patterns-shapes-draw-attention

Also note that it is not the overall saliency of the design that counts, but also how wisely we use it in our design. A design with too many highly salient elements that are positioned away from each other could make a design confusing and complex. Focusing on the saliency of a couple of important elements is better than making the whole page salient.

Naturally our eyes gravitate towards the center of the screen. So making the element visually salient in the center can help deliver key information or help drive key action you want the user to take.

eyes-naturally-gravitate-towards-center

Design elements that create a sense of depth are also visually salient.

using-depth-to-grab-attention

Design elements that create frames are also visually salient. We are quite used to looking inside frames to find information.

using-frames-todraw-attention-web-design

Finally, there are natural elements that in general are considered visually salient. Faces of both humans and animals are visually salient, especially when they display an emotion.

face-can-naturally-draw-our-attention

In Summary: Our visual attention is guided by both bottom-up (the visual features of what we see) and the top-down (our memories, expectations and goals) processes. As our brain can process only one area in detail, our brain needs to prioritize what it should process first. To do it efficiently and automatically our brain produces visual saliency maps. Items or design elements that are visually salient get looked at first, for longer and are more likely to grab our attention.

Follow our Linkedin Page To Get Regular Update: [ Myraah IO on LinkedIn ]