How to use Eye Tracking
Eye tracking measures where shoppers actually look on your product pages — the ground-truth data behind F-pattern heuristics, above-the-fold rules, and most attention-optimization advice.
Eye Tracking
Eye tracking is the measurement of where users actually look on a page, using infrared cameras or webcams to record gaze, fixations, and saccades.
Eye tracking is the empirical methodology behind most attention-optimization theory. Specialised hardware (infrared eye trackers) or software (webcam-based tools) records the precise point on a screen a participant is looking at, roughly 60-250 times per second, and reconstructs their visual journey through a page.
The output is a set of objective measurements — fixations, saccades, gaze plots, heatmaps — that show what shoppers actually saw versus what designers assumed they would see. Most rules of thumb you've heard about above-the-fold content, F-pattern reading, or face-direction priming trace back to eye-tracking studies in academic UX labs.
Most CRO teams never run a formal eye-tracking study. They don't need to — the methodology produced the heuristics they already use, and mouse-movement heatmaps approximate gaze well enough for 80% of decisions on a product page or checkout.
But understanding how eye tracking works matters anyway. It tells you which heuristics are well-supported by data, which are folklore, and when a quick remote study (now possible via webcam at a few hundred euros per panel) is worth running before a redesign you can't easily reverse.
How eye tracking actually works
A lab-grade tracker shines low-power infrared light at the participant's eyes and uses a high-speed camera to detect the corneal reflection. The vector between the reflection and the pupil centre translates, after calibration, into a screen coordinate at 60 to 1000 samples per second.
Webcam-based tools — RealEye, Lookback, Sticky by Tobii — skip the hardware. They use machine-learning models trained on calibration patterns to estimate gaze from a standard laptop camera. Accuracy drops from roughly 0.5° of visual angle in the lab to 2-3° on a webcam, which is the difference between knowing a shopper looked at a specific price versus knowing they looked somewhere in the right-hand product column.
The raw stream is filtered into two events. Fixations are pauses of roughly 100-400 milliseconds where the eye is relatively still and visual information is actually processed. Saccades are the fast jumps between fixations — your eye is functionally blind during them. Every analysis downstream is built from those two primitives.
The myth of the heatmap
A red blob on an eye-tracking heatmap does not mean shoppers liked something. It means they had to look at it for a long time — which can mean it was important, or it can mean it was confusing. Always pair heatmaps with task-completion data before drawing conclusions.
What the data actually reveals
On a typical Shopify product page, eye-tracking studies consistently show three patterns. Shoppers fixate first on the hero image for 1-2 seconds, then scan downward in a rough F-shape toward the price and primary CTA, then either commit or drift to reviews and shipping information below the fold.
Time-to-first-fixation on the add-to-cart button is the metric that matters most for conversion. On well-designed PDPs it lands inside the first 3 seconds. On pages where the CTA competes with carousels, badges, or low-contrast colour, it can stretch past 8 seconds — and a meaningful share of shoppers never fixate on it at all before scrolling away.
Average time-to-first-fixation on the add-to-cart button (seconds)
The pattern is mechanical. Every visual element competing for fixation steals milliseconds from the CTA. A trust badge, a Klarna logo, a sale ribbon — each is individually defensible, and collectively they push the add-to-cart button below the threshold where casual browsers find it before bouncing.
Typical fixation benchmarks by page type
Fixation metrics vary by intent. A shopper landing on a category page is scanning for options; a shopper on a checkout page should be reading targeted, deliberate content. The benchmarks below are ballpark figures from public UX research aggregated across apparel, beauty, and home-goods stores.
Use them as orientation, not absolutes. Your own mouse-movement heatmaps, time-on-page distributions, and scroll-depth data will tell you whether your specific store sits above or below these averages.
Typical eye-tracking metrics by page type (apparel / beauty / home-goods stores)
| Page type | Avg fixations before action | Avg fixation duration | Time-to-first CTA fixation | Below-fold fixation share |
|---|---|---|---|---|
| Category / collection page | 18-25 | 220 ms | n/a (browse intent) | 35-45% |
| Product detail page | 12-18 | 260 ms | 3-5 s | 25-35% |
| Cart page | 8-12 | 280 ms | 2-3 s | 10-15% |
| Checkout — shipping step | 15-22 | 310 ms | 4-6 s | 5-10% |
| Checkout — payment step | 10-14 | 340 ms | 3-4 s | <5% |
The pattern across rows is fixation duration rising as the funnel narrows. Shoppers process category pages in fast 220ms bursts; by the payment step they're reading every line at 340ms+ because the stakes are concrete. If your checkout fixation durations look more like a category page, the copy is probably being skimmed rather than read — a known leak.
When to run a study versus when to trust heuristics
For incremental tests — button colour, headline wording, badge placement — skip the eye-tracking study. Run an A/B test. The heuristics derived from decades of prior tracking research already point in the right direction, and your own conversion data resolves the rest faster and cheaper than a 30-participant panel.
Run a real study when you're about to commit to a structural change you can't easily reverse: a full PDP redesign, a new checkout flow, a navigation rebuild, or a rebrand that changes visual hierarchy. A €1,500-€4,000 webcam study with 50-80 participants will tell you within a week whether the new layout pulls attention toward conversion or scatters it — before you ship the change to 100% of traffic.
The pragmatic stack
Most stores get 90% of the value of eye tracking by combining mouse-movement heatmaps (a proxy for gaze with roughly 0.7 correlation), scroll-depth tracking, and session recordings. Reserve formal eye-tracking studies for moments where structural redesigns put real revenue at risk.
Frequently asked questions about eye tracking
Lab trackers resolve gaze to roughly 0.5° of visual angle — about half a centimetre at typical screen distance. Webcam tools land at 2-3°, which is good enough for region-level analysis ("did they look at the CTA column?") but not for pixel-level decisions about icon placement.
For most CRO decisions, no. Mouse-movement heatmaps correlate with gaze at roughly 0.65-0.75 on content-heavy pages, which is enough for layout decisions and copy placement. Eye tracking adds value when you need to know what shoppers saw but didn't click — for example, ignored trust badges or missed promotional banners.
Eye tracking is the measurement layer underneath attention optimization. The discipline of optimising visual hierarchy, contrast, and information density relies on gaze data — historical and current — to validate that the design choices actually direct attention where intended.
Jakob Nielsen's classic recommendation is 39 participants to stabilise heatmap patterns, though directional findings emerge with as few as 15-20. For e-commerce decisions, 50-80 participants per variant is a defensible sample for both qualitative gaze plots and quantitative fixation metrics.
A fixation is a 100-400ms pause where your eye is steady and your brain actually processes visual information. A saccade is the rapid jump between fixations (20-200ms) during which you're functionally blind. Only fixations count for whether a shopper actually saw something.
Not really. The F-pattern was identified on desktop text-heavy pages. On mobile, eye-tracking shows a vertical scan pattern: hero image, headline, price, CTA, then either checkout or a downward scroll. Designing for vertical attention flow matters more than F-pattern adherence on phones.
Yes — that's one of its strongest use cases. Fixation duration on description text reveals whether shoppers are reading (300ms+ per fixation, sequential left-to-right pattern) or skimming (sub-200ms scattered fixations). On most apparel and beauty PDPs, 60-70% of shoppers skim rather than read.
Webcam-based panels through tools like RealEye or Sticky by Tobii run €1,500-€4,000 for 50-100 participants and a week's turnaround. Lab studies with infrared hardware and moderation cost €10,000-€30,000 and take 4-8 weeks. For most e-commerce decisions, the webcam route is the right tradeoff.
It will tell you what they looked at before abandoning — for example, whether they fixated on a shipping cost for several seconds before leaving, or whether they scanned the page looking for something (a payment method, a guarantee) they never found. The why still requires follow-up qualitative research.
Yes. Webcam-based tools work with any public URL, including Shopify's hosted checkout. You can't instrument the checkout itself, but you don't need to — the tool records gaze independently and overlays it on screen captures of the actual page the participant saw.
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.