Goodbye Z-pattern; hello F-pattern?

Subject: Goodbye Z-pattern; hello F-pattern?
From: Geoff Hart <ghart -at- videotron -dot- ca>
To: arroxaneullman -at- aol -dot- com, TECHWR-L <techwr-l -at- lists -dot- techwr-l -dot- com>
Date: Mon, 17 Apr 2006 16:33:14 -0400

Arroxane wondered: <<Have you heard about this? Summary: Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.>>

As in all of Jakob Nielsen's work, it pays to treat the findings with a healthy measure of skepticism. Nielsen is an uncommonly bright guy, and he's produced many important insights, but his experimental design isn't always of the finest, and he tends to leap to conclusions that aren't justified by the data or that are very contextually limited... leading to a lower ratio of hits to misses than I'm comfortable with.

In this case, consider the horizontal stripes bit: The viewers move their eyes from left to right first (that's the topmost horizontal part of Neilson's F, or of the traditional Z)--at least in English. No surprises thus far; we've known this for at least a century. Note that viewers _do not_ then scan from right to left trying to read the second line (the second bar of the F): they return their eyes to the left margin, then scan left to right again. In short, they follow the "/" diagonal of the traditional Z pattern. The fact that the eye-tracking images in this article don't show this diagonal scan suggests a problem with the experimental design: it shows dwell time, not eye movements. It also shows that Neilson doesn't fully understand the meaning of the Z pattern.

The context is also very limited: this is expected scanning behavior for Web pages that use the ubiquitous pattern of a logo bar across the top, followed by a navigation bar beneath the logo, followed by a "palette" of clickable links across the left side. Would the eye patterns be the same for a different design? I strongly doubt it, and the strong variation in Neilsen's three images demonstrates this quite nicely*: yes, you can see an F, but as Rhorschach tests repeatedly reveal, you see what you're looking for, not necessarily what is actually there. It's also important that once viewers learn the structure of the page, they're likely to adapt their scanning sequence to suit that structure: different expected structurs produce different scan patterns.

* A typical methodological flaw in the sciences involves showing just images that support your point rather than average images that pool all your data and a measure of the variation hidden by those averages. Missing from this article are the confidence intervals for these patterns for each page view. Sometimes the degree of variation tells you more than the mean.

The conclusions that he draws from these results (the "implications" part) are also hardly earth-shattering. Conclusion 1, that people don't read thoroughly, is both old news and incorrect. Neilsen is confusing "scanning behavior" (looking for something to read and parsing the structure of the page) with "reading behavior" (what you do once you find what you're looking for). Anyone with any experience knows that we should design to support both skimming (to find stuff) and reading (to learn stuff).

Conclusion 2 is that the first two paragraphs must contain the most important information. Again, this was old news 2000 years ago to the Romans. Journalists variously call this "the hook", which you use to draw people in, or a pyramid structure in which "the point is at the top of the page"*. But does it affect what we write? Not at all. The first few sentences of any onscreen text are no different from the first words of any printed text: they tell us whether we've truly found what we were seeking, and whether it's interesting enough for us to keep reading. If we do keep reading, they provide context that explains what we're about to read.

* You'll more commonly hear this called the "inverted" pyramid structure, in which all the key material (what I called the point) is loaded into one place at the top, answering all the five W's. Different metaphors for exactly the same meaning.

How to write beyond that point depends on what kind of writing we're doing. If we're presenting reference material or online help, we must be concise, and provide as much information as possible right at the start so people have to read no more than is necessary--they're not reading this for enjoyment, so every word counts. If we're writing novels or essays, we expect them to read top to bottom, in sequence, to follow as we develop and expand on our plot or thesis. Different rhetorical purposes, so different implications and requirements.

Conclusion 3 is to left-load your headings, paragraphs, and bullets. Very good advice for headings, but again, old news: power words come first. That's why gerunds work better than infinitives in headings: "to [verb]" is always one word longer than "[verb]". But extending this to paragraphs is nonsense, at least in the context of designing to support skimming behavior. Who would carefully design each and every paragraph so that the words at the left margin are the power words? (As soon as the window is resized, all that hard work is lost.) The same problem occurs with bullets. Again, he's confusing skimming behavior with what we do once we find what we're looking for.

Then there's the fact that skimming behavior isn't nearly as simple as Neilsen is proposing. The actual skimming pattern depends on what catches our eye: if the first few words of a line tell us everything, or suggest that the rest of the line won't be interesting, we move to the next line and continue skimming. But if they provide inadequate information for us to decide, or are interesting enough to hold our attention, we skim farther to the right until we're satisfied. You can see that clearly in Neilson's first image.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --
Geoff Hart ghart -at- videotron -dot- ca
(try geoffhart -at- mac -dot- com if you don't get a reply)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


WebWorks ePublisher Pro for Word features support for every major Help
format plus PDF, HTML and more. Flexible, precise, and efficient content delivery. Try it today!.
Doc-To-Help includes a one-click RoboHelp project converter. It's that easy. Watch the demo at

You are currently subscribed to TECHWR-L as archive -at- infoinfocus -dot- com -dot-
To unsubscribe send a blank email to techwr-l-unsubscribe -at- lists -dot- techwr-l -dot- com
or visit

To subscribe, send a blank email to techwr-l-join -at- lists -dot- techwr-l -dot- com

Send administrative questions to lisa -at- techwr-l -dot- com -dot- Visit for more resources and info.

Goodbye Z-pattern; hello F-pattern?: From: arroxaneullman

Previous by Author: Question re: managing document changes as software changes occur?
Next by Author: Procedures - Must we use numbered steps?
Previous by Thread: Goodbye Z-pattern; hello F-pattern?
Next by Thread: UA Conference Notes

What this post helpful? Share it with friends and colleagues:

Sponsored Ads