What Is a Heatmap?
A heatmap is a visual analytics tool that translates user behaviour data into a colour gradient overlaid on your actual web page. Rather than reading through tables of click counts or interaction logs, you can look at your page and immediately see which areas attract the most attention and which are being ignored. The colour scale runs from blue (low activity) through green and yellow to red (high activity), giving you an instant read of your page's visual hierarchy from a user perspective.
There are several distinct types of heatmap, each measuring a different aspect of user behaviour. A click heatmap records every location where users click or tap, making it easy to spot whether visitors are clicking on non-clickable elements (a sign of confusion), ignoring your actual call-to-action buttons, or engaging with unexpected areas of the page. A move map tracks cursor movement on desktop, which correlates moderately well with visual attention since people tend to move their mouse towards where they are looking. A scroll map measures how far users scroll before leaving, identifying the depth at which your content cuts off for the majority of your audience.
Popular heatmap tools include Microsoft Clarity, which is completely free and supports unlimited sessions, Hotjar, Mouseflow, and FullStory. All of these tools generate heatmaps by injecting a small JavaScript snippet into your website that captures interaction events and aggregates them into a visual overlay. Most also include session recording functionality, allowing you to watch individual user journeys to add qualitative context to the quantitative heatmap patterns.
Heatmaps are particularly useful when used alongside funnel analysis. Funnel analysis tells you where users drop off in a defined sequence. Heatmaps explain why, by showing what they were doing on the page just before they left.
Heatmap In Practice
A Pretoria-based financial services company runs a heatmap on their home loan application landing page after noticing a high bounce rate. The click heatmap reveals that a large number of visitors are clicking on a testimonial photo, expecting it to link to a full case study. The image is not linked to anything, causing confusion and frustration. The team adds a link to a detailed case study page from the image. Within two weeks, the bounce rate on the landing page drops by 14% and time on site increases measurably.
Another practical example comes from a Johannesburg retail brand running a product category page. The move map shows that users slow their cursor significantly over a price comparison table halfway down the page, yet the main call-to-action button sits below the fold where scroll data shows only 30% of visitors reach. Moving the primary CTA above the fold, directly beneath the price table, increases click-through rate to the product detail pages by 22%. These kinds of page-level layout decisions are nearly impossible to make correctly without visual behavioural data from heatmaps.
The types, and what each is actually good for
| Type | Shows | Best used to find |
|---|---|---|
| Click map | Where people click or tap | Non-clickable elements people expect to work |
| Scroll map | How far down the page people get | Content and CTAs below the point most people stop |
| Move map | Cursor movement on desktop | Rough attention, weakly correlated with reading |
| Attention or engagement map | Time spent per area | Which sections actually hold people |
Click and scroll maps carry most of the practical value. Move maps are frequently over-interpreted: cursor position is a poor proxy for where someone is looking.
Reading heatmaps without fooling yourself
- Segment by device. A combined desktop and mobile heatmap describes nobody. Mobile is the majority of South African traffic and behaves differently.
- Collect enough sessions. A few dozen produces a pattern that looks convincing and means nothing.
- Use them to generate hypotheses, not conclusions. A heatmap shows what happened; it never explains why.
- Pair with session recordings. The recording explains the behaviour the heatmap only summarises.
- Watch for rage clicks on non-interactive elements: reliable evidence of a broken expectation.
See session recording and our CRO service.
FAQ
What is the difference between a click heatmap and a scroll map?
A click heatmap shows precisely where users click or tap on a page, highlighting the most and least interacted areas. A scroll map shows how far down a page users typically scroll before leaving, revealing the cut-off point where most users stop seeing your content. Both tools complement each other and are often used together in conversion rate optimisation work.
Which heatmap tool is best for South African websites?
Microsoft Clarity is free and well-suited for South African small to medium businesses, offering click maps, scroll maps, and session recordings without a data cap. Hotjar and FullStory offer more advanced segmentation and are better suited to larger teams with dedicated conversion rate optimisation budgets. Both work with WordPress and custom-built sites common in the SA market.
How many sessions do I need for a useful heatmap?
Enough that the pattern is stable rather than driven by a handful of visitors. A few dozen sessions can look convincing and mean nothing; segment by device as well, because desktop and mobile behaviour differ substantially.
Are heatmaps better than analytics?
They answer a different question. Analytics tells you what happened at scale; heatmaps show how people interacted with a specific page. Use analytics to find the problem page and heatmaps to form a hypothesis about why.