What is a Heatmap? How They Work, What They're Used For & Examples

What Is A Heatmap?

Website heatmaps (or heat maps) display website data in graphic form, usually represented by different colours, and generally depict how users engage with different parts of a website.

Heatmaps are a valuable tool when it comes to visualizing and understanding how customers react to and interact with your content. 

Heatmap analytics are represented graphically, making the data easy to digest and understand. Customer attention is represented by color, with the most popular areas of content said to be hot whilst the least popular are said to be cold. 

By using and understanding heatmaps, businesses can gain insight into user behavior, gaining a clear understanding of how people interact with content. 

For example, a website heatmap will show which aspects grab the users’ attention, what they click on, how they scroll, and which parts of the content they ignore. This information can help businesses to identify trends and optimize their content to increase engagement and conversion. 

Where are Heat Maps Used?

Heatmaps are most commonly associated with analyzing websites. However, limiting heatmaps to only being used on websites would be extremely short-sighted because they can bring benefits to understanding content across channels. 

Heatmaps also play an important role in understanding saliency – the extent to which an element or object stands out from its surroundings and other design elements. This makes heatmaps a useful tool when it comes to determining the saliency of packaging, in-store displays, promotional materials, and video marketing.  

Anywhere that you’re expecting your customers to look could benefit from the behavioral data of a heatmap. 

What are the Different Types of Heat Maps?

You can categorize heatmaps into two broad categories: interaction heatmaps and attention heatmaps. In this section, you will learn the different types of heatmaps within both categories and give examples of how they can be used. 

Heatmap categorization and hierarchy: 

Interaction Heat Maps

• Click maps
• Mouse move maps
• Scroll maps

Attention Heat Maps

• Eye tracking attention heatmaps
• Predictive attention heatmaps

Interaction Heat Maps

Interaction heatmaps measure active engagement on a webpage, allowing you to see the type of interaction that users have with your website. Interaction heatmaps can measure mouse movements, clicks, and scrolls, giving you an in-depth understanding of how consumers use your website and the types of interaction that they have. 

Click Maps

Click maps provide a graphical representation of where users click. This includes mouse clicks on desktop devices and finger taps on mobile devices. Click maps allow you to see which elements of your webpage of being clicked on and which elements are being ignored. 

Mouse Move Maps

Research shows that there is a strong correlation between where a user moves their mouse and where their attention lies on a webpage. Mouse move maps track where a user moves their mouse as they navigate a webpage, giving you a clear indication of where users are looking as they interact with your webpage. 

Scroll Maps

Scroll maps help you to visualize how visitors to your website scroll through your web pages. They do this by providing a graphical representation of how many visitors scrolled down to any point on the page. The hotter an area is, the more users are seeing it. This can help you to position your calls to action in a place where you know that they will be seen. 

Due to their nature, interaction heatmaps can only be used on interactive content such as websites and mobile apps. A different type of heatmap is required for non-interactive content. 

Attention Heat Maps

There are many types of content that aren’t interactive so can’t be analyzed using interaction heatmaps. This includes packaging design, advertising, shopper marketing, social media, and video content. This is where attention heatmaps excel. 

Attention heatmaps can be used on both websites and non-interactive content. These heatmaps allow you to visualize a consumer’s attention as they look at your content, discovering where their eyes move and which aspects of your content grasp the consumer’s attention. 

There are two types of attention heatmaps: eye-tracking heatmaps and predictive attention heatmaps. 

Eye Tracking Heat Maps

Eye-tracking heatmaps collect primary data to enable you to visualize how a sample audience views your content. Eye movements and fixation durations are measured to build an accurate picture of how consumers see your content. 

Predictive Attention Heat Maps

Predictive attention heatmaps utilize artificial intelligence to predict where a typical audience would be likely to look when viewing your content, using artificial intelligence. The data is displayed as a heatmap, providing a graphical representation of consumer attention. 

How do Heat Maps Work?

Interactive heatmaps such as click maps, mouse move maps, and scroll maps measure the type and amount of engagement with the webpage. To do this, they use tracking codes that record interactions between a user and a website for future analysis. 

Attention heatmaps instead take into consideration how viewers look at content by tracking or predicting their eye movements as they view content.   

How Does Eye Tracking Attention Heat Maps Work?

Eye-tracking heatmaps gather primary data about where a sample audience looks when observing content. 

Eye movements are traditionally measured using specialist technology worn by the test audience to monitor eye movements as the wearer looks at a webpage or piece of content. Eye-tracking heatmaps measure how many times each element is looked at, as well as fixation durations. 

This data is then plotted in the form of an eye-tracking heatmap, giving you a clear visualization of consumers’ attentional processes. This can help you to identify the most and least interesting and engaging aspects of your content. 

Eye-tracking heatmaps are expensive to create due to the specialist software required and the time that it takes to complete. Due to the costs involved, these heatmaps are usually based on a small sample size and can take several days to undertake. 

Newer approaches to eye tracking utilize readily available webcams instead of specialist hardware and are therefore more cost-effective. However, this comes with reduced accuracy. 

Eye-tracking heatmaps reflect authentic user behavior as a result of the complex decision-making processes that go on inside our brains. They may differ from one person to another. For this reason, they are considered to be an accurate research tool but they are sensitive to the selection, biases, and preferences of the test audience. 

How do Predictive Attention Heat Maps Work?

Predictive attention heatmaps also measure saliency to determine attention but do so by making predictions of how a typical user will interact with content without requiring a live test audience. 

Predictive attention heatmaps can be based on an understanding of the biological processes in the human brain. A machine-learning approach analyzing large datasets of eye-tracking responses or a mixture of the two.  Because of this approach, they can provide results that are representative of large audiences that would be impractical to source for individual tests.  As a result, predictive attention heatmaps are not biased toward a small ground of test viewers. 

As predictive attention heatmaps use artificial intelligence to detect saliency, these heatmaps can produce data very quickly, at a fraction of the cost of eye-tracking. This makes predictive attention heatmaps much more accessible to many businesses than eye-tracking analytics. 

 Predictive attention analysis is also repeatable and can therefore easily be applied to A/B or multivariate testing. 

Eye Tracking Heat Maps vs Predictive Attention Heat Maps

The table below compares some of the advantages and disadvantages of the two types of attention heatmap. 

When to Use Heat Map Data Analytics

Heatmaps can be useful in almost any situation where you’re aiming to grasp a potential customer’s attention. This includes websites, packaging, advertising, and even in-store promotions. 

Here are five examples of where heatmap data analytics are commonly used. 

1. Websites

One of the most popular uses for heatmap analytics is for optimizing website design. The variety of heatmaps available, whether website interaction or website attention heatmaps, can be combined to give you a clear understanding of your customer’s journey, allowing you to optimize the path-to-purchase journey to increase your conversion rates. 

Heatmap analytics can also help you to increase your click-through rates on key promotions or landing pages through predictive analytics. You can run A/B testing to identify the most effective design for a landing page, optimizing the customer journey and increasing conversion rates. 

Website heatmaps can also be used alongside other web analytics tools like Google Analytics for a more in-depth understanding of website performance. 

2. Packaging

Packaging is the first thing that customers notice about a product, so it’s crucial that your messaging lands. You can use a heatmap to assess the saliency of your packaging, ensuring that key messaging is seen first. This will help to improve brand recall and perception whilst increasing sales. 

It could be used to understand user behaviours, such as which colour catches the eye first.

By using heatmap analytics, you can also run A/B tests to compare variants of packaging, making sure that you get it right the first time. This helps to speed up testing cycles and reduce overall costs.

3. Video Content

Video marketing is a powerful content strategy that is being adopted by an increasing number of businesses.  

Heatmaps analytics is a valuable tool for video marketing. Using heatmaps for videos can help you to understand how your viewer’s attention changes through the video. It can also help you to find the right place for your call to action, helping to increase your click-through and conversion rates. 

4. Shopper Experience

It’s no secret that brands and retailers spend a lot of money on in-store promotions, but these must be seen by the largest number of shoppers to be effective. Heatmap analytics enable in-store teams to validate the effectiveness of campaign materials and ensure the most effective positioning.  

Customer heatmaps can be used to assess customer behavior within a shop about key promotions. Using heatmaps to enhance shopper experience can help to improve ROI on visual merchandising whilst saving time in comparison to traditional testing methods. 

5. On-Shelf Attention

It’s well-known that Gerald Zaltman, a professor at Harvard Business School, claims that 95% of purchasing decisions are made subconsciously. But how can you tap into that subconscious and make sure that it’s your products that are purchased? 

Predictive heatmap analytics can measure your share of attention on the shelf, helping you to maximize your brand exposure and give your products the best possible chance of winning attention. With heat map marketing, you’ll gain intelligence on how your product design impacts its performance, enabling you to make changes that increase sales. 

How to Understand Heat Maps

Heatmaps are often favored for their easy-to-digest design. However, they may appear quite complicated at first, especially if you’ve never seen a heatmap before. 

We’ll talk you through three tips to help you to understand heatmaps.  

1. Understand the Color Palette

It’s important to understand the color palette when you’re looking at a heatmap. Typically, the most popular (hot) elements will be colored red whilst the less popular (cold) elements will be blue. However, some tools use different color palettes so it’s important to check this so that you understand what you’re looking at. 

2. How to Read a Heat Map

Once you understand the color palette of your heatmap, you’ll be able to see which areas are most popular and which are lacking in attention. If a call to action is lacking in attention you may need to move it to an area with higher attention for a better chance at a conversion.  

3. Beyond Heat Maps: Metrics vs Colours

Heatmaps provide a valuable way to quickly visualize and digest a large amount of data. However, sometimes you need to move from colors into quantifiable metrics. This is particularly useful when you’re comparing performance across multiple pieces of content. 

You can use the metrics behind heatmaps to provide insight into individual design elements and to calculate the share of attention on different design elements. 

Which Metrics Are Used to Analyse Heat Maps?

When you begin to delve deeper into your heatmap, you’ll need to understand the metrics that are used for analysis. This will give you a deeper understanding of the data that is behind your heatmap and a clear insight into consumer behavior. 

There are three key metrics that we use for analyzing attention heatmaps at Dragonfly AI. These are: 

• Probability of Perception (PoP) 
• Share of Attention (SoA) 

• Location Attention Score (LAS) 

Each of these metrics will give you different insights into your content, giving you a detailed understanding of how consumers are viewing your content. 

Probability of Perception (PoP)

Probability of Perception, also known as PoP, provides an estimate of the percentage of consumers who are likely to notice an element at first glance. 

PoP can help you to ensure that the most important elements of your content are seen first, whilst also making sure that less important elements aren’t taking that attention. 

Share of Attention (SoA)

Share of Attention, also known as SoA, estimates the percentage of attention that is given to each individual element of your content. This enables you to compare the relative performance of multiple elements within your content. 

You can use SoA to ensure that the most important elements within your content are getting the most attention. It can also help you to identify less important areas which might be attracting too much attention, allowing you to soften these elements to make them less distracting. 

Local Attention Score (LAS)

Location Attention Score, also known as LAS, estimates the average level of the saliency of each area of an element within your content. This helps you to understand how attention-grabbing each area of an element is. 

LAS is calculated by dividing each element into equally sized squares which are each rated for saliency. The data generated through LAS can help you to assess the effectiveness of each element of your content.   

How to Make Decisions Based on Your Heat Map

Heatmaps can provide you with a wealth of information about the performance of your content. This can then be used to inform decisions to increase your engagement and improve your conversion rates. 

Content that is too Cold

The first thing to look for on your heatmap is where important content is colder than you want it to be. If your content is too cold, it won’t be getting the attention that it deserves. This is particularly problematic if the cold area is a call to action. 

If your call-to-action button isn’t getting enough traffic due to its positioning on the screen, your heatmap will help you to move it into a place with higher traffic, where it is more likely to drive conversions. 

Content that is too Hot

This may sound a bit strange but bear with us here: your content can also be too hot. You want your visitors to be looking at the principal visual elements, such as your key messaging and your call to action. You may find that users are becoming distracted by other elements on the screen which are taking their attention away from your main call to action. 

If users are becoming distracted by less important design elements, you may need to soften or remove these to reduce distraction and help direct attention to where you want it to be. 

A/B and MVT (Multi-Variant Testing)

Heatmaps are an extremely useful tool when it comes to comparing different variations of content. They can help you to understand which version will perform better, helping you to get it right the first time. 

Whether it’s a landing page or product packaging, A/B testing will allow you to test version A versus version B; whilst multi-variant testing allows multiple concepts to be tested to discover which will be most effective. 

Keeping the Clarity

To avoid confusing your viewer, your content should have a clear visual hierarchy that guides them naturally through the information. Your viewer should be able to interpret a well-designed piece of content in a matter of seconds. 

You can use your heatmap to identify any areas of confusion. If you notice more than five hotspots in one area, or if the hotspots appear to be merging together, it’s likely that your content may be confusing your viewers. In this case, it’s a good idea to adapt the design to improve clarity. 

Increase Conversions Based on Heat Map Insights

Heatmaps provide a powerful insight into how consumers interact with your content. They can help you to make informed, data-driven decisions to improve attention and increase conversion rates, whether you’re redesigning your website, looking to improve your video content, or optimizing in-store displays. 

Dragonfly AI is consistently improving thanks to ongoing research led by our chief scientist which means that our data is reliable, easy to use, and can be integrated into your current ecosystem. Let’s talk about how exactly we can work with you for increased conversions!