How to use Eye Tracking
Eye tracking measures where shoppers actually look on a product page or checkout — the ground-truth data behind F-pattern reading, fold prioritization, and most attention heuristics you already use.
Eye Tracking
The empirical measurement of where users look on a page, captured via infrared or webcam-based gaze tracking.
Eye tracking is the methodology behind almost every well-known attention rule of thumb — F-pattern reading, the value of above-the-fold, banner blindness, the visual weight of faces. Rather than inferring attention from clicks or scroll depth, it records gaze position dozens of times per second to produce fixation points (where the eye stops), saccades (the jumps between them), and dwell time (how long each element actually held the eye).
In an e-commerce context, eye tracking is used to validate whether shoppers see the elements you assume they see: the price, the size selector, the trust badges, the add-to-cart button. It is one of the most rigorous inputs into a broader Attention Optimization programme.
Most CRO teams operate on attention heuristics — fold-line rules, visual hierarchy guidelines, F-pattern templates — without ever seeing the underlying data those heuristics came from. Eye tracking is that data. It is how researchers established, decades ago, that headlines outrank body copy and that faces pull gaze toward whatever they look at.
The technology has quietly become accessible. What used to require a $30,000 Tobii lab rig is now feasible with a laptop webcam and a 200-participant remote panel. For a Shopify apparel store deciding whether to redesign a PDP, that is the difference between a six-month research project and a two-week test.
How eye tracking actually works
Lab-grade systems use infrared light bounced off the cornea. A camera detects the reflection pattern and triangulates the pupil's position against the screen at 60-120 Hz. Accuracy is within roughly half a degree of visual angle — about the width of a thumbnail at arm's length.
Webcam-based tracking — used by tools like RealEye, GazeRecorder, and Lookback — works on consumer hardware. Accuracy is lower (around 1-2 degrees), but the trade-off is sample size: you can run 300 participants in a weekend instead of 12 in a lab month. For UI-level questions like "do shoppers see the size selector", that resolution is plenty.
Outputs come in three forms. Heatmaps aggregate gaze across participants into hot and cold zones. Gaze plots draw the saccade path one user took. Areas-of-interest (AOI) reports give you the metric a CRO team actually wants: time-to-first-fixation and total dwell time on a specific element like the add-to-cart button.
Eye tracking vs. mouse tracking
Mouse heatmaps (Hotjar, Microsoft Clarity) are a proxy — roughly 70-80% of the time the cursor follows the gaze, but the relationship breaks down on dense product pages where users read without moving the mouse. Use mouse tracking for scale, eye tracking when you need to answer a specific "did they see it" question.
What the data consistently shows on e-commerce pages
On product pages, the dominant gaze pattern is a vertical scan of the left column (hero image), a sweep to the right (title, price, variant selectors, CTA), then downward to reviews. The headline and primary image get the first 1.5-2 seconds of attention almost universally — which is why those two elements determine bounce rate more than anything else on the page.
Trust badges below the buy box are the most consistently overlooked element across studies — fewer than 30% of shoppers fixate on them at all. Size guides, shipping cost notes, and return-policy links sit in a similar dead zone. The implication is that these elements work only when their absence is felt, not when their presence is seen.
Average gaze dwell time by product page element (apparel PDP)
Notice how short the add-to-cart fixation is. That is not a problem — shoppers don't need to study a button — but it does mean the button has to be findable in peripheral vision. If your design hides it below the variant selector on mobile, dwell time drops because users are hunting for it rather than landing on it.
Benchmarks: what "normal" attention looks like
The single most actionable metric from eye tracking is time-to-first-fixation (TTFF) on the primary CTA. If shoppers find your add-to-cart button in under 2 seconds, the page hierarchy is doing its job. If TTFF is above 4 seconds, the button is competing with too much visual noise — usually a stacked promotional banner or an oversized review widget.
Benchmarks vary by vertical. A beauty SKU page tends to hold gaze on the hero image longer (texture and colour matter), while an electronics PDP shifts attention to spec tables faster. The figures below are mid-range across DTC stores running webcam panel studies; treat them as orientation rather than targets.
Typical eye-tracking benchmarks by store vertical (desktop PDP)
| Vertical | TTFF on CTA (s) | Hero image dwell (s) | % who fixate on reviews | % who fixate on trust badges |
|---|---|---|---|---|
| Apparel | 1.8 - 2.6 | 3.5 - 4.5 | 62% | 24% |
| Beauty / skincare | 2.2 - 3.1 | 4.0 - 5.5 | 71% | 31% |
| Electronics | 1.5 - 2.2 | 2.0 - 3.0 | 58% | 44% |
| Home & furniture | 2.0 - 2.8 | 4.5 - 6.0 | 67% | 28% |
| Food & supplements | 1.7 - 2.4 | 2.8 - 3.8 | 74% | 39% |
If your numbers are far outside these ranges, the diagnostic question is rarely "is my design wrong" but "what is the page competing against". A sticky announcement bar, an auto-playing video, or a chat widget bouncing into the corner can each add a full second to TTFF on the CTA.
How to use eye tracking in a CRO programme
Eye tracking earns its place when you have a specific "did they see it" question that clicks alone can't answer. Examples: did shoppers notice the new free-shipping threshold? Did the size guide link get any fixations on mobile? Does the new hero crop hold attention as long as the old one? Each of these is a 100-200 participant webcam study, not a lab project.
Where it does not earn its place: behavioural questions you can already answer with an A/B test. If you want to know whether changing the CTA colour increases conversions, just test it. Eye tracking tells you what people look at, not what makes them buy. The two methods are complementary — gaze data generates hypotheses, A/B tests validate them — and feeding the findings back into your broader Attention Optimization workflow is where the compounding value sits.
The recall trap
Don't ask participants what they remember seeing — recall is a notoriously poor proxy for attention. People reliably claim to have read trust badges, shipping policies, and footer links they never fixated on. Trust the gaze data, not the post-test interview.
Frequently asked questions about eye tracking
Webcam tracking is accurate to roughly 1-2 degrees of visual angle, versus 0.3-0.5 degrees for infrared lab rigs. For UI-level questions like "did the shopper see the size selector" that resolution is fine. For micro-questions like "which word in the headline did they fixate on first" you need lab equipment.
Heatmap patterns stabilise at around 30-40 participants. Reliable area-of-interest metrics like time-to-first-fixation need 80-150. Most DTC studies run 100-200 participants on a webcam panel, which costs roughly €1,500-€4,000 and turns around in 1-2 weeks.
Yes, both via the device's front camera (webcam panels increasingly support mobile) and via screen-recording-plus-gaze-inference tools. Mobile eye tracking is especially valuable because thumb-zone heuristics often disagree with where attention actually lands on a narrow viewport.
No. Mouse heatmaps track cursor position and approximate gaze about 70-80% of the time. On dense product pages where users read without moving the mouse, the correlation drops sharply. Use mouse heatmaps for breadth, eye tracking for depth on specific elements.
The F-pattern is a finding from Jakob Nielsen's eye-tracking studies of text-heavy pages — readers scan the top line fully, then progressively less of each line below. It applies less to modern e-commerce, where image-led layouts produce a Z-pattern or vertical-scan pattern instead. The underlying methodology is the same; the resulting heuristic differs by page type.
Both. Webcam panels can record sessions on a live URL with real product data, which is more representative than a Figma prototype. The trade-off is that you can't isolate variables the way a controlled prototype lets you, so live-site studies tend to inform diagnostic questions while prototype studies inform design choices.
Banner blindness is the empirically observed pattern where users' gaze actively avoids regions that look like advertising — typically the top-right rail, brightly coloured rectangular blocks, and anything that animates. The phenomenon was documented in eye-tracking studies and is the reason most promotional bars underperform their visual prominence.
Look for a mismatch between what you want users to see and what they actually fixate on. If only 22% of shoppers fixate on your free-shipping threshold and you believe it's a conversion driver, the hypothesis writes itself: "Increasing the prominence of the free-shipping threshold will lift add-to-cart rate." Then validate with an A/B test.
Usually not as a recurring research method — the per-study cost and time investment outweigh the gain at that scale. A one-off webcam study before a major redesign can still be valuable. Below that revenue band, free tools like Microsoft Clarity for mouse heatmaps cover most of the same diagnostic ground.
Treating heatmaps as the answer rather than the question. A hot zone tells you what got attention, not whether the attention helped or hurt conversion. The disciplined workflow is gaze data → hypothesis → A/B test → causal answer. Skipping the A/B test step is how teams end up redesigning around interesting-but-irrelevant attention patterns.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.