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) 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 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 decisions on repositioning, changing color etc. of Call-to-Action, improving conversion.
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 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.
Questions scroll heatmap can answer ?
- 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 heatmap highlights the areas where users read contents and engage on the pages, by displaying user’s mouse movement. This is the closest alternate solution for expensive eye-tracking.
Questions mouse movement heatmap can answer ?
- Are users reading your content ?
- What content is being read the most ?
- How to edit and distribute content for maximum interaction ?
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.
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.