Online Journalism Review» infographics

L.A. Times launches sharable electoral vote map

Eric Ulken — Mon, 09 Jun 2008 18:34:03 +0000

Which campaign will get to 270 in November, and how will they do it? The L.A. Times has built an interactive map that allows readers to create and test their own electoral vote scenarios, and then embed those scenarios in their own sites.

Sample electoral vote scenario: (not my prediction; just an uneducated guess for demonstration purposes only)

This is the creation of Sean Connelley, our Flash guru, based on our 2004 electoral vote tracker. The cool addition this time around is the sharing functionality.

We’re hoping to improve on this as the campaign heats up, perhaps adding demographic info and data on past elections by state. Would love to hear suggestions.

Newspaper websites shine with online campaign graphics

Robert Niles — Tue, 11 Dec 2007 16:37:47 +0000

Every election cycle inspires innovation at newspaper websites. This year, leading U.S. newspapers are offering some stunning online graphic tools to help their readers get an overview of the many elements of the campaign, at a glance.

One appropriate place to begin in following the 2008 presidential election campaign is to survey the existing balance of power between the nation’s top two political parties. Congressional Quarterly’s Election Map, on CQPolitics.com gives readers the option to see the publication’s projected Democrat vs. Republican breakdown for U.S. House and Senate seats, as well as for governors and the state-by-state results for the 2004 Presidential election. Clicking on each district launches a new browser window detailing demographic information about the district, and its recent election history.

The marquee race in 2008 is, obviously, the campaign to replace George W. Bush as U.S. President. The New York Times offers separate pages laying out the Democratic and Republican primary schedules, but the Los Angeles Times offers a superior Primary Tracker that combines all the information in the NY Times’ graphics, but in one easy-to-navigate page.

The LA Times’ graphic includes both a timeline of primary schedules for both parties, as well as a U.S. map that accesses state-by-state details. Instead of placing bullet points for each state’s primary election on the appropriate date of the timeline, the LA Times weighs the data points, placing larger circle in place of points for the primaries in larger states. That allows readers to understand the impact of shared primary dates like February’s “Super Tuesday” at a quick glance, instantly rewarding the reader for his or her attention to the graphic and, I suspect, enticing many of them to click around and discover what other information lies within.

Contrast the LA Times’ thoughtful effort with Politico’s Follow the Campaign Trail, which serves up a cartoon of a U.S. map, and nothing else to engage the reader on first glance. Click on each state, and you’re served a list of “coming events” that include many already months past. Silliness does not trump substance, in this case.

My only quibble with the LA Times’ effort is that one must click on the various states to see information about their upcoming elections in the detail box, instead of merely mousing over the state. But otherwise, the LA Times’ feature provides a powerful example of how an online graphic can pack more information into a smaller space than can a print graphic, while assisting, rather than impairing, reader comprehension.

The NY Times shines, however, with its compelling page tracking Presidential campaign finances. The initial page underwhelms, but click on a candidate’s name, and one finds a rich geographic overview of the candidate’s financial support. Look toward the bottom of the page, and you’ll find a timeline that illustrates how that candidate’s contributions have fluctuated over the campaign’s course.

Another nice touch: Click to see the details on one candidate, then select another, and you do not return to the overview, but instead go to the detail page for that other candidate. That makes navigating through candidate-by-candidate comparisons a breeze.

Finally, to see where each candidate will be each day of the campaign, click to the Washington Post’s outstanding Campaign Tracker. The Post’s page blends a custom Google Map with a traditional list of candidate appearances. Click a candidate’s name, and you will find a weekly schedule, with mapped to another Google Map, as well as an analysis of where the candidate is spending the most time… and raising the most money.

The Best of the SND.ies

Nora Paul — Mon, 17 Sep 2007 15:13:01 +0000

Judging online journalism awards always is a great opportunity to see the best work newsrooms are doing. But as those of us who have been competition judges know, we usually view entries in only a couple categories – best sports section, best online commentary, etc. We don’t get to see the full range of work that has been submitted.

That’s why judging the final round of the SND.ies awards, the Society for News Design’s Best of Multimedia Design Competition, can be an educational experience. This year, nine judges gathered in late August at the University of North Carolina-Chapel Hill for an intense two days of reviewing, discussing, and evaluating a wide variety of entries. Something unique about the SND.ies is the lack of a requirement that the judges designate a gold, silver or bronze winner in each category. There may, in fact, be no entries that make it to gold status, or silver, or any award level. It makes the discussion of each entry focused much more on its individual merits rather than comparing it with others in the category.

As a judge (Nora Paul) and the competition coordinator (Laura Ruel) we observed some distinct trends in multimedia design. Without revealing the winners (they will be announced on Oct. 13 at the SND awards banquet in Boston) we’d like to discuss the types of entries that we saw, the elevation in the quality of entries during the past few years, and the kinds of usability questions that this next level of multimedia seem to raise.

Five types of entries

First of all, we want to say how impressed we are with the variety of ways journalists are using multimedia forms to tell stories. This year, we observed five distinct types of entries:

Animated infographics

Infotoys

Narratives

You are there

BOPs (Big Ole Packages!)

Animated infographics

These entries are informational graphics that explain a sequence of events in an accident, or the steps in a process or show how something works. This type of presentation style has become more sophisticated and clean since the competition began in 2002. The influence of elmundo.es’ high quality work in this area is clear. Most of these entries have a simple, streamlined look, with an appropriate use of white space. They are basic line drawings that reveal complex working parts, and – in some cases – provide a linear explanation of a sequence of events.

One of this year’s finalists, NYTimes.com’s recreation of Cory Lidle’s airplane crash into a New York apartment building, shows the power of animation to detail the sequence of events.

It is educational to see how the initial, static graphic evolved into the animated infographic produced a few days later, after all the details of the ill-fated flight were available.

Initial, static graphic for print publication.

Animated storytelling graphic

Infotoys

We like to call this “data you can play with.” Although we have seen this form in years past, this year’s entries seem to be pushing this storytelling method a bit further.

Take a look at this package by indystar.com. It is an excellent use of a controlled, interactive graphic that lets users explore statistical information.

Indystar.com used statistical data to provide an historical overview of the Colts.

Another good example of customizable data came in the form of a NYTimes.com piece, “Is it Better to Buy or Rent?” This interactive helps consumers evaluate data in a changing market. It is extremely useful. The flexibility of the interface and the factors considered when providing advice about buying versus renting is sophisticated and easy to use. Moreover this presentation has a great shelf life. It can benefit readers for years to come.

This NYTimes.com interactive is an excellent example of being able to customize the content output based on your personal settings.

“Infotoys” with crime data also made their way into the pool of entries. While this isn’t a new concept, inquirer.philly.com’s display does more than just take the data and marry it with a map. It takes it to another level by providing a simple interface that allows users to customize views. It also provides contextual information about the number of homicides.

Philadelphia Homicides in 2006 goes beyond the traditional crime data map.

Multimedia narratives

We’re categorizing these pieces as self-contained packages that follow a single – somewhat linear – narrative thread. This year we saw an excellent uses of images and increasingly well produced and well synced audio overlays. We believe the use of Soundslides, a production tool for still image and audio Web presentations, has helped journalists to focus more on the content and less on the technology. Consequently, they are moving multimedia narratives to a new, more advanced level.

One example is Palmbeachpost.com’s simple, elegant, touching narrative about train jumping. It is well focused, simple and has great news value. Offering the presentation in both Spanish and English adds to its appeal.

Train Jumping by palmbeachpost.com is an impressive, touching multimedia narrative.

You are there

High level graphics and embedded POV/panoramic images are being used to create “you are there” packages that give users a sense of location and exploration. These allow the users the control to customize their viewing experiences.

Elpais.es used beautiful 3D illustrations with just enough animation to let the user get a close-up look at Formula 1 racing.

Formula 1 racing comes to life with this elpais.com presentation.

In “The Met’s New Greek and Roman Galleries” by NYTimes.com, 3-D renderings and panoramas place viewers inside a new area of the museum. It is a strong interactive that gives the user a large amount of control with clean 3-D work, smooth, easy-to-use panoramas and elegant design.

NYTimes.com: The Met’s New Greek and Roman Galleries

BOPs: Big Ole Packages

BOPs are large compilations of storytelling materials such as the text, videos, audio slide shows, animated graphics and interactive applications. These ambitious packages tell complex stories with many layers of information. Two special challenges for producers of these pieces include:

Organization: Designers of the most successful of these story packages resisted the temptation to organize these pieces by media form. The winning entries didn’t use menu items such as “video,” “photos,” etc., but rather used descriptive story labels that summarized the story areas by topic.

Interface: With so much information, the most successful of these packages had navigation that helped spark user interest in the story. Navigation also was intuitive enough to allow people to easily and effortlessly find their way into all the material – and just easily find a way out.

One example of a BOP is a St. Pete Times’ piece about Florida’s wetlands. In most cases it uses the best media forms to tell particular parts of the story. For example, an interactive graphic clearly explains how wetlands work. To add depth to the text stories, the designers use highlighted links to primary source documents that aid in revealing politicians’ true leanings. The videos, graphics and photos each complement each other without duplicating content.

This St. Pete Times’ Web presentation about an ecological crisis uses multiple forms of media to tell the story.

Another BOP example is a class project by students from UNC-Chapel Hill, Universidad de los Andes and Universidad del Desarrollo that documents life in the Atacama Desert, Chile – the driest place on earth. The animated graphics, informative audio, powerful images and carefully chosen video combine to provide a great example of integrated multimedia storytelling.

Atacama Stories is a large-scale student project that combines storytelling methods to provide an in-depth look at this desert environment.

The challenge

It is clear from this competiton that the skills in multimedia use have become more sophisticated in some newsrooms and the styles that seem to be most effective are getting copied and re-used to very good effect. While this competition is about recognizing great work, the real winners are the news audience.

L.A. Times uses mapping, databases to build interactive homicide map

Eric Ulken — Fri, 10 Aug 2007 09:28:53 +0000

Eric Ulken is the editor, interactive technology, for latimes.com. He also is a former student editor for OJR.

I’d like to draw your attention to a new feature that launched on latimes.com this week: The Homicide Map is a visual interface to the Homicide Report, Times reporter Jill Leovy’s effort to chronicle every homicide in Los Angeles County.

As of July 30, The Times has counted 496 homicides in L.A. County. While the Homicide Report focuses on the individual victims, this tool helps users analyze the broader geographic and demographic trends within that staggering figure.

The Homicide Map enables users to:

Filter homicides by victim’s race, gender, cause of death, and other parameters

Find homicides near an address and/or ZIP code

View photos of victims and link to Leovy’s reports (and the sometimes heartbreaking user comments that accompany them)

Get customized updates on an RSS reader or in Google Earth

We’re excited about the marriage of great Times reporting with a data-rich visual interface.

Animated infographics and online storytelling: Words from the wise

Laura Ruel — Wed, 23 May 2007 12:21:13 +0000

Sometimes the best research is the voice of experience. Alberto Cairo, former director of infographics and multimedia at elmundo.es in Madrid, is known worldwide for the work he has done using animated graphics as a powerful storytelling tool. While at elmundo.es, his staff won more NetMedia, Malofiej, and Society for News Design awards than any other publication in the world. In the 2004 edition of the SND.ies, the Society for News Design’s Best of New Media Design competition, Cairo’s department won the first gold medal ever given for breaking-news coverage.

Now an assistant professor at the University of North Carolina-Chapel Hill (and a colleague of co-columnist Laura Ruel), Cairo has been taken his hands-on knowledge and moved it into the classroom. Here is a link to some of his students’ work: http://www.albertocairo.com/jomc/projects/index_projects.html.

International animated infographics expert Alberto Cairo is writing his first book, Visual Journalism: Print and Multimedia Infographics Storytelling.

Many online journalists are anticipating the book’s release, which should be in 2008, because there is an urgent need for the guidelines it provides. So, below we have offered you a form of a “sneak peek” – Cairo’s advice for multimedia storytelling using informational graphics.

Q: Define animated infographics and describe why they are a powerful storytelling tool for journalists?

A: Traditional infographics consist of the use of the tools of graphic design, illustration, cartography and statistical representation to convey journalistic information. Web infographics increase the number of tools to include the ones of online storytelling: 3D and 2D animation, interactivity, audio and video.

Infographics are difficult to define precisely because of their multiple and flexible nature. Almost any informative representation where verbal and visual elements are combined, and that is intended to tell a news story, can be considered an infographic.

Infographics have been crucial throughout the history of journalism to explain things that could not have been told otherwise. It is obvious that there is not better way to display large sets of data than with a good statistical chart, or to provide geographical context to a story than with a map. In my book I explain that, on an abstract level, an information graphic is an aid to thinking and understanding. This is not a new idea, of course. A good infographic makes patterns arise, discovers trends, condenses enormous amounts of information in a very small space.

To understand why infographics are so important to modern journalism, try to think about stories such as September 11th, the invasion of Iraq or the shootings at Virginia Tech without them.

Q: What are three current examples of excellent animated infographics? Why are they effective?

A: The New York Times has the best statistical online infographics in the news industry at the moment. They have finally understood that in the Internet era infographics cannot be just static, linear representations. Sometimes you have to let the reader transform the information and play with it. You have to let the readers adapt the data to their needs.

Cairo believes that the work of nytimes.com is some of the best online inforgraphic storytelling. The graphic above is one where users can interact and “play” with the numbers themselves.

Among the best recent multimedia coverage, I would highlight the Times’ interactive about the Virginia Tech shootings. The combination of audio, video and information
graphics makes this breaking news coverage one of the best I’ve ever seen. You see, almost any publication can create a good long-term, feature project online. It is much, much more difficult to do that in a tight deadline.

The Times’ ability to create quality animated storytelling on deadline is noteworthy, according to Cairo.

With their most recent hires, The New York Times is trying to emulate the model we used at elmundo.es back in 2000-2005. The are focusing more on breaking stories, rather than on features. Don’t get me wrong, features are great, but a newspaper should focus first on up-to-date information.

The best animated diagrams can still be found in Spanish news organizations. Elpais.es and Elmundo.es keep publishing great linear explanations. Athough their work is still a great source of inspiration for professionals worldwide, both news organizations need
to think about new ways of presenting information. They cannot continue to succeed if you by using the same formula over and over again. In the current environment, your work gets dated quickly if you do so.

Spanish news organizations, such as elmundo.es, still are producing the best animated diagrams and linear explanations.

There are news organizations in the United States that currently are taking steps in the right direction. I would mention The Dallas Morning News, San Jose Mercury News, and The Boston Globe. The Sun-Sentinel is still a major reference for multimedia graphics as well.

Q: What are the most common mistakes multimedia journalists make when creating animated infographics? How can they avoid them?

A: The first and gravest mistake that individuals make believing that infographics are a branch of graphic design or that they have anything to do with illustration.

Infographics, like any other form of journalism storytelling rely on solid, accurate content. It is great if you can create cool 3-D animations and great interactive scenes, but if your content is weak, the presentation will be weak. There are not good infographics without good reporting.

As a second mistake is the fact that many people think that online infographics can be created just by “translating” print pieces to the Web. Unfortunately, this is what is happening in many newsrooms worldwide. That’s the wrong approach because what you usually end with is with a still picture with a bunch of roll-over buttons. In order to create a great multimedia infographics piece, you have to think about it from the very beginning, on the planning process, rather than consider it a subsidiary element that depends on the content generated by the print side. Print and online use different languages that share the same root grammar. They are dialects.

Q: Can you provide us with a checklist of questions for editors to ask themselves when deciding if an animated infographic is the best storytelling method for a given topic?

A: Checklist:

Can the story be explained using a map, a statistical chart or a diagram? If you need to show the “where” of the story, you definitely need a map.

Are there size, length, distance, amount comparisons involved? Then, you need a chart.

Is there any process or procedure hat can be better understood by means of a visual display? Create a diagram.

Do you need to recreate the scene where the story took place? In this case: do you have enough information to recreate it accurately, without making up details? This is crucial. The old infographics motto says: if you don’t know how it is, don’t draw it. I’ve added my own corollary to that motto: if you don’t know how it moves, don’t animate it.

[More suggestions from Cairo at: http://www.albertocairo.com/infografia/articulos/2006/design.html
http://www.albertocairo.com/imagenes/articlesndsummer.pdf]

Q: What suggestions do you have for individuals in an online newsroom who want to begin creating animated infographics?

A: It’s quite simple: give it a try. You don’t need to be a Flash guru to create online infographics. Learning just the basics (something that can be done in two or three days of training) can give you the main tools needed to start working. Then, with experience, you will incorporate new tools and techniques. That’s the path we followed at elmundo.es back in 2000. Nobody in my team had any experience.

The conceptual side is also extremely important: you need to educate yourself. Read about the psychology of vision. Understanding the basics of cognitive science is crucial. Study cartography, statistics and information design. There are many great books out there.

Q: What are some things the industry can do now to challenge itself to move in the right direction with multimedia infographics?

A: Understand that to obtain profits, you have to invest in training, equipment, innovation and good staff. Cutting expenses might be good in the short term, but it will hurt quality in the long term. The quantitative evidence suggests that publications that increase quality and focus more on stories the readers care about (not necessarily local stories) don’t lose readership – or they lose it in such a slow, steady pace that it will give them time to become completely online. Innovation is crucial in this equation: create new ways to convey information.

If you want to survive in the current environment, you have to attract online readers by offering them content presented in ways they will not be able to find anywhere else. Any citizen journalist can present information using words or pictures. It is much more difficult to find good user-generated multimedia or infographics content. Engage your readers by offering them breaking-news, accurate and spectacular infographics presentations. My experience in events such as the March 11th 2004 terrorist attacks in Madrid tells me that readers really appreciate the efforts.

Elmundo.es’ March 11 graphic got millions of page views in just a few days.

Other breaking-news presentations at elmundo.es did not generate so many visits, but they were extremely successful in other ways. In some cases, they were local breaking-news stories. Again, any newspaper can do an infographic on the latest NASA mission, but only a few can do a sophisticated online presentation on the state-of-the art steel bridge that is being built right next door. You have to find the right balance between global and local. Never forget one of them because you’re focusing too much on the other.

Q: Who has influenced you most as a professional?

A: The people I’ve worked with: the folks at La Voz de Galicia, Spain, who accepted me as an intern. My partners at Diario16, DPI Comunicacion and elmundo.es, of course.

After that, almost anything I read or see influences me. I am like a sponge. My own students have a huge influence on the way I think about infographics, too, especially those that participate in our multimedia documentary projects. When they participate in those projects they are usually a few months away from graduation and cannot be considered mere undergraduates anymore. They are professionals ready to get an entry-level job as infographics journalists – and to surprise you with their creativity.

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:

Multimedia storytelling: when is it worth it?

Laura Ruel — Sat, 10 Feb 2007 23:10:15 +0000

One of the greatest opportunities of multimedia journalism is the ability to make different design choices. Although most online organizations present digital derivatives of their “parent” products – newspaper sites present columns of text, radio sites feature audio files, and TV sites provide video – we are seeing an increase in the number of sites embracing all design options. Radio sites are complementing their audio with photos and/or text, newspaper sites are presenting video and audio slide shows along with their text, and TV stations are supplementing their video pieces with text stories.

Increasingly, news organizations are challenging themselves and their staffs with stepping outside of their format expertise and trying to produce news packages that take full advantage of the array of media formats available. Online news sites are trying to integrate different media types into the story package – creating rich multimedia experiences for their audience. Exploration in the use of Flash helps designers create a common interface that transitions easily from graphics, to video to photos to audio without interrupting the user.

Creating these rich media experiences is a commitment of time and specialized talent that news organizations cannot – and should not – afford for every story. This is the biggest challenge for news designers: Given all the design options now available, how does one evaluate effort over return? When does an integrated, interactive story work best in terms of users’ enjoyment and/or comprehension? When is it warranted to help with understanding of the topic? Bottom line, when is it worth it?

In this column we will find and report on the beginning efforts to research and evaluate story design effects on news audiences. In this month’s column we discuss the findings for the first project of our research consortium – DiSEL – the Digital Story Effects Lab.

Comparing Static / Passive Text and Dynamic / Active Multimedia Stories

DiSEL study: Overview

In 2002, working with a graduate student at the University of Minnesota, we attempted to “catalog” the areas where design decisions could be made when crafting stories online. These “Elements of Digital Storytelling” (www.inms.umn.edu/elements) looked at a variety of attributes of digital stories.

In our first DiSEL study, we looked at two of these attributes, both related to “action.” We wanted to compare the impact on user attitude and experience between different approaches to content and user action.

Stories can be designed with either static content (the material just sits there, there is no movement) or dynamic content (the material moves.) In terms of how the user must engage with the content, stories can be designed to be passive (once the user has clicked to the page they can sit back, there is no action to take) or active (the content is designed so that the user must engage with it in order to fully experience the full set through selection of options or clicking to see the next portion.) Dynamic / active content is the type that is typically crafted using Flash. There is motion and choice. Static / passive content describes HTML coded, there is no motion and what you see is all you get.

We found perfect pieces to test these two presentation styles in the BBC’s material on health effects of recreational drugs. They had created two packages – the static, encyclopedia-type page display here and the dynamic interactive package here.

The integrated, interactive piece about recreational drug use creates a scenario where users give various drug combinations to a dancing clubber and witness the effects on his body.

The encyclopedic-type presentation lists various drugs, describes their effects with text and an image.

In addition, we decided to see if the motivation for going to the site would change the user’s perception, attitude, and information retention.

In late 2005 we collected data from 63 subjects (the target audience for this content was young adults so we tested 18-29 year olds), using four different testing conditions, resulting in a total count of 15 subjects tested under each condition. (Three of participants had unusable data.)

The conditions were:

Condition one: Users who viewed the dynamic / active Flash site and were told they had received the link from a professor telling them to explore it to complete a research paper. This was the “information” motivation scenario.
Condition two: Users who viewed the Flash site and were told a friend e-mailed them the link as something interesting to check out. This was the “entertainment” motivation scenario.
Condition three: Users who viewed the static / passive HTML site with the “information” motivation.
Condition four: Users who viewed the HTML site with the “entertainment” motivation.

These conditions allowed insight into the effectiveness of each form based on what the users’ motives were in seeing the presentation, and also allowed for enough subjects to generate statistically reliable results in some areas.

Research participants filled in a pre-exposure survey intended to gauge their overall use of the Internet, their preference for certain styles of presentation, the use of news sites, and their attitude toward drugs. Then their movements around the page they were sent to were “eye-tracked”. A post-exposure survey provided feedback on their attitudes toward the experience and the news organization that presented it, the ease of navigation, and their retention and recall of information presented.

The challenge in this type of research is determining what it is you want to test. There is a variety of hoped for outcomes when a news organization creates and presents an online news package. Which is most important? Effective presentation of information as seen in greater retention and recall of facts? Stickiness as seen in length of time spent with the content and greater depth of examination of the material? Brand enhancement as seen in reported enjoyment or appreciation of the organization presenting the information? With this study, we tried to get at the impacts of the presentation form on a variety of these areas.

DiSEL study: Findings

This comparative study showed that for the two sites tested:

Interactive presentations work best when you want users to…

spend more time with the presentation;
describe the experience as “enjoyable;”
recall more of the information;
recall your brand;
feel entertained.

Static presentation work best when you want users to…

“click to” all the of the presentation’s materials;
perceive the site navigation as easy.

Either form is equally effective if you want to…

increase the likelihood a user would return to the site.

In terms of the motivation for going to the site, there were some interesting differences in people’s responses to the two presentations.

If users are seeking information…

They will spend an average of two minutes longer on the site than if they are looking to be entertained;
They will have greater recall and comprehension of the information than those seeking entertainment.

Motivation did not matter in terms of…

How enjoyable a user found the site.

DiSEL study: So what?

This research shows that the choices made in presenting information will have significantly different impacts on the audience. No one presentation form is going to be the most effective by all measures that you have in your newsroom for determining successful design. What the research does seem to reveal is that the highly interactive content results in more time spent online with the material and a greater level of reported “enjoyment.” In addition (and counter to some other studies which show a negative impact) the Flash version seemed to help people recall the information being presented. So, if your goal in presenting a story – particularly one that has potential for a long “shelf-life” – is to entertain, inform, and keep people online longer, then investing in a creative, interactive presentation could be well worth the effort.

Supporting Research

A portion of Poynter’s Eyetrack III study tested similar situations. In this study, two distinct story designs were considered. With the help of NYTimes.com, text versions of two news stories were edited to 3-5 minute reads. Then, existing multimedia presentations were condensed to 3-5 minute experiences.

The text version of the story “Dangerous Business” that was used for the study

The multimedia version ofo the story “Dangerous Business” that was used for the study.

The text version Al Hirschfeld’s obituary that was used for the study.

The multimedia version Al Hirschfeld’s obituary that was used for the study.

Half of the test participants (approximately 25 people) experienced one of the stories in text and the other in multimedia. The other half experienced the opposite formats. (All participants saw a control article beforehand.)
After they read or viewed the stories, participants were given the same recall quizzes.

Eyetrack III: Findings

This study shows that:

Interactive presentations work best when you want users to…

recall unfamiliar terms and processes/procedures more effectively.

In one test story an animated graphic showed how cast iron pipes are made – an essential component to understanding the overall story content. Those who received this graphic had better recall of the terms and processes involved than those who received the same information in text form.

Static text works best when you want users to… correctly recall specific factual information, such as information about names and places.

It was found that with both stories, individuals had better recall of the names of people involved and the locations of specific story events if they read the text version.

How this research can help: the checklists

Common threads from findings in this work can help guide multimedia editors and designers to make more effective decisions. Here are lists of questions that can help. (Also available in a printable PDF.)

Should we present this story as an interactive?

Before undertaking any large story project be sure to ask:

Who is the target audience for this story?
What do we hope to accomplish in telling this story to them?

Then use this decision-tool to see which approach to storytelling is best supported by the research in these studies:

Does the story concern elaborate or unfamiliar processes / procedures?
- Yes – 1 point
- No – no points
Is the level of interest in the topic high enough that people would be willing to figure out story navigation?
- Yes – 1 point
- No – no points
Does the story have value beyond the first few weeks? Is it likely to be a topic in the news again?
- Yes – 1 point
- No – no points
Is entertaining the audience more important than simply informing?
- Yes – 1 point
- No – no points
Is it important that the audience be able to recall specific facts from the story?
- Yes – no points
- No – 1 point
If the story is told in separate components, it is essential that all the components be viewed by the audience?
- Yes – no points
- No – 1 point
Do you hope the audience recalls where they saw the information?
- Yes – 1 point
- No – no points

If you get five or more points, then you should strongly consider an interactive story approach.

Coming in March: Journalism-applicable results from the Nielsen/Norman Group’s first eyetracking study.

Coming in April: An interview with Poynter Eyetrack ‘07’s researchers.

Coming in May: DiSEL research results about:

the design and placement of “Breaking News” and supplemental links
how people move through different slide show designs.