The Lessons of the Eyes

By: Steve Outing Last month, the Poynter Institute published the results of its third eyetracking study. The first, in 1990, was on print newspaper design; the second (2000) was on narrowband-era news Web sites; and, now, No. 3 covers broadband-era news sites and multimedia news features.

In addition to writing this column for E&P Online, I'm a senior editor at Poynter -- and was co-project director of Eyetrack III, along with Laura Ruel, an assistant professor at the University of North Carolina's journalism and mass communication school and board member of the Society for News Design. (Actual testing was conducted by Eyetools Inc., a California-based eyetracking technology and solutions provider.)

I'm not going to write an overview of the study here; the Eyetrack III website plays that role. But the editors at E&P consented to allow me to put the Eyetrack findings to work, directly, by critiquing some real-world news Web sites in the context of what was learned in the Poynter study.

Ruel assisted me in this column, so the opinions we express are from both of us. And, to make this little exercise especially interesting, we asked the site's managers and designers to comment on our Eyetrack-based suggestions for their sites.

So let's go. We're taking a critical look at Washingtonpost.com, chosen for being a well-designed, award-winning big newspaper site, and LJWorld.com, selected for being the work of a small paper and for consistently being on the cutting edge of Web site design. (For space reasons, we selected only a few design points for each site; we could have done much more.)

WASHINGTONPOST.COM



One of the first things that stood out for me on Washingtonpost.com's homepage was all the blue underlines on headlines. In the Eyetrack III study, we found that such a treatment encourages people to scan headlines on a page and discourages reading of blurbs below the headlines. You can think of horizontal rules as barriers, which deter the eye from looking beyond them. The headline underlines on this home page likely serve to discourage reading of the blurbs.

If you look at the top, middle part of the Washingtonpost.com home page, which contains the top stories of the day, you can discern a visual pattern of blue sans-serif type and underlines and a weaker pattern of black serif text. What we found in Eyetrack III suggests to me that on this page, the blurb (black serif) text probably is not seen by many users.

Is that a bad thing? Not necessarily. It depends on what the site's designers want to encourage the reader to do. If it's to encourage reading of all the text on the page, then maybe the underlines should go. If it's to have a home page that's set up for scanning, then perhaps they can stay.



Washingtonpost.com is a fairly typical news site in how it treats navigation. There's a long and detailed navigation guide in the left column, plus an abbreviated second navigation element running horizontally under the flag.

In Eyetrack III, we observed that navigation placed at the top of the page (like Washingtonpost.com's abbreviated horizontal strip) performed best in terms of attracting eye fixations (that is, people looked directly at it) and on number of clicks. Left and right navigation placement were fairly close, with right navigation actually doing a little bit better by some measures. (Disclaimer: The navigation part of the Eyetrack testing did not use tightly controlled variables; we published "observations" about navigation placement, so take these with a grain of salt.)

Now let's combine those observations with another: that overall, people tend to gravitate their eye movements initially to the upper and left part of the page. (We noticed this when comparing several home-page designs used in the testing.) And that when looking at eye-fixation performance of ads, those placed on the left side of the page got double those on the right.

The Eyetrack study won't tell you what to do with navigation, but I have an opinion, which is that it might be worth experimenting with placement. The research suggests that the left-side column devoted to navigation on Washingtonpost.com and many other news sites is highly valuable. So, is a lengthy navigation column the best use for that pricey screen real estate?

Perhaps some new thinking is in order: to consider placing some advertising on the left, or some image/headline promos to special content. What we noticed in Eyetrack III is that people did find navigation even when it was at the right, and they definitely found it when up top.



My Eyetrack partner, Laura Ruel, noticed the collection of editorial and ad content on the right side of the Washingtonpost.com home page. Because many of the editorial items are boxed, shaded, and have a different feel than the main editorial content, Ruel points out that they resemble ads. And that may not be a good thing.

What we noticed in Eyetrack III is that users tend to learn where static ads are on a page, then mostly ignore them. It seems fair to suggest, then, says Ruel, that these ad-like editorial items might not be getting a lot of glances.

Overall, Ruel thinks the Washingtonpost.com homepage design is effective, based on what we found in Eyetrack III. While the upper left tended to be the starting point for home-page viewing in the testing, that doesn't mean that it was always viewed first. So, Ruel points out, the site's normal placement of a main photo in the upper left does not necessarily encourage more eye fixations on it. In Eyetrack III test home pages, photos located in the upper left got about the same number of fixations as photos in the center of the page (with headline text to the photo's left).

Does it matter whether the image is placed to the left of main headline text (as Washingtonpost.com typically does) or to the right, then? Probably not. Eyetrack III suggests that the headlines are more likely to get seen first. (This study repeated a finding from Poynter's first online eyetracking study in 2000 -- that Web users gravitate initially to text.)



About Washingtonpost.com's use of images, you'll notice that photos on the home page are all clickable; that action leads to the accompanying article. That's a good thing, Eyetrack research suggests, since we noticed that a sizable minority of users routinely clicked on photos. In the Eyetrack test pages, clicking an image didn't do anything, but some people still clicked. You may as well accommodate them by having photos be clickable, since the behavior is common.

Ruel also notes that main-photo selection for Washingtonpost.com's home page is generally good, in that it most often features strong, tightly cropped images -- an important consideration in attracting the eye. The site also appears to select many of its lead images with the knowledge that faces (especially close-ups) draw users' eyes. But that's not always the case lower down on the home page, where smaller images aren't always cropped enough for there to be a strong focal point to attract a person's gaze.



Clicking through to the article level of Washingtonpost.com, we notice a few more Eyetrack-relevant issues. Take advertising: The typical "inside" page has the site brand and flag up top, with (horizontal) navigation directly below it, then with a large banner ad below it. That's a good thing, Eyetrack III suggests.

One of the things we noticed in the testing was that people often looked up to our test Web sites' flags to check out the brand -- "Who's telling me this?" But when we placed banner ads above the flag, few people looked up beyond the flag to the ads. What worked much better was the page design that Washingtonpost.com uses: flag on top, with ad directly below it, then editorial content.

Now, in Eyetrack III, the Web sites viewed were created just for the testing. We don't know if a regular visitor to a real news site would routinely look at the site's flag. (That would require more research.) I suspect that most people do at least glance at it; after all, most of us view lots of different Web sites every day, so we probably do that as a check on where we are. If that's true, then ads below the flag and navigation make sense, because Eyetrack III suggests that ads do get more eye fixations when they are in very close proximity to popular editorial content. And with navigation above the ad, people will pass over the ad on the way to it -- which at least gets the ad some extra fixations, and thus brand recognition.



Ruel also noticed that with Washingtonpost.com articles, paragraph length is typically short -- one or two sentences per paragraph. Eyetrack III suggests that that's a good thing (and confirms what Web-writing experts have been telling us for years). We observed in our testing that stories with consistent shorter paragraphs received about half the eye fixations of ones with longer paragraphs.

This site's articles do not use summary paragraphs -- only a deck under the main headline. Eyetrack III suggests that such intro summaries might be a good idea. We found that when summary paragraphs were used on articles, about 95 percent of people who clicked through to such articles read all or part of the introduction. If the goal is get people reading once they've clicked, an intro paragraph appears to be a pretty sure bet, says Ruel. Readers appear to place value on these forms of story presentation. In terms of summary paragraphs affecting the amount of an article that gets read, there wasn't much difference; their popularity suggests that they are a reader service that doesn't detract from the site's goal of getting an article read.

Washingtonpost.com editor responds: We asked Washingtonpost.com executive editor Doug Feaver to comment on our Eyetrack-based critique of his site. Here's his response.

LJWORLD.COM

LJWorld.com, the Web site of the Journal-World in Lawrence, Kan., takes a very different approach to home-page design than does Washingtonpost.com. Each day, there's a dominant image up high, with text embedded in it. The top portion of the page typically has a list of headlines (with no underlines except when the user's mouse passes over).



What does Eyetrack III say about this treatment of lists of headlines? Well, when we tested two identical home pages with the single variable being headlines-only and headlines-plus-blurbs, we noticed a couple of things. First, there was more intense concentration of eye fixations on the top-most list of headlines on the headlines-only page. People clearly read down the list of headlines, examining them closely. So we might expect to see that behavior if we were to use eyetracking to test the top portion of LJWorld.com's home page.

But the second thing we noticed on our test pages was that the home page with blurbs performed better overall. In terms of number of eye fixations on the page, length of time spent, and number of clicks on average, the page with the blurbs did better. On the page with blurbs, people were considerably more likely to scroll down to lower parts of the page; on the headlines-only page, they mostly stayed on the top part of the page.

Ergo, I have to wonder if LJWorld.com, by using lists of headlines up top -- and there being a considerable amount of content below the first screen -- is discouraging viewing of the lower part of its home page. I can't say that definitively; using eyetracking to test the LJWorld.com home page would be required, of course. But if this were my site, it's something I'd think about.

Ruel thinks this home page -- like Washingtonpost.com's -- scrolls too much. And it's interesting, she notes, that as you scroll down the page, blurbs are introduced. The site's designers might want to reconsider, she suggests, since a common behavior noticed in Eyetrack III was that users scanned quickly down a home page, halting only at compelling or controversial words, phrases or images.

One thing Ruel likes about LJWorld.com's home page is how succinct are most headlines. That's important, especially when you have a list of headlines. What we saw in Eyetrack III was people consistently looking only at the first two or three words of a headline, not reading the entire thing. Most people scanned the headlines along the left side of the text and were drawn into reading the entire headline only when the first words captured their interest.



LJWorld.com treats advertising on its home page differently than most. Typically, there's only one banner ad, placed in the right column. (Height on the page varies by day.) Based on what we saw in Eyetrack III, I'd guess that the right-column banner isn't getting too many eye fixations. First, it looks like an ad -- and in the study we saw people tending to avoid looking directly at obvious-looking ads. Second, it's not that big and it's in the right column -- two factors that in our study resulted, on average, in only one in three people having any eye fixations on such an ad at all.

Below the banner ad, also in the right column, LJWorld.com gets more innovative with a category entitled "Top Ads." It lists several two-line text ads for job openings, with additional "Top Ads" category links below (Top Rental ads; Top Transportation ads). This block of ads is designed to look like the rest of the page's editorial content -- same font but a different text color, to only subtly indicate that this is different from editorial content.

Eyetrack III suggests that this treatment probably works in getting people to look at these text ads (though right-column placement is a possible negative). We observed that text ads on a home page performed better than any size or format of banner ad. And we observed that ads that appeared to be similar in look, color, or tone to nearby editorial content performed better in attracting the eye than did ads that contrast and stand out. (Shouting "I'm an ad!" doesn't appear to work.) So, LJWorld.com's "Top Ads" probably would do well in an eyetracking test.

But before you go accepting that ad strategy, Ruel has a caution: "I just have to add my questions as to whether this is a journalistically sound way to present ads. Are both 'Top Ads' and 'Top Stories' decided by journalists? I would guess not, but it is tough to know that."



What about that big, dominant piece of art at the top of the page? As Ruel points out, it's definitely large enough to pass the "large enough to make people look" test. Many other news sites don't devote so much screen space to a main homepage image, and, based on what we saw in Eyetrack III, that can lead to a good many people (believe it or not) just looking at the headlines and not the image. So a thumbs-up for image size.

However, we tested some home pages with type embedded into photos, as LJWorld.com typically does, and we found that headlines in photos did not get as many eye fixations as text headlines at the top of the page. If you look at the data for such photos-with-text, you see fixations more on the people in the images, rather than the text. Ruel suggests, "If your goal in placing a headline on a photo is to increase readership, you may not be achieving this goal."

LJWorld.com gets another thumbs-up for making the entire image clickable to get to the story, not just the headline in the photo. As we found, a good number of people routinely click on all parts of photos.



This site's home page devotes lots of space to navigation; there's a very long list in the left column, plus a succinct main-category list up top. Just as we noted with Washingtonpost.com, I'd say the same thing: Does the high-value left column have to be devoted to navigation?

But notice LJWorld.com's article pages (above), which dispense with the left navigation and leave only the abbreviated navigation up top. That approach makes sense to me. (Eliminating left-hand navigation on "inside" pages is increasingly common on news Web sites.)

Eyetrack III seems to support that this is an OK approach. We observed that top navigation performed better than either left or right, so there's little danger on an LJWorld.com article page that a reader is going to get lost with the left navigation missing.



The site's treatment of article-page ads gets the OK. Ads often are inset into article text, as in the example above. In Eyetrack III, ads inset into a block of article text were seen more than even large "half-page" ads. In our tests, 56 percent of the time, people looked directly at such inset ads. Those half-page ads were only seen 38 percent of the time.

Ruel notes that LJWorld.com tends to place these inset ads before any accompanying image. "That makes sense," she says, "because we found that when readers get to an article-level page they seem to be there to read." Eyetrack III participants fixated on story and other text elements before moving on to an accompanying image. Overall, the image was the eighth page element looked at on an article page.

The site typically runs photos accompanying articles small, and if you click on them a new window opens with an enlarged version. As we've indicated before, this is a smart approach; make photos clickable. (LJWorld.com defies industry convention by not adding an indicator that clicking will enlarge a photo.)

Finally, we noticed that LJWorld.com also tends to keep paragraph lengths short. That's good.

LJWorld.com designer responds: We asked LJWorld.com senior designer Dan Cox to comment on our Eyetrack-based critique of his site. Here's his response.

A word of caution

Eyetrack III tested 46 people in San Francisco. While I think that clearly the findings and observations from the study can be useful to news Web designers and editors, it's probably not wise to assume that everything we found will apply exactly to your site, serving another community. There are so many variables involved when comparing our test Web sites with your own sites.

The critiques above by Ruel and me very well may be accurate for Washingtonpost.com and LJWorld.com, but we can't really know without those sites doing some eyetracking testing on their own. I guess that's a call for the news industry to take what we've done with Eyetrack III and take the next step: more research, including on real individual news sites.