Quick answer: Heatmaps aggregate visitor behaviour on a page into colour overlays: warmer areas usually mean more clicks, attention or scroll depth depending on the map type. Use them to spot ignored calls to action, confusing clickable-looking elements and drop-off depth. Always combine heatmap evidence with analytics and, when you can, A/B tests. A bright spot means interaction, not automatically success.
Heatmaps are popular because they feel intuitive. You open a page picture covered in red and blue and think you understand users. Sometimes you do. Sometimes the map is misleading. Reading heatmaps well is a conversion skill, not just a screenshot habit.
This guide explains the main heatmap types available in tools such as Hotjar, Crazy Egg and similar products in 2018, how to interpret them, and how to turn findings into improvements.
Types of heatmaps
Click maps show where people click or tap. Useful for seeing whether buttons get used, whether nav labels attract clicks, and whether non-linked elements look clickable.
Move maps track where the cursor moves. On desktop, movement can correlate loosely with eye attention, but it is not the same as eye tracking. Treat move maps as directional, not precise.
Scroll maps show how far down the page people reach. Colour bands indicate the percentage of sessions that reached each depth. Essential for long landing pages.
Attention maps (in some tools) combine signals into a model of where people spend time. Understand the vendor’s definition before you bet a redesign on it.
On mobile, tap maps replace mouse clicks. Always segment desktop and mobile when the layout differs.
What heatmaps are good for
- Finding false affordances: big images or underlined text that look like links but are not
- Confirming that a primary CTA is ignored
- Seeing that important content sits below where most people scroll
- Comparing behaviour before and after a layout change
- Spotting rage-click patterns (repeated clicks in one spot) when your tool supports it
They are weaker at explaining why. For motive, use session recordings, surveys and interviews alongside the map.
How to read a click map without fooling yourself
- Check the sample size. A map built on 40 visits is mostly noise. Wait for enough sessions that patterns stabilise, especially on lower-traffic B2B pages.
- Segment. New vs returning, mobile vs desktop, paid traffic vs organic. Mixing everyone can blur the story.
- Compare to page structure. A red blob on the logo often means people click home to escape. That is a scent of confusion, not logo popularity as a brand win.
- Watch for dead clicks. Clicks on static elements suggest unmet expectations.
- Do not assume red equals conversion. Clicks on a carousel arrow are not the same as clicks on “Request a quote”.
How to read a scroll map
Scroll maps answer: how far do people get?
- If 80% never reach your pricing section, either move pricing up or shorten the content above it.
- If people scroll to the footer quickly with few clicks, the page may not be engaging, or it may be very short.
- Fold lines are device-dependent. There is no single “the fold” in 2018. Use the scroll map’s percentage bands rather than a mythical 600px rule.
Pair scroll depth with conversion goals in analytics. Deep scrolling on a blog post can be good. Deep scrolling past an ignored CTA on a landing page can mean the offer is unclear.
Common misinterpretations
“Nobody clicks the footer links, so remove them.” Footer links are often maintenance and SEO aids. Low clicks do not automatically mean remove; it means they are not primary conversion paths.
“The map is blue on my new section, so people hate it.” Blue may mean fewer clicks, not hatred. The section might be informational. Check time on page and goal completions.
“We should put everything in the red hot zone.” Crowding the top with every message creates noise. Hierarchy still matters.
“Heatmaps replace A/B testing.” They generate hypotheses. Statistical significance in tests still matters when you validate changes.
From heatmap insight to action
A simple workflow:
- Observe a clear pattern (for example, high clicks on a non-linked product image).
- Form a hypothesis (“Making the image link to the product page will increase product views”).
- Implement a small change or run an A/B test in Google Optimize or your testing tool.
- Measure primary metrics (clicks, leads, revenue), not only a prettier heatmap afterwards.
- Document what you learned.
Examples of changes heatmaps often justify:
- Turning clickable-looking elements into real links
- Moving primary CTAs higher on mobile
- Removing or redesigning distracting secondary buttons
- Rewriting nav labels that get almost no clicks despite high importance
- Reducing form fields when people click submit but abandon (combine with form abandonment analysis)
Privacy and implementation notes
Heatmap tools load scripts that record behaviour. Configure them to mask sensitive fields (passwords, payment inputs, health data). Update your privacy policy and cookie consent approach as required for your audience, especially under GDPR for EU visitors. See cookie consent banners.
Exclude your own office IPs so staff clicks do not skew the map. Do not record pages where confidential customer data is visible unless you have a tightly controlled setup.
Tooling in 2018
Hotjar, Crazy Egg, Mouseflow and similar products offer heatmaps plus recordings. Analytics platforms show clicks less visually; Google Analytics alone is not a full heatmap tool (though enhanced measurement and page analytics add some click context in certain setups). Pick a tool you will actually review monthly. An unused heatmap subscription is wasted budget.
FAQ
How long should I collect data before reading a heatmap?
Until you have enough sessions for the page type. High-traffic homepages may be ready in days. Niche B2B landing pages may need weeks. Prefer more data over reacting to a single busy afternoon.
Should every page have a heatmap?
No. Focus on money pages: home, pricing, key service pages, checkout steps and major landing pages.
Can heatmaps hurt site speed?
The script adds some weight. Load it asynchronously and evaluate the performance trade-off on mobile.
Heatmaps work best as part of a small monthly habit: pick one priority page, collect enough sessions, write down three observations, and ship at least one improvement or test. Tools that only produce screenshots for slide decks rarely change revenue.
See behaviour, then test
Heatmaps are a mirror, not a strategy. Read click and scroll patterns carefully, segment the data, turn findings into hypotheses, and confirm improvements with analytics and tests. That is how heatmap tools earn their place in CRO work.
If you want help reading behaviour data and turning it into clearer pages and stronger conversion paths, our Turn visitors into customers service covers UX review, testing and practical on-page changes.
