Heatmap types

So, there are three commonly used heatmaps:

• Click map (see where people clicked)
• Scroll map (see how far people scroll on the page)
• Movement map (see how people move their mouse on the page).

​
Personally, I don’t think movement maps are helpful, as moving the mouse around the screen doesn’t tell you much about the behavior.

Click maps

With click maps, you can visually see where people click. The “hotter” the color, the more clicks that element gets.

On top of that, you can also see clicks on non-clickable elements (such as hours of video content in the screenshot below).

This gives you so much data about what people are interested in and if they are finding your CTAs.

Click maps answer questions such as:

• Are people clicking on your main elements, CTAs, and links?
• What elements get the most clicks?
• Do people get distracted by non-clickable elements?

Scroll maps:

With scroll maps, you can see how far people scroll. The screenshot below clearly shows this. Cooler color means fewer people saw that section.

Scroll maps answer questions such as:

• Are people seeing your important content, or are they never scrolling far enough?
• How far do people scroll on a page?

How to use in e-commerce

1. I love using heat maps on landing pages or home pages. It’s so insightful to see where people click and what they interact with the most. I use it to make sure people can see & click my CTAs and elements.
2. Looking at FAQ sections is fascinating because you can learn what points interest your readers most.
3. If you notice an element getting clicks but is not clickable, maybe you need to make it clickable or add an info box on click. If people are clicking on it, it must be interesting to them.

They don’t always show correct data if there is dynamic content, which is loaded afterward. But for most pages, it works flawlessly.

How to install

The cool thing is that installing heatmap software is super easy.

Usually, you just need a small script that the tools provide, and you add it to your website’s head section, either with Google Tag Manager (GTM) or directly in the code. You don’t need coding skills for this.

You can use Hotjar or Microsoft Clarity.

1. ​Hotjar has more features, but the free plan is limited to tracking up to 35 daily sessions
2. ​Clarity is free but has fewer features than Hotjar

I truly recommend installing one of these on your site because you get the heatmaps & session recordings (my most used UX research method).

Have a productive week!

Robert