Eye Tracking in Web Usability: What

Users Really See

Farrukh Jabeen
Master Thesis Presentation
Advisor: Dr. William Wolfe
December 2, 2010
Computer Science Program
California State University Channel Islands
Outline
 Eye tracking : Eye Tracking in Human Computer Interaction
 Eye tracking technologies
 Eye tracking in website usability
 Developed websites.
 Analysis of developed websites
 Browser compatibility of developed websites.
 Attention Wizard: Heat maps and gaze plots
 Survey results
 Conclusions
Eye Tracking
 Eye tracking is the process of recording the location of a gaze
and the motion of the eye.
 Eye tracking in Human Computer Interaction(HCI).
 Initial eye tracking methods were invasive.
 Eye movement research and eye tracking flourished in the
1970s.
The Eye
 Human vision has two parts.
 Foveal Vision
 Peripheral Vision
 The human eye may seem a lot like a camera.
 Human vision is only sharp in the center, and blurred at the
edges.
 When the eye is resting or focused on a spot, it‟s called a
fixation.
 The eye‟s rapid movement from one fixation to the next is
called a saccade.
Eye Tracking Technologies
 Eye trackers
 Intrusive and non intrusive eye tracking
systems
 Commercially available eye trackers
 Head mounted
 Worldwide used in, psychology, neuroscience,
marketing research, sports, training and usability
 http://www.arringtonresearch.com/
Eye Tracking Technologies
 Commercially available eye trackers
 Head restrained
 Accurate
 Reliable measurement
 http://asleyetracking.com/site/
Eye Tracking Technologies
 Commercially available eye trackers
 Free head motion
 High tracking accuracy
 Ability to track nearly all people
 Completely non-intrusive
 http://www.tobii.com/corporate/start.as
px
The Mind Eye Hypothesis
 What people are looking at and what they are thinking tends
to be the same.
 Looking and thinking are certainly not always intertwined.
 Mind eye hypothesis holds true for eye tracking.
 Fixations equal attention.
Benefits of Eye Tracking In Web Design
 Self-reporting tools such as questionnaires may produce
biased or even wrong data.
 One can analyze how a user‟s eyes move across a web page in
real time using visualization techniques
 Gaze plots and hot spots
Commercial Applications
 Web usability, advertising, medical research, computer
usability etc.
 The analyses focus on the visibility of a target product.
 Numerous companies offer eye tracking services and
analysis.
 Eye tracking cameras in automobiles can monitor the
drowsiness or inattention of the driver.
 Lexus claims to have equipped its LS 460 car with the first
driver monitor system in 2006.
Eye Tracking In Website Usability: Page
Layout
 Full is not better when it comes to web pages.
 When designing a web page, a designer should determine the
following:
 What do visitors of their website want.
 What priority real estate sections (areas most eye catching to
the users) are in the design.
 Consistent web conventions.
 Graphics add interest but are slow to load and can impede
navigation.
 Eye Tracking In Website Usability: Page
Layout
 Heat-maps are the best-known
visualization technique for eye
tracking studies.
 Red areas indicate most attention
 Yellow areas indicate fewer
fixations.
 Blue areas indicate the least
viewed areas.
 Gray area means no fixations.
Eye Tracking In Website Usability: Page
Layout
 A gaze plot represents
fixations during a single
user‟s visit to a page.
 The size of each dot
represents the duration
of that fixation
 The bigger dots indicate
longer durations.
Eye Tracking In Website Usability:
Navigation
 Web is a combination of contents and presentations.
 Allow people to plan monitor and control their activities.
 People use navigation on a website to move from one page to
another page.
 Gather all the information that is required.
 Global, top-level, persistent, or primary navigation should be
displayed on every web page.
 Local navigation guides a user to a specific section on a long
page.
Eye Tracking In Website Usability:
Navigation
 Comparing different types
of navigation menus, most
users concentrated on the
top-left.
Eye Tracking In Website Usability:
Navigation
 In a study of an online
banking system users were
shown the entry page of the
system.
 Links underneath the text
“UNSERE ANGEBOTE
ONLINE” get much less
attention than the links
above it
Fundamental Web Design Elements:
Homepage
 The home page is
different from all other
web site pages.
 A homepage should
clearly communicate the
site's purpose.
 Show all major options
available on the web
site.
Fundamental Web Design Elements:
Shopping Carts
 In this site shopping
cart at the right in
the uppermost row.
 People found
shopping cart in
fewer fixations.
Fundamental Web Design Elements:
Web Forms
 Web forms should be easy for users to quickly look at,
register, and deal with all parts of a form.
 According to Matteeo Penzo‟s study
 Left-aligned Labels: These are easily associated labels with
the proper input fields.
 Users took more time because of excessive distances between
labels inputs.
 Right-aligned Labels: These reduced overall number of
fixations by nearly half.
 Forms completion times were cut nearly half.
Fundamental Web Design Elements:
Web Forms
 Top-aligned Labels: Users capture both labels and inputs
with a single eye movement.
 Gaze plot data shows how
people‟s eye move
through a simple form
Fundamental Web Design Elements:
Web Forms
 Research shows that not
all participants know
what an asterisk „*‟
means.
 Word „optional‟ should
be placed inside the text
boxes in gray fonts.
Images
 Images are a powerful part of web design.
 Good images explain a concept, convey information, and
enhance people‟s overall experience on a site.
 Bad images waste space, are ignored by users, and create
more confusion .
 Pictures express ideas and thoughts effectively.
Images
 People did
not look on
the small
and low-
contrast
images
Images
 Minor tweaks
in an image can
increase the
user‟s attention
Advertisements
 Eye tracking helps us determine when and how much people
look at advertisements on the web.
 What attributes of advertisements attract their attention.
 The look of an ad is important, but so is its placement on the
page.
 Close proximity to popular editorial content helps ads get
noticed.
 Of all types of ads tested, text ads are viewed most intently.
Advertisements
 Ads that blend
into the look
and feel of the
page get more
attention
Developed Websites: Technologies
Used
 HTML : Hyper Text Markup Language
 CSS: Cascading Style Sheets
 Styles define how to display HTML elements.
 Javascript: to add interactivity to HTML pages.
 AJAX : Asynchronous JavaScript and XML
 It is possible to update parts of a web page without reloading
the entire page.
 PHP : PHP: Hypertext Preprocessor.
 It is a server-side scripting language, like ASP.
 PHP scripts are executed on the server and support many
databases
Developed Websites: Technologies
Used
 MySQL: MySQL is a database server and ideal for both small
and large applications.
 PHP + MySQL: PHP combined with MySQL are cross-
platform
 WampServer: WampServer is a Windows web development
environment.
 It enables creating web applications with Apache, PHP and
MySql.
 Browsershots: convenient way to test website‟s browser
compatibility in one place.
 Attention Wizard: Eye Tracking without the Eyes
Health Website
http://farrukhjabeen.info/health/
 Layout of
Health website
Health Website
http://farrukhjabeen.info/health/
 Browser
Compatibility
Test on Windows
Health Website
http://farrukhjabeen.info/health/
 Browser
Compatibility
Test on Linux
Health Website
http://farrukhjabeen.info/health/
 Browser
Compatibility Test
for Mac OSX
Kids and Parents Website
http://farrukhjabeen.info/kidsparents/
 Layout of
Kids and
Parents
Website
Kids and Parents Website
http://farrukhjabeen.info/kidsparents/
 Browser
Compatibility
Test for
Windows
Kids and Parents Website
http://farrukhjabeen.info/kidsparents/
 Browser
Compatibility
Test for Linux
Kids and Parents Website
http://farrukhjabeen.info/kidsparents/
 Browser
Compatibility
Test for Mac
OSX
Desi Recipes Website
http://farrukhjabeen.info/recipes/
 Layout of Desi
Recipes website
Desi Recipes Website
http://farrukhjabeen.info/recipes/
 Browser
Compatibility
Test for
Windows
Desi Recipes Website
http://farrukhjabeen.info/recipes/
 Browser
Compatibility
Test for Linux
Desi Recipes Website
http://farrukhjabeen.info/recipes/
 Browser
Compatibility
Test for Mac
OSX
Analysis of Developed Websites Using
Heat-Maps
 AttentionWizard was used to create heat-maps for the three
websites developed for this research.
 An attention heat-map is a combination of two elements:
 Predicted attention (hot spots)
 Eye gazing path.
 The hot spots that can be found on a generated heat-map
show areas of attention concentration.
 The eye gazing path depicts the path that user‟s eyes take
when they first get to the page.
Heat-Maps of Health Website :
http://farrukhjabeen.info/health/
 Heat-Map
of Health
Website
Home Page
Heat-Maps of Health Website :
http://farrukhjabeen.info/health/
 Heat-Map
of BMI
Calculator
Page
Heat-Maps of Health Website :
http://farrukhjabeen.info/health/
 Heat-Map
of Food
Calories
Calculator
Page
Heat-Maps of Kids and Parents
Website : http://farrukhjabeen.info/kidsparents
 Heat-Map of
Kids and
Parents
Home Page
Heat-Maps of Kids and Parents
Website : http://farrukhjabeen.info/kidsparents
 Heat-Map
of Blogs:
Post New
Entry Page
Heat-Maps of Kids and Parents
Website : http://farrukhjabeen.info/kidsparents
 Heat-
map of
„Blogs‟
page.
Heat-Maps of Desi Recipes Website :
http://farrukhjabeen.info/recipes
 Heat-map
of „Desi
Recipes‟
website‟s
home page.
Heat-Maps of Desi Recipes Website :
http://farrukhjabeen.info/recipes
 Heat-Map of
User‟s
Home Page
Heat-Maps of Desi Recipes Website :
http://farrukhjabeen.info/recipes
 Heat-Map
of Post a
Recipe
Form
Surveys
 Feedback
Results for
Health
Website
Surveys
 Feedback
Results for
Kids and
Parents
Website
Surveys
 Feedback
Results
for Desi
Recipes
Website
Conclusions
 Eye movements are fundamental to any interaction with a
visual system.
 Good visual design is important in a wide range of activities.
 This project developed three websites.
 Analyzed the eye tracking data by creating heat-maps.
 The heat-maps were created using AttentionWizard.
 Heat-maps assist the usability effort in various ways, based
upon the website and its purpose.
 Optimum placement of the call to action button or text.
Conclusions
 An heat-map is not a substitute for actual landing page
testing.
 This study found that images and graphics draw attention
before accompanying text.
 Increases the proportion of user generated activity
 Convert more readers into buyers, and more visitors into
subscribers.
 Crucial role in the success of banner ads.
 A survey provides qualitative information on the user‟s
perceptions.
Future Work
 Use of eye movements as a usability evaluation technique in
the ecommerce websites.
 While ecommerce has been around since the mid-90s, it has
gained traction in recent years.
 Amazon, eBay,Yahoo, and Dell are some of the more
successful businesses in this area.
References
 1.“Eye Tracking in Human-Computer Interaction and Usability Research: Current Status and Future Prospects” by Alex Poole and Linden J. Ball. Book chapter in Ghaoui, C. (ed.) “Encyclopedia of Human Computer Interaction” ISBN-10: 1591405629.
Information Science Publishing, 2005.
 2. “Eye tracking in Human Computer Interaction and Usability Research: Ready to Deliver the Promises” by Robert J.K Jacob, and Keith S. Karn, PhD. Book chapter in R. Radach, J. Hyona, and H. Deubel (eds.), “The Mind's Eye: Cognitive and Applied
Aspects of Eye Movement Research” (pp. 573-605), ISBN-10: 0444510206. Elsevier, 2003.
 3. “The Angle Velocity of Eye Movements” by Dodge and Cline. Psychological Review, 8,145-147, March 1901.
 4. “Eye Tracking Methods for Improving Engineering Graphics Instruction” by Eric N. Weibe. Proceedings of the Annual ASEE Meeting. Washington, DC, 2005.
 5. “Eyetracking Web Usability” by Jakob Nielsen, Kara Pernice, ISBN-10: 0321498364. New Riders Press, Berkeley, CA, USA 2009.
 6. “Eye Tracking For People Who Don‟t Care About Vision OR How To Get More Dependent Measures” by Zenzi M. Griffin. Lecture notes in “Psych 290: Graduate Research Methods: How to do stuff”, Stanford University 2001.
 7. “Identifying Fixations and Saccades in Eye-Tracking Protocols” by Dario D. Salvucci, and Joseph H. Goldberg. ACM Symposium on Eye tracking Research and Applications, 2000.
 8. “Identifying Web Usability Problems from Eye Tracking Data” by Claudia Ehmke, Stephanie. 21st British HCI Group Annual Conference on People and Computers: HCI...but not as we know it - Volume 1, 2007.
 9. “Saccadic Eye Movements and Cognition” by Simon P. Liversedge and John M. Findlay. Trends in Cognitive Sciences volume 4, Issue 1 2000.
 10. “Analysis of Eye Tracking Experiment Performed on a Tobii T60” by Chris Weigle and David C. Banks. In proceedings of Visualization and Data Analysis, 2008.
 11. “How Users View Web Pages: An Exploration of Cognitive and Perceptual Mechanisms” by Rebecca A. Grier Aptima, Philip Kortum, and James T. Miller. Book chapter in Panayiotis Zaphiris, and Sri Kurniawan “Human Computer Interaction Research
in Web Design and Evaluation”. IGI Global, 2007.
 12. “Eye tracking And Its Application in Usability and Media Research” by Michael Schiessl, Sabrina Duda, Andreas Tholke, and Rico Fischer. In MMI-Interactive '03, pages 41-50, 2003.
 13. http://en.wikipedia.org/wiki/Eye_tracking#cite_note-preventative-29
 14. http://www.newcarnet.co.uk/Lexus_news.html?id=5787
 15. “Testing Websites with Eye Tracking” by Will Schroeder. http://www.uie.com/articles/eye_tracking/ 1998.
 16. “Usability Issues in Web Site Design” by Nigel Bevan. Proceedings of UPA'98, Washigton DC, 22-26 June 1998.
 17. “Information Space. In C. Ghoul,” by Benyon, D.R. The Encyclopedia of Human Computer Interaction IDEAL Publishing, 2005.
 18. “Navigation Information Space: Web site design and Lessons from the built environment” by David Benyon. PsychNology Journal Volume 4, Number 1, pp.7-24, 2006.
 19. “Usability for the Web: Designing Websites that Work (Interactive Technologies)” by Brinck T. , Gergle D., and Wood S., ISBN-10: 1558606580. Morgan Kauffman, London, 2001.
 20. “Information Architecture for the World Wide Web, 2nd edition” by Rosenfeld, L. and Morville, P., ISBN-10: 0596527349. O‟Reilly, Sebastopol, 2006.
 21. http://www.motive.co.nz/glossary/navigation.php
 22. “A Global Perspective on Web Site Usability” by Shirley A. Becker and Florence E. Mottay. IEEE Software, vol. 18, no. 1, pp. 54-61, Jan. /Feb. 2001.
 23. “Sexy Web design” by Elliot Jay Stocks, ISBN-10: 0980455235. SitePoint Pty. Ltd, Australia, 2009.
 24. “Eye tracking in Usability Research: What users really see” by Martina Manhartsberger, Norbert Zellhofer. Usability Symposium 2005.
 25. “Do Interface Standards Stifle Design Creativity?” by Nielsen J, http://www.useit.com/alertbox/990822.html, 1999.
References
 26. “Could I have the Menu Please? An Eyetracking Study of Design Conventions” by J. D. McCarthy, M. A. Sasse, and J. Riegelsberger. In Proceedings of HCI2003, pages 401--414, Bath, UK, 2003.
 27. http://www.usability.gov/pdfs/chapter7.pdf
 28. http://www.usability.gov/pdfs/chapter5.pdf
 29. “Web Form Design: Filling In the Blanks” by Luke Wroblewski, ISBN-10: 1933820241. Louis Rosenfeld, USA, 2008.
 30. http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
 31. http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm
 32. http://www.quality-web-solutions.com/web-design-image.php
 33. http://www.commercechemist.com/Blog/?tag=/eye+tracking
 34. “Identify Web Usability Criteria: The „Scanmic Model‟ by Shahizan Hassan and Feng Li. Eighth European Conference on Information Technology Evaluation 2001.
 35. http://www.poynter.org/content/content_view.asp?id=70472
 36. “Online Banner Advertising: Eye Tracking Research” by Steve Scherbak, VP Development New Media, Valassis Interactive. Eye tracking research - Online Banners - Realeyes -20 11 2008 US.
 37. http://www.poynterextra.org/eyetrack2004/advertising.htm
 38. “Banner Blindness: Web searches often miss „obvious links‟ by J.P. Benway and D.M. Lane. Internetworking, ITG Newsletter, 1998.
 39. “Validating the Use and Role of Visual Elements of Web Pages in Navigation with an Eye-Tracking Study” by Yeliz Yesilada, Caroline Jay, Robert Stevens and Simon. Proceeding of the 17th International Conference on World Wide Web, 2008.
 40. http://www.doshdosh.com/how-to-reduce-banner-blindness-and-buy-effective-ads-that-work/
 41. http://www.w3schools.com/default.asp
 42. http://www.wampserver.com/en/
 43. http://www.attentionwizard.com/aw/overview.html
 44. http://www.usda.gov/wps/portal/usda/!ut/p/c5/04_SB8K8xLLM9MSSzPy8xBz9CP0os_gAC9-wMJ8QY0MDpxBDA09nXw9DFxcXQ-
cAA_1wkA5kFaGuQBXeASbmnu4uBgbe5hB5AxzA0UDfzyM_N1W_IDs7zdFRUREAZXAypA!!/dl3/d3/L2dJQSEvUUt3QS9ZQnZ3LzZfUDhNVlZMVDMxMEJUMTBJQ01IMURERDFDUDA!/?navid=SEARCH&q=sr22.
mdb&Go_button.x=0&Go_button.y=0&site=usda
 45. http://browsershots.org/
 46. http://online-biz-guide.com/?p=208
 47. http://bannerweaver.com/blog/banner-advertising/importance-banner-advertising/
 48. http://www.wlct.org/tourism/etourism/advicesheets10.pdf
 49. http://webdesign.vinsign.com/what-is-ecommerce-importance.html
 50. “Eye-Tracking: Characteristics and Methods: Eye-Tracking: Research Areas and Applications” by Daniel C. Richardson. Encyclopedia of Biomaterials and Biomedical Engineering, 2004.
 51. http://www.ergoestudio.com/descargas/eye-tracking_for_usability_e-commerce.pdf.