Top

Introduction to Eyetracking: Seeing Through Your Users’ Eyes

December 6, 2005

This article is the first in a series of articles on eyetracking that will appear in UXmatters. Over the coming months, I’ll use eyetracking to evaluate a lot of world-renowned user interfaces—including Web sites like Amazon.com®, Google™ News, and eBay®; Rich Internet Applications (RIAs); and desktop applications—and analyze quantitative eyetracking data to provide best practices for designing user interface elements like navigation systems, menus, and forms, and for effective ad placement.

For some time, usability professionals have evangelized the term discount usability testing. Discount usability testing was a product of the early years of the Internet. Its techniques promised to provide a simple, fast, and relatively economical way of conducting usability studies and improving users’ experience of the Web and other software user interfaces. However, such studies are mainly qualitative and subjective. The data reflect users’ conscious thoughts and feelings as well as the observers’ impressions. Some think this is the best, even the only method of conducting usability studies, but there are other—in some situations, perhaps better—ways of evaluating user interactions. Eyetracking offers unique benefits and provides a practical alternative to conventional discount usability testing.

Champion Advertisement
Continue Reading…

As John Elvesjo—founder of the firm Tobii Technology, which produces eyetracking technology—said, “The eye is the mirror of the soul, and the soul is the mirror of our thoughts.” This quotation expresses wonderfully the magic of human sight and the manifold possibilities that the study of users’ eye movements makes possible.

Adoption of Eyetracking Methods

Usability gurus have written little on eyetracking, which is odd considering what an effective technique it is. Back in 2000, Jakob Nielsen wrote an Alertbox column about an eyetracking study of readers’ behaviors when reading news on the Web, and Jared Spool’s User Interface Engineering published an article on using eyetracking to test the usability of Web sites back in 1998. These early articles came out before recent advances in eyetracking technologies and techniques. The near silence of usability gurus on the subject of eyetracking since then is quite surprising to me. Eyetracking is not rocket science. It is a simple and effective means of evaluating Web pages and user interfaces.

Fortunately, things are now changing. If you take a look at Steve Krug’s book Don’t Make Me Think, you will see a graph that resembles a gaze plot. He derived that graph from years of experience observing user interactions with Web pages. Eyetracking now makes it possible to accurately measure the kinds of gaze patterns that Krug observed. Eyetracking can show which parts of your user interfaces users see and which parts seem to be invisible to them—not just by observing users and gathering qualitative data, but also by analyzing their gaze plots and other quantitative data.

What You Need to Know About Human Sight

Human sight has a visual field of about 120 degrees, encompassing three degrees of visual acuity: foveal, parafoveal, and peripheral vision. We primarily take in visual data from the outside world through the fovea, which provides the greatest visual acuity. We move our head and eyes to focus the fovea on objects of interest that we want to see.

Eye movement has two states:

  • saccade—A saccade is the fastest movement of which the human body is capable—taking only about 30 milliseconds—and centers content within the foveal area.
  • fixation—A fixation occurs when this movement stops, permitting the eye to acquire content.

During saccadic activity, we cannot see at all. We perceive the world visually only through fixations. The brain virtually integrates the visual images that we acquire through successive fixations.

How Eye-tracker Works

The Tobii Eye-tracker, shown in Figure 1, is an instrument that is capable of capturing data about both saccadic activity and fixations of the foveal area.

Figure 1—Eye-tracker
Eye-tracker

To accomplish this, it uses an infrared light source to illuminate the eyes, a CCD (Charge Coupled Device) sensor to capture a reflection of the user’s eyes, as shown in Figure 2, and eye-gaze analysis software to process the data.

Figure 2—Eye-tracker in operation
Eye-tracker in operation

By using a remote, digital eyetracker, we can record saccades and fixations, the length of each fixation, the distance to the eye, the pupils’ diameter, and a lot of other useful data within an accuracy of half a degree. Thus, eyetracking can, for example, tell us what a user is looking at and for how long.

Eye-gaze analysis software produces various graphs that are useful for data interpretation, as follows:

  • Hotspots—Generalize the behavior of a group of test subjects. They’re very similar to heat maps, as shown in Figure 3.
  • Gaze plots—Provide a comprehensive image of all the eye-gaze data from a single eyetracking test. Figure 4 shows a gaze plot.
  • Gaze replays—Provide both real-time and slow-motion replay of the paths a user’s eyes followed during an eyetracking test.
Figure 3—Hotspots
Hotspots
Figure 4—Gaze plot
Gaze plot

Both gaze plots and gaze replays are much more informative than hotspots. They permit an evaluator to see through each individual user’s eyes, displaying the gaze path a user’s eyes followed while exploring a Web page or interacting with a user interface.

To facilitate analysis of a user’s interactions at a deeper level, you can export all of these data to an Excel® file, as shown in Figure 5.

Figure 5—Data exported to an Excel file
Data exported to an Excel file

Analyzing the angles between saccades or the distance between two fixations can reveal a lot of information about a user’s thoughts while interacting with a Web page or user interface. Eye-tracker provides a powerful set of tools that lets you define areas of interest, or boxes of content, on a Web page such as an ad, then determine a user’s attentiveness to them by evaluating the percentage of time the user spends viewing each area of interest relative to time spent viewing other areas of a page during normal page browsing.

Evaluating Usability Using Eyetracking

A very effective test methodology combines standard usability evaluation techniques—such as the think-aloud protocol—with the latest eyetracking capabilities, as shown in Figure 6. Eyetracking introduces quantitative measurement to the field of usability evaluation, which has typically provided mostly qualitative data. Whether you are videotaping or logging data during a usability test session, the think-aloud protocol lets you collect qualitative data such as a user’s mood through tone of voice and facial expressions, while Eye-tracker gathers and records quantitative data such as pupil diameter, fixation coordinates, fixation length, saccade angles, and more. The combined data of these two methods provide a broad overview of the problems a user encounters in a user interface while performing a task.

Figure 6—Combining the think-aloud protocol with eyetracking
Combining the think-aloud protocol with eyetracking

We can now leave expert evaluators’ interpretations and de facto standards behind and instead determine things like the optimal position for the labels of fields in a form, the best placement for a navigation bar, or the most visible location for a logo or an advertisement by evaluating gaze data that shows the percentage of users actually seeing them.

Eyetracking technology lets us observe the behaviors of users and provides quantitative, objective data that lets us develop a deeper understanding of how users interact with Web pages and user interfaces. Armed with this knowledge, we can improve the usability and usefulness of Web pages and software products.

Eyetracking in New Interaction Paradigms

Usability and marketing studies are just two of the possible applications for eyetracking technology. In addition to using eyetracking to analyze Web pages and software user interfaces, through my research at Consultechnology, I am exploring how we can take full advantage of eyetracking capabilities and working to discover better interaction paradigms. For example, by capturing the screen coordinates of a user’s gaze, eyetrackers

  • allow people to use their eyes as input devices, thus creating new and more natural and ecological ways for them to interact with systems
  • can provide the means for a system to know where a user’s attention is focused while reading or interacting with a user interface and even to anticipate what a user wants to do next
  • can analyze a driver’s level of attentiveness while driving and prevent drowsiness from causing accidents

What’s Next?

Eyetracking provides a relatively quick and straightforward way of conducting studies of any kind, making it possible for me to present reports on eyetracking studies every month in UXmatters. Through these studies, I will evaluate specific user tasks and interactions with Web pages and user interfaces. My reports will demonstrate best design practices through the analysis of quantitative test results. 

Next Month—“Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach

Bibliography

Krug, Steve. Don’t Make Me Think! A Common Sense Approach to Web Usability. Indianapolis, Indiana: Que, 2000.

Nielsen, Jakob. “Eyetracking Study of Web Readers.” Alertbox, May 14, 2000. Retrieved December 6, 2005.

Shroeder, Will. “Testing Web Sites with Eye-Tracking.” User Interface Engineering, September 1, 1998. Retrieved December 6, 2005.

Executive Director, Technology at frog

Milan, Italy

Matteo PenzoAt Consultechnology, an ITC company with offices in Milan and Lamezia Terme, Italy, Matteo conducted research projects that focused on natural interactions between people and computers, automotive applications, and universal design—specifically for the elderly and the disabled. Matteo began his career in information technology working for Anixter International at their Milan and London offices, managing their intranet design and programming team. Then he worked as a project manager for a leading Italian Web agency in Milan, where he managed Internet projects for international Fortune 500 companies. Matteo is a sought after speaker at national and international seminars—including CHI2005, Macromedia, and VNU to mention just a few—and is a professor for the Interaction Design course in the Masters program in Humanistic Computer Studies at Bicocca University, Milan. He has written numerous articles on the subjects of natural interfaces, user experience, and technological innovation. He is also the UXnet Local Ambassador for Milan.  Read More

Other Articles on Eyetracking

New on UXmatters