Eyetracking Web Usability
Kara Pernice Director of Research Nielsen Norman Group
Testing Basics
• Two NN/g facilitators conducted all tests using the same methodology: observing people in a lab • Office in Mid-Town Manhattan (New York, USA) • Used eyetracking technology to record what the users were looking at • Screen resolution: 1024x768 • 16-bit color depth
– using high resolution and large color depth is too resource intensive
2
Data Collected
• • • • 1.5 million fixations (or “looks”) from users 300+ GB of data 306 Study Participants 85 Test Tasks
3
Websites and Tasks
• Open-ended tasks where users could choose any sites they wanted • Closed tasks where users were asked to use a specific site
– The eyetracking system opened the website to be tested (or another site) for the user
6
Task Examples
• Web Search/Research • Read
– Google: Groundhog Day date 2006? – Yahoo: What is the top speed that a Mako Shark swims at?
– New York Magazine: Find a restaurant you would most like to go to – Danceworksonline.co.uk: Your friend is a big fan of Mikhail Baryshnikov. Learn enough so you can talk with your friend about him.
– Agere: Find company's headquarters. – Adelphia: Learn about digital video recording, (DVR).
• Corporate
• Shop
– Kiehl's: Buy yourself something. – Sears: Buy yourself an air humidifier 2,000 sq ft/ < $125.
• Open
– Anything you are interested in: YouTube, CNN, GQ, Comedy Central…
• Rapid-fire
7
The Eye and the Eyetracker
Eye Tracking Methodology: Theory & Practice Duchowski, A. T.
ISBN: 1-85233-666-8
9
The Eye
• Retina: Thin layer of cells at the back of the eyeball. Fovea: Central area of the retina, extending about two degrees out from the center of the eye.
– It converts light into nervous signals.
•
•
•
Parafoveal: Region surrounding the fovea, corresponding to the retinal area from two to ten degrees off-center. Peripheral: Region of the retina outside the central ten degree area.
– Increased sensitivity to motion detection.
– When we are "looking at" something, we are directing our eyes so the image is projected onto the fovea.
Image at Webvision http://webvision.med.utah.edu/anatomy.html
10
Eyetracker
• Pupil Center Corneal Reflection, (PCCR), eye tracking technique
– High-resolution camera measures the physical direction of the eye – Near infrared light-emitting diodes (NIR-LEDs) generate even lighting of the user and reflection patterns in the user’s eyes
• Shows the point on the screen that falls in the center of the fovea
– No peripheral vision tracking
Tobii 1750 Eyetracker rented by Tobii Technology For more information go to http://www.tobii.com/
11
What can we realistically and safely conclude from Web eyetracking data? • If a person looks at something, can we conclude
– The person saw it? – The person registered/understood it?
• If a person does not look at something, can we conclude
– The person did not see it? – The person did not register/understand it?
• If a person looks at something, is that positive or negative? • If a person looks at something for a long time, is that positive or negative?
12
Foveal and Peripheral Vision Work Together to Produce Entire Visual Perception • People give attention with foveal vision • With peripheral vision, people can choose what to give attention to and what to screen out
– Big things, like navigational elements and other things they recognize
• Screen out items because
– Got enough information peripherally • Animation – Don’t believe the item is needed now • Search bar or menu • Advertisement • Item that appears to be an advertisement
– Sometimes a good defense mechanism
13
When doing tasks, most people are interested in what they are looking at. (References)
• Ware, C. & Mikaelian, H. H. (1987). An evaluation of an eye tracker as a device for computer input, in J. M. Carroll & P. P. Tanner, eds, `CHI + GI 1987 Conference Proceedings', SIGCHI Bulletin, ACM, pp. 183-188. Special Issue. • Barber, P. J. & Legge, D. (1976). Perception and Information, Methuen, London, chapter 4: Information Acquisition, pp. 5466. • Bolt, R. A. (1984). The Human Interface: Where People and Computers Meet, Lifetime Learning Publications, Belmont, California 94002. • Mackworth, N. H. & Morandi, A. J. (1967). `The gaze selects informative details within pictures', Perception and Psychophysics 2, 547-552.
14
What are you drawn to?
16
Fixation Length High
Low
17
Task Matters (Yarbus, 1967)
Seven records of eye movements by the same subject. Each lasted 3 minutes.
2. Estimate wealth.
3. Estimate ages.
4. What was the family doing 5. Remember clothing. before the "unexpected visitor” arrived?
1. Free examination.
6. Remember position of people and objects.
7. How long had the "unexpected visitor" been away from the family?
18
Task: Learn about Mikhail Baryshnikov www. danceworks online. co.uk
26
Drop-down menus
27
Reading Webpages
F - Pattern Dominates Reading Behavior
• People start off fresh and eager • Users spend more time and fixations
– at the beginning (left side) of lines of text – at the beginning of a page
• They quickly resort to scanning – reading fewer words • They frequently do not finish the line completely
29
Task: Galveston, TX in 1900 www.1900storm.com
30
Slowed Time: F-Pattern Emerges From The Start
Start reading
Continue reading, and scan
Scan
31
Small chunks of text are read more
Task: Bird flu threat?
http://home.iol.ie (Ireland On-Line)
32
Headings Help People to Scan Efficiently
Task: Stock exchange listed on
33
Users are Repelled by Walls of Text
Task: BNSF Values www.bnsf.com
34
Task: Dog best for you? www. dogbreedinfo. com
35
Effective Writing
36
Task: Find HQ www.agere.com
Written for print. Layout not engaging online.
37
Task: Bird Flu a threat?
www.healthpolitics.com
38
Noticeable: • Numbers • Capital letters
39
Task: George Brett’s sport and position
www. thebaseball page.com
40
Rewriting and Reformatting for the Web Helps Simple Article Example
Source
What was done Total hours of work
New York magazine site:
www.nymag.com reformatting Less than 2 hours UI designer and developer combined time spent
41
Task: Read/ learn
www.nymag.com Simple Content
42
Task: Read/ learn
www.nymag.com Simple Content Reformatted
43
Simple Content
Simple Content Reformatted
44
Simple Content: Original and Edited
Original
Reading level
9th Grade
Edited
8th Grade
Effect
Avg of: ARI,
Good Web layout
Kincaid, Flesch
Narrow column, headings Narrow column, headings, bullets, good writing, main idea concise, graphics support point
Content Comprehension Time User Satisfaction
(1 neg, 7 pos)
52%
86%
34%
2:22
4.68
1:29
4.93
0:53
4%
45
Reading Landing Pages
Task: HQ location www.agere.com
47
48
Task: Is DVR for you? www. adelphia. com
49
50
Task: Read news
www.bnsf.com
51
Misallocation of Screen Space
52
Task: Buy baby girl gift
www.jcpenney.com
53
54
Images as Obstacle Course
• Web User Defense Mechanism: Users treat pages with superfluous images like obstacle courses
– Useless images are barriers to overcome and to be avoided
• Things that appear unneeded, at least peripherally, can be erroneously tuned out
55
Task: Stock exchange JetBlue listed on www.jetblue.com
56
57
Images That Do Not Get Attention Share the Following Traits: • Poor contrast • Generic/ stock art, off-putting, cold, fake, too polished • Not related to content • Look like advertisements
58
Task: Heartburn advice
www.gerdinstitute.org
59
Task: Find a restaurant www.nymag.com
60
Task: BOD reliable? www.gateway.com
61
Task: Is DVR for you? www.adelphia .com
62
63
64
65
Task: Find a restaurant www.nymag.com
66
Images That Get Attention Share the Following Traits: • Related to content • Clear / right size • Approachable people
– Faces • Smiling or otherwise Open • Looking at the camera • People look at “real people” more than they look at models
• Private Anatomy
67
68
69
70
71
Task: Buy baby girl gift
www.jcpenney.com
72
Task: Buy baby girl gift
www.jcpenney.com
73
Task: Buy a shirt www.neiman marcus.com
74
Task: Buy shirt www.neiman marcus.com
75
Task: George Brett’s sport and position www.baseballalmanac.com
76
77
Task: Buy a shirt
www.neimanmarcus.com
78
79
Men
Women
80
Men
Women
81
Magnetism: Naturally Drawn to
Task: George Brett’s sport and position www.baseballh alloffame.org All
82
83
84
Men
Women
85
All
86
87
Men
Women
88
89
Men
Women
90
And It’s Not Just People
91
92
93
94
95
96
Thank you
Comments/ Questions
For book voucher raffle, please give me your business card, or name, email, phone