The Thinking Brain

What eye-tracking research tells us about user attention

Author
Ric Wood
Published

People do not read web pages, they scan them, and eye-tracking research shows they do it in a predictable shape. Eyes move across the top of the page, down the left-hand side, and across the middle, tracing a rough letter F. Knowing where attention actually goes lets you put the things that matter where they will be seen, instead of hoping a visitor reads top to bottom. They almost never do.

This is one of the deeper pieces in The Thinking Brain, our series on the psychology and neuroscience behind effective web design. The series opens with whether psychology can build you a better website. Here we look at one of the best-evidenced findings in the whole field: what eye-tracking studies reveal about where people actually look.

The F-shaped pattern

The most reliable finding in eye-tracking research is that people scan text-heavy pages in an F shape. Work by the Nielsen Norman Group found two horizontal sweeps across the upper part of the page, then a vertical scan down the left edge. The bottom-right of the page receives very little attention unless something deliberately pulls the eye there.

The practical consequence is direct: your most important information belongs in the top-left and along the top. The logo, the main heading, the primary navigation, and the one thing you most want a visitor to grasp all sit in the path the eye actually takes. Content tucked into the lower-right is, for most visitors, content that does not exist.

The F-pattern is a fallback, not a goal

Worth being honest about: the F-pattern is what people fall back on when a page gives them nothing better to follow. It is the scanning behaviour of someone confronted with an undifferentiated wall of text. It describes a failure of the layout to guide attention, as much as it describes the eye.

So the aim is not to design rigidly around an F. It is to give the eye something deliberate to follow instead, through clear visual hierarchy, headings, and structure, so the reader is led to what matters rather than left to sweep and skip. The F is what happens in the absence of design. Good design replaces it with a path you have chosen.

Visual hierarchy guides the eye

Visual hierarchy is the arrangement of elements so that their relative importance is obvious at a glance. Size, contrast, colour, and position all signal what to look at first. Eye-tracking confirms that people genuinely follow these cues: larger, higher-contrast elements draw the eye before smaller, fainter ones, and a clear hierarchy lets a visitor grasp the structure of a page without consciously working at it.

Whitespace is part of this, not wasted room. The space around an element is what lets the eye separate it from its neighbours and rest long enough to take it in. A crowded page gives the eye nowhere to settle; a well-spaced one quietly tells the reader where to look and in what order.

Most attention stays above the fold

Despite years of being told that people happily scroll, the eye-tracking evidence is that attention concentrates heavily near the top of the page. Studies have found that visitors spend the large majority of their time above the fold, on the part of the page visible without scrolling. People do scroll, but they look hardest at what greets them first.

This does not mean cramming everything into the top of the page. It means the top has to earn the scroll. A visitor who finds something clear and relevant above the fold will go looking for more below it; one who finds a confused or empty opening will not. The first screenful is the page making its case for the rest of itself.

Images are looked at when they earn it

Eye-tracking shows that people look closely at images that carry real information, and skip past ones that are obviously filler. A relevant photograph of a real product, place, or person draws genuine attention; a generic stock image of smiling models in a meeting room gets ignored, because the brain has learned that decorative stock carries no information worth the effort.

Placement matters too. An image set next to important text pulls the eye toward that text, so a meaningful picture beside a key message helps both get seen. The lesson is not to add more images, but to use real ones, placed with intent, and to drop the decorative filler that trains visitors to look away.

What this means for your website

Attention is finite and it moves in patterns you can anticipate. The most important things go where the eye already travels, the layout gives the reader a deliberate path rather than leaving them to scan and skip, and every image earns its place. That is how we approach the design of a website: laying out a page around where people actually look, not where we wish they would.

Where the eye goes is one piece of a larger picture. The series also looks at how a page makes its first impression in 50 milliseconds, and at how the brain fills in the rest as a prediction. Attention is where it all starts: nothing you have written matters until it has been looked at.