Presentation is loading. Please wait.

Presentation is loading. Please wait.

Eyetracking Web Usability Usability Week 2006 Sydney 18 July 2006.

Similar presentations

Presentation on theme: "Eyetracking Web Usability Usability Week 2006 Sydney 18 July 2006."— Presentation transcript:

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 Nielsen Norman Group guru on web usability Kara Pernice Coyne – Director of Research at Nielsen Norman GroupDirector of Research

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) - dont 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 users 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 (dont 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. Dont 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 doesnt 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 dont 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 Dont 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 websites 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





Download ppt "Eyetracking Web Usability Usability Week 2006 Sydney 18 July 2006."

Similar presentations

Ads by Google