Heatmap-Overview

What is a Heatmap? #

While the Data Center provides a wealth of quantitative metrics, heatmaps help you understand the why behind the data. Heatmaps visualize user behavior, enabling a more intuitive grasp of user interaction with your pages and providing deeper user insights and understanding. Especially when page performance is underperforming, heatmaps, combined with segmentation, allow for rapid problem identification. Furthermore, after page optimization or redesign, heatmaps offer a quick and clear way to evaluate the effectiveness of those changes.

Insights Gained from Heatmaps:

• Understand User Interests: Identify which content areas capture user attention.
• Validate Content Relevance: Check if user engagement aligns with intended content focus and adjust as needed.
• Identify Ignored Content & Drop-off Points: Pinpoint content areas users overlook, or that may even cause them to leave the page.
• Optimize Content Strategy: Consider reducing or removing content that is irrelevant or detrimental to user engagement.
• Identify Conversion-Driving Content: Discover content elements that contribute to conversions.
• Optimize Conversion Paths: Check if Conversion-Driving Content is near CTAs, and utilize it for exit-intent offers to retain abandoning users.
• Evaluate CTA Effectiveness: Understand if CTAs are prominently placed and easily found, if their visibility is sufficient, and if their copy is compelling.
• Validate Expected User Interactions: Confirm if user interactions on the page are aligning with your intended user flow and design.
• Uncover Unexpected Interactions: Identify unexpected clicks that may require UI optimization or the addition of new interactive elements.

Entry path:

From Data Center: Quickly access heatmaps for a specific page directly from the Page module within the Data Center.Heatmap Tab: Navigate directly to the Heatmap module via the Heatmap tab to quickly find and analyze any page.Experience Module: Rapidly view heatmaps for experiment pages directly within the Experience creation interface.

Heatmap type overview #

Click heatmaps are used to view user interaction with a page. Areas with concentrated clicks indicate content that is of interest to users. It is recommended to first check if there are concentrated clicks on CTAs (Calls to Action). Secondly, review the interaction of other interactive elements, such as: whether the banner on the homepage attracts user clicks, whether popular products on listing pages receive sufficient clicks, which modules in the menu bar have higher engagement, and so on.

Click heatmap

Click heatmaps are used to view user interaction with a page. Areas with concentrated clicks indicate content that is of interest to users. It is recommended to first check if there are concentrated clicks on CTAs (Calls to Action). Secondly, review the interaction of other interactive elements, such as: whether the banner on the homepage attracts user clicks, whether popular products on listing pages receive sufficient clicks, which modules in themenu bar have higher engagement, and so on.

Attention heatmap

Attention heatmaps are used to view the distribution of user attention. Areas of high attention are often content that users are interested in. Focus on checking if there are areas of high attention in positions where user retention is low. The value of this content may be underestimated, and you can try moving the content higher up on the page.

Analysis heatmap

Analysis heatmaps allow you to view the exact number of clicks and click percentage for each area/element, providing concrete click data for each key interaction. In analysis heatmaps, selecting non-interactive elements can help you more accurately discover accidental clicks.

Comparison heatmaps

Comparison heatmaps allow you to compare two heatmaps and analyze the differences between them. Comparison dimensions include:

• Time Dimension (e.g., 15 days before and 15 days after a promotional campaign launch)
• Different Page Versions (e.g., before and after a redesign)
• Segmentation Functionality (refer to the introduction of the segmentation function for details)

Historical heatmap

Before making significant changes to a page, please remember to save historical heatmaps. This is useful for comparative analysis through heatmaps during retrospectives.

• Click this button to save a heatmap of the current page version.
  
• Please be sure to add notes for easy future reference.
  
• After saving, you can view them in Settings → Heatmap Settings → Version Management.
  
• You can also select versions to view on the corresponding page itself.
  

Screen overview #