Eye-Tracking Studies
See exactly where users look — not where they say they look. Eye-tracking records the precise path and duration of visual attention, revealing which elements are actually seen, which are skipped, and in what order.
01 — TL;DR
Two sentences.
Eye-tracking uses hardware or software to record the precise location, duration, and sequence of visual fixations across an interface — producing heat maps, gaze paths, and fixation data that reflect actual visual behaviour rather than self-reported attention. The fundamental value is the gap it closes: interfaces that look balanced in design review are routinely revealed by eye-tracking to direct all attention to a single quadrant, leave key messages unseen, or fail to achieve the intended reading path.
Eye-tracking became more accessible in the 2000s with tools like Tobii producing lab-grade data and webcam-based tools enabling remote testing. Its advantage over recall-based methods is objectivity and granularity: attention measured to within a few pixels, at millisecond resolution, without relying on user recall.
02 — When to Use
Apply this when…
When NOT to apply it
Skip it when the question is about task completion or comprehension (eye-tracking shows where, not why), when budget constraints rule out lab equipment and webcam accuracy is insufficient, when the interface involves frequent mobile scrolling or movement, or when the team needs findings within days.
03 — How It Works
The mechanism
Eye-tracking measures infrared light reflection off the cornea to calculate gaze direction at 60-1200 samples per second. Raw data is aggregated into heat maps (fixation density) and gaze plots (fixation sequence), making attention patterns legible.
Heat maps are not proof of success
A hot spot on a CTA means users looked there — not that the design is working. A CTA with extensive fixation but low click-through may be receiving attention because it is confusing, not compelling. Eye-tracking diagnoses attention; it does not diagnose intention, comprehension, or conversion.
04 — Real Example
NNG's F-pattern research and twenty years of hierarchy guidance
In 2006, Nielsen published eye-tracking research with 232 participants showing users scan web content in an F-pattern: reading the first horizontal band fully, scanning a shorter second band, then moving vertically down the left side. Content in the lower-right quadrant received almost no fixation.
The F-pattern has since been replicated in specific contexts and qualified in others — it reflects poor content design more than inherent scanning behaviour. But it demonstrated eye-tracking's ability to surface systematic patterns across large samples, producing findings specific enough to inform concrete layout decisions. Twenty years of subsequent research represents the method's cumulative value.
05 — In the Wild
Test yourself & see real examples
No examples yet — be the first.
Spotted a layout where a key element is in a visual dead zone — or one where the hierarchy perfectly matches scanning patterns? Submit what you observed.
Seen Eye-Tracking insights ignored in a real product? Help grow the evidence base.
06 — Common Mistakes
Where teams go wrong
07 — Variations & Related Principles
Connected ideas
Eye-tracking is the only method providing objective, millisecond-level attention data.
The most important pairing is eye-tracking with usability testing. Eye-tracking within a usability session reveals the specific attention pattern associated with each navigation decision, error, or success. Detached from task context, eye-tracking produces descriptive findings; embedded in usability sessions, it produces diagnostic findings.
08 — 10-Min Exercise
Run it right now
⏱ 10 minutes · Solo · No prep
1. Take a screenshot of your most important screen. Apply a Gaussian blur (8px) until text is illegible but shapes and colour blocks remain.
2. Note which elements are still visually dominant — shapes, colour blocks, contrast regions. These are receiving the most pre-attentive visual weight.
3. Compare dominant elements in the blur to what you intend to be most prominent. If the wrong elements dominate (a decorative image, a background element), your hierarchy has a mismatch eye-tracking would confirm.
4. List three elements that should receive first attention. Check each in the blurred view. Any that disappear into the background are competing against larger, higher-contrast elements — and users are fixating on those competitors first.