What is a heat map? Learn the important element of qualitative analysis

May 19 2022

The heat map is a static image showing qualitative data on your customer’s engagement on the store’s website. It takes the form of a screenshot of your website, marked with warm or cool colors.

Depending on the map we are dealing with, it may show colored areas of increased click intensity in a given place – these are warm areas. In the case of scroll maps, the color temperature shows how deeply the users scroll your page.

Heatmaps look very attractive, but require analysis. The ability to draw conclusions from heatmaps is very important, because our actions are to contribute to the optimization of conversion. Is this a new topic for you? Read on to find out how to meet user expectations for your website!

What do the colors in the heat map mean?

Red – the most popular elements

Yellow – areas of less interest

Blue or green – places visited least often

Percentage of People Who Don't Reach the End of the Page:

81%

What are the types of heatmaps?

The heat map will help you verify the behavior of your website users in more detail.

There are many types of heatmaps, but the most popular are clickmaps and scroll maps. Among the click maps, we can distinguish (depending on the capabilities of the tool we use) classic Click Maps, Rage Click Maps and Death Click Maps.

Click Maps – a map that will show you all the places where users are engaged by clicking.

Rage Click Maps – we will see all the so-called angry clicks, i.e. places where the user experienced frustration, made quick clicks on a given element in a short time. An example is an element that does not work – because it is not clickable, although its appearance suggests it. Another situation is the moment when the user clicks on a given element, but its operation has been disturbed (it does not work or works with a delay). The Rage Click Map is here a simple hint to spot problematic elements for your users.

Death Click Maps – maps of dead clicks – will present all clicks on elements that do not have any functions (they are completely static) – on the map of death clicks we will also see rage clicks made on non-clickable elements.

Scroll Maps – Scroll Maps illustrate how deeply your users are scrolling your page – especially what percentage of your users reach the bottom of the page.

Desktop-Clicks-Videp
An exemplary click map where we can see that the most frequently clicked element is a video presenting the product.
Heatmap helps you better understand users and locate problem areas, and when combined with other analytical data, it helps to draw really valuable conclusions.

Where can you see heat maps? How to use them?

To generate a heat map, we naturally need to use analytical tools, for example, MS Clarity (completely free, a tool from Microsoft), Hotjar, Crazy EGG, or Cux. There are a lot of tools and everyone will find something for themselves, most of the paid tools have trial versions or free plans with limited conditions.

The graphic shows the analytical tools that we have used in our work so far.

What does heat map analysis provide?

Thanks to heat maps, you can check if your users:

  • They reach important places (for example – when you place important elements too low, the scroll map will tell you whether users reach this place at all).
  • They find buttons and links in the store (click maps will indicate the elements that users click on and with what frequency).
  • They do not focus on irrelevant elements (then you have a signal what is worth removing to avoid distraction, e.g. in the basket).

There is no doubt that heatmaps are very useful. Monitoring user behavior and appropriate analysis of the presented data is the first step that will allow you to detect errors on the website even with a small financial outlay. Remember that they should serve us at every stage of the project. Not only at the beginning to catch bugs, but also with continuous development and improvement.


You can start working on this topic yourself, or outsource this task to professionals. Heat maps require the correct configuration of the selected tool, then the formulation of appropriate conclusions from them  and ultimately implementation of the planned changes by developers. It’s not enough to just look at the beautiful colors – what’s important here is taking further action. You are only one step away from success, or maybe one button? Decide for yourself which direction you will take.

Malgorzata Urbanczyk

UX specialist. She audits the websites of online stores. Carries out analyzes of user behavior with the help of qualitative data in order to optimize the conversion as much as possible.

see also

How to find a good copywriter?

Why does your brand need a good copywriter? If you run an online business,…

Read more

Why don’t customers buy from your store?

Your store has traffic but your customers aren’t buying? You closely observe them in…

Read more

Brand rebranding – a recipe for long-term growth?

What is rebranding? Rebranding is a process heavily supported by a marketing strategy and…

Read more