13 May 2021
In this article we will explain the different types of heatmaps that are out there, and how they can be used within your design process to optimise the performance of your website.
Heatmaps, in their most basic sense, are a way of visualising data. The most common heatmap you’ve probably seen is on a weather report. This is used to represent heat and shows red for hot regions and blue for cool.
But our focus is not on the weather but rather how heatmaps can help marketers, UX designers and advertising agencies better understand how their content performs.
The key difference between descriptive and predictive attention heatmaps is the source of data. Descriptive heatmaps use data which is gathered through actual physical actions whereas predictive heatmaps are based on data which has been predicted through the use of a computer algorithm.
Descriptive attention heatmaps can be further split into two. Attention heatmaps showing eye-tracking data and attention heatmaps showing mouse-movement data.
Descriptive eye-tracking attention heatmaps as produced by Tobii Pro, are based on eye-tracking experiments where a camera monitors eye-movement to see where human attention goes for any piece of content. These experiments tend to be quite expensive and can take a long time to run but the results are high quality and, if you have enough test subjects, the accuracy is high.
Descriptive mouse-tracking heatmaps like the ones produced by Hotjar, are based on tracking user traffic on websites. By recording mouse-movement and clicks a heatmap can be created to show how users are using websites. Using these products requires your existing websites to have high traffic already to justify making decisions. These tools are well suited if your sole aim is to track user journeys on websites post launch.
Predictive attention heatmaps utilise artificial intelligence to predict where a typical audience would be likely to look when viewing your content. Dragonfly AI has developed an algorithm which can calculate where human attention goes in any given setting. Therefore you can instantly see whether a call-to-action, product image, or even brand logo is attention grabbing or not. This algorithm isn’t limited to just the digital world though, you can also analyse in-store displays, shelf designs, and even TV ads.
With Dragonfly AI’s, you can easily compare designs using our A/B testing feature to quickly find out which designs perform best pre-launch. And if you wanted dynamic analysis of your website to see where user attention goes during a customer journey, you can use our Chrome Extension for exactly that purpose and more.
Each of the types of heatmaps mentioned earlier have their own merits, and a combination of the information you obtain cam be used throughout your design processes. This next section will show you which heatmap is best suited for the design phase you are in.
Predictive heatmaps help you validate decision-making prior to publishing in the initial design process. Instantly check the impact of in-store displays in drawing customer attention or optimize your UX design without negatively impacting traffic. Using Dragonfly AI’s chrome extension you can event analysis product images against competitors’ on online retail platforms.
After using Dragonfly AI for the initial design process, you can further validate your decisions for important, big budget projects by using eye-tracking experiments as a mini performance experiment to see how your content performs once contextual biases are introduced.
Once you have iteratively improved your web design using Dragonfly AI’s heatmaps, go live and track actual customer journeys and user experiences using mouse-movement heatmaps to see how the context of content and the users’ own bias makes an impact.
Interested in finding out more about how our predictive heatmap technology can help you optimise your website?
← Back to posts