Who this guide is for
Anyone with Clarity already installed who wants to start reading heatmap data and using it to make better page decisions.
Prerequisites
Microsoft Clarity installed and collecting data on your site. At least one to two weeks of sessions on the pages you want to analyse. If you have not set up Clarity yet, start with Guide 01.
What you will be able to do
Read the three heatmap types, identify the signals that actually matter, and make specific changes to page layout, CTA placement, and content structure based on what the data shows.
Time to review a page heatmap
Ten to fifteen minutes per page once you know what you are looking for. The decision-making process is faster than most people expect.
Start reading your own heatmaps
Clarity is free. Open your highest-traffic page in heatmap view, switch to mobile, and look at where the scroll depth drops off. What you find will surprise you.
Disclosure: This is not a paid promotion. I have no affiliate or commercial relationship with Microsoft or Microsoft Clarity. It is a tool I genuinely use across my own businesses and for clients. Views are my own.
The three heatmap types and what each one tells you
Each heatmap type answers a different question about visitor behaviour. You need all three to get a complete picture of a page.
Heatmaps use colour to represent the intensity of visitor behaviour — warm colours (red, orange, yellow) show where activity is highest, cool colours (blue, green) show where it is lower or absent. The same colour scale applies across all three types, but what that activity represents is completely different.
Heatmap Type 1
Click heatmap
Shows where visitors click most on the page — every click is recorded and overlaid on a visual representation of the page. Hot zones show what visitors are interacting with. Cold zones show what they are ignoring.
Also flags dead clicks: clicks on elements that are not interactive, which are a reliable frustration signal.
Use for: CTA effectiveness, navigation, content hierarchy
Heatmap Type 2
Scroll heatmap
Shows how far down the page visitors scroll before stopping. The colour gradient shifts from warm at the top (where all visitors start) to progressively cooler as scroll depth decreases.
The point where the heatmap transitions from warm to cool is roughly the point where most visitors stop scrolling — often called the fold line.
Use for: content placement, CTA depth, page length decisions
Heatmap Type 3
Area heatmap
Rather than individual element clicks, area heatmaps let you select a region of the page and see total clicks and the click distribution across everything within that region.
Useful for comparing sections of a page against each other, or for analysing complex components like navigation menus or feature grids.
Use for: section-level comparison, nav analysis, multi-element areas
How to access heatmaps and filter by device type
The device filter is not optional — mobile and desktop behaviour are different enough that combining them gives you an average that may not accurately represent either.
1
Go to Heatmaps in your Clarity project
From your Clarity dashboard, select “Heatmaps” from the left navigation menu. You will see a list of the pages on your site that have enough session data for a heatmap to be generated. Pages are listed with their URL and the number of sessions recorded.
Start with your highest-traffic pages — your homepage, main service or product pages, or whichever pages you most want visitors to convert on. Low-traffic pages (fewer than 200 sessions) will often show heatmaps that look sparse and are harder to interpret reliably.
2
Apply the device filter before reading anything
Before you interpret a single thing about a heatmap, switch the device filter. At the top of the heatmap view, you will see filter options for All devices, Desktop, Mobile, and Tablet. Select Mobile first.
For most business websites, mobile traffic is the majority. If you read the combined “All devices” view and then make a change based on it, you may be optimising for a visitor who does not represent your actual traffic mix.
3
Set the date range to capture enough data
The default date range in Clarity is typically the last 30 days. For low-to-medium traffic pages, check whether the session count shown is meaningful. If a page has fewer than 100 sessions in the selected range, extend the date range rather than drawing conclusions from thin data.
Clarity retains heatmap data for up to 13 months, so you can look back at longer periods when needed.
Reading scroll heatmaps: the fold point and what to do about it
The scroll heatmap is usually the first thing worth checking on any page — it tells you immediately whether visitors are even reaching the content you built to convert them.
Open a scroll heatmap on your most important landing page. Look at it in mobile view. What you are looking for is the colour gradient: where does it shift from warm to cool? That transition zone is the point where a significant portion of visitors stop scrolling.
Now ask yourself: where is your primary call to action, your contact form, or the key information that would give a visitor a reason to get in touch? If the answer is below the cool zone on mobile, a meaningful proportion of visitors are leaving before they ever see it.
Act on this
CTA or form sits below the colour transition
Your most important conversion element is below where most visitors stop. Move it up the page — or add a second instance of it higher up — so visitors encounter it before they decide to leave.
Act on this
Page turns cold before the halfway mark
Most visitors are leaving in the first half of the page. This usually means either the content in the first section is not compelling enough to keep them scrolling, or the page is longer than it needs to be.
Investigate further
Sudden cold zone part way through warm content
An unexpected drop in scroll depth mid-page often signals a section that is visually heavy, confusing, or causing visitors to feel the page has ended. Check that section in a session recording.
Note for context
Desktop stays warm much further down than mobile
Desktop visitors are reading more of the page. This is normal behaviour — it does not mean your page is broken. It means the content resonates with desktop visitors but may need restructuring for the mobile experience.
Do not mistake a footer for a content problem
A long footer on your site will show as a very cold zone at the bottom of every page heatmap. This is expected — most visitors are not scrolling to the footer intentionally. Do not interpret this as evidence that your content is failing. Look at where the transition happens in the main content body instead.
Reading click heatmaps: hot zones, dead zones, and dead clicks
A click heatmap answers two questions at once: what are visitors interacting with, and what are they expecting to interact with that is not actually interactive?
Open the click heatmap view on the same page. The first thing to look for is the distribution of click activity — where is the heat concentrated? Then look for what is missing: sections of the page where you would expect visitors to click but the heatmap shows nothing.
Act on this
Clicks concentrated on non-priority elements
If visitors are clicking heavily on a navigation link, social icon, or secondary piece of content rather than your main CTA, they are finding something more interesting than what you want them to do. Either reduce the prominence of the distraction or make your CTA more compelling.
Act on this
Your main CTA button shows low heat
If the button you most want visitors to click is cold compared to other elements, it is not visually prioritised enough, is positioned poorly, or the label is not compelling. Test changing the button label, colour, or position before assuming the offer itself is the problem.
Act on this
Dead clicks on images, headings, or text
Clicks on non-interactive elements tell you visitors expected those elements to do something. The fix is either making them interactive (linking images to relevant pages) or restyling them so they no longer look clickable.
Investigate further
Clicks on “wrong” links in navigation
If visitors are clicking a navigation item that seems unrelated to the page they are on, they may be confused about what the current page covers, or they are looking for something they cannot find. Check the session recordings for those sessions.
One thing worth knowing: Clarity shows dead clicks in the heatmap by default, but you can also see them specifically by filtering recordings for sessions with dead clicks. If you find a hot dead-click zone on a particular element in the heatmap, filtering recordings by that interaction will let you watch exactly what visitors were doing when they clicked it — which often reveals what they expected to happen next.
Reading area heatmaps
Area heatmaps are most useful when you want to compare how different sections of a page are performing relative to each other.
To use the area heatmap, switch to area view and draw a selection box around the section you want to analyse. Clarity will show you the total click count for everything within that area, and the distribution of clicks within it.
This is particularly useful for pages with grid layouts — service tiles, feature comparison sections, pricing cards — where you want to know which items visitors are engaging with most. A grid of four service cards, for example: area heatmaps can tell you quickly which service is drawing the most interest, which may inform how you order them or how much prominence you give to each.
It is also useful for analysing navigation menus. If you want to know which navigation items get clicked most, drawing an area over your navigation bar shows you the distribution clearly without needing to count individual click dots.
When to use area vs click heatmap
Use the click heatmap for an overall view of the page and to spot individual elements performing unexpectedly. Switch to area heatmap when you want to compare specific sections against each other, or when the page has complex components that are hard to interpret element by element.
Decision points: what to change and what to leave alone
Not every cold zone on a heatmap is a problem to fix. Here is how to tell the difference.
A common mistake after first seeing heatmap data is trying to fix everything at once. Most cold zones on a page are cold for understandable reasons — the footer is rarely visited by accident — and the changes that matter most are the ones where an expected interaction is not happening, or where an unexpected interaction signals visitor confusion.
Decision guide: act, investigate, or leave
If you see this, here is what to do
CTA button is below the scroll transition zone on mobileAct: Move it up or add a second instance
Dead clicks concentrated on a specific image or headingAct: Make it a link, or restyle it
Primary CTA is cold, secondary element is warmAct: Improve CTA prominence or reduce the distraction
Scroll drops off suddenly mid-page on mobileInvestigate: Watch recordings to see what is on screen at that point
Page footer is cold and receives no clicksLeave: Expected behaviour — not a problem
Desktop scroll depth is much deeper than mobileLeave: Normal — focus mobile optimisation on the top sections
Section of page is cold on a page with fewer than 100 sessionsLeave: Wait for more data before drawing conclusions
Clicks showing on an element you expected to be ignoredInvestigate: Visitors may be finding this useful — consider giving it more prominence
One change at a time where possible
Heatmaps show you what is happening, not definitively why. If you change three things on a page at once and performance improves, you will not know which change caused it. Where practical, make one change, give it two to four weeks, then check whether the heatmap shows different behaviour before making the next change.
Before and after: a real page change based on heatmap data
Here is how the scroll heatmap data translated into a specific change across the business sites — and what changed as a result.
Real example from the Carden Digital client portfolio
The contact form that most mobile visitors never reached
The page
Main service landing pages across several of the business sites — pages designed to generate enquiries, with the contact form positioned logically below the key selling points.
What Clarity showed
The mobile scroll heatmap transitioned from warm to cool well above the contact section on most pages. The majority of mobile visitors were not reaching the form. The click heatmap confirmed the form was receiving very low interaction — not because visitors were not interested, but because most of them were not seeing it.
The change
A contact button or short enquiry form was added much higher on each page — within one or two scrolls on mobile — alongside the original form which remained lower down for visitors who preferred to read first. Some pages also received a sticky “Get in touch” button fixed to the bottom of the mobile screen.
What changed
Subsequent heatmaps showed the new CTA element receiving meaningful click activity on mobile. Session recordings confirmed visitors were interacting with it earlier in their journey rather than leaving before reaching the original form position. Enquiry rates from the affected pages improved noticeably.
The limit
Clarity did not tell us whether the improvement was entirely caused by the CTA repositioning or partly by other changes happening at the same time. The heatmap data was directional evidence, not a controlled experiment.
What to measure to confirm the change worked
Making a change based on heatmap data is only half the job. Confirming whether it worked closes the loop.
Clarity itself is the primary tool for confirming whether a page change improved behaviour. After making a change, give the page two to four weeks to collect new data, then compare the heatmap against what you saw before.
| What you changed | What to check in Clarity | What counts as confirmation |
|---|---|---|
| Moved CTA higher on the page | Click heatmap — is the CTA now receiving more heat? | Noticeably warmer click activity on the CTA element compared to before |
| Shortened the page or moved key content earlier | Scroll heatmap — does the warm zone now extend further into the key content? | Scroll depth on mobile extending closer to or past the main CTA |
| Made a dead-clicked element into a link | Click heatmap — are dead clicks on that element now gone? | No dead click indicator on that element; clicks now showing as active link interactions |
| Removed or restyled a distracting element | Click heatmap — has click activity redistributed toward the primary CTA? | Primary CTA warmer; previously dominant secondary element cooler or absent |
Alongside Clarity, keep an eye on your enquiry or conversion data in whatever tool you use to track that — whether that is a form submission count, a Google Analytics goal, or a simple spreadsheet of leads received. Heatmap improvements confirm behavioural change. Conversion data confirms business impact.
If you want to go deeper into the visitor behaviour that heatmaps surface — watching individual sessions, filtering for specific frustration signals, and following up on what the heatmap data suggests — the next guide covers that in detail. See Guide 03: How I use Clarity session recordings to find conversion problems.
For the full context of how heatmaps fit into a broader website sales strategy, see my Microsoft Clarity overview.
Heatmap review checklist
Before you start
- Clarity has been collecting data for at least one to two weeks on this page
- Page has at least 100 to 200 sessions in the selected date range
- You have identified which page you are reviewing and why (what question are you trying to answer?)
Scroll heatmap review
- Device filter set to Mobile
- Noted where the colour transitions from warm to cool (the fold line)
- Checked whether the primary CTA or contact section sits above or below this line
- Compared mobile vs desktop scroll depth
- Noted any unexpected early drop-offs mid-page
Click heatmap review
- Identified the hottest click zones — are visitors clicking what you want them to?
- Checked the primary CTA button — is it warm, cold, or absent?
- Looked for dead click zones — elements getting clicks that are not interactive
- Noted any surprisingly warm elements that were not intended to be focal points
Action and follow-up
- Identified one to three specific changes to make based on the data
- Made changes one at a time where possible
- Set a reminder to check the heatmap again in two to four weeks
- Noted the before state (screenshot or written record) so comparison is possible
Start reading your own heatmaps
Clarity is free. Open your highest-traffic page in heatmap view, switch to mobile, and look at where the scroll depth drops off. What you find will surprise you.
Disclosure: This is not a paid promotion. I have no affiliate or commercial relationship with Microsoft or Microsoft Clarity. It is a tool I genuinely use across my own businesses and for clients. Views are my own.
