How to read a heatmap? Part 1

| May 3, 2021

People get hot about some things on your website. And they are totally cold about other stuff. Frustrations, chaotic movements, problems and solutions – that’s all you can spot on a heatmap. But in order to make it a goldmine of user’s insights, you have to know how to properly read a heatmap.

What is a heatmap?

As you probably know, a heatmap graphically shows users’ most significant actions on your pages.  Every single activity – like a click or mouse move, scroll, chaotic movement – adds to the hotness of a given area. The places where users click most often are marked as hot areas (yellow, orange, red). The places where users click less often are shown as cold (blue and green). Any areas without colors are the places where there’s no user action.

What heatmap is trying to tell me?

In CUX heatmaps can show you the most valuable things that happen on your website. Like places here people click or don’t click (but were supposed to click). Phrases that users clicked on thinking that they’re links. Anger and frustrated clicks. You can also use heatmaps for debugging your website. For example, you’ll be able to spot clicks on broken links or missed opportunities to have links (dead clicks).

How to read a heatmap?

There is a one simple rule for you to follow: don’t take anything for granted. Working with heatmaps require a bit of time and commitment. Heatmaps, by default, show a generalized, summary view of user actions. To see more details and analyze specific use scenarios, you need to change heatmap settings.

You can for example:

  • change the type of device for which the image is displayed (desktop, mobile, tablet, smart TV, console, wearable, embedded browsers),
  • check out images for different types of events (clicks, rage clicks, mouse movements),
  • set time intervals that interest you,
  • change page resolutions,
  • examine single or grouped heatmaps.
Heatmap CUX

Adjust heatmap to your analytical needs

The default heatmap view in CUX is the desktop view. If you need a pixel perfect view you should select a required resolution in heatmap settings. You can start by finding out which screen resolutions are the most frequently used by your site visitors. Next, adjust the CUX heatmap settings to see what happens when people see your pages using this resolution.

See better, know more

You can use an advanced filtering option for a better insight into heatmaps. Play with opacity – increase and decrease the transparency of hot areas to adjust visibility. Change intensity to find precise user activity points. Increase intensity to see exact click points if your page generates a lot of events. Decrease it to see specific places if you’ve fewer events. Play with spread to focus on single areas (low spread for high traffic pages, high for low traffic pages).

Heatmaps CUX

Advanced options to read a heatmap

Why does a heatmap look messy?

It’s all about precision. If you’re looking at a nice heatmap with even borders you’re probably the victim of overgeneralization. Need an example? Let’s say you have a button on a page. The overgeneralized heatmap will show you clicks at the very center of it. But in reality the button rarely attract the mouse cursor to their center.

Grouped Heatmaps

When you read a heatmap you’ll rarely see even borders

In CUX we’d rather our heatmaps to look messy and at the same time show you specific clicks. The exact clicked places. The right birthplaces of your user’s frustrations. And – thanks to this untidiness – a whole new level of understanding your customers.

Making heatmap-based decisions

When people cannot access page elements, they won’t use them. If this concerns the “Buy now” button, it would be a bummer, wouldn’t it? Can you afford not to know that your conversion call-to-action doesn’t work? Probably not! Keep an eye out for heatmaps showing a button that often gets clicked close to its edges or on one side only. Think if this is an indication that you should change the element placement on the page.

Examine if numerous clicks on text are related to copying text. The most obvious indicators are clicks before a piece of text, for example, at the beginning of a line. This often happens for emails that aren’t active links, promo codes or street addresses. If that’s the case for you – try to make it easier for users to copy the text. Perhaps highlighting content is not about non-copyable elements, but simply visibility problems? Maybe you used too little contrast font that is invisible to users?

It sometimes happens that even images that aren’t linked receive clicks. Think of this as an unrivalled opportunity. Let’s say you have a fashion e-commerce. One day you find out that a static photo on a product page gets clicks. Where do the visitors click? Is this a watch, a bracelet, or a cardigan that is clicked. If you have it in stock, you’ve just found an excellent opportunity to cross-sell your products!

Mind the traps!

That may come as a surprise to you but heatmaps don’t show any dynamic elements! They’re always static snapshots of your page. That’s why you won’t be able to see elements like: pop-ups, tooltips, modal windows or drop-downs. However, we’ll show clicks that those elements received.

Heatmaps CUX

If you read this heatmap you’ll see clicks on the menu bar after its expansion

When you see unexpected hot areas, think if a dynamic or temporary page element appears there. Do not mislead those areas as rage clicks. Our algorithms understand your page behavior and can distinguish clicking on a dynamic page element and angry behavior.

Read also

Ready to start your journey with smarter analytics and UX automation? Drop us a line at

Want to harvest the freshest analytical crops? Sign up for the nourishing newsletter! Be careful! We may grow on you! 🥑 😉

Tags: , , , ,

Categorised in: ,