Practical guide

What is a heatmap used for on a website?

A heatmap shows where visitors click, scroll, pause and, to some extent, what they ignore on a page.

Used correctly, it indicates where to begin an optimization without claiming to explain why a behavior exists.

Illustration · Example
/your-offer/
High-stakes conversion page
CTA
Value proposition
CTA
Clients
CTA
CTA
Reading a heatmap
High-click zones
Scroll depth
Missed click · suspicious zone
Low-read zone · cold
Missed click · 47 attempts in empty space
Scroll depth · 62% reach section 2
CTA · Hottest zone
Same page visualized as a heatmap — click zones, scroll depth and a suspicious area of repeated clicks.
What it shows

What a heatmap can actually reveal

It does not give "the truth" about a page. It provides a probabilistic reading of three distinct behaviors, each answering a different question.

Clicks & interactive elements

Where are visitors trying to act?

A click map highlights buttons, links, visuals and empty areas that visitors attempt to activate — including those that are not clickable.

142
clicks · CTA zone
Scrolling & reading

How far down is the page actually read?

The scroll map shows the share of visitors who scroll down to each section. If the drop-off occurs right after the hero, the opening promise is often not delivered.

100% · hero read
62% · end of section 1
7% · form
Abnormal patterns

When a behavior is not normal

Many clicks in empty space, a dense zone of repeated clicks on the same element, frequent backtracking: these signs almost always indicate an area to investigate.

Illustration · Example
Suspicious repeated-click zone
Example · scroll depth

A page that "works" can still lose half its visitors before the proof section

Here is a common pattern observed on long pages. These figures are not measured: they simply serve to show what a scroll map can reveal in two seconds.

    • 1
      Main section
      40%
      Highest reading density after the hero
    • 2
      Proof (references, clients)
      18%
      Frequent drop-off if proof arrives too late
    • 3
      Form / Final CTA
      7%
      Visible by a minority of visitors

Roughly 40% of visitors reach the main section. A large share is lost immediately after the hero.

Roughly 18% make it to the proof section. If proof is needed to convince, it must arrive early enough.

Roughly 7% reach the bottom of the page where the CTA or final form typically sits.

What it does not tell you

What a heatmap does not tell you

  • Location ≠ cause

    It does not tell you why visitors click or do not click.

    A cold CTA could be a wording, position, promise or context problem — the heatmap shows the zone, not the cause.

  • Aggregate ≠ individual

    Nor does it tell you who is clicking.

    A strong signal on a button could come from 3% of qualified visitors, or from a spike of unqualified traffic — two very different situations.

  • Heatmap ≠ decision

    It is not an automatic decision tool.

    Replacing a CTA because its zone is 'hotter' is often a mistake if the real issue lies in the offer or the page promise.

Three roles, not a ranking

Analytics, heatmap and session replay each serve a distinct purpose

They do not compete. They address three different moments of the same question.

What happened?

Analytics

Aggregate · Macro level
  • Visitors, pages viewed, bounce rate, exits, conversions.
  • Useful to identify whether a problem exists and at what scale.
  • Does not tell you exactly where, or in what order.
Where did it happen?

Heatmap

Location · Meso level
  • Click zones, scroll depth, cursor movement.
  • Useful to pinpoint precisely where a page loses or retains visitors.
  • Does not tell you why or the exact sequence a user followed.
How did it happen?

Session replay

Sequence · Micro level
  • Anonymized recording of a few individual user journeys.
  • Useful to understand hesitation, backtracking, friction on a field.
  • Should remain a qualitative read, not a general statistic.

You often start with Analytics to detect a problem, move to a heatmap to locate it, then use replay — or another qualitative read — to understand the how.

From measurement to decision

A heatmap only has value when linked to a testable hypothesis

An interesting read without action is rarely useful. A heatmap gains its full value as the starting point of a structured sequence.

  1. Step 1

    Observe

    A heatmap shows, for example, that half the visitors do not scroll past a specific section.

  2. Step 2

    Define a question

    Is it the headline that poorly teases what follows, proof that arrives too late, or the hero that ends on the wrong promise?

  3. Step 3

    Formulate a hypothesis

    "If we more clearly tease the proof in the hero, scroll depth for that section increases."

  4. Step 4

    Modify with intent

    Change one thing at a time, or one coherent set, so that the impact read remains honest.

  5. Step 5

    Measure the impact

    Look at the metric that motivated the change: scroll depth, click-through rate on the CTA, final contact rate.

  6. Step 6

    Run an A/B test if useful

    If volume allows and the stakes justify it, an A/B test compares two variants more robustly than a simple before / after comparison.

Heatmap · A/B testing

A heatmap is not an A/B test, and vice versa

Generate a hypothesis

The heatmap

It reveals an odd zone, a scroll drop-off, a perceived point of friction. From there you decide what to test and why you believe a change will deliver results.

Verify a hypothesis

The A/B test

It compares two versions under conditions that are as comparable as possible. It is useless if you do not first know what to compare — and that is where the heatmap comes in upstream.

Which pages should you use a heatmap on?

  1. High-conversion-stakes pages: offer page, service page, campaign landing page.
  2. Pages that centralize contact: long form, contact page, quote funnel.
  3. Important reference pages: client case studies, pricing, methodology, trust pages.
  4. Any page with enough traffic volume that an average read makes sense.
  5. Pages where you already suspect a strong problem but cannot pinpoint it precisely.
  6. Conversely: low-traffic pages, legal or purely administrative pages generally do not justify this analysis cost.

Do you need a lot of traffic for a heatmap to be useful?

Low volume does not render a heatmap useless — it simply changes what you can legitimately infer from it.

A few dozen visitors can already reveal an extremely repeated behavior: same CTA consistently missed, same section ignored, same block mistaken for a button.

On the other hand, for subtle differences — a gain of a few points on a CTA — low traffic rules out any reliable conclusion. In that case it is used more as an observation tool than a measurement.

Some common tools

  • Hotjar, a widespread tool for a light first setup.
  • Microsoft Clarity, often chosen for its accessible integration and low cost.
  • Plerdy, Smartlook, PostHog and other general-purpose tools also offer heatmap features.
  • More advanced solutions exist for teams with structured measurement stakes.

The tool matters less than the method with which you read it. Two teams can look at exactly the same heatmap and draw opposite conclusions depending on whether it is used to confirm a bias or to update a hypothesis.

Practical intervention

You already have the data, but not the implementation?

Many teams already have an analytics tool — and sometimes a heatmap tool installed for months — but do nothing with it due to lack of time, method, or technical implementation.

We intervene at two concrete levels: correct installation (events, target pages, trigger thresholds) then a structured read that helps identify what to change rather than rewriting at random.

Practical intervention

Not sure where your page is losing visitors?

Before moving blocks or rewriting an entire page, it is often better to observe concretely what is read, ignored, or clicked by mistake.