Eyetrack studies for online news sites

Poynter has taken a first stab at examining how readers interact with online news sites by testing their eye movements and the ways they click around a site. The results in many ways are surprising and well worth studying.

News designers are often familiar with Poynter’s eyetrack findings and their implications for how to design in print. Designers may not know, though, that Poynter has also studied online news viewing habits, and the results are very different than for print.

If you are involved in news design online, you should read through all of their various articles on the topic. Poynter studied five different styles of home pages that are typically found.

If you don’t have the time, or just a passing interest, here are many of their main findings in a quick form. Let’s run quickly through the findings, including a few tips that Poynter suggested for each.

Home page viewing patterns

Online, headlines are the first thing a reader typically focuses on when visiting a news site, especially when located in the upper left area of the page. Readers tend to take a good look at the entire upper left quadrant before moving on to the rest of the page. From there readers often scan nearby areas, viewing the right side last before either leaving the page or moving lower on the page.

Headlines are the big grab, though, so if the dominant headlines are located on the center or right of the page, they will still tend to grab the reader’s attention first. If a photo is placed in the upper left quadrant, readers will still look to the nearby dominant headline to the right first.

Some Web sites just use headlines while others use headlines and a fuller explanatory blurb beneath to link to the full articles. But, surprisingly, the use of blurbs combined with headlines had a big effect on the way a reader reads and scans the home page.

If blurbs are combined with the headline, readers will spend more time reading and moving down through the headlines at the top of the page. Blurbs will encourage readers to quickly scan or read the headlines area. Since blurbs encourage readers to spend more time in this area of the page, blurbs also will encourage the reader to glance at the picture next to the headlines before glancing at other areas of the page, such as the flag.

When viewing headlines and blurbs, the majority of readers focus on the first inch or so of words on the left side, but may not read the entire headline or blurb. They often scan down the left side of the list of headlines and blurbs, as if they are scanning down a list of content. If the left side catches their interest sufficiently, they may spend the time to read the entire headline and blurb.

TIP: Poynter suggested that headlines and blurbs be concise, compelling and carefully designed with key words placed at the start of each.

With a headlines-only approach, readers were more likely to click elsewhere on a page than with a headline and blurb approach, where readers tend to click more on the headlines themselves. But the total number of clicks remained roughly the same regardless, at 1.6 clicks for each reader on average.

About half of readers who clicked on a headline actually read the accompanying blurb first.

Readers view a minimum of five headlines on a homepage. Even if the number of headlines offered is small, at least five will get a look. But once a site expands their number of headlines on a page above 20, then the number of headlines viewed will markedly increase.

TIP: Poynter suggests that you make sure you have at least five well-written headlines near the top of the page.

Points of visual discontinuity, such as short capitalized words in an otherwise upper and lower case list, will grab a reader’s attention, even if located far down a page.

Online photo use

Size matters for photo viewing, and so do faces.

Smaller photos just don’t attract viewers. Poynter found that a small photo (80 by 80 pixels) is often ignored entirely. Only 43 percent of readers were found to see the small photo. Medium-sized photos (210 by 230 pixels) get most readers’ attention (80 percent), but a few more readers will see the large pictures (88 percent) and most will spend more time viewing the large photos (365 by 240 pixels).

The more faces and the closer in a photo is cropped so that faces are more viewable, the more views and time a photo will get. People will look specifically at the faces themselves and spend much more time here than with the rest of the photo.

Poynter studied large photos with headlines superimposed on them, so the findings about spending more time with the large photos may just apply to photos with headlines. Also, a large photo with small faces and a headline seemed to get more time spent on the headline, while a large photo with large faces and a headline seemed to get time spent on the faces.

Photo viewing was similar on article-level pages as with the home page.

Many readers click on photos, although many photos don’t link anywhere.

TIP: Poynter suggests that photos be at least 210 pixels wide and that sites should consistently either have photos link to the stories or link to larger pop-ups of the photos themselves.

Extended vs. compact home pages

Extended home pages have a lot of content that is availabe by scrolling further down a page. Compact pages are designed to be read without scrolling, and navigation links are used to find additional content.

One key finding was that with a deeper page, most readers spent the time to scroll down and scan the lower half of the page, after they spent their normal viewing time with the top half of the page. There seemed to be no penalty for having a deeper page with a lot of content. The use of the navigation bar to travel around the rest of the site was reduced, perhaps because readers were able to find these areas by clicking through to them elsewhere on the page. The nav bar was less necessary. With a compact page a much larger percentage of clicks (30 percent) are used on the navigation bar than with a deep page (3 percent).

More key findings and tips:
• Having a deep home page did not affect the way the top of the page was viewed.
• Ads are viewed more on compact pages.
• On a deep page, be sure to link to areas of the site you want people to visit. The nav bar links are not enough, since the navigation bar is not the way most users will travel around the site.

Navigation links

Poynter found that navigation links at the top of the page seemed to work best on home pages, or at least seem to work as well as anything, while links on the upper left worked best on articles. Poynter attributed this behavior to visual bleed, since readers tend to glance from one area on a site (the top headline on a home page for example) to nearby areas (the top navbar). Rules and white space tend to discourage visual bleed behavior in all areas of online viewing.

Poynter found that the smaller real estate that the top nav bar received did not matter, and so this might be the preferred way to go, as it leaves the left-hand column available for additional content.

Not much time was spent with the nav bar, just 1.2 seconds on average out of 14.5 seconds spend viewing a home page. Some would argue that this is a good thing, since a clear nav bar does not need time spent figuring it out.

Navigation is much more critical for compact pages, where less content is available on the home page.

For most sites, which tend to use deeper pages with more content on their home pages, it’s not the navigation that drives readers into a site, it’s links from the home page content itself.

Font size

Larger font size leads to a bit more scanning. Smaller font size leads to a bit more careful viewing.

Blurbs are more widely read on sites with smaller font sizes. It’s the contrast in point size between the headlines and blurbs that seems to make the difference. The more contrast, the less reading of the blurbs.

Smaller sizes encourage readers to take the time to read the words. Larger sizes lead to scanning behavior.

Content can override format and presentation. An article about something that interests a reader will trump whatever format it is displayed in.

TIP: Poynter suggests that if you want readers to scan your pages quickly, use larger font sizes. If you want them to read the blurbs, keep the headline and blurb size comparable.

With larger font sizes, the word choice is more critical.

Multimedia retention

Poynter found that comparing factual retention between content provided with multimedia and the same content provided in story form, specific facts were better remembered in story form.

However, if the purpose of the story is to explain how a process works that a reader is not familiar with, the multimedia format works better for retention than the story.

Article-level page design

Poynter found that readers prefer a one-column format to read articles, which is typical of most Web sites. Multicolumns of text do not work as well.

While an average of 72 percent of the one-colum story was read, only 56 percent of the multicolumn stories were read.

Introductory paragraphs are important and well-read. Introductory paragraphs get read or partly read 95 percent of the time. Readers consider them essential parts of the story.

If a reader carefully reads the introductory paragraph, they often will spend a little time with the story itself. However, if the intro paragraphs get little time, even less is spent with the story.

After reading the introductory paragraph, one camp of readers will go on to read the story, while another will abandon it. If a lot of time is spent carefully reading the introductory paragraph, a reader is more likely to abandon the story (80 percent) than if a normal amount of time is spent reading the introductory paragraph (50 percent will start to read the story). Poynter attributes this to people getting what they want from the introduction and moving on. Poynter also considers it representative of a reader’s interest in the story to begin with.

Shorter paragraphs encourage readers to continue reading. Shorter-paragraph stories get more than twice as many eye fixations as those with longer paragraphs.

Subheads encourage readers to scan deeper into the article. If attention is beginning to wane, subheads can keep a reader going.

Readers click on stories to read the text, so the text gets the attention. Accompanying images tend to get viewed afterward.

Here is an average order that elements get viewed for articles:

1. Article introduction
2. Headline
3. Paragraph 1
4. Byline
5. Category or section label
6. Subheadlines
7. Paragraph 2
8. Image (photo or graphic)
9. Paragraph 3
10. Image caption

TIP: Poynter suggests that since introductory paragraphs are almost a guaranteed read, Web sites should make them count and not treat them as an afterthought.

Recognize that many times the introductory paragraph is the only thing read. For readers who want to read the story, they will do so regardless of whether an introduction is present.

Please keep in mind that Poynter intends to more closely look into this subject and considers these findings just a good starting point for further study. There is a wealth of information on the eyetrack area of the Poynter Web site that is deserving of your time.