Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› Leveraging Eye Tracking to Create an Engaging User Experience

Leveraging Eye Tracking to Create an Engaging User Experience

by Frank Guo
6 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Combining eye-tracking data with conventional usability studies can give you unparalleled insight into how to better guide user attention and refine their experience.

Eye tracking is a very powerful research technique that can help you design engaging experiences by illuminating a pathway for capturing user attention. It’s also a misunderstood technique. Many are lured by the “sexiness” associated with heatmaps and gaze plots but fail to implement the findings properly, and therefore get lots of data but glean little actionable insight. Others avoid eye tracking altogether because of perceived complexity of the technique.

Having set up eBay’s eye tracking lab and conducted extensive eye-tracking research to improve advertising, homepages, content strategies, and visual design, I’ve developed some guidelines and trained many UX professionals in applying the technique. Based on that experience, here’s a quick how-to guide for eye tracking.

What Is Eye tracking?

Simply put, eye tracking is a technique to help us understand where users’ visual attention goes. The results can inform us on how to write content to attract attention, how to make information more discoverable, and how to engage and excite users. Below are metrics typically collected in eye tracking research:

  • Gaze plots (the journey users’ eyes make to reach a target)
  • Time needed to find a target
  • Fixation points (what screen regions capture user attention and for how long)
  • Heatmaps (the aggregation of how much attention a group of users pay to different regions of the user interface)

The screens below show some examples of what eye-tracking data looks like:

heatmaps on eBay

Example 1

Diagram of Naked Innovation design process

Example 2

Diagram of Naked Innovation design process

Example 3

Why Eye tracking?

We do usability testing all the time, so many of you might ask: What can eye tracking offer that can’t be achieved through conventional usability testing? Well, for starters, usability studies can’t tell you how users spontaneously pay attention. Why?

Reason 1. You can’t directly observe what people are looking at

In a traditional usability study, you rely on two key techniques: observing user behavior and asking questions. For user behaviors that are visual in nature, like looking at the screen without typing or using the mouse, you won’t know what people are paying attention to.

Reason 2. People cannot tell you what they look at

What about just asking users what attracts their attention? Problem there is, people are very, very bad at remembering what they look at. In my eye tracking studies, what people tell me that they looked at is often different from what they actually looked at. This is because visual attention is a very spontaneous and nearly subconscious mental process.

In the example below, a user looked at the ads at the bottom of the page and later had no recollection of ever seeing them. This shows that much of visual attention is unknown to the user.

Diagram of Naked Innovation design process

Reason 3. Thinking aloud disrupts visual attention

Conventional usability studies depend heavily on the so-called “think-aloud protocol,” asking users to tell us whatever that passes through their minds as they perform tasks. However, thinking aloud is not natural—you don’t talk aloud when reading a webpage in real life, do you? Asking users to think aloud inevitably interferes with the way they naturally look at things.

Given these limitations of conventional usability studies, eye tracking emerges as the only way to fully understand users’ visual attention.

Areas of Application

Below are areas specifically suited for eye-tracking research. All of them are closely related to attracting and guiding user attention:

  • Homepages
  • Landing pages
  • Search
  • Advertising
  • Marketing promos
  • Reading content
  • Navigation
  • Shopping (looking for items to buy and checkout)

In other words, all areas of user experience where visual attention is heavily involved—where you can’t know what’s going on by just observing screen activities—can benefit from eye tracking research.

Eye Tracking + Conventional Usability Study = Complete Insight

Below is an approach I have used in most of my eye-tracking research. Typically, instead of running a stand-alone eye-tracking session, I include an eye-tracking component as the first part of the study and a conventional usability study component as the second part of the study. To avoid bias and collect clean eye-tracking data without the influence of moderation and learning, the eye-tracking portion should always precede the conventional usability testing part.

Part 1: Eye tracking and uninterrupted tasks

With eye tracker at work, we ask users to perform tasks with no moderation, which means no think-aloud, no questions from the moderator, and no assistance provided if they get stuck.

Purpose: We want to get unbiased, clean visual attention data by letting users perform tasks in the most natural way possible. This gives us a clear picture of what drives user attention.

Key to success: Make sure you set up sensible, realistic tasks, using a live site/mobile app if possible, asking users to do activities they would naturally do, and avoiding interrupting them in any way when they do the activities.

Part 2: Conventional usability testing, repeating the tasks above

Ask users to perform the same tasks as those in Part 1, but with different stimuli (e.g., asking users to buy a different item, reading a different article, or creating a difference invoice, than in Part 1), this time without eye tracking, we ask the users to do activities typical of a usability study—in performing tasks, they should think aloud and we can lend help if they encounter problems; we can choose to probe when observing interesting behavior, and we can ask them to elaborate what made them say “wow” or “sucks.”

Purpose: By asking users to perform similar tasks as in Part 1 with additional insight in the form of user comments, we can understand “why” users look at the screen in the ways captured by eye tracking.

Key to success: Given that this part is designed to get in-depth insight into why users behave in certain ways, make sure to ask probing questions based on your research questions and observed user hesitation and confusion.

How to Interpret Data?

There are various ways to interpret eye-tracking information. Conventionally, eye-tracking data is analyzed quantitatively by aggregating data across a large sample of users for each task. The familliar heatmap from many eye tracking studies is an example of this kind of data. The quantitative data can help us understand how much attention various screen regions attract user attention, but do not lend us insight about the process of how users discover information on the page.

Eye tracking emerges as the only way to fully understand users’ visual attention

On the other hand, eye-tracking data can be analyzed qualitatively, one user at a time, on a task-by-task basis, much like how we analyze data for ethnographic research and one-on-one interviews. The qualitative data, when cross-referenced with the think-aloud protocol and observation of behavior from Part 2 of the procedure outlined above, can provide rich insight into users’ visual attention processes.

Case Study

In one of the studies I conducted, the eye movement of a user suggested that her eyes travelled long distances, jumping from the top of the screen to the bottom, ignoring all of the page content in between. What caused this behavior?

To understand the reason, it was not enough to look at the eye tracking data alone. From her verbal comments collected in Part 2 of the testing, I learned that she explored this web page by trying to gauge how much content there was on the page before looking at any particular screen element, which was why she looked at the top of the screen and then immediately jumped to the bottom. In so doing she got a sense of what was there on the screen.

That feedback, combined with the eye-tracking data, gave me a clear understanding of what she was trying to do when exposed to the page the first time. The same visual search pattern also emerged from other users in the study. By synthesizing eye tracking and think-aloud protocol data across just 10 users, we got a very deep understanding of how to better guide user attention, which drove a successful re-design of the UI.

Conclusion

Eye tracking is a powerful yet often misunderstood UX research technique. When applied correctly, through careful planning and identifying the right areas of application, it generates deep insight into how users pay attention to the UI. The best way to apply eye tracking is to use it as an add-on to conventional usability studies and combine qualitative and quantitative analysis to interpret eye tracking data. Through this holistic approach, you’ll get actionable insight into how to engage users through effective UX design.

 

Image of futuristic eye courtesy Shutterstock.

post authorFrank Guo

Frank Guo,

Frank Guo provides UX strategy and design consulting through his firm, UX Strategized LLC, helping leading companies like eBay, PayPal, Yahoo!, StubHub, and IMVU improve user experience, usability, product strategy, and digital marketing. He has published 15+ professional papers and co-authored a book chapter related to user experience.

Tweet
Share
Post
Share
Email
Print

Related Articles

How UX teams can provide key insights using technology adoption models

Article by Lawton Pybus
What Makes Users Adopt a New Feature or Tool?
  • The article explores the evolution of technology adoption theories, focusing on models like Diffusion of Innovations, TAM, TAM 2 and 3, UTAUT, and HMSAM, providing UX practitioners with tools to understand and enhance user behavior in product development.
Share:What Makes Users Adopt a New Feature or Tool?
6 min read

What do Architecture, Computer Science, Agile, and Design Systems have in common?

Article by Kevin Muldoon
A Pattern Language
  • The article explores Christopher Alexander’s impact on diverse fields, from architecture to software development, introducing the concept of design patterns and their influence on methodologies like Agile and the evolution of Design Systems.
Share:A Pattern Language
7 min read

In this article, I’ll share seven incredibly useful design resources that can elevate your skills as a UX designer in 2024 and make you a well-rounded designer overall. These resources not only help you work more efficiently but also automate repetitive tasks and enable you to create outstanding user experiences. So, let’s dive into this without further delay.

Article by Abhi Chatterjee
7 Must-Have Resources for UX Designers in 2024
  • The article explores seven indispensable resources for UX designers in 2024, offering insights into design methodologies, case studies, UX laws, and practical challenges to elevate designers’ skills and efficiency.
Share:7 Must-Have Resources for UX Designers in 2024
3 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and