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