Article-Level Page Design: What Matters Inside?
Once you've piqued readers' interest enough so that they click to an article-level page, how do you keep them there? Many news organizations are trying a number of devices to enhance the display and readability of news stories online.

In this example from MSNBC.com, an italic-type introductory paragraph is used to provide some context before readers delve into the meat of the piece.

Some sites, such as the International Herald Tribune's, utilize a more newspaper-like look for the text of their article-level pages online:

And many sites take advantage of some of the lessons learned in print design -- such as utilizing subheads, short paragraphs, and bulleted text -- in an effort to make copy more scannable and readable.

Eyetrack III put a few of these techniques to the test. We inserted a number of typical writing and/or design devices into test pages to see if these affected how readers interacted with content on article-level pages.

Some observations:

• When readers encountered a story with an introductory paragraph, 95 percent of them read all or part of the introductory paragraph.
• Those who spent time carefully reading the introductory paragraph of a story on article-level pages typically spent little time with the full story. Those who gave the intro paragraphs little time usually spent even less time with the story text.
• Shorter paragraphs encouraged testers to continue reading.
• Story text in one-column format was read more extensively than story text presented in a "newspaper-like" multiple-column format.
• Subheads in online stories had little affect on how much of the first or top portion of the story was read when the reader's interest was strongest. However, subheads increased reading for "skimmers" and for those whose attention in a story was beginning to wane.
• When readers got to an article-level page, they seemed to be there to view the text. Overall, participants' eyes fixated on the story or other text elements before the accompanying image.

(Please note that in this article we cite some statistics. Keep in mind that in this particular part of the Eyetrack III testing, we did not tightly control the variables -- as we did in other parts of the research. So use the numbers with caution.)

Observation: When participants encountered a story with an introductory or summary paragraph, 95 percent of them read all or part of the introductory paragraph.

Eyetracking data seem to show that introductory paragraphs (that is, long blurbs) are thought of as essential elements of a story. Overall, there were 58 occasions when our test participants encountered introductory paragraphs. In 55 of these instances, they read at least some of the text. This indicates an overwhelming pattern, and really does show that readers place value on these forms of story presentation. Once again, we are able to tell that participants were reading, not by what they told us, but by the number of eye fixations on these introductory paragraphs.

Observation: Overall, the test subjects who spent the most time with a story's introduction (or summary paragraph) spent the smallest amount of time with that same story's body text.

On a number of prototype websites we inserted summary or introductory paragraphs before the main text of a story on an article page. Most of these paragraphs were about 2-3 sentences, and were slightly darker and larger in size than the story text type. Here is an example:

Lessons from print design teach us that these introductory paragraphs are good devices to create points of entry and generate interest. However, our research observations suggest that people interact differently with these elements online.

For example, when participants read the summary paragraph for less than 5 seconds, they read even less of the story than if they had spent between 5-10 seconds with the introduction. This behavior indicates that their level of interest in the story may have been small to begin with. Their quick glances at display type, before moving on, seemed to confirm this interpretation. Overall, the distribution of their behavior mirrors that of reading behavior when no introductory paragraph is available.

In instances where people read an introductory paragraph for 5-10 seconds, their average reading behavior of the article itself appears equivalent to that of articles without an introduction. Reading the summary paragraph made no difference, on average, in terms of how much of the story was consumed for this group of participants. Upon closer inspection, we see that this group evenly divides into one camp that abandons the text with very little review, and a second camp that reads the articles extensively.

In a similar vein, when a participant read the introduction very carefully (for more than 10 seconds), it appears that their behavior also resulted in two typical patterns. The most common pattern (for about 80 percent of participants) was that they abandoned the text of the article after very little review. In short, it appears that most readers got what they wanted from the introduction and decided to move on.

It is interesting to note that in a minority of the cases, however, the opposite occurred. About 20 percent of the subjects who read the introduction carefully went on to read all or nearly all of the article.

For those not completely interested in the topic, but engaged enough to inform themselves in a cursory way, the introduction seems to serve as "Cliffs Notes" for the full text. If not intending to read the article, readers seem to rely completely on the introduction (reading it for more than 10 seconds)..

Observation: Shorter paragraphs encourage readers to continue reading.

It appears that shorter paragraphs on the test pages of the Eyetrack III study compelled our participants to read a larger percentage of any given article. What do we mean by "shorter" paragraphs? Well, we determined the length of paragraphs by the number of sentences or thoughts contained in them.

Generally, a short paragraph was one or two sentences (or one thought). Medium paragraphs were the length of about three short paragraphs. Long paragraphs were the length of three medium paragraphs and nine short ones. Here are two examples:

Short paragraphs:

Medium to long paragraphs:

By examining the number and duration of eye fixations on these paragraphs, we were able to discern how much of the stories containing each of these paragraph lengths was read. The bottom line is that stories with shorter paragraphs got more than twice as many overall eye fixations than those with longer paragraphs. These data suggest that the longer-paragraph format discourages reading and that short-paragraph format overwhelmingly encourages reading.

Observation: Story text in a one-column format gets read more extensively than story text presented in a "newspaper-like" multiple-column format.

Because we observed a few news sites imitating print-style layout grids on their webpages, we decided to put this type of design to the test. So, some of our inside text pages presented stories in a multiple-column format:

Other pages presented stories in a more typical (for online) one-column fashion:

Once again, by examining the number and duration of eye fixations, we were able to discern how much of the stories were read by our participants. Strong results show that the three-column format did not compel people to read as extensively as the one-column format. Our participants read more of the story text presented in one column. Close to three-quarters, or 72 percent, of the story text presented in a one-column format was read. This was markedly higher than the 56 percent of story text read presented in a three-column format.

Observation: Subheads in online stories have little affect on how much of a story is read in the first or top portion of the story when the reader's interest is strongest. However, subheads can increase reading for "skimmers" and for those whose attention in a story is beginning to wane.

There is no substantive difference in the amount of an article that is read on average whether or not there are subheads.

The data in Eyetrack III suggest that readers glance down a bit more than half (about 68 percent) of the length of articles when there are no subheads. (Articles of all lengths were considered here.) For articles with subheads, the numbers are not all that different. Readers glance down a bit more than half (about 62 percent) of the length of articles with subheads.

It is important to note an observation that we were able to make only anecdotally, in numbers too small to do statistical analysis. We identified that a subhead can help hold or recapture attention that is beginning to wane. We saw subheads increase reading for test participants who skimmed (or scrolled) down an article page. The story subheads seemed to encourage eye fixations for those giving the text a quick glance.

Observation: When readers get to an article-level page, they seem to be there to read. Overall, participants' eyes fixated on the story or other text elements before moving to an accompanying image (when there is one).

When participants reached an article-level page they made about seven "stops," or eye fixations, before looking at the photo. Here's the "Top 10" list.

Average viewing sequence of article-page elements:

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

Keep in mind, however, that this is an average of all the viewing patterns of all our test participants. Most readers probably don't jump around as much as this list suggests, or exactly in that order.

Tips

• Be aware that introductory paragraphs are almost a guaranteed "read" for online-news readers. So make them count! Rather than treating them as an afterthought, realize the power they have to make the news more interesting and accessible to your audience.
• Recognize that introductory paragraphs may be the only thing many readers view. Also remember that those who want to read the text of a story will do so, whether or not there is an introduction present.
• Keep paragraphs short. Web writing and usability experts (like Crawford Kilian and Jakob Nielsen) have been saying this for some time, but here is evidence. Long descriptive paragraphs that work in print probably need to be rewritten for the Web if your goal is to use all means to encourage readers to stick with the story.
• Although the data suggest that a single-column article format is read more extensively than story text presented in a multiple-column format, those results may be determined by habit as much as -- or more than -- ease of use. Most webpages utilize a single-column format on article-level pages, and thus, most readers probably have been conditioned to read this way. Understanding this distinction is important.
• On the topic of subheads, remember that initial interest, or lack thereof, seems to drive reading behavior at the top and throughout the length of any online news story. A subhead can help hold or recapture attention that is beginning to wane, but it does not appear to create interest in a story.
• Keep the article-page average viewing sequence observed in Eyetrack III (text first; images later) in mind, but understand the variability within it. Remember that display words and the first few paragraphs are key elements for the reader.

Add/view feedback on this report