When aiming to capture attention for your product, the visual hierarchy of the individual elements within your design is paramount. Once your product is noticed, in what order are customers likely to see these elements and your more crucial areas of interest? Are they actually looking at them in the order you truly intended? Getting this visual hierarchy right is key to capturing – and maintaining – attention.

Let’s say you’re designing a website – in an article for Forbes, Steven Widen observes: “Visual hierarchy is the principle of making certain elements of your website more prominent than others in order to draw users’ attention.” So, first impressions count.

There are many design characteristics that you can adjust in order to tweak the visual hierarchy of your page layout. For example: font style, font size, colour, image size, spacing, and so on. Sometimes, the white space between the key information and call-to-action buttons is just as important as anything else. If you make the page too busy, the more important bits might never be noticed.

Once your product is out ‘in the wild’, so to speak – whether it’s a website that’s gone live or a physical product that’s arrived on the supermarket shelf – you often have a very short window of time to capture a potential customer’s attention before they move on to something else. At Dragonfly AI, we create attention heatmaps which show exactly where the attention of your audience is likely to be directed when they first see your content. Red regions are hottest – meaning they are being seen first; and blue regions are coolest – meaning they are least likely to be seen.

Our heatmaps help you to identify exactly where your visual hierarchy is working, and where it is failing.

Using our heatmaps it’s quick and easy to generate a range of insights that can help inform your decision making process throughout the design lifecycle:

  • Probability of Perception (PoP) – we can calculate this score for any given element within the image. i.e. What is the likelihood of that one particular element being seen at all?
  • Background noise – a score measuring the level of visual noise within a scene. High-value elements in scenes with low levels of visual noise have a better chance of standing out.
  • Hotspots – identify the areas most likely to win attention from your audience at first glance.
  • Goal alignment – does the attention distribution align with your objectives and intended visual hierarchy? We show you where to tweak your designs to ensure they attract as much attention as possible and help you to align performance across all media assets, channels and platforms.
  • Clarity – our attention maps identify when too many elements are competing for attention simultaneously. The human brain can only process up to five distinct regions at once, so making your design too busy can increase cognitive load and result in the viewer looking at something that you didn’t want them to. We can help you fix that.

For more information on how Dragonfly AI can help you get your visual hierarchy right, book a demo.

Similar Articles


What is the difference between data-driven design and data-informed design?

When optimising the design of your visual content – whether it’s packaging or a website, Read More

29 September 2021


Five things you didn’t know you could do with predictive heatmaps

Don’t you sometimes wish you could grab your target audience by the collar the minute Read More

23 September 2021


How to improve the shopper experience with predictive visual analytics

The use of predictive visual analytics processed by Artificial Intelligence (AI) allows brands and retailers Read More

8 September 2021