April 24, 2019

Improving your website with "visual saliency"

Average Reading time: 4 minutes, 14 seconds

Your visitors' attention is attracted to visually salient stimuli. This is the principle that we call visual saliency. In this blog post, you will find out how you can apply this to increase the conversion of your website.

What is visual saliency

It is important to first understand what visual saliency or "visual prominence" is. Your eyes cannot see your entire environment sharply. You have a central field of vision that is sharp, and a peripheral field of vision that is somewhat blurred.

Humans have a limited field of view

Your brain ultimately decides whether something in that peripheral field of vision is worth focusing on. That is the explanation that you were looking at THIS RED BOLD-PRINTED WORD without being so far in the text.

First you read the intermediate title and perhaps the first sentence of this intermediate, but your brain could not help focusing on the red haze in your peripheral field of vision. That is because the red differs greatly from the largely black text.

This mechanism ensured, for example, that our ancestors could quickly detected prey, or find colored berries among the bushes.

How can I apply this?

Suppose you could control your user's focus on your website just as I did with that red word. Then you could ensure that important call-to-action buttons or texts, such as contact now or buy now, are seen more and therefore receive more clicks.

A.K.A how can you increase your conversion? Here some tips to apply.

Tip #1: Color contrast

Contrasting and bright colors are more likely to stand out on your webpage. So give your buttons a clear color that contrasts with the rest of your website.

Scope Web call to action color contrast

On this image, you can clearly see that scopeweb also uses contrast. The red (brand color) button is quite noticeable between the mainly white-gray layout.

Use a color wheel to see which colors contrast well when you later adjust the color of your CTAs.

Tip #2: Use movement

Moving objects were especially interesting for our ancestors, as this could be a poisonous snake or their dinner that happened to pass by. That is why we can barely ignore something that moves, which makes it such a powerful element to use in your call-to-actions.

Some examples of movement:

  • Change of color,
  • button that suddenly becomes visible,
  • GIF animation,
  • and slide-in of text or pop-ups.

However, if you are not a fan of moving parts on your website, or just have static images, you can also use apparent movements.

Apparent movement example

Apparent movement is the term for images that give the feeling of movement without the image actually moving. You can achieve this by, for example, showing a still picture of an object that is clearly in motion: for example, people moving towards an object.

Tip #3: Size does matter

The bigger something is, the harder it stands out .. 🤨 ok, back on-topic. Make sure that texts that need to stand out are bold, not small and thin, preferably use a large thick font.

Tip #4: Use of patterns

An object that completely falls out of a pattern, or has a different pattern than its background, is very striking. For example, give your button a pattern of horizontal lines if your background contains vertical lines.

Stand out by highlighting an element in a pattern

How can I test if it works?

Congrats! You have applied these tips and you probably now have striking call-to-action buttons and texts. But how can you know if this has worked effectively? Here four ways to test it.

Eye-tracking

This is the best way to test for visual saliency, but also the most expensive.

Eye tracking tracks the eye movements of test subjects to see where the focus of that person is.

The place on the page that is viewed a lot will light up in a heat map, if this is your call-to-action button you have applied visual saliency well!

At scopeweb we use HotJar to create heatmaps and funnels for every website after launch to monitor, improve and make changes wherever necessary, this ensures great conversion rates.

Saliency mapping

This method is much more accessible. Neuroscientists have developed an algorithm to indicate the most striking place on an image.

This algorithm can now be found in various software. Saliency Toolbox is an example of free saliency mapping software.

Google Analytics - Behavioral Flow

In Google Analytics you can find the behavioral flow of your users under the behavior section. Here you can see exactly how people go to which page on a certain page.

Check whether, for example, your website.com/contact page receives enough inflow from your homepage where the CTA contact us.

Whoop! I advise you to first check whether you yourself already apply visual saliency sufficiently to your website. Use the test methods just described for this. If you notice that there is actually room for improvement, then definitely apply the tips of this blog post and let us know on Twitter what positive results you have seen!


Do you want to make sure that you are carefree when it comes to improving your conversation rates? Contact us today to learn more about the possibilities.