OVERVIEW

When considering design changes to optimise your content, think about using each of the visual elements tactically and the priority these should be in based on order of importance to the objective.

The following considerations should be made when optimising visual elements in your content:

  • Use of fonts, size, colour and weighting
  • Colour contrast and differentiation
  • Formatting of the page and elements
  • Contrast edges and intensity
  • Clustering priority content
  • De-cluttering or reducing impact of unnecessary content

When optimising specific visual elements this will invariably have a relative impact on the saliency score of all visual elements within the page.

In this section we'll use a dummy web page to demonstrate how using some of the considerations listed above can shift the saliency and attention of visual elements across the page. Each image contains the original image, heat map visualisation and hot spot analysis.


WEBSITE EXAMPLE

The following dummy website comprises of basic elements such as company logo, navigation, hero section and additional promo sections towards the bottom of the page. The high saliency areas focus around the 'Welcome' heading, accompanying hero image and a specific promo section.


FORMATTING

The below examples shows a simple tweak to the formatting of the 'READ MORE' call to action button by inverting the colours. This provides a much stronger edge contrast against the white background, thereby increasing the overall saliency and attention.


COLOUR

Use of colour can play a critical role in differentiating elements individually and collectively across the entire content. By changing the palette of the bottom promo sections we can see this hasn't affected the saliency too much but it has reduced the saliency of some of the squares in the illustration which can be an unnecessary distraction.


BACKGROUND IMAGERY

Use of the background imagery can significantly shift saliency areas. In the example below we can see the use of the background image has not only shifted the high saliency area but also increased the saliency of one of the bottom promo sections.


MASKING

Simple tweaks such as masking the image can help to reduce the contrast and saliency of visual elements within the image. This can also help other elements such as the headings, copy and the call to action button stand out. We can also see that the saliency of the promo section has increased even further.


ACCENT COLOURS

The example below demonstrates the use of accent colours to highlight specific elements. We can see when used efficiently it can help increase saliency and attention.


LIFESTYLE IMAGERY

Use of lifestyle type imagery can help provide context and appeal, but it can also potentially introduce unnecessary distraction and divert attention from priority elements.


LIFESTYLE IMAGERY & MASKING

Here we demonstrate how you can de-prioritise and lower the saliency of the lifestyle image by masking off elements within the image


Ready to get started with Dragonfly AI?


For more information on analysing content? Please contact [email protected] or any member of the Dragonfly AI team.

Did this answer your question?