How to read a website heatmap: scroll map, click map and recordings, step by step

How to read a website heatmap, step by step

• Pick one page that has traffic and a goal, such as a product page, a checkout or a lead form.
• Wait for enough views. Contentsquare's guide advises at least 2,000 to 3,000 page views before drawing conclusions, because a few visits can make one odd session look like a hot spot.
• Read the scroll map first: where does the color change sharply, and is your main button or offer above or below that line?
• Read the click map next: are people clicking the button you want, or clicking things that are not links?
• Split the map by device, then by traffic source and new or returning visitors.
• Open five to ten recordings from the weak spot to learn why. Fix the top one or two issues, then rerun the map.

What the colors mean

Contentsquare's heatmap guide describes the usual scale: red and orange show high activity, yellow and green show moderate activity, and blue shows little or none. The scale only means something against your goal. A hot zone on your main button is good news. A hot zone on an image that is not a link suggests visitors expect it to be clickable, and a cold zone over your offer suggests they never reach it or ignore it.

Read the scroll map for where attention ends

A scroll map shows the share of visitors who reach each point of the page. A smooth shift from warm to cool is normal. A sharp change marks a point where many visitors stop, and the guide says such transitions often show where the most urgent work is. Nielsen Norman Group's 2018 eye-tracking study found about 57 percent of viewing time above the fold and about 74 percent in the first two screenfuls. So keep the main action and the proof for it high, and treat the fold as a place to check on your own pages, not as a rule.

Read the click map for ignored buttons and dead clicks

• Ignored button: a clear call to action with few clicks. Check whether it sits below the line where the scroll map turns cold.
• Clicks on non-links: visitors tap images, icons or text that do nothing. Make the element a link or change how it looks.
• Dead and rage clicks: Microsoft Clarity's docs list dead clicks and rage clicks as click map views. Repeated fast clicks usually point to something slow or broken.
• First clicks: the first thing visitors click shows what they expected to do. Plerdy's heatmap page lists first-click and click-path tracking for this.
• Mobile: check taps separately, because a button that is easy to hit on a desktop can be mis-tapped on a phone.

From the heatmap to a recording: verify the cause, then test the fix

A heatmap shows patterns, not causes. Contentsquare's guide says to use it to form a hypothesis and then check it with replays or tests. Plerdy's replay page suggests recording your highest-value page, filtering for visits that dropped off, watching five to ten replays for confusion, dead clicks and hesitation, fixing the top one or two issues and watching new sessions to confirm.

Note that iframes and canvas elements cannot be recorded, according to Plerdy's FAQ, so embedded forms can look blank in a replay.

Mistakes to avoid before you change anything

• Reading too early: a few days of data can mislead.
• Mixing desktop and mobile in one map.
• Looking only at clicks and ignoring how far visitors scroll.
• Treating the map as the final answer instead of a clue.
• Not looking again after a change.
• Choose a free tool in the best heatmap tools for a website, or see how Plerdy installs in what is Plerdy.