Goodbye Z-pattern; hello F-pattern?

[Geoff Hart]

Arroxane wondered: <<Have you heard about this? 
http://www.useit.com/alertbox/reading_pattern.html 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.ca
(try geoffhart at mac.com if you don't get a reply)
www.geoff-hart.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -