Heatmaps: how to read and interpret them

---

What Are Heatmaps?

Heatmaps are graphical representations used to show where gazes are focused on specific areas of a visual stimulus, such as a webpage, advertisement, or product. They provide a visual summary of eye tracking data by showing regions of high visual attention with warm colors (e.g., red or yellow), and regions of low attention with cooler colors (e.g., blue or green).

Heatmaps are especially useful for interpreting eye-tracking data, as they provide a clear and intuitive way to identify which areas of a visual attract the most attention and which are overlooked.

 

Where Can I Find The Heatmaps?

There are several ways to access the Heatmap:

Aggregated Data:

1. In your Study Dashboard, click on the Item you want to view the Heatmap for. A preview of the Item will appear with a Heatmap button below.

2. In your study, navigate to Results (ensure you have an active License). Then, under STUDY CONTENTS, click the Heatmap button next to the item you want to view.

Individual Participants:

1. In your study, navigate to Results (ensure you have an active License). Then, in the PARTICIPANTS LIST, select the participant whose Heatmap you want to view.

2. In the Analytics Dashboard, go to the Heatmaps tab. In the left panel, select the participant whose Heatmap you want to view.

Custom Heatmap View Options

You can customize your Heatmaps using the options available in the Customize Heatmap menu at the top. Customization options include Mouse, View Type, and Points Appearance.

• Mouse
  You can choose to display the moves and clicks of the mouse cursor, show clicks only, or hide this information entirely.
  
  
• View Type
  You can decide which type of map to display: a heatmap, view map, or fog view. Learn more about the differences between these view types here: The Difference Between Heatmaps, View Maps, and Fog View.
  
  
• Points Appearance
  The choice of Fixations or Gazes will determine the type of data (points) used to generate the heatmap. Select one in the AOI METRICS section on the right panel. Learn more about what Fixations and Gazes are in our Eye-tracking Glossary.
  
  

Filter the Aggregated Heatmap Data

Each aggregated Heatmap can be filtered by the following criteria:

- Data quality: Filter by the participant quality stats they obtained for this specific item.

- Tags: Tags can be assigned to participants on the study dashboard. This filter works as an "AND" function, so only results for participants with both tags will be shown.

- Gender / Age: If you asked participants about their name, gender, and age when creating the study or added this parameter as a variable in the participation link, you can filter by gender / age.

- Participant Type: Filter by participant type (own or RealEye).

- Exposure number(s): This is relevant only for mockup studies, as only in this type of study can a single image or video be viewed more than once during the eye-tracking test.

- Pressed Key: (Available only if the "finish on keypress" option was enabled). This allows you to filter results by participants who pressed a specific key (e.g., in IAT/IRT studies).

- Device: Filter by device type (desktop, smartphone, or tablet).

- Eye-tracker Setup: Filter by the type of eye-tracker setup (Webcam, Mouse Tracker, OpenGaze).

After selecting your filter criteria, please remember to click the Apply Filter button to view the results!

Important Note: All the CSV files available for download will include the applied filters.

Select the Time Period for Your Heatmap

Below the Heatmap, a time slider is available, ranging from 0 to the maximum display time of the item (in seconds). This slider represents the duration for which participants were viewing the stimulus.

By default, the slider is set to start at 0.5 seconds to account for Central Fixation Bias, as participants often focus on the center of the image during their initial fixations. You can adjust the time range by dragging the ends of the orange line across the timeline to explore which areas of the stimulus captured the most attention at specific moments.

How to Download the Heatmap?

• Static Heatmap Image

To download a static Eye-tracking Heatmap image, click the Download tab in the menu at the top of the screen, then select Heatmap. Depending on your customization settings, the heatmap may include mouse movements and clicks, or it may be displayed as a View map or Fog View.

• Heatmap Recording

To download a recording of the heatmap for a specific time period, click the Download tab in the menu at the top of the screen, and select Recording. In the pop-up window, allow the screen recording to proceed. Be sure not to stop screen sharing or change tabs/screen size during the download process. The video will be saved in WebM format.

• Stimulus

You can also download the stimulus used to generate the heatmap. To do this, click the Download tab in the menu at the top, right-click on Stimulus, and click Save link as...

 

---

 

How to Analyze Eye-Tracking Heatmaps?

Heatmaps use color gradients to indicate the intensity of visual attention, with warmer colors (e.g., red, orange) representing areas of high focus and cooler colors (e.g., blue, green) indicating less attention. Here's a step-by-step guide to analyzing eye-tracking heatmaps:

1. Understand the Context

   • Stimulus Type: Identify what the heatmap is based on (e.g., webpage, ad, physical product).
   • Task or Goal: Know the user's objective during the eye-tracking study (e.g., finding information, completing a purchase).
   • Target Audience: Consider the demographics and characteristics of the participants.
     
     
2. Examine the Color Gradient
   • Hot Spots (Red / Orange): Areas with the most visual attention. These indicate where users focused the most.
   • Medium Attention (Yellow / Green): Areas with moderate attention.
   • Cold Spots (Blue / No color): Areas with little to no attention. These may indicate overlooked or less engaging elements.
     
     
3. Look for Patterns
   • Scan Paths: Observe the general flow of attention. Do users follow a logical sequence (e.g., top-left to bottom-right for Western readers)?
   • Clustering: Are there clusters of attention in specific areas? This could indicate strong engagement or confusion.
   • Avoidance: Are there areas that are consistently ignored? This might suggest poor placement or lack of interest.
     
     
4. Compare Across Participants
   • Aggregated Data: Look at heatmaps from multiple users to identify common trends.
   • Outliers: Check for individual differences that might skew the overall interpretation. Learn how to filter out the participants.
     
     
5.  Relate to Design and Usability with Areas Of Interest (Identify Potential Issues)
   • Are users focusing on the most important elements, such as call-to-action buttons?
   • Is the visual hierarchy effectively guiding users?
   • What content are participants spending the most time on?
   • Are users focusing on irrelevant or distracting elements?
   • Are critical areas being overlooked by users?
     
     

By systematically analyzing eye-tracking heatmaps, you can gain valuable insights into user behavior and make data-driven decisions to improve the effectiveness of your designs.