Focus

Websites and interfaces are packed with information. Designers often assume users see everything displayed on the screen—after all, it's right there. However, users frequently report overlooking important buttons, missing cues, and even ignoring large banners. The question is: How does human vision actually work? Which areas are perceived sharply and which are not—and what does the evidence tell us?

Studies

Eye Movements During Image Viewing

Alfred Yarbus conducted groundbreaking eye-tracking experiments in 1967 at the Institute for Information Transmission in Moscow. He showed test subjects the famous painting "The Unexpected Visitor" by Ilya Repin—once without any task, and once with specific questions such as "Estimate the ages of the people" or "What were the people doing before the visitor arrived?" The astonishing result: eye movements differed radically depending on the task. When estimating ages, subjects fixated almost exclusively on faces. When asked about previous activities, their eyes moved to objects and clothing. Without a task, gaze patterns were more diffuse. The insight: people don't simply see "everything"—they look specifically where they expect to find relevant information. Only these 2–3° per fixation are consciously processed.

F-Pattern in Website Scanning

Jakob Nielsen and Kara Pernice conducted a comprehensive eye-tracking study at Nielsen Norman Group in 2006 with 232 users viewing various websites. The heatmaps revealed a consistent F-shaped pattern: users read the first lines horizontally, then scan vertically down the left side, with occasional horizontal sweeps. On average, users actually fixated on only 20-28% of the text. The critical finding: information outside this F-pattern was virtually invisible, even when highlighted in color. A button in the top right went unseen by 82% of users, despite being on the screen. The implication: foveal limitation combined with learned scanning patterns means designers cannot place elements where they want—they must place them where users look.

Principle

Which principle for Customer Experience Design can be derived from this? The principle of foveal vision demonstrates that decision-relevant information must be strategically placed in the central visual field, since users only perceive what they actively focus on. In customer experience, this means that critical elements such as call-to-action buttons, prices, or product benefits should be positioned where natural gaze patterns capture them—not in the visual periphery, where they go unnoticed. This becomes particularly important with complex interfaces or information-dense pages, where users can quickly become overwhelmed and miss important details. However, the principle only works optimally when designers understand their target audience's natural gaze paths and design accordingly. The following guidelines show how to implement this principle in practice.

Guidelines

Place CTAs in the natural viewing path

Position important call-to-actions and decision elements where users naturally look—not where they fit the design layout. Eye-tracking studies reveal that for Western languages, users typically start at the top left and follow an F-pattern. On product pages, users fixate first on the product image, then the price, then the headline. The 'Buy' button should appear immediately after this natural sequence, not isolated in the top right corner. Use 5-second tests to validate placement: if users cannot identify the button within 5 seconds, it falls outside the typical gaze path.

Critical information in first two lines

# CX Guideline: Critical Information in First Two Lines Place the most important information in the first 1-2 lines of text, as these receive the most visual attention. Users scan rather than read linearly. The opening words of each paragraph attract more foveal focus than subsequent text. Therefore, front-load your writing: lead with the key message, then provide supporting details. **Avoid:** "Taking all factors into account and after reviewing the alternatives, we have determined that..." **Instead:** "Result: You save 30%. Details: After reviewing all..." For important warnings or conditions, never bury them at the end of lengthy text. Legally, this constitutes "surprising clauses" because users' foveal vision literally doesn't reach that far down.

Spatial proximity based on cognitive dependency

**CX Guideline: Spatial Proximity Based on Cognitive Dependency** Position related information within immediate spatial proximity—no more than 5° of visual angle apart. Greater distances require a saccade (eye movement), and each saccade increases the likelihood that information will go unprocessed. **Product page example:** Price, availability, and purchase button must be close enough to capture within a maximum of two fixations. When price appears at the top, availability in the middle, and the button at the bottom, users must make three separate decisions: Where to look, what it means, and where that button was. This cognitive load leads to abandonment. **Rule of thumb:** What belongs together cognitively must be visually capturable in a single glance.

High contrast for peripheral orientation

While the fovea recognizes details, the periphery handles orientation and detects where to fixate next. Use strong contrast (at least 4.5:1, preferably 7:1) for important elements so they stand out peripherally before the fovea reaches them. A pale gray button on a white background won't be detected peripherally—the eyes won't recognize it as worth targeting. A button in strong blue or orange activates peripheral motion sensors and attracts the saccade. This is particularly critical for error messages and warnings: they must signal peripherally as "important," otherwise the fovea will never direct itself toward them. Red works for this evolutionarily—it's still registered as "alarm" even at 20° peripheral distance.