I recently ran across a research
study called Eyetrack III, which was conducted by The Poynter Institute, the
Estlow Center for Journalism & New Media, and Eyetools. The study tracked
the eye movements of research subjects browsing mock news Web sites and real
multimedia content. The results of this study provide some interesting insights
into the way visitors view Web sites and what page elements attract their
The study was relatively small—only
46 subjects were observed for one hour each, as they viewed a limited selection
of page designs. As a result, the authors warn against extrapolating the
numerical results to apply to larger populations. However, despite its
limitations, the study provides an interesting data point for Web builders as
they strive to understand and anticipate viewer reactions to Web page designs.
And the study says…
Most of the results of the Eyetrack
study reinforce conventional wisdom about the viewing patterns of Web site
visitors, but with some interesting twists.
For example, the study confirms that
visitors start in the upper-left quadrant of a typical page and then proceed to
the right and down. The study confirms that observation by plotting the path of
visitors’ eye movements and how long their gaze stayed in each area.
One interesting detail is that the
movement down the page was not a smooth progression, but a series of jumps and
regressions. On a typical test page, the subjects not only started in the upper-left
portion of the page, they explored that area before moving on to adjacent areas
to the right and immediately below the starting area. Subjects tended to linger
in the upper portion of the page before gradually moving down. One detail that
surprised me was that subjects tended to move up to the top-right corner of the
page last; however, this finding may have been a result of the design of the
The study showed that top navigation
is most effective, as measured by the time viewers spent looking at that part
of the test pages. However, the study authors caution against concluding that
top navigation is the one best solution. There are many other factors to
consider; for instance, the study found that side navigation (both right and
left sides) also worked well, especially at the article level.
One interesting finding that seems
obvious in retrospect is that a navigation bar played a greater role on compact
home pages than on pages with more content and opportunities to follow links
dispersed within that content.
About text and headings
As you might expect, test subjects
showed a preference for shorter paragraphs and articles that were broken up
with headings, blurbs, and bulleted lists. No surprises there, especially since
the study was partially conducted on mock news sites, where it’s likely that
visitors would want to scan for quick information.
The study’s authors took particular
note of the fact that subjects concentrated on the left third of headings and
blurbs and concluded that the first words of a heading carry particular weight.
However, I’m not so sure that this finding is significant. Another article I
read recently points out that a normal reader takes in a word or so to the left
and several words to the right of the fixation point, so it’s reasonable to
assume that the test subjects were reading an entire headline without moving
their eyes past the half-way point of the line.
The study found that larger font
sizes for body text encouraged scanning rather than more deliberate reading.
That’s an expected result, but the finding that surprised me was the test
subjects’ reaction to smaller text sizes. Instead of becoming frustrated by the
fact that smaller text is harder to scan and abandoning that text, the test subjects
took the time to read the smaller text. Consequently, the study authors
recommend that Web builders consider using smaller text to encourage detailed
reading. I have to wonder whether the study participants, tasked to read the
sample pages, might be more motivated than an average Web site visitor to put
forth the effort to read the small text. It’ll be interesting to see how future
studies fare on this point.
Another finding was that an
introductory paragraph that was set apart with special text treatment, such as
italic text, was effective at gaining readers’ attention. Oddly, that extra
attention did not translate into higher readership for the rest of the article.
In fact, the opposite was true.
The test subjects’ responses to
images on the sample Web pages were predictable. Larger images got more
attention than smaller images, and human faces were the focal point of most of
that attention. Large pictures containing multiple faces got the most
attention. The difference between small images and medium images was quite
pronounced. Large images got even more attention, but the difference between
medium and large images was slight by comparison.
The study found that test subjects
recalled factual information best when it was presented as text, but that
multimedia presentation (sound, images, and animation) worked better for
unfamiliar concepts, such as describing a process. Furthermore, the test
subjects typically paid attention to only two media at a time. For example, when
information was presented as an audio track accompanying images with captions,
subjects often ignored the text captions.
Even though the Eyetrack III study
was small, it still provides an interesting look at the way visitors view Web
sites. The results are definitely worth thinking about as you design and
develop your own Web pages. I, for one, will be very interested to see the
results of a much larger study that uses the same eye tracking methodology on a
much larger test population and a broader sampling of Web page designs.