1 / 38

Using research to improve your site’s design and effectiveness

What Makes Web Sites Work?. Using research to improve your site’s design and effectiveness. Nora Paul, Director, Institute for New Media Studies, University of Minnesota Laura Ruel, Assistant professor, University of North Carolina at Chapel Hill

gail-mullen
Download Presentation

Using research to improve your site’s design and effectiveness

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. What MakesWeb Sites Work? Using research to improve yoursite’s design and effectiveness Nora Paul, Director, Institute for New Media Studies, University of Minnesota Laura Ruel, Assistant professor, University of North Carolina at Chapel Hill Julie Jones and Itai Himelboim – Researchers - UMN

  2. Who we are, what we research… and why • What are news websites doing? • How are they doing it? • Should they be doing it?

  3. What we will do today • Learn how to make informed decisions about design choices (based on research) • Learn how to conduct your own usability tests on projects you’ve created.

  4. How to ensure your audience… • Sticks with a slide show • Navigation • Photo choice • Recalls breaking news stories • Sees supplemental links on a story • Doesn’t get overwhelmed by “story tools”

  5. What do people do online? 76.0% 68.0% 60.5% 52.0% 38.5% 38.0% 22.5% 10.0% 7.5% • Emailed story to a friend…. • Filled in a poll……………….. • Read a blog………………… • Listened to a Podcast…….. • Commented on a board… • Sent email to a journalist…. • Signed up for RSS…………... • Linked a story on Digg…….. • Linked to del.icio.us………... 142 people – wide range of age, race, education, time spent online

  6. What does this tell about the online audience?

  7. What is eyetracking?Why use it?

  8. Eyetracking equipment

  9. Video of gazeplot / eyegaze

  10. below HEAT MAP – Length of Fixations above HEAT MAP – Number of Fixations

  11. Slide shows: navigation

  12. Viewing photo slide shows • DiSEL research: Navigation possibility: thumbnail view http://www.washingtonpost.com/wp-srv/photo/galleries/091506/korda/index.html

  13. Viewing photo slide shows • DiSEL research: Navigation possibility: arrows and next http://www.washingtonpost.com/wp-srv/photo/galleries/091506/korda/index.html

  14. Viewing photo slide shows • DiSEL research: Navigation possibility: autoplay http://www.washingtonpost.com/wp-srv/photo/galleries/091506/korda/index.html

  15. Viewing photo slide shows • DiSEL research: Navigation possibility: numbers and thumbnails http://www.washingtonpost.com/wp-srv/photo/galleries/091506/korda/index.html

  16. Viewing photo slide shows Navigation Style Used Next 56% Numbers 23% Arrows 15% Autoplay 6% View Thumbs 0% • Time Spent • Next 2:34 • Arrow 3:31 • Numbers 2:16 • *aver. 2:49 • Number of Slides Viewed (out of 40) • Next 28 (70%) • Arrow 25 (62%) • Numbers 12 (30%)

  17. Linearity • Two “non-linear” navigation methods available • Click randomly in the numbers • Thumbnails • Eight used “numbers” • Four clicked in order (viewed 20 slides) • Four clicked randomly (viewed 6 slides) • What does this tell us?

  18. Viewing photos online • Poynter Eyetrack III results: Faces in photos on home pages and in multimedia generated the most eye fixations.

  19. Viewing photos online • Poynter Eyetrack III results and DiSEL results:Text on photos received little attention.

  20. Viewing photos online • Online images get fixations if they: • Relate to surrounding content • Are clear • Feature “approachable” people • Faces are clear • People are smiling / looking at the camera • Feature “real people” • Models denote ads, and are avoided • Feature areas of private anatomy • Well, the guys check it out mostly Nielsen/Norman Study

  21. Viewing photos online • Nielsen/Norman results

  22. Viewing photos online • Nielsen/Norman results

  23. Viewing photos online • Nielsen/Norman results http://www.ojr.org/ojr/stories/070312ruel/

  24. Recent news – does design aid / hinder recall? • THE STUDY • Top 100 US newspaper websites analyzed • how “most recent news” items were displayed • Timestamped stories (51%) • Timestamped the page (12%) • Box with “new” or “breaking” (57%) • Individual stories labeled (12%)

  25. Home page – recent news

  26. Findings:Recent News Visual cues: Bigger’s better In visual designation of breaking news – box was most viewed by users. Bigger was better. But in recall, the box was the least – the headline was smallest type. Ratio Green- Saw the visual cue Yellow - Read the headline Orange - Recalled the headline

  27. Findings: Homepage story recall Size / position 10.53% Other 8.42% Photo 8.42% Design Familiarity 9.47% Clicked 5.26% Some of the keys to recall were design based (place on page, photo) but personal interests and background were the most compelling factors in story recall. Surprise / emotion 9.47% Personal Proximity 6.32% Personal Interest 41.05%

  28. Story page – supplemental links

  29. Findings: Supplemental links • Did they see it?(examination of eyegaze plot) • bottom box page users who fixated 59.1% • sidebar page users who fixated 36.4% • Did they read it?(post-exposure survey response) • No statistical significance to number of links read • sidebar aver. of 1.00 link read • bottom box aver. of 1.18 links read • Did they click it?(examination of gaze replay) • Only 4 subjects clicked on supplemental links • 2 sidebar page users • 2 embedded link users • 0 bottom box users

  30. Findings: Supplemental linksRecall of links Participants viewing the story with embedded links were more likely to recall the existence of links than those who viewed other link presentation styles. When asked in general how often they use related or supplemental links, on a scale of 1-5, the average was 3.12.

  31. Link Density: Info tool overload? • Questions: • Can there be too many links? • What’s the impact? • In people’s behavior • In what’s remembered

  32. Version 1 – Original Version 2 – Embedded links stripped Version 3 – Text and Story Tools only

  33. Did they remember links? • Embedded links - the high condition users remembered the embedded links (86%)… • But so did 38% of the medium condition users (even though there weren’t any on the page!) • The high condition group also remembered that there were related stories more than others: • 80% for high v. 39% for medium

  34. How did they behave? But what about the “low” condition?

  35. How did they behave?

  36. Usability Testing Why do it?

  37. Quick guide to usability testing • Determine tasks to test • Design experiment • Develop questions • Gather data • Analyze results and determine improvements 5 (people) + 5 (hours) + 5 (steps) = 80% of problems

  38. Thank you! • Pick up your handout: • If…Then….resources • Bookmark: • http://disel-project.org • Watch for more detailed publications about today’s talk.

More Related