Select Page



Heatmaps visualize where users are clicking. This helps understand what may be hindering product goals and and help identify areas of improvement.

These are useful when we want to measure:

  • User Actions: Where are users clicking vs. where we want them to click (e.g. are they seeing the “Buy” link/button).
  • Abandonment: Where are users getting stuck and leaving the site/app vs. staying to complete the desired “Call to Action”.
  • Attention: Where are users actually looking vs. where we want them to look.

How to Use


  1. Choose a screen we want to analyze for something specific (e.g. Clickthrough rates for the “Free Trial” on the top navigation).
  2. Set up and configure using a heatmap tool.
  3. After a period of time (e.g. 1 day, 1 week), check the analysis output of the heatmap tool.
  4. “Red” hostpsots are high areas of where users are clicking; “Yellow” hotspots are are medium areas and “Blue” are low areas.

One of the goals of this analysis was to understand why there is low conversion rates for users to sign up for a “Free Trial”, which according to the heatmap has a low clickthrough rate on the top navigation.

In this example, high areas of clicking are on the

  1. Top navigation.
  2.  Parts of the image in the main part of the screen.
  3. Headline image words “products” and “target”.

The Heatmap also helps with the analysis of other questions, such as:

  1. Where should the most important content be placed?
  2. Do better call to action UI elements need to added and where?
  3. What’s the best way to use images and videos?
  4. Where users getting distracted?
  5. What are better ways to use images and other rich media?
  6. Does messaging and words need to be changed for clearer understanding by users?