Types of Heatmaps

The three types of Heatmaps you will see when creating a Heatmap are:

• Click and Tap
• Move
• Scroll 

---

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. 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?

Example of a Click Heatmap

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.

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.

Back to top 

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.

Back to top 

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.

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 average fold is the average location which would be visible as a user opens the page, before they've done any scrolling. This is presented as a white line with the label AVERAGE FOLD.

Back to top 

More Heatmap Questions?

Check out our Heatmap Guide to discover how scroll Heatmaps can help you identify and understand user behavior or reach out to our Support team with the Contact Us button below.