Eye tracking heatmap overlaid over a woman's face.
All articles
Feb 19, 2008 | Updated Jun 12, 2024

Eye Tracking Usability Studies

To determine what usability study participants look at and take in while viewing online media, we used to watch their mouse cursors, interactions with links and controls, and body language. We also listened carefully to their think-aloud narratives and comments. These traditional testing techniques, however, could never tell us definitively what users notice and what they don’t. Eye tracking usability studies open up a new frontier.
John Dirks, Chief Research Officer & Partner at Blink.

By

John Dirks

Incorporating an eye tracker in a usability test gives us more precise information about how discoverable or attention-grabbing visual elements such as navigation structures, screen graphics, links, text, multimedia content, or promotions are to study participants.

Eye tracking benefits

Eye tracking data can help clients improve and streamline designs. By identifying and understanding individual and common user gaze patterns and eye movements when viewing online content, we can address research questions such as:

  • What do users look at first on our home page (or any page, for that matter)?
  • Do the calls to action on this page stand out immediately?
  • Are users reading this content?
  • Are users noticing this interface feature and if so, how long does it take before they look at it?
  • Which of these navigation systems is the most discoverable?
  • What page elements are distracting users from easily accomplishing this task?
  • Will our new design be more effective than the current design?

Eye tracking gives us valuable insights into how users perceive online content. Data generated from eye tracking, when combined with findings from traditional usability methods, can help teams optimize layout and visual design, leading to better user experiences and higher conversion rates. Eye tracking studies can also be a cost-effective way for clients to ensure that they are getting a good design and usability ROI.

How does eye tracking work?

We use an eye tracking system developed in Sweden by Tobii Technology. The Tobii eye tracker looks like a computer monitor (see Figure 1), but sensors are built into the monitor’s casing that send and receive reflections of infrared light from study participants’ eyes. It is quick and easy to train or calibrate the eye tracker to work with an individual at the start of a usability session, and the technology is completely safe.

When users view screen content—a web site, application, image, video, marketing piece, etc.—the eye tracking system precisely tracks and records where their gaze pauses or fixates, even if only for a 10th of a second. The system also tracks and records the eye movements or saccades between the fixation points.

A brief example

For illustrative purposes, we ran a short eye tracking test with a small sample of five users on the web site of one of our favorite charities, Oxfam America. Participants, all unfamiliar with the site, were given the task of finding a way to donate to Oxfam. Figure 2 shows a “heat map” of what our sample of users looked at during their first five seconds on the home page. The bright red-orange spots are the parts of the page users fixated on most frequently. We outlined the two pathways to donate, “What You Can Do” and “Donate now,” in red.

Eye tracking heatmap over a woman's eye

Unfortunately, both pathways to donate on the home page received little initial attention. All testers found and clicked one of the links within 16 seconds, so task success was 100%, but if a primary purpose of the Oxfam America site is to collect donations, the call to action on the home page may not be clear enough. It’s also possible that a more subtle approach to soliciting donations is more effective for Oxfam’s audience—we don’t know, and Oxfam is not one of our clients.

While heat maps show how different page elements command visual attention relative to each other and can be generated for individuals or a group of users, gaze plots and gaze replays show the visual path that individual users take on a page. The numbered circles in Figure 3 reflect what one user in our mock study fixated upon first, second, third, etc. during her first two seconds on the Oxfam site.

By analyzing individual gaze plots, we can identify patterns about the order in which study participants view a page or application screen. These patterns can reveal mismatches between where users expect to find links, controls, or content and where they are actually placed on the page, and the patterns help us to recommend changes in the way content or navigational elements are spatially arranged or aligned. For example, a gaze pattern that involves a lot of back and forth movement may suggest a need to place certain items closer together.

One useful feature of the eye tracking system is its ability to track views or fixations in specific areas of interest (AOIs). Once defined in web page or other on-screen content, the eye tracking analysis software can then generate quantitative data such as:

  • the percentage of users whose eyes fixate on the AOI
  • their gaze duration time within the AOI
  • the number of fixations on other page elements prior to viewing the AOI

Figure 4 shows data from an AOI we defined around Oxfam America’s “Donate now” box. This chart reveals that 3 users noticed the “Donate now” box, and it took them between 2 and 10 seconds to first fixate on it. Putting on our design hats momentarily, the brown “Donate now” box in Figure 3 looks a lot like a heading and less like a button, which may be why two of our testers did not notice it at all.

It can be telling how many people simply do not notice an AOI and thus are missing out on an important site function or brand message, echoing the old usability adage “If the user can’t find it, the function’s not there.”

How does eye tracking change how we conduct usability studies?

We do not view eye tracking as a replacement of traditional usability testing methods. With some minor modifications to introduce the eye tracker and fully take advantage of what eye tracking does best, we typically run studies very much as we always have. The data generated from an eye tracker complements other usability findings to give us a more comprehensive and sometimes more quantitative view of usability problems. Eye tracking data can help us pinpoint barriers and distractions that prevent users from finding things quickly or otherwise degrade their online experiences, and it can reveal interesting viewing patterns that lead to better, actionable design recommendations that meet both user needs and business goals—and those are the things we think help our clients the most.

Thanks to Laura Barboza and Jen Amsterlaw for their research assistance.

References