Using research to improve your site

1
What MakesWeb Sites Work?

• Using research to improve yoursites 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 youve 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
• Doesnt get overwhelmed by story tools

5
What do people do online?

• 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...

76.0 68.0 60.5 52.0 38.5 38.0 22.5 10.0
7.5
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/galleri
es/091506/korda/index.html
13
Viewing photo slide shows

• DiSEL research Navigation possibility arrows
  and next

http//www.washingtonpost.com/wp-srv/photo/galleri
es/091506/korda/index.html
14
Viewing photo slide shows

• DiSEL research Navigation possibility autoplay

http//www.washingtonpost.com/wp-srv/photo/galleri
es/091506/korda/index.html
15
Viewing photo slide shows

• DiSEL research Navigation possibility numbers
  and thumbnails

http//www.washingtonpost.com/wp-srv/photo/galleri
es/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 234
• Arrow 331
• Numbers 216
• aver. 249

• 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
  resultsText 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
FindingsRecent News
Visual cues Biggers 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?
• Whats the impact?
• In peoples behavior
• In whats 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 werent 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
5 (people) 5 (hours) 5 (steps) 80 of
problems

• Determine tasks to test
• Design experiment
• Develop questions
• Gather data
• Analyze results and determine improvements

38
Thank you!

• Pick up your handout
• IfThen.resources
• Bookmark
• http//disel-project.org
• Watch for more detailed publications about
  todays talk.