Types of Heatmaps

Click heatmap

Click heatmaps show you where people are clicking, whether it’s where you intended or not.

Click heatmaps let you identify if certain page items are stealing away attention from the buttons you want people to click. It also lets you see which sections are most effective at convincing people to click.

When you hover over a spot on the heatmap where people clicked, Hotjar will show you how many clicks were registered there, and what percentage of the total # of clicks that represents. But take note that sometimes a button could have several different elements that each recorded clicks. That’s because the button itself, the text within it, and potentially an image within it, are all considered different HTML elements that someone can click. To get the true number of clicks that button received, add each of these together:

For example, this button could lead you to believe it only got 30 taps (clicks on mobile) if you just hovered over the button as a whole. But when you hover over the text and the image separately, there was actually 152 taps in total (30 + 120 + 2).

Scroll depth

Scroll depth shows you what percentage of people made it to each section of your landing page, and thus how many people dropped off and for each section.

It’s useful to see if there’s a section that’s causing a lot of people to leave. If scroll drop-off is significant after a particular section and it’s not because users are clicking through to your signup/product page, then it means this section turned them away.

Look for quick changes from warm to cold colors.

Mouse movement

Mouse movement heatmaps show where users moved or hovered their mouse on the screen. As such, they are only available on desktop (people don’t hover on their mobile device).

Sometimes the mouse movement is completely arbitrary. But usually it indicates where the visitor’s attention was as they browsed the site.

One useful thing it may teach you is that people were interested in something, and wanted to click it, but they either thought it wasn’t clickable, or because it actually wasn’t clickable.

For example, on Equip Foods’ homepage, there’s a mention of founder Dr. Anthony Gustin. The mouse movement heatmap showed that a lot of people hovered over his name, but the click heatmap showed very few clicks to his name. Clearly people wanted to learn more about him, but realized it wasn’t a link so they didn’t bother clicking. (They realized it wasn’t a link because there was no hover state style change on the element.)