Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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