Eye Tracking Impacts on Web Page Design

Eye Tracking Impacts on Web Page Design & Effectiveness Peter Shearer Psyc 736 - Seminar in Human Factors Engineering April 25, 2006

Good web pages and bad web pages n n n Try to find the term: “Blues Brothers” on this page. Milk and Cookies Now try to find the term: “Argentina Women” on this page. Killer Japanese Seizure Robots! See the difference?

Diagnosing web sites with eye tracking n Increase search task efficiency n Increased advertising power Aero Store Control over traffic flow Look Smart n

Mc. Carthy et al. (2003) n n Study of design conventions using eye tracking. Conventions used come from IBM’s Ease of Use Group’s in house guidelines. General Hypothesis: “people will search for web elements in areas where they expect to find them…” Duh.

Top down and Bottom up influences

Mc. Carthy’s Experimental Setup n n n 2 X 3 (Site Complexity, Menu Position, and Page Visit #) 31 subjects; 17 male, 14 female Mean age: 22 Only subjects with tracking rates of > 90% were used in the final data analysis Eye. Gaze™ tracker @ 50 Hz

Simple and Complex site designs

Results n Less time needed to locate a target in simple vs. complex layouts F(1, 29)=7. 33

Results n Menu Position was not significant over all F(2, 58)=1. 31

Results Number of times a page has been previously viewed impacts task speed F(2, 58)=8. 75

Glance distribution in search tasks n Across all paradigms 55% of searches took less then 10 glances

Bias and learning

Mc. Carthy et al. (2003) n n People are bias to the left initially Complexity of web sites impacts search time Given a search task people don’t automatically go to the menu bar IBM web design guidelines DO yield faster searches, only on first page view

Eye Tracking and Webpage Analysis n Business oriented application of eye-tracking n Companies in the Site Analysis business: q q q n Eyetools Research High Position Limited Access Testing Cost: $100 person / per page / per task

Heat maps n n By far the flashiest looking metric for page evaluation Plot of all fixations over a certain period of time rendered in false color Depicts Areas of Interest (AOIs) AOIs differ depending on the task assigned

Sample Heat Map

F-Shaped Pattern For Reading Web Content

Mark Russell (2005) n n n Using Eye-tracking data to understand first impressions of a website Subjects were asked to view one of three e -commerce sites and verbally report their impressions as to the purpose of the site Tobii 1750 Eye-tracking system and Clear. View™ software

Areas of Interest and Fixations

Heat map in relation to AOIs

Benefits of heat maps and AOI charts n n n Heat maps pin point what part of an element subjects are interested in AOI charts tell us dwell time and number of fixations with in an AOI The combination of these two help define display elements that receive the most visual attention

Other Applications of PC based eye tracking: Fono & Vertegaal (2005) n n Eye Windows: Eye-Controlled Zooming and Focus Selection Eye tracking based focus selection versus traditional selection (mouse or hotkeys) 72% faster An attempt to replace the mouse with eye tracking

Elastic focus selection algorithm n n n Algorithm extracts x, y coordinate data from an eye-tracker User fixates on a target they wish to select and presses a button to trigger selection Selected window expands to a predetermined ratio on the screen.

Eye. Windows in action

Selection Style Reaction Time Test n n n Subject were presented with grids of 4, 8, and 12 windows. A random window would turn red and the subject was to select it After selection subjects copied string of characters displayed in the window and pressed enter.

Selection Stimulus

Selection styles n n Eye + Key: Fixation + spacebar press selects target window Eye+ Auto: Fixation alone selects target window Mouse: Standard mouse over + click selects target window Hotkeys: F 1 -F 12 keys select corresponding window

Results of Reaction Time Study

Selection Style Reaction Time Study n Rxn times varied significantly across methods: F(3, 33)=104. 54 n No mention of Midas Touch effects using fixation only selection style

Zoom Window Reaction Time Study n n n Like the Selection Style test with the addition of a “Zooming Algorithm” All subjects experienced both zooming and static window styles Results favoring Zooming windows assume selection style is the major factor in reaction time.

Sample Zooming Windows Stimulus

Zoom Window Reaction Time Study n Results suggest that the greater the number of windows the greater the benefit of zoomable over static windows

Benefits of Eye based focus selection n Faster target selection Hands never leave the keyboard No change in attentional resources

Thoughts on Fono & Vertegaal (2005) n Use of eye tracking as an interface for the PC would increase selection speed n For eye tracking to become a useful input tool both hardware and software would have to change extensively n Not likely to be implemented any time soon

Popular web analysis eye tracking systems Calibration Demo Accuracy Demo Applied Science Technology model 504 Tobii 1750 eye tracking system

Software Analysis Suites Gaze. Tracker™ by Eye Response Tech. Clear. View™ by Tobii Tech.

Culturally dependant web design n Mc. Carthy et al. (2003) General Hypothesis: “people will search for web elements in areas where they expect to find them…” The 2003 study shows more fixations to the left of the page in attempts to find the menu bar Perhaps in cultures in which text is written right to left this directional preference is reversed

Non-English Sites n BBCArabic. com n Fisheye. co. il n Al Jazeera English n Al Jazeera Arabic