Understanding Heatmap
Heatmaps are visual representations that illustrate user interactions on your website. Humblytics overlays click and scroll data directly onto screenshots of your actual pages, helping you see exactly where users engage and how far they scroll.
Getting Started
Navigate to Heatmaps
Click on Heatmaps in the sidebar under Analyze. The page header reads "Heatmaps - Visualize user clicks and scroll behavior on your pages."
Add a Page
Click the Add Page button to capture a new page for heatmap tracking. You can also click Show Guide for a walkthrough of the feature.
Select a Page
Choose an existing page from the list to view its heatmap data.
Left Panel - Page Details
When viewing a heatmap, the left panel provides controls and data summaries:
Page URL Selector — A dropdown to switch between tracked pages.
Device View Toggle — Switch between Mobile and Desktop views to see device-specific heatmap data.
Show Heatmap Toggle — Turn the heatmap overlay on or off.
Heatmap Intensity Slider — Adjust the intensity of the heatmap overlay from 0 to 100%.
Advanced Options — Expandable section for additional configuration.
Date Range — Displays the date range for the current heatmap data.
Captured On — Shows when the page screenshot was last taken, with a refresh button to recapture.
Click Data Summary — Overview of click events recorded on the page.
Scroll Details — Shows the Average Depth % (how far down the page users scroll on average) and the total Sessions count.
Scroll Buckets — A breakdown of scroll depth in 10% increments (0-10%, 10-20%, 20-30%, and so on), showing the reach percentage and session count for each bucket. The 0-10% bucket always shows 100% reach since every visitor sees the top of the page.
Refresh Screenshot — Button to recapture the page screenshot with the latest design.
Remove Page — A red button to delete the page from heatmap tracking.
Right Panel - Screenshot View
The right panel displays the actual page screenshot with data overlaid:
Heatmap / Scroll Toggle — Switch between the click heatmap view and the scroll depth view using tabs at the top.
Click Heatmap View — Shows color-coded hotspots on the page screenshot. Red and orange areas indicate high click activity; blue and gray areas indicate low engagement.
Scroll Depth View — Displays horizontal scroll depth markers along the side of the screenshot (100%, 80%, 60%, 40%, 20%) showing how far users scroll.
Screenshot Controls — Zoom in/out, capture a new screenshot, refresh, and enter fullscreen mode.
How to Interpret Heatmaps
Identify Hot Spots — Look for areas with red or orange hues, indicating high user interaction.
Examine Cold Zones — Blue or gray areas suggest low engagement. These might be opportunities for design improvement.
Review Scroll Depth — Check the scroll buckets to understand whether users are reaching your important content below the fold.
Compare Devices — Toggle between Mobile and Desktop views to see how user behavior differs by device type.
Heatmap History and Versioning
Humblytics stores all previously saved heatmaps so you can compare user behavior across different periods.
Every saved heatmap is preserved automatically.
Compare versions side-by-side to see how design changes, copy updates, or layout shifts impact user behavior.
Maintain complete historical context instead of losing data with each update.
To compare versions:
Save a heatmap for your current page design.
Make page changes (design updates, copy changes, layout shifts).
Save the heatmap again.
Compare versions in your dashboard to see how changes impacted user behavior.
All existing heatmaps are automatically preserved, so you can start comparing versions immediately.
Last updated