Eyetracking Web Usability

Jakob Nielsen and Kara Pernice, 2009

Eyetracking Web Usability is based on one of the largest studies of eyetracking usability in existence. Best-selling author Jakob Nielsen and coauthor Kara Pernice used rigorous usability methodology and eyetracking technology to analyze 1.5 million instances where users look at Web sites to understand how the human eyes interact with design. Their findings will help designers, software developers, writers, editors, product managers, and advertisers understand what people see or don't see, when they look, and why. With their comprehensive three-year study, the authors confirmed many known Web design conventions and the book provides additional insights on those standards. They also discovered important new user behaviors that are revealed here for the first time. Using compelling eye gaze plots and heat maps, Nielsen and Pernice guide the reader through hundreds of examples of eye movements, demonstrating why some designs work and others don't. They also provide valuable advice for page layout, navigation menus, site elements, image selection, and advertising. This book is essential reading for anyone who is serious about doing business on the Web. (New Riders Press.)

Book excerpt: the first 32 pages of chapter 6 are available as a free PDF download (26 MB.)

Press

Time Magazine: Why We Look At Some Web Ads and Not Others

USA Today:  Survey offers a 'sneak peek' into Net surfers' brains

Poynter:  What Makes Web Images Attractive

MediaPost:  Wise Words About Branding From The Usability Sage

ClickZ: Research: Internet Users Plagued by 'Banner Blindness'

ZDNet:  Eye tracking Web usability

Table of Contents

0. Preface
1. Eyetracking and the Eye
   • How Modern Eyetracking Works
   • Foveal Vision vs. Peripheral Vision
   • The Mind–Eye Hypothesis
   • Are Looks Good or Bad?
   • Visualizing Eyetracking Results
   • Tasks Determine Looks
   • Other Uses of Eyetracking
2. Our Eyetracking Research
   • Data Collected
   • Test Sessions
   • Why Many Eyetracking Studies Are Bogus
   • Cost of Eyetracking Research
   • Equipment
3. Page Layout
   • How Do People Look at a Page?
   • Organization of Pages
4. Navigation
   • Menus and Information Architecture
   • Navigational Elements
5. Fundamental Web Design Elements
   • On the Homepage
   • Logos and Tag Lines
   • Shopping Carts
   • Forms, Fields, and Applications
6. Images
   • What Does and Doesn't Draw Attention to an Image
   • Images as Obstacles
   • Attributes That Draw Attention
7. Advertisements
   • It's a Jungle Out There
   • When People Look at Ads
   • How Different Types of Ads Fare with Users
   • The Impact of Ad Placement
   • Text (Sponsored Link) Ads
   • Do Graphics Belong in Web Advertising?
   • Internal Promotions: Match the Site's Style
   • External Ads: What Works
8. User Viewing Behaviors on the Web
   • Exhaustive Review vs. Necessary or Desired Review
   • Momentum Behavior
   • Logging
   • Selective Disregard
   • Post-click Behavior
   • Perpetual Viewing
   • Eyetracking Reveals Another Level of User Behaviors
9. Appendix
   • How Much People Look at Basic Web Interface Elements
10. Glossary
11. Index

What is Eyetracking Research?

Eyetracking is a technology that tracks the exact  point at which a user's gaze is fixated on a screen. This technology adds a powerful dimension to user research because it allows you to understand exactly what users see--and what they don't see -- on a web page.

This example of an eyetracking "heatmap" shows how much users looked at different parts of a Web page. Areas where users looked the most are colored red; the yellow areas indicate fewer fixations, followed by the least-viewed blue areas. Gray areas didn't attract any fixations.

'Heatmaps' are visualizations showing where people spent the most time looking on a web page .

This example is from a website's "About Us" pages. The heatmap clearly shows users' tendency to read in an ""F"" pattern, and their focus on information that's presented in bulleted lists. In this case, There's also a small amount of attention to the "see also" area, but no viewing of the promotions in the rightmost column. (See our separate research project for detailed guidelines for the design of "About Us" areas of corporate websites.)

Note: Our full-day course on Fundamental Guidelines for Web Usability includes many detailed results from our eyetracking studies (and from many other studies), often shown as slow-motion gaze replay videos. The seminar is available for in-house presentation at your company.

The eyetracking equipment we use for our research. Looks like a normal computer, doesn't it? Of course, that's exactly the point, because we want users to work normally. The cameras and infrared emitters are hidden behind small dark windows at the top and bottom of the monitor. We use a separate small webcam to capture the user's facial expressions (sitting on the left loudspeaker), but even that is fairly unobtrusive, and test participants quickly tune it out.