HeatmapsBehavior analyticsWeb attention maps, Mobile touch maps, Replay context

Heatmaps should explain attention, not common sense

Use web attention maps and mobile touch maps to understand what users notice, skim, miss, and repeat.

Rejourney web attention map over the Web SDK documentation page — Look for the non-obvious hotspotAttention maps estimate what a web visitor consumed; touch maps show where app users tapped, retried, or hit dead zones.

A heatmap is useful only when it tells you something surprising

The weak version of heatmaps is a pretty red overlay that proves people clicked buttons. Useful heatmaps answer a harder question: did users notice the copy, controls, layout, and page sections that were supposed to guide them?

Mobile touch maps are still valuable for repeated taps, dead zones, thumb reach, and controls that look interactive but are not. They become noisy when every obvious button is treated as an insight.

Web attention maps can go further because web pages have scroll depth, viewport exposure, reading patterns, pointer movement, and dense content. They can show a skimmed hero, an ignored docs warning, or a pricing block that absorbed attention before conversion.

Separate attention from interaction

A hot button is usually not a discovery. Buttons are supposed to get touched. The more useful heatmap question is whether users noticed the content and controls that were meant to guide the next action.

Use attention maps for web pages where copy, layout, scroll depth, and content exposure matter. Use touch maps for mobile screens where taps, repeated taps, reachability, and dead zones matter. Mixing the two creates confident but sloppy conclusions.

Use attention maps for docs, pricing, onboarding, checkout, settings, and content-heavy web pages.
Use touch maps for repeated taps, dead zones, reachability, and gesture confusion.
Treat a cold required section as a comprehension problem until replay proves otherwise.

Heatmap dashboardReview route-level heatmap evidence beside traffic, replay, and product context.

Web attention maps need a model, not mouse paint

Web attention maps work because the browser can provide page exposure, viewport changes, scroll depth, pointer behavior, content density, and reading priors. That combination can reveal skimmed hero text, ignored docs warnings, or pricing copy that absorbed attention before conversion.

The model is deliberately conservative. Nielsen Norman Group's F-pattern research informs the reading prior, Chartbeat's engaged-time work keeps the signal tied to active exposure, and cursor studies keep pointer movement in the model as a useful but noisy proxy.

That is why the score does not simply paint every mouse trail. Very short gaps are ignored, long idle gaps are capped, dwell is split between cursor evidence and reading bands, and click or rage evidence is layered in as interaction context.

Attention-map scoring model

d_i={0if Δt_i < 150 msΔt_iif 150 ms ≤ Δt_i ≤ 5 s5 sif 5 s < Δt_i ≤ 20 s0.35 · 5 sif Δt_i > 20 s

(1)

p_i=(x_i + s_xw_page,y_i + s_yh_page)

(2)

ρ_jk=r_jc_kΣmΣnr_mc_n,A_i=0.45d_i+0.55d_iρ_jk

(3)

W_b=Σi∈bA_i+40M_b+1600C_b+2800R_b

(4)

I_b=min(1,(W_bmax_kW_k)^0.72)

(5)

Here r and c are weak F-pattern row and column priors, while M_b, C_b, and R_b are bucketed movement, click or touch, and rage-click evidence. The result is a normalized attention estimate, not literal eye tracking.

Rejourney web attention map over a Next.js fixture page — Web attention mapUse web attention maps to diagnose what page content visitors skimmed, missed, or focused on.

Touch maps are useful when they surprise you

Touch maps answer a narrower question: where did users put their fingers, tap, or click? On mobile, that is still valuable for dead zones, repeated taps, thumb reach, bottom navigation friction, gesture confusion, and controls that look interactive but do nothing.

The signal becomes interesting when touches cluster on a non-control, repeat after no feedback, or appear where the UI should have guided the user somewhere else. A map full of red around primary buttons is mostly proof that the UI has primary buttons.

Look for repeated taps on disabled, loading, or non-interactive UI.
Check whether users tap labels, cards, images, or empty areas that look tappable.
Pair touch hotspots with replay before filing a ticket.

Rejourney mobile touch heatmap on a product discovery screen — Mobile touch mapUse touch maps for taps, dead zones, repeated touches, and gesture confusion.

Open replay before writing the ticket

A heatmap shows the population pattern. Replay explains the individual moment. When attention pools around the wrong content or touch events cluster on a confusing control, open sessions from the same route, screen, version, device, and outcome.

That keeps the engineering handoff concrete. Instead of reporting that a map is red, the ticket can say users skimmed the hero copy, missed the installation callout, repeatedly tapped a non-interactive card, or reached the CTA only after a failed request changed state.

Attach the map type: web attention map or mobile touch map.
Attach the selected route, screen, release, device, and segment.
Include at least one replay that shows the behavior before and after the hotspot.
State whether the likely fix is copy, layout, feedback, interaction, or instrumentation.

Heatmap dashboardReview route-level heatmap evidence beside traffic, replay, and product context.

Use heatmaps after a release

Heatmaps are especially useful after a change ships. On web, compare whether attention moved toward the intended headline, form, callout, or CTA. On mobile, compare whether repeated taps moved away from confusing areas and toward responsive controls.

If attention improves but conversion does not, the problem may be trust, pricing, performance, backend reliability, or the next step in the journey. If conversion improves without a visible attention shift, the fix may have removed friction rather than changed what people read.

Compare the same route or screen before and after the release.
Separate web attention movement from mobile touch movement.
Check journeys and replay when the heatmap improves but the outcome does not.

Implementation notes

These are the checks another engineer should be able to use before trusting the feature in production.

Keep product language precise: attention maps are web-only; touch maps are interaction maps.
Label routes and screens consistently so maps can be compared across releases.
Use touch maps for taps, repeated taps, dead zones, reachability, and gesture friction.
Use attention maps for skimmed copy, ignored callouts, missed sections, and content hierarchy problems.
Attach replay samples before turning a heatmap hotspot into an engineering ticket.
Mask sensitive page and screen regions before sharing heatmap screenshots broadly.

When to use a lighter signal

You only need tap density on a mobile screen.
You are not evaluating copy, scroll depth, content exposure, or web page comprehension.
You do not plan to open replays from the same route or release before filing tickets.

Questions teams usually ask

What is the difference between attention maps and touch maps?

Attention maps are web-only maps that help show what page content users noticed, skimmed, or ignored. Touch maps show where users tapped or touched, especially on mobile screens.

Why are attention maps more useful for web pages?

Web pages have reading order, scroll depth, hero copy, docs sections, pricing blocks, and content exposure. Attention maps can reveal whether those areas carried the user's focus, while touch maps often turn obvious buttons red.

When should I use mobile touch maps?

Use touch maps to find repeated taps, dead zones, gesture confusion, crowded controls, and mobile navigation friction. Pair them with replay before treating a hotspot as a product problem.