The Best of Eyetrack III:
What We Saw When We Looked Through Their Eyes
By Steve Outing and Laura Ruel
Eyetrack III project managers
(Este artículo está disponible en español)
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, the Estlow Center for Journalism & New Media, and Eyetools 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.
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 -- 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.
[Read more on what Eyetrack III says about homepage layout here.]
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, NYPost.com, and 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.
[Read more on what Eyetrack III says about type and blurbs here and here.]
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.
Here's a heatmap of a blurb demonstrating this. (A heatmap is an aggregate view of all the eye fixations of our test subjects. Below, the orange area was viewed the most, the blue areas the least.)
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.
[Read more on what Eyetrack III says about blurbs here.]
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.
[Read more on what Eyetrack III says about homepage design here and here.]
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.
[Read more on what Eyetrack III says about navigation here.]
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 and 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.
[Read more on what Eyetrack III says about article layout here.]
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 inset ads into article text.
[Read more on what Eyetrack III says about advertising here.]
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).
[Read more on what Eyetrack III says about images here.]
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, and read additional general multimedia observations here.]
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.
Elizabeth Carr provided research assistance for this article.
