Heatmaps

Heatmaps are quantitative visualisations that aggregate user interactions on a web page — clicks, cursor movement, scroll depth, or eye gaze — and render them as a colour gradient (red = highest density; blue = lowest). In ecommerce, heatmaps are used to diagnose layout, content, and navigation problems across high-traffic pages such as PDPs, category pages, checkout, and landing pages.

Types

Heatmap vendors distinguish six main types, as documented by Hotjar/Contentsquare (as-of 2025) and confirmed by a January 2026 UX education video:

Type	What it measures	Reliability notes
Click map	Where users click (or tap on mobile)	High — records actual user actions
Scroll map	How far down a page users scroll; percentage reaching each depth	High — most reliable mouse-tracking type per CXL
Move map (hover map)	Where the cursor moves, used as a proxy for visual attention	Low — weak proxy for gaze (see Contradictions)
Rage-click map	Clusters of rapid repeated clicks indicating user frustration	High — reliable frustration signal
Attention map	Combines scroll depth and viewport size to estimate what is actually visible	High — most useful type per CXL 2021
Zone-based / Engagement zone	Proprietary (Contentsquare): divides page into discrete segments and overlays revenue, conversion rate per click, or hover rate per zone	Vendor-specific

Eye-tracking heatmaps (from lab studies) are a distinct data type — they track actual gaze, not mouse cursor position. NNGroup and Baymard use lab eye-tracking for their own research; this is not available in standard web analytics deployments. (Sources: Contentsquare guides Nov 2025, Feb 2026; Hotjar/Contentsquare 60-second explainer ~2025; NNGroup Heatmaps and Visual Analytics course curriculum 2026; CXL 2021 [stale-risk])

How practitioners use them

Contentsquare (Nov 2025) identifies five documented scroll-map use cases for ecommerce:

Find where attention is lost (sharp gradient change = content not being seen)
Spot false bottoms — page design elements that signal the page has ended, causing premature stop
Identify what is above the average fold (segmented by device type)
Determine findability — deep scrolling without conversion can signal users cannot locate what they need, not that they are engaged
Cross-device experience comparison (mobile vs desktop fold lines differ substantially)

Click map use cases:

Detecting clicks on non-link elements (images, text, decorative buttons users expect to be interactive)
Identifying navigation confusion — which elements draw attention away from intended CTAs
Segmented views: converters vs. non-converters to see if purchase behaviour clusters differently (CXL 2021 [stale-risk]; CXL 2022/2023 [stale-risk])

Zone-based heatmaps (Contentsquare proprietary): overlay revenue contribution, conversion rate per click, and conversion rate per hover on discrete page zones — enabling direct revenue attribution at the element level rather than visit-level inference.

Ecommerce case studies

All case studies from Contentsquare platform (dates of individual studies not specified):

Brand	Page / problem	Heatmap type	Finding	Outcome
The North Face	Hero banner CTAs below fold	Scroll map	CTAs not seen by most users	Redesign → +50% CTA exposure rate
De Beers	Mobile PDP, sticky CTA missing	Scroll map	"Add to Bag" below average mobile fold	Sticky CTA added → +10% conversions
MyDeal (AU)	Checkout payment form	Rage-click map	Credit card field bug identified	Bug fixed → +2% conversion rate
Clarks	PDP width selector	Zone-based	Width option not selected (required for checkout)	Pre-selected single widths → £900K (~$1.1M) annual revenue
Etam	Category listing	Zone-based (Attractiveness filter)	Subcategories not listed in order of engagement	Reordering → +13% conversion rate per click
Dreams (UK)	Black Friday mobile landing page	Scroll map	"Shop by category" most-clicked but placed at bottom	Moved to top → +150% click rate on mobile

(Source: Contentsquare ecommerce heatmaps guide, as-of November 2025)

Sample size requirements

CXL minimum: 2,000–3,000 pageviews per design, per device type, before trusting heatmap data (practitioner heuristic, not statistically derived)

NNGroup lab standard: approximately 30 participants for reliable eye-tracking heatmaps; 39 for more robust visualisations (NNGroup signifier eyetracking experiment, 2017)

Mobile and desktop must be analysed separately — viewport widths, fold lines, and interaction patterns differ substantially

Reading patterns relevant to layout decisions

NNGroup's eye-tracking research (2006, confirmed 2017) identified the F-shaped pattern as the dominant gaze pattern on text-heavy pages: two horizontal scans across the top, then a vertical scan down the left edge. Five scanning patterns were documented:

F-pattern: text-heavy, low-formatting pages; users minimise reading effort
Layer-cake: users scan headings and skip body text
Spotted: users hunt for specific elements (digits, links, prices)
Marking: eyes stay fixed as the page scrolls, common on mobile
Bypassing: users skip repeated line-starts
Commitment: users read everything (rare)

The F-pattern is characterised by NNGroup as bad for users and businesses: important content placed on the right or below the first two paragraphs is at risk of being missed. Antidotes: lead with key content; use informative headings; bold key phrases; use bullets. (NNGroup, 2006/2017)

Tool landscape (as-of 2026)

Tool	Free tier	Differentiator	Notable for ecommerce
Contentsquare (incl. Hotjar)	No (Hotjar SMB tier retained)	Zone-based heatmaps, journey analysis, checkout friction detection, DEB benchmarks	Enterprise; acquired Hotjar 2021; full merger 2025
Microsoft Clarity	Yes — unlimited sessions, no caps	Conversion Heatmaps (purchase likelihood per element); Predictive Heatmaps; Copilot AI	Free; Shopify checkout abandonment by step (Plus only); product JSON-LD integration
Heatmap.com	No	Revenue-per-click attribution (tracks $ not visits)	BFCM 2024: 62M+ page views, 1.2M conversions, $155M+ revenue tracked (as-of 2024); launched July 2025
FullStory	No	High-fidelity autocapture; rage-click detection; Digital Experience Analytics (DXA) event model	Diagnostic depth; ecommerce funnel requires custom framing
Mouseflow	No	Form analytics + per-field abandonment in one platform	Checkout form field analysis; pairs well with Form Analytics
Lucky Orange	No	Heatmaps + live chat + surveys bundled	SMB ecommerce
Crazy Egg	No	A/B testing integrated	CRO-first workflow

G2 ratings (as-of 2026): Glassbox 4.9; Heatmap.com 4.8; Contentsquare 4.7; FullStory 4.5; Clarity 4.5.

Limitations

Baymard Institute's current framing (2026): heatmaps tell you what is happening but not why — "your analytics show a drop-off. Your heatmaps show users not scrolling." Baymard positions heatmaps as "table stakes" and argues only moderated usability testing and expert audits can provide causal diagnosis. (Baymard UX Research & Audit Guide, 2026)

CXL's position (2021–2023):

Heatmaps show "symptoms of usability problems" — consistent with Baymard. Andrew Anderson (Head of Optimisation, Malwarebytes), quoted in CXL: "Nothing shows a lack of understanding of rate and value more than people getting overly caught up with where people click… Heat maps, in the end, provide a thousand more questions without the ability to answer a single one in a meaningful way." CXL recommends combining heatmaps with Session Replay and treating heatmap findings as hypotheses for A-B Testing, not as direct action triggers.

NNGroup's current framing (2026 course curriculum): triangulate heatmaps with Session Replay, funnels, and Form Analytics before acting on findings.

Contradictions

Hover map accuracy — CXL (citing studies) vs. vendor estimates: CXL (citing Dr. Anne Aula, Google 2010; Guy Redwood, Simple Usability): mouse cursor movement is a "weak proxy for eye tracking, not an appropriate substitute" — 6% vertical and 19% horizontal correlation between gaze and cursor. Some vendor/practitioner estimates cite 70–80% correlation, but the origin of this higher figure is not identified in any source retrieved. Genuine methodological dispute; hover maps ranked last in CXL's usefulness taxonomy.

Scroll depth as engagement vs. findability signal: Contentsquare (Feb 2026): "Deep scrolling is not always a good sign — users may be scrolling because they can't find what they need." CXL case study (Ryan Farley): converters read only the first section; optimising for scroll depth led to wrong conclusion — reducing content increased conversion, not driving scrolling. Contrasted against tool comparison sources that frame high scroll depth as a positive engagement signal. Neither interpretation is universally correct; session context is required.

Key terms

Term	Meaning
Click map	Heatmap of where users click (or tap); actual interaction data
Scroll map	Heatmap of how far down a page users scroll; shows percentage reaching each depth
Move map / hover map	Heatmap of cursor movement, used as gaze proxy; low accuracy
Rage-click map	Heatmap of frustration clicks (rapid repeated clicks on same element)
Attention map	Adjusted view accounting for scroll depth and viewport, estimating actual visibility
Zone-based heatmap	Contentsquare proprietary; divides page into segments with revenue/conversion overlays
False bottom	Page design element that signals the end of content, causing scroll drop-off
Fold / average fold	The visible area without scrolling, calculated separately for device type
Segmented heatmap	Heatmap filtered to a specific user segment, e.g. converters vs non-converters

Benchmarks (as-of Q4 2024)

No universal ecommerce heatmap benchmarks published. See Contentsquare DEB for site-wide metrics (conversion, bounce, session depth).

Contentsquare 2025 Digital Experience Benchmark (data covers Q4 2024, 90B sessions, 6,000 websites; published 2025-01-28):

40% of online visits had user frustration signals (as-of Q4 2024)
Conversion rates dropped 6.1% year-over-year (as-of Q4 2024)
Mobile = 77% of retail site traffic (as-of 2025 benchmark)
Sites increasing session depth by 10%+ saw average +5.4% conversion lift

What practitioners report

CXL (2021 [stale-risk]): most useful heatmap types ranked: attention maps > scroll maps > click maps > hover maps. Hover maps explicitly deprioritised.

Contentsquare (Feb 2026): "If you see deep scrolling but weak outcomes, validate with Session Replay to understand why users are hunting."

Heatmap.com (2025) [vendor claim]: 73% of UX improvements fail to increase conversions because they optimise for clicks rather than purchase intent. (as-of 2025; not independently verified)