WATPA: FW: What We Saw When We Looked Through Their Eyes

Very interesting study on web site usage patterns. You should go to the
website to see the pictures and for more details.

Norm

--------------
http://www.poynterextra.org/eyetrack2004/main.htm
The Best of Eyetrack III:
What We Saw When We Looked Through Their Eyes
By Steve Outing and Laura Ruel

Eyetrack III project managers

News websites have been with us for about a decade, and editors and
designers still struggle with many unanswered questions: Is homepage layout
effective? ... What effect do blurbs on the homepage have compared to
headlines? ... When is multimedia appropriate? ... Are ads placed where they
will be seen by the audience?
The Eyetrack III research released by The Poynter Institute
<http://www.poynter.org>, the Estlow Center for Journalism & New Media
<http://estlowcenter.du.edu>, and Eyetools <http://www.eyetools.com> could
help answer those questions and more. Eyetracking research like this won't
provide THE answer to those questions. But combined with other site metrics
already used by news website managers -- usability testing, focus groups,
log analysis -- the Eyetrack III findings could provide some direction for
improving news websites.
In Eyetrack III, we observed 46 people for one hour as their eyes followed
mock news websites and real multimedia content. In this article we'll
provide an overview of what we observed. You can dive into detailed Eyetrack
III findings and observations on this website -- use the navigation at the
top and left of this page -- at any time. If you don't know what eyetracking
is, get oriented by reading the Eyetrack III FAQ <faq.htm>.

Let's get to the key results of the study, but first, a quick comment on
what this study is and is not: It is a preliminary study of several dozen
people conducted in San Francisco. It is not an exhaustive exploration that
we can extrapolate to the larger population. It is a mix of "findings" based
on controlled variables, and "observations" where testing was not as tightly
controlled. The researchers went "wide," not "deep" -- covering a lot of
ground in terms of website design and multimedia factors. We hope that
Eyetrack III is not seen as an end in itself, but rather as the beginning of
a wave of eyetracking research that will benefit the news industry. OK,
let's begin. ...

At the core: Homepage layout
While testing our participants' eye movements across several news homepage
designs, Eyetrack III researchers noticed a common pattern: The eyes most
often fixated first in the upper left of the page, then hovered in that area
before going left to right. Only after perusing the top portion of the page
for some time did their eyes explore further down the page.

Depending on page layout, of course, this pattern can vary. The image above
is a simplistic representation of the most common eye-movement pattern we
noticed across multiple homepage designs. (In other words, don't take what
you see above too seriously.)

Now also consider another Eyetrack observation: Dominant headlines most
often draw the eye first upon entering the page -- especially when they are
in the upper left, and most often (but not always) when in the upper right.
Photographs, contrary to what you might expect (and contrary to findings of
1990 Poynter eyetracking research on print newspapers), aren't typically the
entry point to a homepage. Text rules on the PC screen -- both in order
viewed and in overall time spent looking at it.

A quick review of 25 large news websites -- here's a list of them
<sites.htm> -- reveals that 20 of them place the dominant homepage image in
the upper left. (Most news sites have a consistent page design from day to
day; they don't often vary the layout as a print newspaper would.)
We observed that with news homepages, readers' instincts are to first look
at the flag/logo and top headlines in the upper left. The graphic below
shows the zones of importance we formulated from the Eyetrack data. While
each site is different, you might look at your own website and see what
content you have in which zones.

Want people to read, not scan? Consider small type
The Eyetrack III researchers discovered something important when testing
headline and type size on homepages: Smaller type encourages focused viewing
behavior (that is, reading the words), while larger type promotes lighter
scanning. In general, our testing found that people spent more time focused
on small type than large type. Larger type resulted in more scanning of the
page -- fewer words overall were fixated on -- as people looked around for
words or phrases that captured their attention.

This was especially the case when we looked at headline size on homepages.
Larger headlines encouraged scanning more than smaller ones.
(Note: We are not advocating that you run out and reduce the size of your
font across the board. You should make sure that people can read the font
size you select in order to achieve the appropriate balance.)

Particularly interesting was people's behavior when there were headlines and
blurbs used on homepages. Eyetrack III test participants tended to view both
the headline and blurb when the headline was bold and the same size as blurb
text and immediately preceded the blurb on the same line.

With a headline larger than the blurb and on a separate line, people tended
to view the headlines and skip the blurbs; they scanned the headlines
throughout the page more than the group that looked at the smaller
headlines.

Researchers believe that it is the contrast in type size that accounts for
this behavior, as well as the type size itself. When a headline is larger
than its accompanying blurb text, it's perceived as the important element of
the headline-blurb block -- so people appear to decide that viewing the
headline is sufficient and they skip the blurb.

Underlined headlines discouraged testers from viewing blurbs on the
homepage:
This may be related to a phenomenon that we noted throughout the testing:
visual breaks -- like a line or rule -- discouraged people from looking at
items beyond the break, like a blurb. (This also affects ads, which we
address below.)
When we look at news websites, we find that the vast majority of them (22
out of 25) use blurbs to accompany headlines on their homepages. It's the
rare ones that use only headlines: CNN.com <http://www.cnn.com>, NYPost.com
<http://www.nypost.com>, and ProJo.com <http://www.projo.com>. In terms of
headline size, we observed about an even split between using larger type
size for headlines vs. smaller type.

We found that 12 out of 22 news sites that use blurbs on their homepage put
rules under their headlines.

Partial viewing of headlines, blurbs found to be common
We found that when people look at blurbs under headlines on news homepages,
they often only look at the left one-third of the blurb. In other words,
most people just look at the first couple of words -- and only read on if
they are engaged by those words.

With a list of headlines on a homepage, we can see where people looked with
eyetracking -- and again, most often it's the left sides of the headlines.
People typically scan down a list of headlines, and often don't view entire
headlines. If the first words engage them, they seem likely to read on. On
average, a headline has less than a second of a site visitor's attention.

For headlines -- especially longer ones -- it would appear that the first
couple of words need to be real attention-grabbers if you want to capture
eyes.
The same goes for blurbs -- perhaps even more so. Our findings about blurbs
suggest that not only should they be kept short, but the first couple of
words need to grab the viewer's attention.

On the 25 news websites we reviewed, there's considerable variety in blurbs.
Average blurb length varies from a low of about 10 words to a high of 25,
with most sites coming in around 17.

What creates "hot spots"?

In Eyetrack III, we tested several homepage designs, watching where on the
page people looked. As you would expect, lower parts of the page --
especially areas you have to scroll to view -- receive modest viewing. But
that doesn't mean you can't get people to look at content low on a scrolling
page.

On a couple of our test homepages, we found "hot spots" for some stories.
Perhaps because our testing took place in San Francisco, research subjects
were drawn to one story about the site "Craig's List" (a local online
community popular since its inception in 1995). The headline for that story
had an inordinate number of eye fixations compared to surrounding content,
even though it was below the first visible screen of the page. We observed a
similarly high number of eye fixations on a headline about clothing maker
FCUK, which was placed far down on a page with a long list of headlines and
blurbs.

We think this spells good news for those websites with homepages that extend
well beyond the initial screen view. Eyetrack III found that people do
typically look beyond the first screen. What happens, however, is that their
eyes typically scan lower portions of the page seeking something to grab
their attention. Their eyes may fixate on an interesting headline or a
stand-out word, but not on other content. Again, this points to the
necessity of sharp headline writing.

Where's your navigation?

While testing several homepage designs, we varied the placement of a
navigation element: top (under the flag or logo), left column, and right
column.
Navigation placed at the top of a homepage performed best -- that is, it was
seen by the highest percentage of test subjects and looked at for the
longest duration. In a survey of 25 top news sites, we found 11 that used
top position navigation. The other 14 used left navigation. Seven of the 25
used left and top navigation elements. None of the 25 sites we surveyed used
right side navigation. It's rare, but you can find right navigation in the
news website world.

It might surprise you to learn that in our testing we observed better usage
(more eye fixations and longer viewing duration) with right-column
navigation than left. While this might have been the novelty factor at
play -- people aren't used to seeing right-side navigation -- it may
indicate that there's no reason not to put navigation on the right side of
the page and use the left column for editorial content or ads.

What about article layout, writing style?

Eyetrack III results suggests various characteristics of article writing and
layout can affect a reader's viewing behavior.

For example, let's take average paragraph length. Most news sites run
articles with
medium-length paragraphs -- somewhere (loosely) around 45-50 words, or two
or three sentences. In a survey of 25 top news sites, however, we did find
seven that routinely edited articles to make paragraphs shorter -- often
only one sentence per paragraph.

Shorter paragraphs performed better in Eyetrack III research than longer
ones. Our data revealed that stories with short paragraphs received twice as
many overall eye fixations as those with longer paragraphs. The longer
paragraph format seems to discourage viewing.

Most news website article pages present stories in a single column of text,
but a handful of sites -- like IHT.com <http://www.iht.com> and
TheHerald.co.uk <http://www.theherald.co.uk> -- mimic newspaper layout and
present articles in two or three side-by-side columns. Is this as readable
as the traditional (for the Web) one-column article format?

Eyetrack III results showed that the standard one-column format performed
better in terms of number of eye fixations -- in other words, people viewed
more. However, bear in mind that habit may have affected this outcome. Since
most people are accustomed to one-column Web articles, the surprise of
seeing three-column type might have affected their eye behavior.

What about photos on article pages? It might surprise you that our test
subjects typically looked at text elements before their eyes landed on an
accompanying photo, just like on homepages. As noted earlier, the reverse
behavior (photos first) occurred in previous print eyetracking studies.

Finally, there's the use of summary descriptions (extended deck headlines,
paragraph length) leading into articles. These were popular with our
participants. When our testers encountered a story with a boldface
introductory paragraph, 95 percent of them viewed all or part of it.

When people viewed an introductory paragraph for between 5 and 10 seconds --
as was often the case -- their average reading behavior of the rest of the
article was about the same as when they viewed articles without a summary
paragraph. The summary paragraph made no difference in terms of how much of
the story was consumed.

Just over 20 percent of the leading news websites regularly use summary
paragraphs with articles.

Advertising

Eyetrack III tested a variety of ad placements and formats across our
various hompages and article-level pages.

The first thing we noticed is that people often ignore ads, but that depends
a lot on placement. When they do gaze at an ad, it's usually for only 0.5 to
1.5 seconds. Good placement and the right format can improve those figures.
We found that ads in the top and left portions of a homepage received the
most eye fixations. Right side ads didn't do as well, and ads at the bottom
of the page were seen, typically, by only a small percentage of people.

Close proximity to popular editorial content really helped ads get seen. We
noticed that when an ad was separated from editorial matter by either white
space or a rule, the ad received fewer fixations than when there was no such
barrier. Ads close to top-of-the-page headlines did well. A banner ad above
the homepage flag didn't draw as many fixations as an ad that was below the
flag and above editorial content.

Text ads were viewed most intently, of all the types we tested. On our test
pages, text ads got an average eye duration time of nearly 7 seconds; the
best display-type ad got only 1.6 seconds, on average.

Size matters. Bigger ads had a better chance of being seen. Small ads on the
right side of homepages typically were seen by only one-third of our
testers; the rest never once cast an eye on them. On article pages,
"half-page" ads were the most intensely viewed by our test subjects. Yet,
they were only seen 38 percent of the time; most people never looked at
them. Article ads that got seen the most were ones inset into article text.
"Skyscraper" ads (thin verticals running in the left or right column) came
in third place.

Reviewing 25 leading news websites, we discovered that there's a
preponderance of small banner ads on homepages. And it's exceedingly common
to find ads in the right column of news homepages. About half of the 25
sites we reviewed <sites.htm> inset ads into article text.

Larger online images hold the eye longer than smaller images

News homepages typically use templates, many of which employ a predetermined
size for a main image. Although the value of using a template-driven design
can (and should) be debated, what we learned about photo size in Eyetrack
III may be helpful to those who are wondering just how big a spot to leave
for images.

Although we learned that most of our test participants did not look at
images first, we also observed that images received a significant number of
eye fixations. We also learned that the bigger the image, the more time
people took to look at it.
One of our test pages had a postage-stamp sized mug shot that was viewed by
10 percent of our participants. Compare that with an average-sized photo
(about 230 pixels wide and deep) that drew gazes from about 70 percent.

We found that images that are at least 210 x 230 pixels in size were viewed
by more than half of the testers. Our research also shows that clean, clear
faces in images attract more eye fixations on homepages.

Article-level pages seem to follow suit. Again we found that the larger the
image, the more users were drawn to it.

In reviewing 25 news websites, we found that about 20 percent routinely use
small images on their homepages. Four out of five sites routinely place
their homepage main photo in the upper left.

And here's an interesting research tidbit: We noticed that people often
clicked on photos -- even though on our test pages that got them nowhere
(and indeed, clicking on photos does nothing on many real news sites).

Text for facts; multimedia graphics for unfamiliar concepts
Overall, we observed that participants were more likely to correctly recall
facts, names, and places when they were presented with that information in a
text fomat. However new, unfamiliar, conceptual information was more
accurately recalled when participants received it in a multimedia graphic
format.

So what does this mean? While overall we did see a slight, although not
statistically significant, increase in information recall from text stories,
we should note that most of our recall questions were about facts, names,
and places. Story information about processes or procedures seemed to be
comprehended well when presented using animation and text. A step-by-step
animation we tested supported this idea.

We also observed that most participants attended to only two forms of media
at a time. For example, in one of our testing situations users were
presented with audio, still images, and written captions. We observed that
they directed their attention to the audio and images. Important information
in the photo captions were not read by many.

The bottom line is that the best journalists working in multimedia
environments know how to make good choices about the presentation of story
information. As demonstrated in this research, some information is best
conveyed by the use of good, descriptive writing. Other information is
better explained graphically.
[Read more on what Eyetrack III says about multimedia comprehension here
<multimediarecall.htm>, and read additional general multimedia observations
here <multimediafreeforall.htm>.]

We've covered some of the highlights in this article, but there's lots more,
so please spend some time exploring this website. Use the navigation devices
at the top of this page and in the left column.
Received on Wed Sep 8 23:45:30 2004