Heatmap examples: six patterns and what to do about each

What a useful heatmap example looks like

A useful heatmap example shows one pattern and the decision it leads to. Six patterns cover most pages: clicks on something that is not a link, a call to action with few clicks, a scroll cliff, rage clicks, a desktop and mobile split, and zones that come before a conversion. Each one below says what to look for and what to try next.

“Heatmap” also names charts such as a correlation matrix or sales by month in a spreadsheet. This guide is about website heatmaps, which draw visitor behaviour on top of a page.

1. Clicks on something that is not a link

A hot spot on a heading, an image or a line of text means visitors expect it to do something. On a click map it shows as a bright patch on an element with no link behind it. In Cuttl, a click that changes nothing within 1 second is flagged as a dead click, so these show up as a count as well as a colour.

The usual cause is a design that looks interactive: a product photo that suggests a zoom, a feature name that looks like a tab, a price that looks like a button. Two fixes are worth testing. Make the element do what visitors expect, or restyle it so it no longer looks clickable. Our guide to click maps covers how the counts are built.

2. A call to action that gets few clicks

A primary button that is cooler than the elements around it is a signal to check, not a verdict. Compare it with the elements that pull the clicks, such as navigation, a search box or a secondary link. If visitors click those and skip the main action, the page is sending them somewhere else.

Before changing the button, look at where it sits on the scroll map. A button that few people reach will look cold on the click map for a reason that has nothing to do with its wording. If the button is in view and still cold, test its label, its size or what sits next to it.

3. A scroll cliff

A scroll cliff is a sharp drop in the share of visitors between two rows of the scroll map. The page turns from warm to cool over a short stretch, which means something around that point makes people stop reading or leave.

Common causes are a full-width banner or a block of white space that looks like the end of the page, a heavy image that loads late, and a section that restates what the visitor already read. Move the important content above the cliff, or change the element that creates it. The scroll map guide explains how to read the percentages on the left edge.

4. Rage clicks on one spot

Rage clicks are a tight cluster of fast clicks on one element. Cuttl counts three or more clicks within 1 second in the same spot that got no response as a rage click. Fast clicks that each get an answer, such as a carousel arrow, are not counted.

On the heatmap this looks like a small, intense patch, often on a button that is slow, broken or disabled without saying why. The next step is to open the recordings behind the patch and watch what the visitor saw. The rage clicks and dead clicks guide lists the common causes and fixes.

5. A desktop and mobile split

The same page can have two different heatmaps. A menu that is easy to find on desktop may be hidden behind an icon on mobile, and a long page reads very differently on a small screen.

Filter the map by device before drawing a conclusion. If the pattern is only on one device, fix it for that device. If a pattern appears on both, it is more likely a content or offer problem than a layout one.

6. Zones that come before a conversion

A zone map groups the page into areas, such as the size picker, the reviews or the shipping note, and shows how often visitors who used each area went on to convert. It answers a different question from a click map: which areas go with success, where a click map shows where people click.

If visitors who use a feature convert more often than the page average, the feature may deserve a more prominent place. Treat it as a lead, since the visitors who engage are often the ones already likely to buy. The follow-up is a test that moves the feature up and compares the result with the original. Cuttl’s Web Experiments turns a finding like this into an A/B test.

Heatmap examples in Cuttl

In Cuttl’s Journey Insights, a page’s heatmap switches between click, scroll and zone views. Heatmaps use all of a site’s traffic and can be filtered by device, channel, campaign, country, segment or A/B test variant, with before and after views.

• Each page shows one version of the page at a time, including past versions.
• Navigate opens menus, tabs and accordions as visitors saw them, so clicks inside them are visible.
• Saved views open in one click or arrive daily or weekly in Slack.
• Heatmaps download as an image or as a CSV list of clicked elements.

AI assistants connected through the Cuttl MCP server can read the same heatmap readouts. Our guide to heatmaps for menus, tabs and accordions shows how the versions work.

Common questions