Download Eyetracking web usability

Eyetracking Web Usability
Usability Week 2006
Sydney
18 July 2006
Presenters
• Jakob Nielsen – principal of
Nielsen Norman Group and guru
on web usability
• Kara Pernice Coyne – Director
of Research at Nielsen Norman
Group
Goals of research
• Test their theories about usable and
unusable web design accompanied by
eyetracking data
• Investigate new findings based on
eyetracking data
• Collect information about good eyetracking
usability practices
Testing basics
• Two facilitators conducted tests in a laboratory in
New York:
- eyetracking technology
- observing users
- screen resolution 1024 X 768
- 16-bit colour depth
• Data collected
- 1.2 million fixations (looks) from users
- 265 GB of data
- 255 participants
- 50 test tasks
Test sessions
• Sessions lasted between one and two hours
• Users gave answers for tasks
- verbally
- via a questionnaire
- writing an essay
• Tasks were
- captured by the eyetracker
- timed and scored by the facilitators
- usually videotaped
Websites and tasks
• Open-ended tasks where users could choose
any sites
• Closed tasks where users were asked to use a
specific site
• Quantitative tasks
- web search/research
- read
- find corporate info
- shop
• Qualitative tasks
- software records their “think aloud” responses
The eye
• Retina: thin layer of cells t back of
eyeball – converts light into
nervous signals
• Fovea: central area of retina –
when we are looking at something,
we are directing our eyes so image
is projected onto fovea
• Parafoveal: region surrounding
fovea corresponding to retinal area
from 2 to 10 degrees off-centre
• Peripheral: region of retina outside
the 10 degree area – increased
sensitivity to motion detection
The eye
• 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 recognise
• Screen out items because
- got enough info peripherally (animation)
- don’t believe the item is needed now (search
bar, ads, items that look like ads)
- this is sometimes a defense mechanism
Eyetracker
• Pupil Centre Corneal Reflection (PCCR),
eye tracking technique
- high resolution camera measures the
physical direction of the eye
- near infrared light-emitting diodes
generate even lighting of the user and
reflection patterns in the user’s eye
• Shows the point on the screen that falls in
the centre of the fovea
Findings – home page
• Eye is drawn to standard (expected) navigation
areas – top of page horizontal navigation bar
• Users ignore big images with top stories and
images that look like ads
• Users expect standard info eg contact details
(footer), search (top right hand corner) and
privacy (footer) to be located in particular areas
• Online shoppers go straight for the navigation
and ignore sales pitches especially those
embedded in images that look like ads
Findings – home page
• Users are not interested in how fancy the home
page looks. They navigate quickly to complete
tasks, home page is just a ‘gateway’
• An indication of what happens in reality – people
go to websites to find/do something so they are
not open to promotional/marketing content
• Gimmicky/’marketese’ link names confuse users
eg brand names eg ‘Sony Style Retail Store’
Header reads
“Sony Style Retail Stores”
- video records users
wondering what this means,
hence the long fixations
Findings - layout and navigation
• Wrong/confusing link names can alienate users
• Go with conventional navigation layouts and
elements (don’t reinvent the wheel) eg LH nav (no
more than 7 to 8 items), flush left copy
• Related links work if placed correctly (top right hand
corner for those who are just scanning and bottom
of page for readers who read whole article)
• Exhaustive review occurs in designs that are
cluttered and have unconventional navigation, and
in splash pages.
• Don’t add to users’ cognitive load
Findings - layout and navigation
• Blurbs can be useful, particularly for branded
link names
• Tables are useful for summarizing lots of content
• Usability levels do not vary between users with
low and high web experience
• Frontload content with important info (top of
para). If it doesn’t have important info, users will
skip it and go straight to info they want
• Small chunks of text are read more
Findings - layout and navigation
• Users are repelled by walls of text, but long pages
do not deter if formatted properly eg with subhead,
dot points and short paragraphs
• Numerals and capital letters stand out so don’t spell
out
• Headlines are VERY important
• Web layout is about giving users instant gratification
of a need for relevant information
• Get rid of “filler” words eg ‘what is ????”
• “Hot potato” syndrome – users will abandon page
the minute they discover it is not relevant to them
Findings - search
• Users do read meta descriptions in search
result listings
• Users do read sponsored links if they look
like organic search listings
• Search fields draw attention
Findings - advertisements
• Banner ads and images that look like ads
are hot potatoes. The average fixation
duration is 0.09 second
• Text ads have higher fixations than ads
with images and graphics
• If ads have a relationship with content of
page, it is more likely to be viewed
• Don’t do ‘advertorials’ – ads that look like
content. This is tricking and turns users off
Findings - advertisements
• Users tune out to animation if used only for
promotional purposes
• In cases where users DO look at graphical ads,
these ads
- are heavy with large, clear text
- match the website’s style (colour scheme, look,
layout)
- have attention-grabbing or thrilling properties
Findings – images & animation
• Web user defense mechanism – they treat
pages with superfluous (useless) images like
obstacle courses
• Things that appear unneeded are tuned out
• Images that do not get attention:
- generic/stock art (cheesy)
- off-putting, cold, fake, too polished
- boring
- not related to content
- look like ads
Findings – images & animation
• Images that get attention:
- related to content
- clear/right size
- have approachable/real people (faces, smiling,
looking at camera)
• Private anatomy
• Animations:
- looked at only if they are helpful eg
instructional animations
- talking heads bore
- those not related to content distract