How To Read A Heatmap?

Damian Pandolfo

Damian Pandolfo

Product Manager

What is a heatmap?

Think of a heatmap as a storyteller for your data, utilizing colors to unveil insights into user behavior. Whether in business or research, it becomes your guide, revealing patterns and areas of interest. Experimenting with data points transforms it into a versatile tool, displaying how users interact with specific web pages or templates that enhance understanding and decision-making. The simplicity of its visual language allows anyone to grasp complex information effortlessly.

Imagine you are in the 1950s, a revolutionary period in the world of computers. Picture scientists facing an unprecedented challenge: overwhelming amounts of data. The rise of computers brought efficient data collection, but it also demanded robust analytical methods. Enter the scene: heatmaps. Born out of the necessity to navigate vast datasets, these colorful visualizations started in taxonomical realms but quickly found diverse applications.

All in all, a heatmap overlays a grid on an image, and each square uses colors to show how intense the values are, recorded by your eye tracker or predictive eye-tracking. High values get warm colors, while lower ones get cooler colors, creating a colorful snapshot of data patterns. Other than that, there is also an option for custom heatmaps on an attention prediction AI called expoze.io. Here, you can choose what type of color you would like for your heatmap.

Now, let's add another layer to this narrative. As eye-tracking tools evolved in parallel, they collided with the world of heatmaps. The result? Eye-tracking heatmaps offer crystal-clear insights into dynamic processes. This technological marriage provides a powerful lens to enhance our comprehension of the ever-expanding landscape of data.

What is an eye-tracking heatmap?

Discovering the user's visual journey, an eye-tracking heatmap showcases areas of attention during exploration. It reveals the most and least attention-grabbing parts of a visual space. Using warm colors (red or orange) for high focus and cool tones (blue or green) for low focus, it traces eye movements. 

Through this, it tracks how often viewers focus on elements and for how long, presenting it in a visual heatmap. This tool helps UX designers, CRO practitioners, and marketers understand viewer attention. It identifies what's interesting, engaging, redundant, or confusing in a given space.

Similar to Mouse Movement Heatmaps, which track cursor activity, both aim to decode user attention and interaction, recognizing that cursor movements may not always precisely mirror gaze direction.

These eye-tracking heatmaps can be mainly used to predict how much attention a creative will get. Imagine that back in the day, when AI was not known, eye-tracking used to be a long and costly process that could only be conducted by scientists who had experience in it. Even though it would give insightful and accurate results, using it for marketing or a website was not efficient. Luckily, we have moved past that strenuous process and have merged eye-tracking with AI to get the maximum benefits in minutes and from anywhere in the world, avoiding the hassle of finding a lab to conduct research.

AI accumulates huge sums of data from eye-tracking studies, and through this information, it can formulate attention heatmaps on new data, which are nearly as precise as in-person eye-tracking research. Junbi.ai and expoze.io are two great examples of using AI and eye-tracking data together. We will dive deeper into it in the upcoming sections. 

What can eye-tracking heatmaps be used for?

  • Insights into attention patterns: Eye-tracking heatmaps reveal the focal points on a webpage, shedding light on what attracts user attention and what might go unnoticed. This information aids in emphasizing vital content and refining the overall page layout.

  • Enhanced readability: Delving into the user's gaze, adjustments such as font size, color contrasts, and text placement can be fine-tuned to elevate the overall readability and comprehension of the content.

  • Highlights distractors: Through the heatmap, one can see if the small distractors are gaining more attention compared to a page’s main links, buttons, opt-ins, and CTAs

  • Optimal visual hierarchy: Functioning as a visual guide, eye-tracking heatmaps pinpoint the most effective design, ensuring users swiftly locate essential information with ease.

  • Screen size and device: A creative or a website is perceived differently on different screen sizes or devices. Placements of important elements such as CTAs, buttons, etc. might get attention on a desktop but might not be easily visible on a phone device. Heatmaps can help solve this problem, as one can run their creative or website through eye-tracking to make content according to the device.

  • User-centric design: Unveiling how users visually navigate a site contributes to the creation of a website that not only meets but exceeds user expectations in terms of intuitiveness and enjoyment.

  • Highlights the best content format for you: Advertisers or influencers display content in different ways, such as pictures, videos, banners, or posters. One can test for attention by using the same content but in different formats and running it through eye-tracking platforms to see what content formats are predicted to get the most attention.

  • A/B testing: Eye-Tracking Heatmaps serve as invaluable tools for comparing different designs, aiding in the determination of which version more effectively captures user attention and guides their focus.

An example of a company that provides eye-tracking heatmaps

You might be reading this article because you are either curious about heatmaps or you are planning on using them but would like to know more about what they offer. The information above gives you an idea of what a heatmap is and the things you can use it for. Now comes an important question: How do I even create a heatmap? 

Data points, statistics, and diverse colors might seem overwhelming to indulge in, but would you believe if I said that all you have to do to create your heatmap is to upload your content on an AI platform, and within minutes you will get your attention heatmap with insights? It sounds too good to be true, but AI has simplified our lives, so why not make use of it?

No more needing experience to read data results or a fancy lab and tons of money, Alpha.One, a science-driven company that has two AI products, Junbi.ai and expoze.io, is simplifying and adding insights through their eye-tracking-based heatmaps for marketers, UI/UX designers, and anybody that requires measuring attention for their products.

expoze.io

expoze.io is an AI platform where you can upload an image or a video for which you can get an attention prediction heatmap. An important feature they have is that you can select your own ‘Area of Interests’ (AOIs). This means you are able to mark important elements in your design where you would specifically like to see how much attention those elements will get.

For example, the billboard shown below was uploaded on expoze.io to predict attention. This advertisement would have no value if one could not recall what brand and message it represented. Such a creative billboard can become distracting from the main message; hence, to see if the brand name is getting enough attention, we highlighted that area to check how much attention it would get. As can be seen on the left under the “Area of interest” column, the brand name is able to get 18.1% attention. Good, but it could be better! Even though the billboard was creative and eye-catching, the viewers might not have noticed the brand name that well.

Therefore, using this option for your heatmaps is vital, as it gives you major insights that are usually unconscious and not the easiest to spot. 

Now, if we were to ask you, how would you read this heatmap? Take a minute and think about what these colors represent.

Simple answer: The dark tones like red show where the most attention of a viewer would go, which is the face, brand name, and message. The lighter tones, like yellow, show that it would receive attention, but a lot less. The areas that show no color mean that no attention will be directed there. If your brand name shows no color on the heatmap, that means you will have to change its positioning right away!

Other than the AOIs, expoze.io also has a variety of heatmap options. One can choose from normal, scientific, reveal, colour blindness, and even make their own custom heatmap! If you would like to know about each of these heatmaps in depth, this blog can provide you with insights.

Junbi.ai

Junbi.ai is similar to expoze.io but it is specifically tuned to predict attention only for YouTube ads. Analyzing the heatmaps for this is as easy as a breeze. We took a screenshot of one of the top-performing ads on Junbi.ai, which is from Booking.com, as can be seen below. Junbi.ai presents a heatmap throughout the video, which lets you see what elements in your ad are getting the most attention. Sometimes ads have many switch scenes or other videos on the same YouTube page, which distracts viewers from the ad. For this, Junbi.ai also gives scores based on how well your ad can stand out from the distractors (ad breakthrough score), if your ad is confusing to understand (a cognitive ease score), or if your brand is even getting attention in the ad (a brand attention score).

To add to the simplicity of understanding this heatmap, Junbi.ai also presents a live graph, which gives you attention-prediction insight into every second of your ad.

After calculating all the elements, it presents an overall score of how well your ad will perform compared to other ads on YouTube.

Could reading a heatmap be any easier?

What to Avoid When Using a Heatmap

Now that you know what heatmaps can be used for, how to read them, and what platforms are there to help you create heatmaps, there are a few things to keep in mind for your heatmap to predict the best results for your creative:

  • Test designs in context: If you are testing a mobile app but taking a screenshot from a desktop page, the heatmap will predict attention for the desktop screen. This is not viable because attention would be directed differently on a mobile screen. Hence, upload screenshots in the right context to get accurate results. Some other examples include uploading your creative according to the place it will be displayed, like for banners, use a banner template, which gives a more realistic setting; for movie posters, use a bus stand template, where movie posters are usually displayed. The image below will help you get an idea of the context.

  • Don’t put the entire webpage: Suppose you're planning to test your website, which is great. However, keep in mind that a website visitor sees only what's visible on the screen. Simply taking a screenshot of the entire page may not be effective because people don't navigate your webpage that way. It's better to capture multiple screenshots of what's currently in the viewport.

  • Benchmark: If for one of your creatives, you got the best results. All your main elements are under the dark hue in the heatmap and have scored well on attention prediction; use that creative as a benchmark for your other creatives. This saves time and effort and increases the chance of good results.

Conclusion

Using eye-tracking heatmaps to identify "blind spots" and uncover bottlenecks that lead to customer confusion and a poor user experience should not be a one-time effort. It's essential to consistently track visitor behavior on websites, analyze patterns, and use these insights to optimize your website and pages for increased conversions. The same goes on for marketers and advertisers who upload content consistently.

Eye-tracking heatmaps are easy to use and read. It adds valuable insights that would be hard to achieve otherwise. This should be an ongoing, iterative process to fully harness the benefits of these valuable tools.

Now that you know everything about these heatmaps, are you ready to use them? Create your first heatmap on expoze.io for free via this link.

Related blog articles

How to Communicate your Brand by Understanding the Brain

How to Communicate your Brand by Understanding the Brain

Why measuring Attention is one of the smartest and simplest things you should be doing

Why measuring Attention is one of the smartest and simplest things you should be doing

How to Validate Visual Hierarchy with Predictive Eye Tracking

How to Validate Visual Hierarchy with Predictive Eye Tracking