There are several types of Heatmaps that each display unique data and insights:
Click and Tap Heatmaps
Click and Tap Heatmaps will help you determine where users are clicking on your page. Tapping will be tracked if they are on a mobile or tablet. Click and Tap Heatmaps can help you understand user behavior - for example, are your site visitors clicking the links you want them to? Or are they mistakenly clicking on elements that aren’t interactive? Hotjar tracks the clicks and taps of all users whose session was recorded, and automatically generates a visual representation of the areas they interacted with.
Example of a Click Heatmap
To determine whether you're seeing an isolated issue or you've found a broader opportunity or problem, select a click indicator to zoom out from the All clicks heatmap and view a trend (requires Observe Business)(requires Observe Scale) or group of recordings filtered by the specifically clicked CSS selector on the current page (requires Observe Business). The click percentage is the proportion of all clicks that occurred on the page.
Hotjar may collect more click data than shows on your Heatmap
Hotjar will only show you the interactions on the elements that are visible in the screenshot. The click count on the Heatmap view and the % of clicks, is based on these elements only.
For example, if your site has a drop down menu, the click data will not reflect any menu items that aren't expanded within the screenshot. For a full list of interactions you can export the raw data.
To show how often specific areas of your page have been clicked, Hotjar uses a color scale:
Red or "Hot" shows the elements/areas that have been clicked on most frequently while blue or "Cold" shows the areas that have been clicked on the least.
How clicks and taps are recorded
To ensure that Hotjar accurately reports where your users have interacted, we collect clicks relative to elements on the page. For instance, if a user clicks on a button, we will record the position of their cursor relative to that particular button, not the entire page.
Move Heatmaps
Move Heatmaps show where users have moved their mouse on the screen.
Example of a Move Heatmap
Hotjar samples the mouse movement of all users whose session was recorded, and automatically generates a visual representation of the areas they moved their mouse over. To show how often users moved their mouse over specific areas of the page, Hotjar uses this color scale:
If many of your users moved their mouse to a particular point, that area is "hotter." The color scale allows you to visually see how often your users have moved their mouse to different areas on your page.
How Hotjar records and shows movement
Hotjar records the position of the user’s mouse cursor every 100ms, or 10 times per second. We send movement data back to the Hotjar servers at regular intervals to record where users have moved their cursor on a page, and it is later used to generate your movement Heatmap.
Since we track the position every 100ms, the Heatmap may initially look like a click Heatmap when it has only a few pageviews. However, once you collect enough data, you will notice patterns emerging revealing the most used areas on your page.
Scroll Heatmaps
Scroll Heatmaps are used to show you how far down the page your users scroll.
Example of a Scroll Heatmap
This data is calculated by analyzing the amount of users who visited the page against the depth each of them have scrolled down. If you are running a heatmap that targets multiple pages, Scroll Heatmaps will not be accurate if they vary in size.
This results in an average of how many users scrolled to each portion of your page. To see this, you can place your mouse over the Scroll Heatmap where a marker will show, indicating the exact percentage of users that reached that point of your page.
To show you how many users scrolled to different parts of your page, Hotjar uses this color scale:
Red or "Hot" areas of your Heatmap indicate that all or almost all your users have seen this part of the page. As you move down the page, the colors will get "colder" according to the percentage of users who scrolled down to that point.
Average fold
The Scroll Heatmap also calculates the average fold on your page. The fold is lowest visible point on the screen when a user opens a page before they've done any scrolling.
The average fold is calculated using the following formula: total window height/page visit count, and is presented as a white line labeled AVERAGE FOLD.
Scroll-depth ruler
The Scroll-depth ruler shows the average fold, as well as how many users scrolled down 75, 50 or 25 percent of the page. This allows you to compare scroll depth with click and move data without needing to switch between heatmap types - letting you know immediately how many users clicked an element versus how many viewed it.
Engagement Zones Map
Plan availability
Observe 
Observe , Observe 
The Engagement Zone map combines click, move, and scroll interaction data into one view to let you see which parts of your page users are engaging with most.
This map helps you spot clear on-page patterns and understand what content your users find most valuable so you can improve your UX, and help improve conversions.
How zones work
The map will highlight a range of moderately to highly engaged zones on a page. This is based on combined available interactions from scroll, click, and move data.
Example of an Engagement zone map.
Engagement is shown for the last 3 months from the selected date range and in three levels that are relative to the page:
- Moderate (pink): Some engagement among available interaction data.
- High (light red): Lots of engagement among available interaction data.
- Very high (red): The most engagement among available interaction data.
The higher the engagement is in an area, the more likely a user has either moved or clicked on elements on that part of the page.
Scroll data is used to help weight interactions that have happened further down the page. For example, scroll data may show a certain element wasn't seen by as many users, but the percentage of users who did see it, interacted. This is helpful in discovering areas on your page that you may want to move higher up or bring more attention to.
Rage-clicks Map
Plan availability
Observe Observe , Observe
The rage-click map lets you visualize which parts of a page are causing users the most friction.
To determine whether you're seeing an isolated issue or you've found a broader opportunity or problem, click a rage-click indicator to zoom out from the rage-click map and view a trend (requires Observe Business)(requires Observe Scale) or group of recordings filtered by the specifically rage-clicked CSS selector on the current page (requires Observe Business).
How rage-clicks work
When toggled on in the side panel, the rage-click map allows you to see when a user clicks on the same element five times within 500ms of one another. An angry face icon will appear over the element for each session that that rage-click occurred. They are typically a sign of user frustration due to confusion or broken elements. However, they can also occur on elements like an image carousel as a user clicks/taps to scroll through the images.
This can help identify issues like broken links, slow loading page or areas that a user thinks should be interactive, but aren’t.
More Heatmap Questions?
Check out our Heatmap Guide to discover how Heatmaps can help you identify and understand user behavior or reach out to our Support team with the Contact Us button below.