The complete guide for getting started with heatmaps


Traditional analytics tools shows ‘charts and graphs’ and answers your quantitative questions such as ‘What’ and ‘How’ but they fail to explain ‘Why’. Putting it another way, the traditional analytics tools gives you the holistic view of which part of your product needs attention, however, it doesn’t tell you which part of the page needs rework.

This is where qualitative analysis comes in plays, allowing you to make decisions based on understanding user’s actual experience with your product. Learn more about the differences here.  One the key offering of Qualitative tool (including UXCam) is Heatmaps, which we will talk about in this post.


Heatmap aggregates user interactions (touch/tap, swipes, pinches, scroll) with your product enabling you to answer questions such as:

  • Where in the product users are clicking (or not) and how are CTA’s performing ? (Click / Touch heatmap)
  • Which area of the product is being viewed and used the most ? (Attention heatmap)
  • How far users are investing on your content ? (Scroll heatmap)
  • What path are users taking to perform an action ? (Mouse movement heatmap)

To answer these questions, Heat map uses a color coded overlays to show the “attention areas”. Let’s look into these different types of heatmaps.

Type of Heatmaps

Click / Touch Heatmap

Click Heatmap shows where exactly people are clicking on your site allowing you make informed decision on repositioning, changing color etc. of Call-to-Action, improving conversion.

Click Tap Heatmap

Check it out: UXCam.


What can click heatmap answer ?

  • Where in the product users are clicking and what they are ignoring ?
  • Which call-to-actions are performing best ?
  • What features are being used the most ?

Scroll Heatmap

Scroll heatmaps shows you what percentage of visitors are scrolling till which position of your page. This allows you to make decisions on page content and layout to ensure user sees the content you are intending them to see.

Below is a screenshot of Hotjar’s Scroll heatmap showing you what percentage of visitors reached certain point.

Scroll heatmaps

Check it out: HotJar.

Questions scroll heatmap can answer ?

  • Which section on your page are users most engaged ?
  • Is the CTA placed in the area where users scrolls to ?
  • How to redistribute content and layout for maximum exposure ?

Mouse movement Heatmap

Mouse movement heatmap highlights the areas where users read contents and engage on the pages,  by displays user’s  mouse movement. This is the closest alternate solution for expensive eye-tracking and on a scale.

Mouse movement heatmaps

Check it out: VWO

Questions mouse movement heatmap can answer ?

  • Are users reading your contents ?
  • Which contents are being read the most ?
  • How to edit and distribute content for maximum interaction ?

Attention Heatmap

Attention heatmap shows you the most valuable areas on your page by tracking the amount of time a visitor stays on a region of that page. 

attention heatmaps

Check it out: ClickTale

Questions attention heatmap can answer ?

  • What’s most interesting for the user on a particular page ?
  • Where is the best position to place CTA ?
  • What sections could be removed or repositioned for maximum exposure
  • What’s the optimal length of a page ?

As a follow up to this, let’s look into various tools that can be used for heatmap generation and optimization in this follow up post.

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>