<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Online Journalism Review&#187; Laura Ruel</title>
	<atom:link href="http://www.ojr.org/author/lauraruel/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ojr.org</link>
	<description>Focusing on the future of digital journalism</description>
	<lastBuildDate>Tue, 07 May 2013 03:41:31 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>Online usability questions that need answers</title>
		<link>http://www.ojr.org/080313ruel/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=080313ruel</link>
		<comments>http://www.ojr.org/080313ruel/#comments</comments>
		<pubDate>Thu, 13 Mar 2008 12:47:33 +0000</pubDate>
		<dc:creator>Laura Ruel</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[eyetracking]]></category>
		<category><![CDATA[multimedia]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://www.ojr.org/?p=1452</guid>
		<description><![CDATA[Some of the best brains in online publishing share thoughts about what to research in news website design.]]></description>
				<content:encoded><![CDATA[<p>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?</p>
<p>If you&#8217;ve ever wondered about these questions, you are not alone.  Some of the sharpest minds in online journalism gathered at the University of Minnesota&#8217;s <a href="http://inms.umn.edu/">Institute for New Media Studies</a> about a month ago to discuss some of their pressing research questions and to set the research agenda for <a href="http://disel-project.org/">DiSEL: The Digital Storytelling Effects Lab</a>.</p>
<div align=center><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/zSa15HmTfC8"></param> <embed src="http://www.youtube.com/v/zSa15HmTfC8" type="application/x-shockwave-flash" width="425" height="350"></embed></object><br />
<i>Tyson Evans, LasVegasSun.com, discusses the value of research</i></div>
<p>The group is part of <a href="http://disel-project.org/">DiSEL&#8217;s first official consortium</a>. 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.</p>
<p>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&#8217;ll let you know what&#8217;s on the horizon. We also invite you to add your thoughts to the mix by completing the <a href="http://www.zoomerang.com/recipient/survey-intro.zgi?p=WEB224D7FKMJ3W">DiSEL survey</a>.</p>
<h3>Riding a carousel; wearing a belt</h3>
<p>No, it wasn&#8217;t a circus (well maybe!) or a fashion show.  The terms &#8220;carousel&#8221; and &#8220;belt&#8221; 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&#8217;s site, http://marthastewart.com, was one that the group referenced as having an interesting form for its &#8220;carousel.&#8221;</p>
<div align=center><img src="/ojr/images/1452/file.jpg" width=450 height=213 alt="Graphic"><br /><i>Martha Stewart&#8217;s site directs users to content with a carousel.</i></div>
<p>In this case the carousel can be rotated in an autoplay mode (user clicks the &#8220;play&#8221; button) or manually (user clicks the section name).</p>
<p>&#8220;Carousels are coming up a lot,&#8221; said Jaime Hutt from startribune.com. &#8220;Are there standards?&#8221;<a name=start></a></p>
<p>Others also wanted to know what works with this form.</p>
<p>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.</p>
<p>&#8220;What works in carousels and what doesn&#8217;t?&#8221; he asked.</p>
<p>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.</p>
<p>Belt questions centered around how users navigate and interact with them. Feilding Cage from Time.com discussed some of the questions his organization ponders.</p>
<div align=center><img src="/ojr/images/1452/file1.jpg" width=450 height=111 alt="Graphic"><br /><i>Time.com has a belt on every page.</i></div>
<p>&#8220;We are curious about the functionality of our belt,&#8221; said Cage. &#8220;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.&#8221;</p>
<p>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.</p>
<p>&#8220;Should we use a &#8216;next&#8217; button or is it fine that the belt moves from the first five items to the next five on one click?&#8221; he asked. &#8220;People most often click on the photos to get into the story.&#8221;</p>
<h3>When is it TMI?</h3>
<p>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?</p>
<p>&#8220;I was always struck with the plethora of information entry points on NYTimes.com,&#8221; said Nora Paul. &#8220;Can we test for impact on behavior? What about cognitive overload?&#8221;</p>
<p>The multimedia producers agreed that the issues of how much information to include – and how to successfully present it – are crucial.</p>
<div align=center><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/YvvVYs-efgg"></param> <embed src="http://www.youtube.com/v/YvvVYs-efgg" type="application/x-shockwave-flash" width="425" height="350"></embed></object><br />
<i>Josh Hatch, USAToday.com, addresses labeling links and page density</i></div>
<p>&#8220;We want to know what images people are looking at on our home page,&#8221; said Josha Hatch of USAToday.com. &#8220;How much chatter do people read? What else are people looking at?&#8221;</p>
<p>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&#8217; attention.</p>
<h3>Video viewing</h3>
<p>Online video has become an expected media form for all news sites – not just those with broadcast stations as their parent.</p>
<p>YouTube.com also has influenced how users interact with video online. (Notice where the video with this piece resides?)</p>
<p>The questions about video presentation were numerous, but the group narrowed it down to three.</p>
<p>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 <a href="http://WRAL.com/">local news site in Raleigh</a> recently won a regional Emmy award for its player that is a combination.</p>
<div align=center><img src="/ojr/images/1452/file2.jpg" width=450 height=227 alt="Graphic"><br /><i>WRAL.com recently won a regional Emmy Award for its video player that combines methods of interactivity.</i></div>
<p>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?</p>
<p>&#8220;On CNN, if I see a video icon, I don&#8217;t click on it because I don&#8217;t want to go to the video player,&#8221; said Hatch.</p>
<p>He added that if video is placed in a Flash player, many are not aware it is an option.</p>
<p>Cage added that Time.com is experimenting with different player interfaces, some similar to YouTube.com.</p>
<p>&#8220;Has YouTube trained people?&#8221; Hatch asked.</p>
<p>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.</p>
<h3>How to show your slides</h3>
<p>Similar to video, audio slide shows are another basic – and expected – mainstay for news sites. Many questions arose.</p>
<p>&#8220;To what degree are users reading captions or script to audio?&#8221; Hatch asked. &#8220;Also, if ads are swapping out beside the slide show, how does that affect the user experience?&#8217;</p>
<p>&#8220;What is a good size photo to put on a galleries page?&#8221; said Amish Desai from yahoonews.com.</p>
<div align=center><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/QW6YHR6RbM8"></param> <embed src="http://www.youtube.com/v/QW6YHR6RbM8" type="application/x-shockwave-flash" width="425" height="350"></embed></object><br />
<i>Gabriel Dance, NYTimes.com, discusses slide show usability issues</i></div>
<p>Consortium members agreed that the questions above should be studied. In addition, they listed these other important areas to research:</p>
<li>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?
<li>What is the best way to present a slide show with multiple chapters?
<li>Where is the best place to put cutlines?
<li>What are the differences in user behavior when ads are placed next to slide shows vs. above slide shows?
<p>This meeting was a true collaboration among an energetic group of multimedia thinkers. Partner news organizations sent the following individuals to participate:</p>
<li><a href="http://www.dallasnews.com">Dallas Morning News</a>: Noel Gross
<li><a href="http://www.desmoinesregister.com">The Des Moines Register</a> (Gannett): Chris Snider
<li><a href="http://www.lasvegassun.com">Las Vegas Sun</a>: Tyson Evans
<li><a href="http://www.nytimes.com">The New York Times</a>: Torben Brooks, Gabriel Dance
<li><a href="http://www.mercurynews.com">San Jose Mercury News</a>: Randall Keith
<li><a href="http://startribune.com">Star-Tribune</a>: Jamie Hutt, Jason Erdahl, Matt Thompson, Will Tacy
<li><a href="http://time.com">Time</a>: Feilding Cage
<li><a href="http://www.usatoday.com">USA Today</a>: Joshua Hatch
<li><a href="http://www.washingtonpost.com">The Washington Post</a>: Nelson Hsu
<li><a href="http://news.yahoo.com">Yahoo! News</a>: Amish Desai
<p>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.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ojr.org/080313ruel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>OJR&#039;s &#039;five guide&#039; to do-it-yourself website usability testing</title>
		<link>http://www.ojr.org/ojrs-five-guide-to-do-it-yourself-website-usability-testing/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=ojrs-five-guide-to-do-it-yourself-website-usability-testing</link>
		<comments>http://www.ojr.org/ojrs-five-guide-to-do-it-yourself-website-usability-testing/#comments</comments>
		<pubDate>Wed, 01 Aug 2007 10:05:49 +0000</pubDate>
		<dc:creator>Laura Ruel</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[multimedia]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[website design]]></category>

		<guid isPermaLink="false">http://www.ojr.org/?p=1341</guid>
		<description><![CDATA[Use these steps, and these forms, to test how readers will react to your new multimedia project or website design.]]></description>
				<content:encoded><![CDATA[<p>You&#8217;ve put months of work into a special multimedia project.  The time-consuming processes of creating and editing text, audio, photos, video and animated graphics has been arduous, but rewarding. You&#8217;ve learned more about Flash programming and debugging than you ever intended. And now that there&#8217;s an end in sight, you are more than ready to get the package online and out of your life.</p>
<p>Enter the spoiler &#8212; the person who utters the words &#8220;usability test.&#8221;</p>
<p> &#8220;Why bother?&#8221; you think.  The site works, you know that.  You&#8217;ve been showing it to your newsroom colleagues along the way.  You&#8217;ve listened to their feedback. You&#8217;ve made changes you thought were necessary.  What more could you learn?</p>
<p>What more?  How about 80 percent of the problems with the package? How about architecture flaws you never considered?  How about the differences between a good design and a great one?</p>
<p>As the article <a HREF="http://www.nytimes.com/2007/07/08/business/yourmoney/08starts.html?_r=1&#038;ref=yourmoney&#038;oref=slogin"><i>Technology&#8217;s Untanglers</i></a> from July 8 <i>New York Times</i> reports, &#8220;Sometimes there is a huge disconnect between the people who make a product and the people who use it.&#8221; Usability testing is vital to uncovering the areas where these disconnects happen.  Its value and power shouldn&#8217;t be underestimated in the e-commerce world or in the multimedia journalism storytelling world.</p>
<p>But it has to be done right with a methodology that works and takes into account a journalist&#8217;s tight deadlines.  That&#8217;s what this column is about.  Today we&#8217;ll provide you with a template that makes usability testing less daunting.  All you need to do is:
<ul>
<li>recruit FIVE people</p>
<li>set aside FIVE hours (that&#8217;s total time, start to finish)
<li>follow the FIVE steps described below. </ul>
<p><a name=start></a></p>
<h2>FIVE PEOPLE</h2>
<p>It is important to realize that when done correctly, usability testing with five people can uncover 80 percent of your problems, as demonstrated in the chart below by usability guru Jakob Nielsen.</p>
<div align=center><img SRC="/ojr/images/1341/nielsen.gif" NAME="graphics1" WIDTH=400 HEIGHT=238 BORDER=0><br />
Jakob Nielsen&#8217;s chart from his March 19, 2000 Alertbox Column. <a HREF="http://www.useit.com/alertbox/20000319.html">http://www.useit.com/alertbox/20000319.html</a></div>
<p>Moreover, usability testing is the difference between good design and great design.  As we&#8217;ve said in the print world for years, if the presentation is aesthetically pleasing, but the user can&#8217;t find the information, then the design is useless.  This concept is even more important in the world of Web design where clicking to a new site is even easier than finding a new magazine or newspaper.</p>
<p><i><b>What exactly will this accomplish?</b></i></p>
<p>That&#8217;s up to you. A properly executed usability test of your multimedia package or Web site can reveal answers to whatever you design the test to ask.  However, in most cases it will uncover three key things:
<ul>
<li><b>Areas of confusing navigation.  </b>There is no doubt that as the project designer, you know how your site navigation functions. You know the &#8220;Part Two&#8221; menu option brings the user to a particular story or audio slide show.  But does the new user know this? It is important to realize that about an hour into designing your project, you may have lost all perspective on how the interface appears to others. This also holds true for your colleagues who have been looking at the project as you have been creating it.  You all have <i>learned</i> your navigation; you have conditioned yourselves to go where you want.  But for others it may not be so easy and intuitive.  You need to test and see. </ul>
<ul>
<li><b>Users&#8217; intuitive viewing sequences.  </b>Again, this is an area that designers tend to have in mind and follow as they work on or show the site to others in the newsroom.  A usability test can reveal if others will follow what you intend. </ul>
<ul>
<li><b>Roadblocks in the flow or delivery of information. </b> Not everyone in your target audience may know that the e-mail for the reporter is at the end of the text or that the panoramic photograph moves when the arrows on either side are clicked.  What seems normal and natural to the creator is not always so with the user. </ul>
<h2>FIVE HOURS</h2>
<p>What!  Who has that kind of time?  Although it may seem daunting, think about the hours you&#8217;ve already put into the project. If simple changes you make can help the user actually understand the project better or more completely, isn&#8217;t it worth it?</p>
<p>The testing method outlined below is a combination of suggestions from technology experts, journalists and usability professionals and is created especially for the busy multimedia journalist.  It not only focuses on issues specific to the types of site or package designs we do, but it also takes into account newsroom deadlines.  So from start to finish it should take one person about five hours to get solid usability data about your package. Here&#8217;s the breakdown:
<ul>
<li>30 minutes to meet with project team and determine key questions</p>
<li>30 minutes to add your specifics to the basic pre-and post-surveys provided
<li>30 minutes to recruit test subjects
<li>Approximately two and half hours to test five people for 20 minutes to a half hour each.
<li>30 minutes to analyze data
<li>30 minutes to summarize the results and create a task list. </ul>
<p>This testing is leaner and more streamlined than an expensive one designed by a usability firm, but it has been put to the test by my <a HREF="http://lauraruel.com/design">design students</a> on award-winning multimedia news packages as well as journalistic Web sites for the past three years and has delivered valuable data each and every time.</p>
<p><i><b>Before you start&#8230;.</b></i></p>
<ul>
<li><b>Check your ego at the door</b> and separate yourself from your creation.  If you don&#8217;t think you can do this, have someone else on your team handle the testing. No doubt you have an emotional attachment to this project that has consumed you for the past months. That&#8217;s only natural. But objectivity is necessary to get test results that will make your project even better. Be sure you want the real answers.</ul>
<ul>
<li><b>Realize the limitations of the information you are gathering.  </b>Usability tests can reveal valuable information about a particular project, but the results should not be misconstrued as pertinent to all Web presentations.  Here is where that number five (in terms of test subjects) is too small and your test design is too specific. The test results are helpful for the project you are testing.  When you do another project, you&#8217;ll need to do another test.</ul>
<ul>
<li><b>Know it is OK to ask for feedback. </b>As journalists we have been trained to NOT go back to sources and show them stories beforehand.  Remember that this is different. We are asking an uninvolved group (not the story sources) to do what they normally would do with a Web package.  Then we are taking that information and improving the site.  It essentially is another step in the information gather process.</ul>
<h2>FIVE STEPS</h2>
<p>What follows are the basic steps and considerations for creating and executing a test on your multimedia news package.</p>
<p><b><i>Step 1: Determine tasks to test</i></b> Call a meeting of the project team and:
<ul>
<li><b>Review. </b>Remind everyone of your target audience and site goals.</p>
<li><b>Choose tasks.</b> Determine at least ten (but no more than 15) tasks that you a user should be able to successfully execute to get the most out of the package. Remember, you cannot analyze the entire presentation. Carefully select tasks based on what actual users of the site would do. These could include items such as finding and playing an interactive game you created, watching the audio slide show through completion or navigating the site in a specific, preferred order.  Here&#8217;s a <a HREF="http://www.usability.gov/templates/docs/kickoff.pdf">good list of questions</a> to help.</ul>
<p><b><i>Step 2: Experimental design</i></b> <img SRC="/ojr/images/1341/consent_image.jpg" NAME="graphics2" ALIGN=LEFT HSPACE=12 WIDTH=200 HEIGHT=262 BORDER=0>Although there are multiple ways to design a usability test, we are providing you with a basic design that has been proven to work on multimedia news packages. As you become more experienced in testing you may want to deviate from this outline, but we strongly suggest you follow it exactly your first few times.
<ul>
<li><b>Welcome, complete informed consent and pre-experiment questions. </b>It is important you do your best to put users at ease by thanking them, offering them a cup of coffee, or just chatting with them for a few minutes. Remind them that it is the multimedia package that is being tested, not them.  You then will want users to read and sign an informed consent &#8212; where the experiment is explained for the test subjects.  This is necessary to ethically complete this inquiry.  Finally, you will want to have them complete the pre-experiment questions that you will develop in Step 3. <i>Time: 5 minutes</i></p>
<li><b>Free observation time</b>. This is a time when users explore the site with NO interaction from the tester. You simply direct the user to the site and step back. The only instruction should be for users to &#8220;Explore the site for as long as they would like.&#8221;  Here is where you can either videotape their behavior or take copious notes.  You want to know what users do when just directed to &#8220;explore.&#8221; Allot 10 minutes total, but if the user tells you he or she is done beforehand, move along.  If they are not done at the 10 minute mark, make note of that and tell users it is time to move on.<i>Time: -5-10  minutes</i>
<li><img SRC="/ojr/images/1341/forms_image.jpg" NAME="graphics3" ALIGN=LEFT HSPACE=12 WIDTH=238 HEIGHT=600 BORDER=0><b>Assigned tasks</b>. Using the list you created in the step above, ask users to execute your preferred tasks. Word the tasks so that you are placing users in a natural scenario. For example, rather than stating, &#8220;Find the e-mail for the reporter,&#8221; say something like, &#8220;You have an unanswered questions after viewing this presentation and would like to contact the reporter.  How would you go about doing that?&#8221; Have tasks ordered and prioritized, skipping over any that were completed during the free observation time. Depending on the user and the task you may or may not want the user to &#8220;think aloud&#8221; or describe their thought processes to you while completing the tasks. At this point in your testing, either silent observation or think aloud protocols are fine approaches.  Do whatever feels most comfortable to you. <i>Time: -5-10  minutes</i>
<li><b>Post experiment questionnaire and discussion. </b> There are two parts to this stage in the process.  First, have users fill out the questionnaire you will develop in Step 3.  Once complete, it is time for open-ended questions that are answered in a conversation with you.</ul>
<p><b><i>Step 3: Develop questions</i></b> There are four printed forms you will want to have ready for each test participant:
<ul>
<li><b>Informed consent.</b> Necessary for ethical completion of the study. Sample <a HREF="/ojr/uploads/informed_consent.doc">here</a>.</p>
<li><b>Pre-experiment questions.</b> The purpose here is to give some context to the results and help you understand the Web practices of your test subjects. As the sample form suggests, you want to have users quantify their responses and word questions so that the subjects&#8217; personal interpretation of the answers is minimal.  For example, instead of asking a user to describe their Web usage on a scale of 1-10, with one being none and 10 being heavy, it would be better to ask them to quantify the amount of time they spend online and provide choices such as 0-2 hours/day, 3-5 hours/day, etc. You also may want to ask questions that gauge the participants&#8217; interest in the subject of the presentation you are testing, or the Web site your work for.  Make this a written questionnaire.  A sample can be found <a HREF="/ojr/uploads/pre_experiement_questions.doc">here</a>.
<li><b>Post-experiment questions.  </b>You will want to administer a written questionnaire once the tasks are completed. This questionnaire should gather subjective data, and should contain quantifiable inquiries, asking users to rank the success of certain aspects of the site.  A sample can be found <a HREF="/ojr/uploads/post_experiement_questions.doc">here</a>.
<li><b>Interview questions.  </b>Finally, plan a few open-format interview questions to ask each participant at the end of the session. These should elicit more overall, qualitative impressions of the website.  You also may want to ask participants what they recall about how the site functions. If they clearly recall the structure, you can bask in the glory of your success.  If not, you may want to consider where clearer labeling or directions may help. Users should not write these responses. You should allow them to speak freely and take notes.  A sample can be found <a HREF="/ojr/uploads/post_experiement_discussion.doc">here</a>.</ul>
<p><b><i>Step 4: Gather data</i></b> The order of data gathering is outlined in Step 2 above.  Here are items to consider before you begin with the first test subject.
<ul>
<li><b>Test sooner rather than later. </b>No multimedia designer wants to make changes to something they believe is in its final form.  Schedule your usability test in the beta stage of development &#8212; not quite finalized, but final enough so someone can navigate the site.</p>
<li><b>Do not test your newsroom colleagues. </b>Anyone already familiar with the project does not represent your typical user.  In an ideal world, test subjects are recruited through a marketing research firm, but &#8212; for the busy newsroom journalist &#8212; this probably isn&#8217;t possible.  So go to other departments.  See if someone in ad sales, circulation or marketing (who doesn&#8217;t know about the project) can spare a half hour to be tested. See if a friend or relative of a colleague can come in.  Bottom line, try to make your test subjects as close to typical users as possible.
<li><b>Test everyone on the same computer, in the same location.  </b>This will standardize the results and not allow people&#8217;s bookmarks or other preset browsing options interfere with results.
<li><b>Know what you are looking for during the free observation period. </b>Carefully observe each session and take notes about the participants&#8217; interactions with the site. Which tasks were performed successfully? How long did they take? Did participants make errors? What problems occurred? Did the participants have a conceptual model of the site? Was it correct? It can be helpful to have a checklist for yourself during this time, so you observe the same behaviors with each participant.
<li><b>Pay close attention to the steps users take to complete tasks.  </b>You want to discern the path that is clear and most natural for users when completing tasks. Ideally they all will complete tasks in fairly predicable ways.  But if they do not, you can learn something by the &#8220;mistakes&#8221; they make.  How do they recover?  What page of the site do they go back to as a &#8220;home base&#8221; or starting point?  Again, you may want to have your own checklist to refer to here.
<li><b>Try to be as unobtrusive as possible.  </b>We know&#8230; you feel like an elephant in the room when observing someone viewing a website.  But awareness of your body language and your non-verbal reactions to the users&#8217; behaviors can make a huge difference in terms of their comfort.  It will take them some time to get used to your presence, but once they do, they will become more relaxed and their behaviors will be more realistic and natural.</ul>
<p><i><b>Step 5: Analyze data and make list of potential improvements</b> </i></p>
<p>Now the fun starts &#8212; seeing what you have learned.  Again, take things step-by-step:
<ul>
<li><b>Average all quantifiable responses.  </b>Break down the number of men vs. women, the average age of participants, etc.  Be sure the demographics match your target audience. You also will want to average the answers to all questions that involve rankings. Place all this data on one sheet and make notes of responses that fall to either extreme.</p>
<li><b>Look at the free observation notes in light of the quantifiable data. </b>If users ranked navigational controls as weak, what behaviors during the free observation period support this?  Can you find similar behaviors that would contribute to this ranking?  Were there any non verbal cues that indicated their frustration at during a certain process?  Sighing? Trying to click off the site?  Gather as much  supporting data for each ranking
<li><b>Look at the success/failure to complete usability tasks in light of the quantifiable data. </b> Again, go back and see what common behaviors were exhibited by the users when asked to complete certain tasks.  Did they become confused at the same points?  Did they all sail through certain tasks?  You will discover that their site rankings will correlate with their experiences completing tasks.
<li><b>Make a list of at the top three things that should not change and the top three things that should. </b>You are on a deadline, we realize that.  So be sure to make note of what is working and why.  Write down the top three things you did well based on this usability test.  Then make a list of three manageable changes to make.
<li><b>Look at user suggestions for improvement in light of the changes you need to make. </b>Your users aren&#8217;t designers or interface experts, but their gut reactions can help you determine where to put your professional energies. See what they said they want and find a design solution for it. Again, keep things manageable.  You aren&#8217;t going to fix everything, but you are going to tackle the top three you listed in the step above.  Do everything you can to address the problem areas, and &#8212; if possible &#8212; check in with the users and show them the solution. </ul>
<h2>BOTTOM LINE</h2>
<p>Usability testing is a skill that &#8212; just like design and programming &#8212; you improve the more you practice it.  Once you&#8217;ve done this a few times you&#8217;ll find you can use it on the fly when you get into those disagreements about interface design issues within your department.  At UNC, we resolved a design issue on a <a HREF="http://www.uandes.cl/ver_articulo.asp?id=2684&#038;seccion_padre=16">project in Chile this past March</a>. We were working with students from Universidad de los Andes and could not come to a consensus on our secondary navigation. So, we did a quick usability test with audio reporters and photographers who were in the newsroom, but who had not been involved in the design process. What we found was that the design team was split over two equally ineffective navigation methods.  It forced the team to rethink at a more basic level and resulted in a much improved solution.</p>
<p>So remember, that person who suggests usability testing isn&#8217;t the spoiler, but really your friend &#8212; and the friend of your audience.</p>
<h2>ADDITIONAL RESOURCES</h2>
<p><a HREF="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/">Don&#8217;t Make Me Think</a><br />
This is an excellent book by Steve Krug.  It should be on the desk of every multimedia news designer.</p>
<p><a HREF="http://www.usability.gov/process.html">Step by Step Usability Guide</a><br />
Part of the site usabilty.gov, this diagram is a good visualization of the testing process.</p>
<p><a HREF="http://www.htmlcenter.com/tutorials/tutorials.cfm/178/usability/1/">Usability Testing Guidelines</a><br />
 This piece provides a simple tutorial for a general usability test and includes some insightful tips.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ojr.org/ojrs-five-guide-to-do-it-yourself-website-usability-testing/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Animated infographics and online storytelling: Words from the wise</title>
		<link>http://www.ojr.org/070523ruel/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=070523ruel</link>
		<comments>http://www.ojr.org/070523ruel/#comments</comments>
		<pubDate>Wed, 23 May 2007 12:21:13 +0000</pubDate>
		<dc:creator>Laura Ruel</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Alberto Cairo]]></category>
		<category><![CDATA[elmundo.es]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[infographics]]></category>
		<category><![CDATA[journalism education]]></category>
		<category><![CDATA[multimedia]]></category>
		<category><![CDATA[website design]]></category>

		<guid isPermaLink="false">http://www.ojr.org/?p=1326</guid>
		<description><![CDATA[Alberto Cairo, elmundo.es's former infographics expert, shares a sneak peek at his upcoming book on visual journalism.]]></description>
				<content:encoded><![CDATA[<p>Sometimes the best research is the voice of experience.  Alberto Cairo, former director of infographics and multimedia at <a href="http://elmundo.es/">elmundo.es</a> 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&#8217;s Best of New Media Design competition, Cairo&#8217;s department won the first gold medal ever given for breaking-news coverage.</p>
<p>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&#8217; work: <a href="http://www.albertocairo.com/jomc/projects/index_projects.html">http://www.albertocairo.com/jomc/projects/index_projects.html</a>.</p>
<div align=center><a href="http://www.albertocairo.com/infografia/noticias/2007/libro1.html"><img src="/ojr/images/1326/map1.jpg" width=500 height=334 alt="Graphic" border=0></a><br /><i>International animated infographics expert Alberto Cairo is writing his first book, <b>Visual Journalism: Print and Multimedia Infographics Storytelling.</b></i></div>
<p>Many online journalists are anticipating the book&#8217;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 &#8220;sneak peek&#8221; – Cairo&#8217;s advice for multimedia storytelling using informational graphics.</p>
<p><b>Q:</b> Define animated infographics and describe why they are a powerful storytelling tool for journalists?</p>
<p><b>A:</b> 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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p><b>Q:</b> What are three current examples of excellent animated infographics? Why are they effective?<a name=start></a></p>
<p><b>A:</b> 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.</p>
<div align=center><a href="http://www.nytimes.com/packages/flash/business/20070408_EXECPAY_GRAPHIC/index.html"><img src="/ojr/images/1326/nyt2.jpg" width=500 height=314 alt="Graphic" border=0></a><br /><i>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 &#8220;play&#8221; with the numbers themselves.</i></div>
<p>Among the best recent multimedia coverage, I would highlight the Times&#8217; interactive about the Virginia Tech shootings. The combination of audio, video and information<br />
graphics makes this breaking news coverage one of the best I&#8217;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.</p>
<div align=center><a href="http://www.nytimes.com/2007/04/17/us/20070417_SHOOTING_GRAPHIC.html?ex=1179633600&#038;en=c87f88bdfd21705c&#038;ei=5070"><img src="/ojr/images/1326/nyt3.jpg" width=500 height=322 alt="Graphic" border=0></a><br /><i>The Times&#8217; ability to create quality animated storytelling on deadline is noteworthy, according to Cairo.</i></div>
<p>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&#8217;t get me wrong, features are great, but a newspaper should focus first on up-to-date information.</p>
<p>The best animated diagrams can still be found in Spanish news organizations. <a href="http://elpais.es/">Elpais.es</a> 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<br />
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.</p>
<div align=center><a href="http://www.elmundo.es/elmundodeporte/especiales/2007/04/copaamerica07/multimedia/multimedia_barco.html"><img src="/ojr/images/1326/copa4.jpg" width=500 height=314 alt="Graphic" border=0></a><br /><i>Spanish news organizations, such as elmundo.es, still are producing the best animated diagrams and linear explanations.</i></div>
<p>There are news organizations in the United States that currently are taking steps in the right direction. I would mention <a href="http://www.dallasnews.com/">The Dallas Morning News</a>, <a href="http://www.mercurynews.com/">San Jose Mercury News</a>, and <a href="http://www.boston.com/">The Boston Globe</a>. <a href="http://www.sun-sentinel.com/broadband/theedge/">The Sun-Sentinel</a> is still a major reference for multimedia graphics as well.</p>
<p><b>Q:</b> What are the most common mistakes multimedia journalists make when creating animated infographics?  How can they avoid them?</p>
<p><b>A:</b> 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.</p>
<p>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.</p>
<p>As a second mistake is the fact that many people think that online infographics can be created just by &#8220;translating&#8221; print pieces to the Web. Unfortunately, this is what is happening in many newsrooms worldwide. That&#8217;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.</p>
<p><b>Q:</b> 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?</p>
<p><b>A:</b> Checklist:
<li>Can the story be explained using a map, a statistical chart or a diagram? If you need to show the &#8220;where&#8221; of the story, you definitely need a map.</p>
<li>Are there size, length, distance, amount comparisons involved? Then, you need a chart.
<li>Is there any process or procedure hat can be better understood by means of a visual display? Create a diagram.
<li>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&#8217;t know how it is, don&#8217;t draw it. I&#8217;ve added my own corollary to that motto: if you don&#8217;t know how it moves, don&#8217;t animate it.
<li>[More suggestions from Cairo at: <a href="http://www.albertocairo.com/infografia/articulos/2006/design.html">http://www.albertocairo.com/infografia/articulos/2006/design.html</a><br />
<a href="http://www.albertocairo.com/imagenes/articlesndsummer.pdf">http://www.albertocairo.com/imagenes/articlesndsummer.pdf</a>]</p>
<p><b>Q:</b>  What suggestions do you have for individuals in an online newsroom who want to begin creating animated infographics?</p>
<p><b>A:</b>  It&#8217;s quite simple: give it a try. You don&#8217;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&#8217;s the path we followed at elmundo.es back in 2000. Nobody in my team had any experience.</p>
<p>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.</p>
<p><b>Q:</b> What are some things the industry can do now to challenge itself to move in the right direction with multimedia infographics?</p>
<p><b>A:</b> 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&#8217;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.</p>
<p>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.</p>
<div align=center><a href="http://www.elmundo.es/documentos/2004/03/espana/atentados11m/grafico_atentados.html"><img src="/ojr/images/1326/madrid5.jpg" width=400 height=333 alt="Graphic" border=0></a><br /><i>Elmundo.es&#8217; March 11 graphic got millions of page views in just a few days.</i></div>
<p>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&#8217;re focusing too much on the other.</p>
<p><b>Q:</b> Who has influenced you most as a professional?</p>
<p><b>A:</b> The people I&#8217;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.</p>
<p>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.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ojr.org/070523ruel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Eyetracking points the way to effective news article design</title>
		<link>http://www.ojr.org/070312ruel/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=070312ruel</link>
		<comments>http://www.ojr.org/070312ruel/#comments</comments>
		<pubDate>Mon, 12 Mar 2007 10:32:55 +0000</pubDate>
		<dc:creator>Laura Ruel</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[eyetracking]]></category>
		<category><![CDATA[infographics]]></category>
		<category><![CDATA[website design]]></category>

		<guid isPermaLink="false">http://www.ojr.org/?p=1300</guid>
		<description><![CDATA[OJR's design experts review usability research and offer suggestions on how you can make your online articles better connect with readers.]]></description>
				<content:encoded><![CDATA[<p>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.</p>
<p>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.</p>
<p>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 &#8220;read the news&#8221; or &#8220;read/learn&#8221;, 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.</p>
<p>&#8220;[With eyetracking] we can see that a user may navigate the page of an interface that houses the info she wants,&#8221; she said, &#8220;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.&#8221;</p>
<p>We’ve featured three of the more interesting journalistic study results below.<a name=start></a></p>
<p><b>Featured finding #1:<br />
Rewrite + reformat = remember</b></p>
<p>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.</p>
<p>The image below shows the two stories tested:</p>
<div align=center style="width:400px;font-size:.8em;text-align:left;"><img src="/ojr/images/1300/image1.gif" width=400 height=693 alt="Image"><br />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)</div>
<p>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.</p>
<div align=center style="width:400px;font-size:.8em;text-align:left;"><img src="/ojr/images/1300/image2.gif" width=400 height=659 alt="Image"><br />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)</div>
<p>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:
<li>bulleted items</p>
<li>subheadlines
<li>tighter writing<br />
increased comprehension by 12 percent, with readers of the reformatted text indicating that they were more satisfied with the experience.</p>
<p>Coyne calls these results &#8220;cool,&#8221; but adds that they were not unexpected.</p>
<p>&#8220;We have seen many striking results like this over the years,&#8221; she said, &#8220;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.&#8221;</p>
<p><b>So what?</b><br />
What do these results mean for online journalists?  Take the time to rewrite and reformat print stories for online if you want users to:
<li>get through a story more quickly</p>
<li>remember more of the content
<li>be more satisfied with the story experience.
<p>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:
<li>see what the article is about</p>
<li>confirm they are on the page they want to be on.<br />
&#8220;Without [good headlines and subheadlines] people … need to read the text to figure out what the article is about,&#8221; she said.  &#8220;But some people, many people, simply won&#8217;t do this. They will just move on.&#8221;</p>
<p>She adds that overall, online stories can benefit from more concise writing, front-loaded with the main point first.</p>
<p>&#8220;Assume people will only read the first few words of a line,&#8221; she said, &#8220;so bulleted lists are always good, as is bolding or creating links from important, information-bearing words.&#8221;</p>
<p><b>Featured finding #2:<br />
Precise and relevant editing = successful design</b></p>
<p>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 &#8220;read news.&#8221;</p>
<div align=center style="width:400px;font-size:.8em;text-align:left;"><img src="/ojr/images/1300/image3.gif" width=400 height=263 alt="Image"><br />This BNSF Railway page was tested by Nielsen and Coyne. Users were sent to this page and directed to &#8220;read news.&#8221; (Nielsen/Norman Group image, used with permission)</div>
<p>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 &#8220;top stories,&#8221; which is where the site’s news is located.</p>
<div align=center style="width:400px;font-size:.8em;text-align:left;"><img src="/ojr/images/1300/image4.gif" width=400 height=264 alt="Image"><br />Users did find the &#8220;top stories&#8221; 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)</div>
<p>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 &#8220;News Releases,&#8221; 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 &#8220;decorative&#8221; image gets no fixations.</p>
<div align=center style="width:400px;font-size:.8em;text-align:left;"><img src="/ojr/images/1300/image5.gif" width=400 height=461 alt="Image"><br />Another page of the BNSF Railway site and its corresponding hotspot. (Nielsen/Norman Group images, used with permission)</div>
<p><b>So what?</b><br />
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, <a href="http://disel-project.org">http://disel-project.org</a>.)</p>
<p>Moreover images with little information are ignored. (More on this in next section.)</p>
<p>Coyne’s top three suggestions for online news designers are:
<li>present text in a way that is easy to scan on the Web</p>
<li>create a simple navigational structure
<li>replace useless graphics with useful ones or with white space.
<p>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.</p>
<p>&#8220;[News Web sites] need to reformat for the Web medium,&#8221; she said.  &#8220;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.&#8221;</p>
<p><b>Featured finding #3:<br />
Photos edited for relevance = photos viewed</b></p>
<p>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.</p>
<p>The types of images that get attention share these attributes:
<li>Related to the content</p>
<li>Clear
<li>Feature approachable people (clearly can see faces; people shown are smiling/looking at the camera)
<li>Feature areas of private anatomy.
<p>In addition, the team says that individuals look at &#8220;real people&#8221; more than they do at images of models.  Most assume that content that features models are advertisements, so they avoid it.</p>
<p>Take a look at this page from dancworks.com.  Users were given the task to find out more about Mickhail Baryshnikov.  Their eye traveled around almost all parts of the page, but the photo, which was more decorative than informational.</p>
<div align=center style="width:400px;font-size:.8em;text-align:left;"><img src="/ojr/images/1300/image6.gif" width=400 height=189 alt="Image"><br />The danceworks.com site features an image of a dancer’s feet, which gets no fixations. (Nielsen/Norman Group images, used with permission)</div>
<p>Conyne recommends designers avoid the generic pictures that are often used just for the sake of having a picture.</p>
<p>&#8220;For example,&#8221; she said, &#8220;if an article is about a signature meal at a restaurant, say a tuna dish, display a scrumptious-looking picture of the plate of food. Don&#8217;t show a generic picture of a spoon and fork, as many sites do.&#8221;</p>
<p>When photos do contain people related to the task at hand, or the content users are exploring, they do get fixations.  However, gender makes a distinct difference on what parts of the photo are stared at the longest.  Take a look at the hotspot below.</p>
<p>Although both men and women look at the image of George Brett when directed to find out information about his sport and position, men tend to focus on private anatomy as well as the face.  For the women, the face is the only place they viewed.</p>
<div align=center style="width:400px;font-size:.8em;text-align:left;"><img src="/ojr/images/1300/image7.gif" width=400 height=282 alt="Image"><br />This image of George Brett was part of a larger page with his biographical information.  All users tested looked the image, but there was a distinct difference in focus between men and women.</div>
<p>Coyne adds that this difference doesn’t just occur with images of people. Men tend to fixate more on areas of private anatomy on animals as well, as evidenced when users were directed to browse the American Kennel Club site.</p>
<p><b>So what?</b><br />
These results provide tips for selecting photos.
<li>Know your audience</p>
<li>Know the accompanying content and how photos relate to it.  Is it decorative or informational?
<li>When choosing between equally informative photos of people, be sure to use ones of  &#8220;real&#8221; people, smiling, looking at the camera &#8212; not models which tend to been seen as photos accompanying ads.
<p>According to Coyne, sites that do design well include NYTimes.com and TheOnion.com.</p>
<p>&#8220;I am used to <i>The New York Times</i>,&#8221; she said.  &#8220;But even more than being used to it, I like the content and the way they present it. The titles are succinct and look clearly like links- blue, bold. The images are crisp. The text is legible. All the most important information is there on the homepage,  as opposed to the BBC.com  where you need to click around to get any real information. The Onion also packs a lot of headlines on the page, so you can scan a lot before you choose to read further. That&#8217;s nice.&#8221;</p>
<p><b>Coming in April:</b><br />
An interview with Poynter Eyetrack ‘07 researchers.</p>
<p><b>Coming in May:</b><br />
DiSEL research results about:
<li>the design and placement of &#8220;Breaking News&#8221; and supplemental links</p>
<li>how people move through different slide show designs<br />
]]></content:encoded>
			<wfw:commentRss>http://www.ojr.org/070312ruel/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Multimedia storytelling: when is it worth it?</title>
		<link>http://www.ojr.org/070210ruel/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=070210ruel</link>
		<comments>http://www.ojr.org/070210ruel/#comments</comments>
		<pubDate>Sat, 10 Feb 2007 23:10:15 +0000</pubDate>
		<dc:creator>Laura Ruel</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[infographics]]></category>
		<category><![CDATA[website design]]></category>

		<guid isPermaLink="false">http://www.ojr.org/?p=1282</guid>
		<description><![CDATA[Online bells and whistles can deliver your message with impact, but done in the wrong way, they can annoy your reader. Design gurus Laura Ruel and Nora Paul show you how to do multimedia right.]]></description>
				<content:encoded><![CDATA[<p>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 &#8220;parent&#8221; 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.</p>
<p>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.</p>
<p>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?</p>
<p>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 &#8211; DiSEL – the Digital Story Effects Lab.<a name=start></a></p>
<h2>Comparing Static / Passive Text and Dynamic / Active Multimedia Stories </h2>
<h3>DiSEL study: Overview</h3>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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 <a href="http://www.bbc.co.uk/radio1/onelife/health/drugs/alcohol.shtml">here</a> and the dynamic interactive package <a href="www.bbc.co.uk/radio1/onelife/fun/health/excess/drop_test.html">here</a>.</p>
<div align=center><a href="http://www.bbc.co.uk/radio1/onelife/fun/health/excess/drop_test.html"><img SRC="/ojr/images/1282/bbc_flash.jpg" border=0></a><br />
<i>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.</i></div>
<div align=center><a href="http://www.bbc.co.uk/radio1/onelife/health/drugs/alcohol.shtml"><img SRC="/ojr/images/1282/bbc_html.jpg" border=0></a><br />
<i>The encyclopedic-type presentation lists various drugs, describes their effects with text and an image.</i></div>
<p>In addition, we decided to see if the motivation for going to the site would change the user’s perception, attitude, and information retention.</p>
<p>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.)</p>
<p>The conditions were:
<ul>
<li><b>Condition one:</b> 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.</li>
<li><b>Condition two:</b> 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.</li>
<li><b>Condition three:</b>  Users who viewed the static / passive HTML site with the “information” motivation. </li>
<li><b>Condition four:</b> Users who viewed the HTML site with the “entertainment” motivation.</li>
</ul>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h3>DiSEL study: Findings</h3>
<p>This comparative study showed that for the two sites tested:</p>
<p><b>Interactive presentations work best when you want users to…</b>
<ul>
<li>spend more time with the presentation;</li>
<li>describe the experience as &#8220;enjoyable;&#8221;</li>
<li>recall more of the information;</li>
<li>recall your brand;</li>
<li>feel entertained.</li>
</ul>
<p><b>Static presentation work best when you want users to…</b>
<ul>
<li>&#8220;click to&#8221; all the of  the presentation’s materials;</li>
<li>perceive the site navigation as easy.</li>
</ul>
<p><b>Either form is equally effective if you want to&#8230;</b>
<ul>
<li>increase the likelihood a user would return to the site.</li>
</ul>
<p>In terms of the motivation for going to the site, there were some interesting differences in people’s responses to the two presentations.</p>
<p><b>If users are seeking information&#8230;</b>
<ul>
<li>They will spend an average of two minutes longer on the site than if they are looking to be entertained;</li>
<li>They will have greater recall and comprehension of the information than those seeking entertainment.</li>
</ul>
<p><b>Motivation did not matter in terms of&#8230;</b>
<ul>
<li>How enjoyable a user found the site.</li>
</ul>
<h3>DiSEL study: So what?</h3>
<p>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.</p>
<p><b>Supporting Research</b></p>
<p>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.</p>
<div align=center><a href="http://www.eyetools.com/poynter/text_article_1.htm"><img SRC="/ojr/images/1282/poynter1.jpg"></a><br />
<i>The text version of the story “Dangerous Business” that was used for the study</i></div>
<div align=center><a href="http://www.eyetools.com/poynter/mcwane/launch.html"><img SRC="/ojr/images/1282/poynter2.jpg"></a><br />
<i>The multimedia version ofo the story “Dangerous Business” that was used for the study.</i></div>
<div align=center><a href="http://www.eyetools.com/poynter/text_article_2.htm"><img SRC="/ojr/images/1282/poynter3.jpg"></a><br />
<i>The text version Al Hirschfeld’s obituary that was used for the study.</i></div>
<div align=center><a href="http://www.eyetools.com/poynter/hirschfeld/launch.html"><img SRC="/ojr/images/1282/poynter4.jpg"></a><br />
<i>The multimedia version Al Hirschfeld’s obituary that was used for the study.</i></div>
<p>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.)<br />
After they read or viewed the stories, participants were given the same recall quizzes.</p>
<h3>Eyetrack III: Findings</h3>
<p>This study shows that:</p>
<p><b>Interactive presentations work best when you want users to…</b>
<ul>
<li>recall unfamiliar terms and processes/procedures more effectively.</li>
</ul>
<p>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.</p>
<p><b>Static text works best when you want users to…</b>
<ul<li>correctly recall specific factual information, such as information about names and places.</li>
</ul>
<p>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.</p>
<h2>How this research can help: the checklists</h2>
<p>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 <a href="http://www.ojr.org/ojr/images/1282/OJRquiz.pdf">printable PDF</a>.)</p>
<h3>Should we present this story as an interactive?</h3>
<p><b>Before undertaking any large story project be sure to ask:</b>
<ul>
<li>Who is the target audience for this story?</li>
<li>What do we hope to accomplish in telling this story to them?</li>
</ul>
<p>Then use this decision-tool to see which approach to storytelling is best supported by the research in these studies:
<ol>
<li>Does the story concern elaborate or unfamiliar processes / procedures?
<ul>
<li>Yes – 1 point</li>
<li>No – no points</li>
</ul>
</li>
<li>Is the level of interest in the topic high enough that people would be willing to figure out story navigation?
<ul>
<li>Yes – 1 point</li>
<li>No – no points</li>
</ul>
</li>
<li>Does the story have value beyond the first few weeks?  Is it likely to be a topic in the news again?
<ul>
<li>Yes – 1 point</li>
<li>No – no points</li>
</ul>
</li>
<li>Is entertaining the audience more important than simply informing?
<ul>
<li>Yes – 1 point</li>
<li>No – no points</li>
</ul>
</li>
<li>Is it important that the audience be able to recall specific facts from the story?
<ul>
<li>Yes – no points</li>
<li>No – 1 point</li>
</ul>
</li>
<li>If the story is told in separate components, it is essential that all the components be viewed by the audience?
<ul>
<li>Yes – no points</li>
<li>No – 1 point</li>
</ul>
</li>
<li>Do you hope the audience recalls where they saw the information?
<ul>
<li>Yes – 1 point</li>
<li>No – no points</li>
</ul>
</li>
</ol>
<p>If you get five or more points, then you should strongly consider an interactive story approach.</p>
<p><b>Coming in March:</b>  Journalism-applicable results from the Nielsen/Norman Group’s first eyetracking study.</p>
<p><b>Coming in April:</b> An interview with Poynter Eyetrack ‘07’s researchers.</p>
<p><b>Coming in May:</b> DiSEL research results about:
<ul>
<li>the design and placement of “Breaking News” and supplemental links</li>
<li>how people move through different slide show designs.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.ojr.org/070210ruel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>