Eyetracking Web Usability

1. Eyetracking Web Usability Usability Week 2006 Sydney 18 July 2006

2. Presenters • Jakob Nielsen – principal of Nielsen Norman Group and guru on web usability • Kara Pernice Coyne – Director of Research at Nielsen Norman Group

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

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

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

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

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

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

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

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

11. 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’

12. Header reads “Sony Style Retail Stores” - video records users wondering what this means,hence the long fixations

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

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

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

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

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

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

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

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