Addaly is in open beta. Things will change, and AI answers can be wrong — check anything that matters.

Design, Before Any Software

Hierarchy, type, colour and spacing — the part of design you can do with a pencil, before any software.

Lesson 7 of 749 min

What the eye-tracking research actually says

A famous heatmap, widely misread

In 2006 a usability study published eye-tracking heatmaps of people reading web pages, and the aggregate images looked like the letter F: a heavy band across the top, a shorter band lower down, and a vertical stripe down the left. The F-pattern entered design folklore within months, and it is still taught as a layout rule — put the important things along the F.

This is a misreading, and it is worth understanding precisely, because the underlying research is good and the conclusion drawn from it is not.

What the study found

The participants were scanning text-heavy pages they had no strong intention to read carefully. The F shape is what happens when someone skims dense prose: they read the first line or two of a block, read progressively less of each subsequent line, and eventually drop to sampling only the first few words down the left edge.

So the F is a description of a behaviour under specific conditions — unstructured text, low commitment, no visual hierarchy to guide the eye. The authors were clear that it is a symptom of a page that gives the reader nothing to navigate by. Designing to reinforce the F is designing to make skimming permanent.

The same body of work makes the opposite recommendation: break the F by providing structure. Subheadings, short paragraphs, bulleted lists, bold on the first few words of a paragraph, and images with genuine information in them all pull fixations off the left edge and into the content.

What is better supported

Several findings from eye-tracking research are much more robust than the F, and more useful:

  • Entry point. Readers of left-to-right scripts tend to begin near the top-left of the content area. Readers of Arabic, Urdu or Hebrew mirror this. It is a tendency, easily overridden by a strong visual element elsewhere — a large dark mass in the lower right will be fixated first, whatever the script.
  • Faces attract fixations, early and reliably, and the direction a face is looking pulls attention along with it. A model looking at your headline measurably increases fixations on that headline compared with the same model looking at the camera.
  • Banner blindness is real. Regions that look like advertising — right-hand column, rectangular, coloured, near the top — get systematically skipped, including when they contain content the reader is actively hunting for. Styling your own content like an advert makes it invisible.
  • Text beats images for attention when the reader has a task. Decorative photography of the kind used to fill space is routinely skipped. An image that carries information — a chart, a product, a diagram — is not.
  • Numerals attract fixations in prose. A figure written as 47% pulls the eye where forty-seven per cent does not.

The honest limits of heatmaps

This is where the field gets oversold, and knowing the limits will save you from arguments you cannot win with data.

A heatmap records where the eye pointed. It does not record what was understood, what was believed, or what was decided. A long fixation can mean interest or confusion, and the trace cannot tell you which. Aggregate heatmaps also hide individual variation: a smooth orange blob may be an average of twelve people who each looked at completely different things, and the average path may be one that nobody actually took.

Sample sizes in published eye-tracking work are usually small — tens of people, not thousands — and the equipment historically required a lab, a chin rest and a calibration step, which selects for a particular kind of participant behaving in a particular way. Webcam-based tools have made this cheaper and much noisier.

Finally, almost all of the widely cited web findings come from desktop screens in the 2000s and 2010s. Phone reading has a different geometry, a different holding posture and a different scroll behaviour, and the F does not transfer cleanly to a 390-pixel column where nearly every line is short.

What to do with all this

Use the research as a set of constraints, not a layout template.

  1. Do not rely on position alone. Position is the weakest of the emphasis channels and the most culturally variable. Size, value contrast and isolation do the heavy lifting and work in every script.
  2. Assume skimming and design against it. Structure the page so there is something to land on every few centimetres: a subheading, a pulled number, a short list.
  3. Do not style content like advertising. Avoid the shape, position and treatment that readers have learned to ignore.
  4. Point faces at what matters, if there is a face.
  5. Test with people rather than predicting. Three people, three seconds each, asked what they saw, will tell you more about your specific layout than any published heatmap of somebody else's.
The useful summary of forty years of research: readers are looking for a reason to stop. Give them one, in a place you chose.

The one thing to keep

The F-pattern describes how people skim a page with no hierarchy rather than prescribing where to put things, so the correct response to it is to give the eye structured landing points instead of reinforcing the shape.

Before you move on

A team moves its key message into the top-left of the page and bolds the left-hand words of every paragraph, citing the F-pattern. Engagement does not improve. What is the flaw in the reasoning?

Pick the one you would defend. Nobody sees your answer.

No ads. No data sale. No public scores on people. Ever.

© 2026 Addaly