What is visual saliency?

Crucially, visual saliency is defined as:

“ the distinct subjective perceptual quality which makes some items in the world stand out from their neighbors and immediately grab our attention.”

Basically, it’s a fancy way of saying that certain things in your design stand out due to how different they are from their surroundings.

• If it seems pretty uniform with the rest of the design, it will fade into the rest of the design.
• If it breaks with the pattern of the uniform design, it will be noticed much more readily.

How to work with visual saliency

Many times, you want to make sure certain aspects of your designs show up well and are immediately eye-catching.

One way you can check to make sure that the areas you want to be immediately recognizable are working well is to generate a saliency map.

A cheap and easy way to do this by grabbing a screenshot, thresholding it for lighter designs; or for darker designs, de-saturating it, taking the brightness down, and taking the contrast all the way up.

This will tell you very quickly what is recognizable and what isn’t, and this is based on how the human brain processes visual information using System 1 processes (more on that below).

If we run this type of check on my own website for instance, we can immediately see what stands out, and what doesn’t.

What is and isn’t visually salient becomes immediately clear, and can inform our design processes based on what we’re trying to achieve.

One super light designs, you can also run a threshold filter to determine what is visually salient as well:

As you can see, visual saliency becomes almost identifiable almost immediately.

Bringing it all together

So what does this mean for you?

• You can use visual saliency to determine which parts of your product or site are the most eye-catching within your design.
• Using saliency maps is a great way to test visual saliency.
• You can generate these maps by by grabbing a screenshot, thresholding it for lighter designs; or for darker designs, de-saturating it, taking the brightness down, and taking the contrast all the way up.