The complete guide for getting started with heatmaps | UXCam | Blog

The complete guide for getting started with heatmaps

Traditional analytics tools show ‘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 give 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 play, allowing you to make decisions based on understanding user’s actual experience with your product. Learn more about the differences here.  One of the key offering of Qualitative tools (including UXCam) are Heatmaps, which we will talk about in this post.


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

  • Where are users clicking (or not) and how are CTA’s performing ? (Click / Touch heatmap)
  • Which areas of the product are being viewed and used the most ? (Attention heatmap)
  • How far are users 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 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 to make informed decisions on repositioning, colorchanges etc.

UXCam Click HeatmapUXCam

What answers does the click heatmap give?

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

Scroll Heatmap

Scroll heatmaps show you what percentage of visitors are scrolling and until which position of your page. This allows you to make decisions on page content and layout to ensure your 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 a certain point.


What answers does the scroll heatmap give?

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

Mouse movement Heatmap

Mouse movement heatmaps highlight the areas where users read contents and engage on the pages, by displaying user’s  mouse movement. This is the closest alternative solution for expensive eye-tracking.

vwo-heatmap VWO

Which questions can mouse movement heatmaps answer ?

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

Attention Heatmap

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

Which questions does the attention heatmap 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.

Subscribe to our Newsletter

Looking to improve your app's UX? Subscribe to receive our top stories.