Online Journalism Review» eyetracking

Curation questions and the start of some answers

webtech — Sun, 06 Feb 2011 19:01:35 +0000

Information curation, like data visualization, is one of the buzzwords being used by those trying to guide, and goad, news organizations into thinking about new content models. Jeff Jarvis talks about “curation” as the activities of sorting, choosing, and display.

Mike Shatzkin on the Idea Logical blog said

“Curation is a term that has always referred to the careful selection and pruning of aggregates, such as for a museum or an art exhibition. But the concept in the digital content world means the selection and presentation of these disparate items to help a browser or consumer navigate and select from them. Aggregation without curation is, normally, not very helpful. Curation creates the brand.”

There have been some forays into news site curation. LJWorld created a Kansas Legislature page in 2005 that aggregated links to general news coverage of the state Legislature. But they took the next step of selecting and organizing stories by specific issues like Death Penalty, Concealed Weapons and Sunday Liquor Sales. The page served as a “one-stop shopping” resource by anticipating the kinds of information someone interested in the Legislature might want by including such resources as bios of legislators, legislative calendars and bill finders, and copies of the State of the Union addresses going back several years. LJWorld still has an aggregated page of Legislative coverage, but it is not longer curated – it is just a list of links to news stories.

Losing the topic focus switched the LJWorld’s page from curation to aggregation because an essential step in curation is organization, as they did with the issues, not just listing. Just as a well-curated museum has the Early Asian art area separate from the Surrealist collection, so should news sites provide some subject organization within large news topics.

Curation can also entail finding and providing resources from all over, not just aggregating your own content.

The New York Times Topic Pages are an example of this kind of curation. They have thousands of subject / event / personality specific pages which provide an overview article on the topic, links to all the NYT past coverage (with a searchable database specific to those articles), and, here’s where the curation comes in, sections on “Headlines from around the web” (a listing of articles found using the NYTimes’ news aggregation program Blogrunner which has been sent to selected sites) and “A list of resources from around the Web as selected by researchers and editors of The New York Times.”

We were interested in observing how this kind of curated content was used by people on an information seeking quest. We conducted eyetracking sessions with 37 undergraduate students at the University of Minnesota. The students were told that they were going to write a research report for a class and were given a selection of 10 New York Times Topic Pages from which they could choose the topic of their report: the U.S. Dollar, Earthquakes, the U.S. Federal Budget, Foreclosures, Mortgages and the Markets, Piracy at Sea, Stem Cells, Tornadoes, and Unemployment.

The students sat at a Tobii Technology eye tracking device in our research lab and were told to go to the Topic page of their choice and do whatever they wanted (read, click). After 10 minutes we stopped the session. All of the participants answered a short online questionnaire about the website and their information seeking experience after their eye tracking session.

In analyzing the eyetrack videos we designated each section of the Topic Pages (e.g., “Summary,” “Multimedia,” “Navigator,” etc.) and we coded the participant’s “attention” on the page using a construct describing the “Path to a Click” by researchers at Yahoo which characterizes activity on a site by the frequency and duration of a person’s attention to a particular part of the page. These levels are:

Saw: when the participant’s gaze passed across a section
Noticed: when a section the participant “saw,” then glanced away from, was returned to
Parsed: when the participant “fixated” on a section, clearly taking in the text / image

Other things we analyzed in reviewing the videos were:

the sections that contained URLs that were clicked by the participants to figure out whether the placement of the content influenced their clicking behaviors
the content of the items that were clicked (headline only, headline plus abstract, headline plus image, etc.)

Among the findings are the following:

ATTENTION TO DIFFERENT PARTS OF THE PAGE. The percent indicates the number of participants.

Most parsed sections (areas where most attention and time was spent)
- Summary (100%)
- Articles about (70.4%)
- Multimedia (58%)
Most unparsed sections (virtually no attention paid)
- top-right search box and top global navigation (both 97.4%)
- Related Topics (83.3%)
- left-column advertisement (80.3%)
Zones in which the most links were clicked: (based on a 3×3 grid placed on the Topic Page)
- left column middle row
- middle column top row
- left column bottom row
Statistically, contents in the left column were seen, parsed, and clicked the most (Note: the left column was where the archived stories were displayed)

WHAT WAS CLICKED
Among the 37 students, a total of 138 items were clicked (an average of 3.7 clicks per participant) Of those items that were clicked:

42% were headline only
24.6% were a headline and story abstract
14.4% were a headline, abstract and photo

Of all the items clicked 85.5% were story links. Of the other items clicked, 65% of them were from the “Related Topics” box.

In the post-eyetracking survey, participants were asked a number of questions about the features of the page and their importance to them.

72% of the participants rated the Navigator (links to other websites) as Useful or Very Useful. Very Useful or Useful ratings of the other key areas of content on the page: Articles from the archive (67%), Headlines from around the Web (59%), Overview of the topic (64%).
Of the existing or potential functions on the page that could aid a researcher, the following is the ranking by those considered “somewhat important” or “very important”:
- 100% Bookmark or save an article (81% said “very important”)
- 70% See article ratings from others
- 64% Rate an article
- 56% Sort articles by your rating
When asked what it was about an item they clicked on that prompted them to click (multiple responses were possible):
- 81% cited information in the headline
- 27% cited a photo
- 21% cited information the abstract
The preference for display of stories is, by far, most recent to oldest. Articles rated highest by others or most read / emailed articles about the topic was preferred over oldest to most recent stories.
Students indicated their preference for finding information (if they did not access something like the NYTimes topic page) as major search engines (59.4%), the school library website (35,1%), and online encyclopedias (5.5%).
Compared to their alternate sources of information, 52.8% of the participants perceived NYT Topic Pages as being equally credible, 37.8% perceived NYT Topic Pages as more credible, and 9.4% perceived NYT Topic Pages as less credible.
Compared to their alternate sources of information, 54% perceived the information on the NYT Topic Pages as having about the same level of completeness, 30% saw it as more complete, and 16% saw it as less complete.

Students were asked an open-ended question about what they thought of the organization of the NY Times Topic page they used. Here is an analysis of their comments:

49% mentioned the site was well organized and made it easy to find information
40% mentioned something about the site being busy / visually cluttered
35% mentioned the appealing design of the site

Some of the comments might serve as suggestions for other news sites looking into creating similarly aggregated / curated topic pages:

One student said, “Without a search option, it was kind of hard to find an article that would benefit my ‘research paper’ just from looking at headlines.” Of course there was a search option for the story archive, but it is below the scroll towards the bottom of the page and, apparently, easily overlooked.
“It was hard to distinguish between articles and opinion pieces.” This should be an important curatorial distinction.
“Have a way to mark an article you’ve already read.” A followed link is just a slightly lighter color; maybe clicked story links could be made more distinct or could “grey out” for easy recognition.

Honing “curatorial” skills in news organizations is one area that holds potential for creating high value resources for both casual and more motivated information seekers. However, there remain many questions about how best to design and organize these pages rich in both internal and external information. It is a research area we intend to continue to pursue and we welcome your feedback about this study and suggestions for future studies.

If you would like to see “hot spot” images from the study go to: http://picasaweb.google.com/norapaul/EyetrackingHotSpotsNYTTopicsPageProject#. The areas that are red indicate the longest “fixation”, green the next longest, and yellow after that. Areas of the page with no color were not viewed by the participant.

Taking a ride with carousels

webtech — Wed, 04 Feb 2009 08:19:01 +0000

Are rotating displays of Web content an effective way to promote news stories? This is the second in a series of articles about findings from the studies conducted for the member of the DiSEL’s Eyetracking Research Consortium.

One challenge that faces all of us who have a wealth of content on our Web sites is how to best promote it. Unlike a print magazine or newspaper there is no big stack of paper to provide a clear physical indicator that there is much to read and experience beyond the front page.

Although we can debate the effectiveness of using a Web site’s front page when it comes to promoting content¹, our industry is trying a variety of methods to tackle this challenge. One method is the “carousel” – or a rotating display of a site’s content that appears in a dominant spot on the front of the page.

You can see a variety of carousel styles on sites such as MarthaStewart.com, aol.com, msn.com and even the newly redesigned whitehouse.gov. This past October, the Yahoo! Developer network launched the “carousel control” in their user interface library. They describe it as a widget that provides a means for “browsing among a set of like objects arrayed vertically or horizontally in an overloaded page region.”

So, the obvious question from the DiSEL research consortium was: Do carousels work on news sites? Also, is there is a preferred design style that is most effective? With the help of page prototypes created by USAToday.com ² we put some carousels to the test. Here’s an overview of some of our findings.

What we did

In July of 2008 we tested 54 people with a mean age of 31. About three-fourths of the participants were women and one-fourth were men. Most had some college education.

This study was conducted in conjunction with two others that explored the ideal number of links and images on home pages. (More on these studies in future columns.) Test subjects were solicited via Craigslist, local newspaper sites and blogs. Each participant was given a $20 Target gift card for participating. The entire test took about 40 minutes per participant.

The third test conducted was the carousel test. Users were directed to one of three home pages and asked to “browse the site as you normally would” and to “tell the experimenter when you have seen what you would like of the site.” If test subjects browsed beyond five minutes, they were asked to stop.

While users browsed the site, we tracked their eye movements using the Tobii eyetracker.

After the browse time, users completed a questionnaire that assessed their thoughts about the site’s effectiveness and collected demographic information.

Here are the three different home pages viewed, with links to the actual test sites.

Arrow version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on navigational arrows in the upper right of the carousel element. Seventeen of the 54 people tested saw this version of the carousel.

Dot version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on navigational dots in the upper left of the carousel element. Nineteen of the 54 people tested saw this version of the carousel.

Thumbnail version (Link to test site)

This site’s home page contains an automatically changing carousel that allows the user to control the rotation of the stories by clicking on thumbnail images to the left of the main image in the carousel element. Eighteen of the 54 people tested saw this version of the carousel.

What we found

To make these results useful to those thinking about carousel use as a promotional tool, we examined the users’ eyetracking and also asked them survey questions to provide us with some of their overall impressions.

Survey says….

As the chart below indicates, we found that the type of carousel used did not seem affect how engaging users found the home page. Interestingly, though, we did see that users who viewed the home page with the Thumbnail version of the carousel, felt more strongly that the Web site was easier to navigate.

Those viewing the Arrows version also had a stronger desire for more stories on the home page. This could be due to the fact that the arrows navigation did not clearly indicated the number of stories available in the carousel.

Another result worth noting is that users viewing the Thumbnail version of the carousel seemed to indicate more than the other two groups that the overall site was easy to navigate.

All three groups were fairly neutral when it came determining which stories were most important. The carousel style did not seem to provide them with a clear indication of story hierarchy.

In light of that, we also wanted to know how did users would respond to this question: What was the headline for the main news story on the site?

As the chart above indicates, is seems that users who viewed the Arrow version of the carousel were more apt to say the first story appearing in the carousel was the “main” story. Those with the other two versions were more apt to say that it either all or some of the stories that appeared in the carousel element.

All these survey results – while purely observational – may suggest that editors ask themselves what their goals are with one type of carousel-style presentation over another. Obvious navigation – such as thumbnails – seems to encourage users to view the site navigation as easy. It also may be an indicator to users that all stories within the carousel are of equal importance.

But, this is what users SAID. Let’s take a look at the hotspots to see what they DID.

Eyetracking shows…

Eyetracking offers researchers valuable information about where users actually look on a site. It is accomplished by calibrating a user’s pupils with a small camera hidden in the base of the computer monitor. Calibration takes only a few seconds, but the tracking results allow researchers to know where users’ eyes went within a centimeter of accuracy. (For more on how eyetracking works, click here.)

We can get a variety of data forms from eyetracking. An aggregate view of what viewers saw is displayed in a “hotspot” or “heatmap” of the Web page studied. The chart to the left details how to read this data.

We generated hotspots for users’ fixations on each version of the carousel. Here are hotspots from the top portions of the page, which seemed to show us the most interesting data about the pages. See the actual hotspots from the pages below.

Past results ring true

As eyetracking researchers, we always will spend some time observing what trends are similar to results we found in past studies. In this case, we found two things worth mentioning:

The areas of the photos that got the most fixations were faces.

Top navigation gets the most use.

Past studies have shown that faces in photos are the areas where eyes tend to fixate. From observation during this study (and the heatmaps below) you can see that this is true again. No matter what carousel navigation style was used – and regardless of the size of the photo or the size of the person in the photo – users tended to look for and find that human element to relate to. (Stay tuned: In a future column, we will go results of a study conducted with prototype pages from the DesMoinesRegister.com that experimented with size and quantity of images on a home page.)

We also saw that the carousels that employed top navigation elements (Arrows version and Dots version) got more clicks than the Thumbnail version. Other factors (discussed below) contributed to this observation, but it is interesting we consistently find users viewing and using navigation more if it runs along the top of a page or page element.

Attention to change

One clear observation is that the Dots version had a higher percentage of user fixations on all elements on the top part of the page than the other two versions (Arrows and Thumbnails).

Why? Well, one clear difference here is that the navigational dots changed color when story changed. The change had high color contrast as well – from a blue dot to a white dot. The moving dots seemed to draw attention to the page overall.

The Arrows version had no visible change in when stories changed in the carousel. In the Thumbnail version the box around the image changed when the story changed, but the movement and the change in color contrast was not as marked or clear as the dot changes.

So it seems that the moving navigational dots in the Dots version encouraged a higher percentage of users to view all aspects of the top portion of the page. For example, only about half of the users looked at the page headlines on the arrows and thumbnail pages, but closer to 70 percent looked at this list when the dot navigation existed.

Interestingly, though, even though there was a higher percentage of eyes on the headlines in the Dots version, there were less total clicks in this area of the page than on the other two. In addition there were more “dead” areas – or areas with zero eye fixations – on the tops of the pages with the Arrows version and the Thumbnail version than on the page with the Dots version.

The type of carousel used did not seem to affect the number of clicks on the carousel photo and the corresponding headline and blurb.

These observations seem to suggest that if you are going to use a carousel element it may be best to place navigational elements above the display elements and to utilize a navigational design that clearly indicates the change from one story to the next.

But – what do you think? Below are the hotspots from each carousel version. We look forward to your thoughts and comments about what you see – and why. Post your questions here. We’ll respond.

Arrows version

Automatically changing carousel that allows the user to control the rotation of the stories with navigational arrows in the upper right of the carousel element.

Dots version

Automatically changing carousel that allows the user to control the rotation of the stories with navigational dots in the upper left of the carousel element.

Thumbnails version

Automatically changing carousel that allows the user to control the rotation of the stories with the use of thumbnail images to the left of the main image in the carousel element.

¹ Some news sites editors have mentioned “off-the-record” that less than 20 percent of their story traffic comes from people linking to pieces from the home page. The rest comes from blog posts, Google searches, Delicious links and other forms of online promotion.

² Many thanks to DiSEL Research Consortium members Josh Hatch and Kristin Novak at USAToday.com for creating the testing materials. Also, thanks to UNC-CH Ph.D. candidate Bart Wojdynski for his assistance with designing this study and running test subjects.

Eyetracking research shows how younger readers view news websites

webtech — Wed, 10 Dec 2008 04:29:10 +0000

In January 2008 a group of interactive producers from news websites gathered at the University of Minnesota for the first Eyetracking Research Consortium, part of the Digital Story Effects Lab project run by Nora Paul and Laura Ruel. Following is the first in a series of articles about findings from the studies conducted for the Consortium members. For more information about the Eyetracking Research Consortium, go to www.disel-project.org

San Jose Mercury News

Some of the eyetracking studies conducted with the consortium members were comparisons of different design approaches or navigational schemes and their impact on user behavior. Other members just asked for feedback from users about their experience on the website. With the eyetracking we could record not just what someone said about what they did on the site, but to actually see what they did.

The San Jose Mercury News wanted to see how their site compared with the Contra Costa Times site – a sister site with a slightly different emphasis on visuals on the home page. They wanted an unstructured study of how people engage with the two sites and then to hear reactions.

Between April 29 and May 1, 2008 fifteen undergraduate journalism and mass communication students were brought in for the eyetracking session. All were between the ages of 19 and 22. All self-identified as being very comfortable with the web. They were set-up with the following scenario: “You are considering moving to northern California for a job and decide to look at two regional news websites. Look at the sites as if you were sitting in your own room. Go where you want to on the site, stay for as long as you would normally. Let us know when you are done.” Half of the participants saw the Contra Costa site first then were sent to the San Jose site, the other half did it in reverse order.

San Jose was also interested in the usability of their calendar function. We asked a few of the participants specifically to go to the Things to Do function and search for particular items: a concert on Friday night, the movie “Forgetting Sarah Marshall,” sushi restaurants. We also asked them to look at the My News / My Blogs function. This video shows one of the participants’ use of those two functions:

Comments / Observations: In the post-exposure discussion about the sites we asked participants if they remembered a “Things To Do” feature. Seventy-two percent did not recall anything like that. Some of that can be attributed to the fact that the features is below the scroll and people didn’t scroll down the page:

Click to see full image

Other times they did scroll but they simply didn’t fixate on it.

Additional studies / observations: Contra Costa and San Jose use a left hand embedded ad style on their story level pages. We looked at all of the stories that were linked to by the participants to see if the left-embed ad was fixated on. Ninety-nine stories were clicked on by participants within the two sites, an average of 6.6 stories per participant or 3,3 stories per site. The most number of stories clicked by one participant was 11, the least was three.

We looked at the information that was available about the stories that were clicked on (headline only, headline and a blurb, headline and photo and blurb, or headline and photo only.) Fifty-nine of the 99 stories clicked on were headline only, with 17% headline / blurb and 21% headline / blurb / photo. (Two were headline / photo links – they were ARA “stories”, essentially advertisements.)

Of the 99 news stories clicked on 63 were stories with the left-embed ad. We looked at the gaze plot for each of these participants and saw that for 23 of the 63 embedded ads was there some level of “fixation” or about 36%. Sixty-four percent of the time embedded ads were ignored. You could see that the people read right around the ad.

We also looked at whether people went to the right rail ads on the page. Only 22% of the story level viewings indicated any looking at the right rail advertising.

By contrast, though, 56% looked at the left rail. In the left rail was the “most viewed / most blogged” listing and a “top classifieds” box. Sixty-nine percent of the viewings of left rail content was for the “most viewed”, 30% looked at both of the content features in the left rail.

Click to see full image

The other content on story level pages is sidebar or related material boxes. Fifty-two of the stories looked at contained sidebar material. When people went to those stories with sidebars, 75% of the time the material was looked at – mostly when there was a box in the upper right with a photo or slide show.

Click to see full image

The participants were interviewed after they went through both of the sites. Following is the transcript of one of the interviews, some of the insights into how young adults use news sites and different features and functions are interesting.

Interviewer: You looked at two websites. The first one was the San Jose Mercury News. Let’s start with that. Was there anything that stood out?

Interviewee: I noticed that there were columns. I paid more attention to the middle column.

Interviewer: Which was?

Interviewee: I don’t know. I think it was headlines. There was a most viewed section too. I think I clicked on something there. I kind of skipped over all the political stuff because I blocked those out. That’s not a good attitude.

And I think there was some kind of moving ad that caught my attention because there were women in it moving and laughing.

The weather at the top was nice.

Interviewer: There are different ways you can navigate the site. So what did you prefer and what did you use?

Interviewee: I just remember clicking the titles of stories in all three columns. But they were kind of up at the top a little bit more. I tend to think of stuff down at the bottom as just like useless. There’s not usually very many links down there.

Interviewer: The second website was the Contra Costa site. And the same question here. What kind of features do you remember?

Interviewee: I remember that the most viewed / most sent was way down at the bottom. And it’s usually like way up at the top. But they had celebrity news. Like where I usually look right in the center column with all the most important, I don’t know, bad celebrity stuff in there which I usually don’t see on anything other than AOL. And I thought that was a little funny. Although I never heard of the Contra Costa before. Is that like a location?

Interviewer: Yep, a city in northern California.

Interviewee: Oh, okay. Well, I thought they were both very jumbled. Both websites were very busy. They had lots of columns. And text wasn’t very large. It was very small. And not a very readable typeface. So I didn’t really like the layout of either one.

I’m used to – I spend a lot of time on like AOL. So they’ve got like a box with images and then text. And it kind of switches, too. I don’t know. That’s not really a news website though. It’s kind of like an entertainment thing. I don’t know. I could have done with a little less pictures, a little more text.

Interviewer: In both of them or-

Interviewee: Mostly in the second one, the Contra Costa.

Interviewer: So which of the two do you prefer?

Interviewee: The first one. The San Jose Times.

Interviewer: Okay. What was in it that-

Interviewee: I don’t know it just seemed more informative. But I saw some of the same stories echo between both websites. So I thought the first one was a little more interesting because by the time I got to the second, the Contra Costa one, I had already seen the story. San Jose Times, I just liked it because it seemed more professional.

Interviewer: In what sense? What made you feel it was more professional?

Interviewee: I guess just the layout. There’s a little less jumble. Like the headlines were larger. I don’t think it buried the stories. And they started with topics that were a little more sober. They didn’t go right off the bat with like – stars. I can’t remember.

I kind of look at – the movies were good. Local news was good. And stuff that affects me, I guess.

Interviewer: Okay. Now there were a few places that you could do things – for example, you had an option to create a section for my news. Did you notice those?

Interviewee: No. I noticed that I could personalize the weather.

Interviewer: The weather is important.

Interviewee: I like the weather.

Interviewer: In which of the news websites was that?

Interviewee: San Jose Times had a weather thing up at the top. No, I didn’t really notice any of the interactive stuff I guess.

Interviewer: Did you notice the photo slideshows?

Interviewee: No, just that one ad with the moving, laughing women.

Interviewer: Which website was that on?

Interviewee: I think it was the first one. The San Jose Times. It was over on the right.

Interviewer: Did you notice the web polls or web vote? You know they ask you questions-

Interviewee: No, I never vote on those. They always try to set you up.

Interviewer: In what way?

Interviewee: Like on AOL it’ll ask you the stupidest questions. Like I spend most of the time on AOL. And every single news story that you view, it’ll have some kind of – I think it’s some kind of trick to get people to interact more with the story. But they’ll have a little question at the bottom like, do you agree? Do you think this is right? It could be like a – like the kid who was like drowning the swimming pool. It would be like, do you think the conditions could have been stricter? And I just get so tired of those things.

Interviewer: Now did you notice a bar with Digg and Delicious and Facebook on it?

Interviewee: No, but I don’t share stories. I don’t email stuff out unless it’s about dogs. ‘Cause my mom really likes dogs. And she’s pretty much the only one I’d send that to.

Even without eyetracking, this kind of session with casual users of the site can give valuable feedback into what works, and what doesn’t, about your site’s design and features.

Continuous Updates: Design decisions when designating breaking news

webtech — Wed, 24 Sep 2008 10:02:53 +0000

This is one in a series of reports on DiSEL (Digital Story Effects Lab) Research projects conducted in 2007 through a research grant from the University of Minnesota. First in the series was on Navigation through Slide Shows

Why we did the study

One of the great strengths of the Web is the ability to keep news updated and to alert readers immediately to stories they need to know about. This is also one of the biggest organizational changes the Web has brought to newsrooms. Shifting from daily to constant deadlines has caused a rethinking of work flow, editing, and reporting responsibilities.

But questions remain about the best way to ensure that these updated or breaking news items are presented on the page for greatest visibility. Judging from the wide variety of design techniques newsrooms use to designate breaking news, there is no consensus on the best approach.

In May 2007 the top 102 US newspapers’ websites were analyzed to catalog the different ways “breaking” news was being displayed. We looked at labels used to indicate news was updated or new and the design techniques for differentiating “breaking” news from other news items on the homepage.

Labeling: Thirty-four of the online news sites examined had no designation of “breaking” news. Of the 68 sites that did:

31% used some version of “Breaking”
30% used some version of “Latest”
14% used some version of “Update”
25% used miscellaneous labels including “Developing News”, “News Flash”, “News Bulletin”, “News Alert”, “Up to the Minute.”

Design: The methods used to designate, design-wise, the “freshest” news items on the page varied, and were often combined.

12% tagged individual stories with “New” or “Updated’, usually in a bold color
57% put “updated” stories in a box
62% timestamped the entire page and / or individual stories

It was clear that no conventions had been established for designating those news items that were freshest or most recently updated.

We designed the study to get at the following questions:

Did the design choices made to designate updated content affect the user’s recognition of which items were new or updated?
Would the design aid, or impede, the likelihood that the news user would find, read, and remember news items most recently added to the site?

How we did the study

We worked with the Minneapolis Star Tribune to get daily feeds of their homepage. We inserted into the “live” page a fake “breaking news” story (about a tank truck accident and subsequent chemical spill shutting down a major highway in town.) Each day of the testing, our designer created three test “home pages” using the top three ways updated news is being designated on websites – timestamp, labeled, boxed – to distinguish this “breaking news” story from the others on the page.

Version 1: Timestamped

Version 2: “New” placed next to updated story

Version 3: Updated story headlines in a separate box

Participants: We wanted to study a wide array of online users in this research so we took the eyetracking equipment to two locations in Minneapolis: the student union at the University of Minnesota (where the demographics were largely young, Anglo adults), and the Midtown Global Market Downtown (where the participants represented a wide range of demographics – age, race, education.) In all, 96 participants were tested, divided into each of the three conditions.

After the eyetrack calibration, research participants were asked to go to the homepage and “just look around.” They were told they could look however long they wanted and could click on whatever they wanted. When they indicated they were done, they were asked a couple of questions:

What are the main stories you recall from the website?
The response to this question could be checked against the eyetrack video. Was it clear they “saw” the updated story yet did not list it as one of the stories they remembered?
What was it about these stories that made you remember them?
The response to this open-response question helped catalog the attributes of the news story that made it memorable.
Which of the stories on the website was identified as a “news update” // or which of the news stories was the most recently updated?
This question sought to discover if people, in fact, recognized that there was a story that was designated differently than the others.
Do you try to find the most current story when you go to a news website?
This question would allow the researchers to see if there was a difference in response from users who are self-proclaimed “fresh” news seekers from those who are not.
On a scale of 1 to 5 (with 1 not at all interested and 5 very interested) how interested are you in: Politics, Crime, Traffic Reports, Sports
This question could help researchers to see if interest in a news topic (in this case traffic) resulted in a higher degree of recall.

Findings

Both the eyetracking videos and the post-exposure survey responses were analyzed and matched – the videos to see whether participants eyes “fixated” on the breaking news visual cue and the survey to see their responses to the post-exposure questions. Here are some of the key findings:

Finding 1: Bigger is Better – or is it? In terms of visual cues, it was clear from the results of the eyetrack sessions that the larger the cue, the more likely it was to be noticed. By visual cue, the percent of participants exposed to that style of display who fixated:

Headline box: 89%

Timestamp: 48%

“New”: 49%

But when participants were asked in the post-exposure survey to say which story on the homepage was the most recent or which was the breaking news item, the participants exposed to the timestamp (35%) and “new” pages (32%) had greater recognition of the freshest news than those exposed to the headline box (20%). Even though 89% of the people exposed to the headline box page clearly looked at it, only 20% of them recalled any breaking news story.

What might this mean? Although the headline box drew more eyes, the headline text size in the box was smaller than the other two display styles. Headline text size may be an important factor in user’s memory of a story. So, although boxing the headlines made that visual element on the page more broadly seen, the small size of the headline type within the box made the recall of the story weaker.

Finding 2: Story Attributes Participants were asked in the post-exposure survey “What was it about the stories you recalled on the page that made you remember them?” Their open responses were analyzed and categorized (for example, if they said “I remembered that story because it happened near where I live.” Or “I drive that highway every day.” the response would have been coded as proximity or familiarity. If they said “I remembered it because of the color photo next to it” it would have been coded as “photo.” Here are the categories and findings:

I have a personal interest in this story 41.0%

I’m familiar with the topic or focus of the story 9.4%

There was something surprising or emotional 9.4%

Size / position of the story on the page 10.5%

Photo 8.4%

They had clicked on the story 5.2%

The attributes of the story and what made people recall them fell into two categories: personal and design. By far (66% vs 24%) it was the personal triggers (interest in the topic, proximity, familiarity, emotional response) rather than design cues (size / position on page, photo, hyperlinked headline) that were given as reasons for recalling the story.

Observations: The old adage “You can lead a horse to water but you can’t make him drink” probably fits here. If there isn’t interest, the design may well not have any impact.

There is a good deal more observations we can make based on this research, look for more results in future OJR columns.

Online usability questions that need answers

Laura Ruel — Thu, 13 Mar 2008 12:47:33 +0000

If your home page has a rotating menu of featured stories at the top, do users look at it, understand how it works and use it to navigate the site? How about a slideshow with text, sound and images: Do users attend to all three of these items at once? How about the number of links or other informational items on a home page: What number is ideal? When do we cross the line between being informative and becoming overwhelming?

If you’ve ever wondered about these questions, you are not alone. Some of the sharpest minds in online journalism gathered at the University of Minnesota’s Institute for New Media Studies about a month ago to discuss some of their pressing research questions and to set the research agenda for DiSEL: The Digital Storytelling Effects Lab.

Tyson Evans, LasVegasSun.com, discusses the value of research

The group is part of DiSEL’s first official consortium. Eleven news organizations made financial and time commitments to help Laura Ruel and Nora Paul (authors of this column) determine what to test with eyetracking, usability, and effects research methods.

It was no surprise to anyone that there were many more questions than we could answer in the first round of research. We had to prioritize. In this column we’ll let you know what’s on the horizon. We also invite you to add your thoughts to the mix by completing the DiSEL survey.

Riding a carousel; wearing a belt

No, it wasn’t a circus (well maybe!) or a fashion show. The terms “carousel” and “belt” were the focus of some big design questions. Carousels, the group determined, are the pieces at the top of a home page that rotate images and/or headlines to promote stories. Martha Stewart’s site, http://marthastewart.com, was one that the group referenced as having an interesting form for its “carousel.”

Martha Stewart’s site directs users to content with a carousel.

In this case the carousel can be rotated in an autoplay mode (user clicks the “play” button) or manually (user clicks the section name).

“Carousels are coming up a lot,” said Jaime Hutt from startribune.com. “Are there standards?”

Others also wanted to know what works with this form.

Chris Snider from desmoinesregister.com was curious if it is more effective to use a carousel or have a user scroll a panel of story images to navigate to content that is not on the home page.

“What works in carousels and what doesn’t?” he asked.

Similar to carousels are belts. These navigational items usually appear mid-page or towards the bottom of the home page and also direct users to content that is not on the home page.

Belt questions centered around how users navigate and interact with them. Feilding Cage from Time.com discussed some of the questions his organization ponders.

Time.com has a belt on every page.

“We are curious about the functionality of our belt,” said Cage. “Are users reading items on the second scroll and beyond? It may be more of a usability issue, but could be an eyetracking one as well.”

Cage went on to explain that there are 10 items on the belt, and there is a belt on every page. He said the top five items (the ones seen without clicking on the arrows in the upper right or left) are huge drivers to the stories they promote. There is a question of how to drive users to the other five featured stories.

“Should we use a ‘next’ button or is it fine that the belt moves from the first five items to the next five on one click?” he asked. “People most often click on the photos to get into the story.”

When is it TMI?

What is the ideal amount of information to present, and how should it be labeled so viewers notice it? How many supplemental links are useful, and when do they become too much?

“I was always struck with the plethora of information entry points on NYTimes.com,” said Nora Paul. “Can we test for impact on behavior? What about cognitive overload?”

The multimedia producers agreed that the issues of how much information to include – and how to successfully present it – are crucial.

Josh Hatch, USAToday.com, addresses labeling links and page density

“We want to know what images people are looking at on our home page,” said Josha Hatch of USAToday.com. “How much chatter do people read? What else are people looking at?”

Hatch also noted concern about whether users notice items such as interstitial ads, sharing buttons, polls and Flash interactives. He and others were curious about whether handcrafted story content (that looks similar to print design) is effective in capturing users’ attention.

Video viewing

Online video has become an expected media form for all news sites – not just those with broadcast stations as their parent.

YouTube.com also has influenced how users interact with video online. (Notice where the video with this piece resides?)

The questions about video presentation were numerous, but the group narrowed it down to three.

What is the best way to let a user know that video is available? Should video be labeled with an icon of a camera, with words, with a player that already is on the page or with a combination of these elements. A local news site in Raleigh recently won a regional Emmy award for its player that is a combination.

WRAL.com recently won a regional Emmy Award for its video player that combines methods of interactivity.

What is the best way to present the video once a user clicks on it? Members of the consortium want to know if video should be embedded on the page and play in a specified spot, or should it emerge in a pop-up window at a larger size?

“On CNN, if I see a video icon, I don’t click on it because I don’t want to go to the video player,” said Hatch.

He added that if video is placed in a Flash player, many are not aware it is an option.

Cage added that Time.com is experimenting with different player interfaces, some similar to YouTube.com.

“Has YouTube trained people?” Hatch asked.

What is the best way to handle advertising with video? Advertising combined with online video is creating revenue for news sites. Consortium members decided to look at this issue by proposing experiments that assess the effects of the frequency and positioning of the ads. They also would like to discover if pre-video ads make users leave a site.

How to show your slides

Similar to video, audio slide shows are another basic – and expected – mainstay for news sites. Many questions arose.

“To what degree are users reading captions or script to audio?” Hatch asked. “Also, if ads are swapping out beside the slide show, how does that affect the user experience?’

“What is a good size photo to put on a galleries page?” said Amish Desai from yahoonews.com.

Gabriel Dance, NYTimes.com, discusses slide show usability issues

Consortium members agreed that the questions above should be studied. In addition, they listed these other important areas to research:

Should users be provided with the length of time for an auto play slide show, or does this information make them choose not to invest the time in the presentation at all?

What is the best way to present a slide show with multiple chapters?

Where is the best place to put cutlines?

What are the differences in user behavior when ads are placed next to slide shows vs. above slide shows?

This meeting was a true collaboration among an energetic group of multimedia thinkers. Partner news organizations sent the following individuals to participate:

Dallas Morning News: Noel Gross

The Des Moines Register (Gannett): Chris Snider

Las Vegas Sun: Tyson Evans

The New York Times: Torben Brooks, Gabriel Dance

San Jose Mercury News: Randall Keith

Star-Tribune: Jamie Hutt, Jason Erdahl, Matt Thompson, Will Tacy

Time: Feilding Cage

USA Today: Joshua Hatch

The Washington Post: Nelson Hsu

Yahoo! News: Amish Desai

Watch this column for updates as DiSEL embarks on answering the questions this group introduced. Columns on the DiSEL research projects completed last year will also be appearing soon.

Navigating slide shows: What do people choose when every choice is possible?

Nora Paul — Wed, 13 Jun 2007 10:59:53 +0000

During the month of May we rented the Tobii eyetracker to conduct a variety of studies about online news design decisions. Different designs for displaying “breaking news” and supplemental links were tested. We also looked at three variations of New York Times story level pages (the difference was the intensity and variety of supplemental information links available.) All three of these studies need some time to digest the data (from both the eyetracking behavior recorded and the survey responses by the participants.) They will be reported on in later columns.

But as a little “add-on” study, we asked 34 of the people who did one of the other tests to also take a look at the Washington Post’s “Cuba by Korda” slide presentation.

We were interested in seeing how people decided to navigate through this package which included every possible option for moving through the slides.

There was a thumbnail view:

You could click on an arrow next to the photo to go forward or back. Or you could use the “Next” button.

There was an “autoplay” option that let you change the speed of the slide transitions.

Or you could click on the individual numbers lined along the bottom which would reveal a thumbnail of the image associated with that number.

We had a number of questions about use of this complicated navigational suite.

Given all these options – which one(s) did the user select?

Did one navigation style result in more complete viewing of the images?

Did people move linearly or non-linearly through the set of slides?

Did one navigation style result in more complete reading of the associated narrative?

With this study we simply sent people to the site and asked them to look through the package as they would if a friend had sent them the link. There were no instructions about how long to look, just to go through the site until they had had enough. We did not ask them any questions about the experience or their preferences, we just recorded their eye-movements on the screen. Here’s what we found in an analysis of the eyetrack recordings:

Navigation choice

Of the 34 participants, their first navigational choice:

Next 19 (56%)

Numbers 8 (23%)

Arrow 5 (15%)

Autoplay 2 ( 6%)

Thumbnail 0

11 of the 34 switched between two different navigation methods, and 3 of those 11 used three methods (not repeating any of them.)

Of the 19 that started with the “Next” button:

13 used “Next” the entire time

4 used “Next” for an average of 7 slides then went to autoplay

1 went to the thumbnails, looked at a few, then clicked on numbers

1 clicked on numbers

Of the 8 that started with the Numbers

7 clicked through the Numbers the entire time

1 went to “autoplay” after clicking on five numbers

Number of slides viewed

The average number of the 40 slides in the package viewed by those who used one method the whole time:

Next – 28 (70%)

Arrow – 25 (62%)

Numbers – 12 (30%)

Nine of the 34 participants viewed all 40 of the slides – all of them started with the “next” method of navigating the slides. Seven of those nine used “next” the whole time, the other two went to “autoplay” to view the rest of the stack.

For all the participants – the average number of slides viewed was 23.

Time spent

The average time spent with the slide show package was 2:55. The longest time was 8:17 (a young woman of Hispanic background – carefully read all the slide information). The shortest was 0:48. With these outliers removed, the average time spent was 2:49.

For people who stayed with one method, here’s the amount of time they spent with the slides:

Next – 2:34

Arrow – 3:31

Numbers – 2:16

Linearity

One of the possibilities in designing online presentation is the option of moving through material linearly or non-linearly. Two of the navigation options facilitated non-linear exploration of the material – the “numbers” and the “thumbnails.” No one started with the “thumbnails” and of the eight who started with the “numbers” half of them clicked the numbers in order (linearly), the other half clicked around in random order. Of the half that clicked linearly, the average number of slides viewed was 20.75. Of the half that clicked randomly, the average number of slides viewed was only 6.5.

Reading

We viewed all the eyetrack recordings to see whether the participant read the related text about each slide.

Eleven (33%) of the participants carefully read the slide text

Sixteen (47%) skimmed or read the text sporadically

Seven (20%) did not look at the slide captions

There was no predominant method of viewing the slides that resulted in a more careful reading of the text. Of the eleven seen as carefully reading the text, 4 used the “number”, 3 used the “next”, 3 used the “arrow”, and one used “autoplay”

Observations

In terms of practical advice, this observation of navigational methods use makes clear that if you can only have one navigation method – the “next” method, moving linearly through the set of slides is the one to use. It was the primary choice of the majority of the participants and resulted in viewing the most slides.

However, if amount of time spent with the story package is your primary goal, people who clicked from slide to slide using the “arrow” spent almost a minute longer than the “next” users.

The reason for some of the other observations (for example, why no one selected the “thumbnail” view as an initial navigation method and why so few (2) selected autoplay) is not known – we did not ask people about their choices (or about their possible confusion about the choices.) This would be an interesting project for a future time – to do more of a “think aloud” session about people’s navigational choices. But this observational study does provide some insights into the choices made by people faced with a variety of methods for navigating to through rich and deep slide shows.

But perhaps the most interesting observation was the very low level usage of the non-linear approach (and when it was used, how few slides were observed.) Is the linear orientation to looking through material so hard-wired into our media usage that it is, and will continue to be, the preferred way to take in media? Even when it was visual information – as this was – and did not logically need to follow a narrative thread – people preferred to move through in the order it was presented. What does this observation tell us about innovation in digital storytelling and our audience’s tolerance for new design paradigms.

Early lessons from Poynter's Eyetrack07

Nora Paul — Sat, 14 Apr 2007 14:05:08 +0000

The Poynter Institute has a long tradition of doing ground-breaking research. The latest is Eyetrack07, the fourth of their eyetracking projects over the past 16 years. They went to four cities (Denver, Minneapolis, Philadelphia, and St. Petersburg) to look at the patterns of reading in broadsheet, tabloid, and on- screen publications. In all, 600 participants (200 for each of the media) were tested.

On April 10-12, the Poynter Institute held a conference – “EyeTrack07 – Discover Its Power” – billed as a pre-publication party (the book of findings is being edited by Dr. Pegie Stark Adam and is due out in June). Attendees included the vast team involved in the project, the news organizations that collaborated with them, and editors, researchers, and media consultants who hoped to find actionable insights from the findings.

In the opening speech veteran news designer Mario Garcia presented a timeline of Poynter’s research work in the areas of design and reading patterns.

The first, in 1990, used eyetracking equipment to see how people’s eyes moved around the printed news page. The key findings from this study included:

Readers enter a printed page thru the largest image on the page.

A majority read the headline before going to the text.

Photo captions were the third most frequently visited part of the page.
These findings influenced newspapers’ use of photos on front pages and the understanding of how important clever headline writing is.

The second, in 2000, focused on how people moved through news websites and found that, unlike with print, online readers entered the page through text and headlines – not images. This showed, as Dr. Garcia told the group, how the Web was more like a book in which people want their text in a flow uninterrupted by images. The rise of the photo slideshow was a response to this.

The third, in 2004, further focused on online reading behavior. The study (conducted by co-columnist Laura Ruel with Steve Outing) used less invasive eyetracking equipment and relied on mocked up news pages to test different aspects of the online reading experience. Key findings from this study included:

Dominant heds most often draw the users eye first when entering the screen

Eyes fixated first in the upper left corner of the page.

Top navigation was most readily seen and used.

Shorter paragraphs were read more than longer ones.

Ads in the upper left and the top of the homepage received the most attention.
Actionable advice from this study included the need for attention-grabbing words at the start of headlines, greater use of “chunking” text into short grafs, and the preference for one column formats for stories rather than multi-columns.

What this study showed, too, was that larger font text was quickly scanned and smaller fonts engaged in depth reading. It was clear that reading was being done online.

And that brings us to the latest Poynter eyetrack study – an attempt to discover differences in reading patterns between different media and formats of news presentation – broadsheet, tabloid, and online.

The research team drew up a set of issues they hoped to have the project address:
1. Have we lost our ability to read in depth?
2. Are we a society of scanners?
3. Has the newspaper habit disappeared from most people’s lives?
4. In a multimedia society how can the various media compete and survive?
5. Can a real fusion of online and print truly exist?
6. Do readers actually read and retain info online?
7. Are large formatted papers more likely to disappear than small format?
8. What is the role of advertising in a multi-platform environment?
9. What is the new definition of news?
10. What role will mobile appliances play in newsgathering and disseminating?

In 600 research sessions, they recorded participants’ eye movements as they looked through one of the three media formats, resulting in more than 102,000 “eye stops” (demonstration of significant interest in the element of the page / screen being looked at) which were coded and analyzed by researchers at the University of Florida. In all, over the course of five months, 30 days of published material was recorded:

2,364 broadsheet stories (average no. of stories read – 11.8)

2,188 tabloid stories (average no. of stories read – 10,0)

2,306 online stories (average no. of stories read – 11.9)

In the major findings revealed in the opening day of the session, a few of these questions were apparently addressed. Here are some of the conclusions from the research that are particularly relevant to online news reading in comparison to print reading behavior.

Reading thoroughness:

Once people chose what they wanted to read they read more thoroughly online than in print.

Online readers read both short and long stories more completely than either broadsheet or tabloid readers (online 62% of the text of stories longer than 19 inches was read compared to 52% in tabloid and 49% in broadsheet.)

Online readers, overall, read an average of 77% of the stories they chose to read.
Implication? Can we get over the longing for the “good old days” when supposedly people sat and read the newspaper cover to cover? It is clear that once engaged, the online reader stays with the text of a story longer than the newsprint reader. What might this mean for online news design. Does this, for example, argue for the placement of supplemental links 3/4ths of the way down the news story since interested readers seem to get that far?

Reading styles:

There were two reading styles revealed in the research – methodical readers and scanners. The “methodical” reader is described as someone who reads from top to bottom, without scanning, moving down the page / screen and sometimes going back to re-read material. The “scanner” would move quickly from headline to photos to reading part of a story without going back to the same place in the text. The eyetracking showed:

75% of print readers were methodical.

Online readers were evenly split between methodical and scanners.
Implication? In the newsprint world one size, by necessity, fits all – and a majority of readers have developed a habit of newspaper reading fits the medium. Not so online. One of the ongoing challenges for online news design is accommodating readers with different levels of interest – how do you provide both the quick hit news and in-depth content. Now, knowing that the audience is split between two different types of readers, how can online news be designed to engage both types of behaviors. Would it be a reader service to provide alternative second level story pages – one designed in regular column format with few graphic distractions for the methodical reader and one with multiple story sets with images and graphics to facilitate scanning behavior?

Reading entry points:

The first stop and second stop points, those places where the eye initially and secondarily fixated, differed by medium:

Broadsheet: Headlines then photos

Tabloid: Photos then teasers (directionals)

Online: Navigation bar / teasesrs (directionals) then headlines or ads
Implication? Giving online readers guidance to where content can be found and featuring / teasing to stories you want to showcase will get their attention. Headlines guide readers to those stories they might be interested in and, once they are interested, those stories will be read quite thoroughly. There is much more to be studied about how this finding might help lead readers to stories that fulfill that “need to know” mission of the news organization.

How graphics were viewed:

Different graphic elements drew the attention of different media readers:

Broadsheet: Explanatory graphics drew the most “eye stops.”

Tabloid: Charts were most frequently viewed.

Online: 88% of the eye stops on graphics went to maps, including weather and traffic.
Implication? The Web is a learner’s medium. Maps provide specific, actionable information, particularly when it is constantly refreshed with the latest information (as with weather or traffic.) This also might argue for greater attention to the use of mash-ups as a way to display geo-specific information and reference.

What got looked at online?

The eye stops data from the online readers was analyzed to see what content elements were most frequently fixated on by users. Here is the heartening, or depressing, statistics on what, out of 11,400 eye stops, got viewed:

Story lists: 35%

Teasers / directionals: 27%

Ads: 18%

Blogs: 4%

Photo galleries: 3%

Podcasts: 1%
Implications? Segmenting content by its form (photo gallery, blog, podcast) rather than by its subject content may well be marginalizing.

Interesting future research might look at how packaging relevant alternative material with key related news stories improves the use of this supplemental information as the Washington Post does with its sidebar links to a collection of relevant photos or to “Who’s Blogging?” that specific article.

These are just some of the preliminary findings from what promises to be a deep and much discussed research project. Project leaders Sarah Quinn and Pegie Stark Adam have provided online news designers and those interested in deeper research into what works, and why, online with a rich vein of data and I, for one, am looking forward to the final report of findings. If you are, too, information can be found at http://eyetrack.poynter.org/.

Eyetracking points the way to effective news article design

Laura Ruel — Mon, 12 Mar 2007 10:32:55 +0000

When one of world’s best-known usability experts, Jakob Nielsen, conducts eyetracking research to test what his usability work has shown, the results generate some beneficial tips for online editors. This is what happened in late 2005, when Nielsen and Kara Pernice Coyne, the Nielsen/Norman Group’s director of research, conducted an eyetracking test with 255 people in New York City.

With a little more than half of the participants (63 percent) ages 30 to 49, the test generated results applicable to the target audience for most news sites. Additionally, 20 percent were 18-29 and 16 percent were 50-64. Fifty-eight percent were female, 42 percent were male. Every test subject was given 50 tasks to complete. Sessions with each test subject lasted about one to two hours.

Coyne (who we interviewed for this column) stresses that crucial to understanding the testing results is an awareness of the user’s motivation or goal behind each task. Some of the testing scenarios included asking the user to “read the news” or “read/learn”, making a number these results particularly helpful to journalists. She said eyetracking is valuable in these cases because it indicates not only where our users look, but where key usability problems exist.

“[With eyetracking] we can see that a user may navigate the page of an interface that houses the info she wants,” she said, “but if the text is poorly presented, or the navigation is cluttered, or there are too many superfluous images so she cannot easily find what she needs. This is a lost opportunity.”

We’ve featured three of the more interesting journalistic study results below.

Featured finding #1:
Rewrite + reformat = remember

What if you could engage users in a story for about half the time, yet have them remember about 34 percent more of the content? That’s exactly what one test showed. Spending less than two hours rewriting and reformatting a story about New York City restaurants really paid off according to this study.

The image below shows the two stories tested:

The original version (left) was revised to increase white space, make the main idea concise, remove unnecessary images, shorten lines of text and add a graphic for each restaurant ranking. (Nielsen/Norman Group images, used with permission)

The eyetracking data is featured in the image below. Red areas indicate the areas where the fixation length (or the length of time the users spent look at that area of the screen) was longest. Dark areas indicate low or no fixation length on that part of the presentation.

Users spent a longer amount of time (about one minute) viewing the original version of the content (left) but remembered 34 percent less than those who received the reformatted story (right). In both cases a greater amount of time was spent on the left-hand side of the page. (Nielsen/Norman Group images, used with permission)

Nielsen and Coyne also ran a similar test with more complicated content – a story from the New York Times about Australians receiving the Nobel Prize for Bacterium work. The results were similar. Changing the story presentation to text with:

bulleted items

subheadlines

tighter writing
increased comprehension by 12 percent, with readers of the reformatted text indicating that they were more satisfied with the experience.

Coyne calls these results “cool,” but adds that they were not unexpected.

“We have seen many striking results like this over the years,” she said, “so were not tremendously surprised by it. It makes sense too. If a user is comfortable, not hindered by clutter and superfluous words, and can scan the main points, he will get the summary of the article quickly and easily. Formatting for the Web goes a long, long way.”

So what?
What do these results mean for online journalists? Take the time to rewrite and reformat print stories for online if you want users to:

get through a story more quickly

remember more of the content

be more satisfied with the story experience.

Coyne’s direct advice for online journalists includes making sure that no matter what, all pages and articles have clear well-written headlines at the top that users can scan to:

see what the article is about

confirm they are on the page they want to be on.
“Without [good headlines and subheadlines] people … need to read the text to figure out what the article is about,” she said. “But some people, many people, simply won’t do this. They will just move on.”

She adds that overall, online stories can benefit from more concise writing, front-loaded with the main point first.

“Assume people will only read the first few words of a line,” she said, “so bulleted lists are always good, as is bolding or creating links from important, information-bearing words.”

Featured finding #2:
Precise and relevant editing = successful design

On home pages and story level pages, eye patterns indicated that text that isn’t precise and images that aren’t information-bearing don’t get looks, amounting to wasted space. For example, here is a test Web page where users were directed to “read news.”

This BNSF Railway page was tested by Nielsen and Coyne. Users were sent to this page and directed to “read news.” (Nielsen/Norman Group image, used with permission)

The hotspot below shows that the image of the train did not get eye fixations and that users eyes traveled around the page – not directly to the “top stories,” which is where the site’s news is located.

Users did find the “top stories” and spent the most time there, but only after traveling the page and making fixations in other areas. (Nielsen/Norman Group image, used with permission)

A different version of the BNSF page also was tested. The page and its corresponding hotspot are featured below. Notice that the longest eye fixations are on the area labeled “News Releases,” where the main stories are and where the site designers intended to direct them. Users seemed to find exactly what they needed and stay there when information was more clearly labeled. Again, the more “decorative” image gets no fixations.

Another page of the BNSF Railway site and its corresponding hotspot. (Nielsen/Norman Group images, used with permission)

So what?
These results indicate that every item on a news Web page needs precise and thoughtful editing. As indicated above in Featured Finding #1, users will read only the two-to-three words of a headline (a result that also was found in Poynter’s Eyetrack III study, http://poynter.org/eyetrack and seen in the hotspots from the first Digital Storytelling Effects Lab’s initial study, http://disel-project.org.)

Moreover images with little information are ignored. (More on this in next section.)

Coyne’s top three suggestions for online news designers are:

present text in a way that is easy to scan on the Web

create a simple navigational structure

replace useless graphics with useful ones or with white space.

She adds news organizations need to stop taking their design cues from their print ancestors, even though a motivated user may put up with a poor Web design.

“[News Web sites] need to reformat for the Web medium,” she said. “But, users who are very interested in an article will read through it, even if it is presented as a wall of text. So the print format is not the worst for these very motivated users.”

Featured finding #3:
Photos edited for relevance = photos viewed

In the case of Web design a picture isn’t always worth those thousand words. According to Coyne users treat pages with superfluous images like obstacle courses: The images create barriers to content. Moreover, Nielsen and Coyne concluded that images appearing unneeded, at least peripherally, will be erroneously tuned out.

The types of images that get attention share these attributes: