Research method
Heatmaps
Heat maps visualise on-site behaviour by representing clicks, hover and mouse movement with colours overlaid on a screenshot of the pages of a website. In general red indicates an area of high engagement (either clicks, hovers, or mouse movement) and blue indicates "cold" areas of low engagement. Heat maps are generated by a tool added into your website code. Heat map tools include Hotjar, Content Square and Full Story.
When to reach for it
Visualise how users behave on specific pages on the website. Understand which elements on the page are drawing users attention and which are being missed. Dig deeper into friction points / engagement with specific pages/elements.
Heatmap analysis can be beneficial for gathering an overall understanding of how users are interacting with your website, as well as digging into interactions with specific pages or elements.
Heatmaps can also be used to compare on-page behaviour between different variations of an experiment, which can be beneficial from an analysis perspective.
Strengths and limits
Pros
Visualise real on-page behaviour with no research bias; users don't specifically know they are being recorded.
Helps bring other data such as digital analytics numbers "to life", by providing a more visual representation of the data. For example, Analytics might show a high exit rate from the basket page, session recordings can help explain why this is happening by showing users interacting with the basket (and potentially experiencing issues).
Heatmaps are an amalgamation of group behaviour, e.g. they represent trends from a large sample of users. As such, you can analyse large scale user behaviour relatively easily.
Cons
Heat maps are open to interpretation, since there's a lack of explanation of the behaviour. You may see high or low engagement with a specific element, but you won't necessarily know why there is high or low engagement.
Heat maps can be prone to technical issues. It's important to be aware of the types of issues that can occur, for example, usually the tool will take a screenshot of the page from the sample user and then overlay the data which represents 100s or 1000s of users on that screenshot. That screenshot may not be representative of exactly what every user sees. Dynamic elements can also cause technical issues with heat maps; e.g. you may see high engagement on the main homepage banner, but this could actually represent engagement with the main navigation drop-downs. It's important not to take everything you see as 100% truth, if you see something unusual or that you can't explain, it may be indicative of a technical issue that should be investigated.
Practical considerations
Analysis & Interpretation
As with session recordings, it can be beneficial to gather multiple people together for analysis and interpretation of heatmaps to hypothesise about why this behaviour might be happening. Since there is no way of knowing the truth at this stage, it can help to have multiple points of view.
Tools
Tools include Hotjar, Content Square, Full Story and Microsoft Clarity. These tools have a very wide range of price points, typically Hotjar was the tool of choice due to it's reasonable price point, but this has increased in price more recently. Microsoft Clarity offers a free solution.
Common tools
Go deeper
Recipes that use this method
A method earns its value when its signal corroborates others. Here is where this one does its work.
Last updated
.svg)
