Methodology Spotlight

Eye Tracking Paints a Unique Picture

Back in January, we wrote a blog post about the complementary effects of adding Eye Tracking to Usability Labs. When companies combine these two methodologies, they discover not only what users are looking at on each page of their Website, but also why they are looking there.

The major point of the blog post was this: when we track users' eye movements on a web page, we can use the gaze data we collect to help companies better understand how to prioritize content, improve navigation, and make overall site design more intuitive.

In this article, we will take the subject a step further by showing you the various maps that we use during analysis of our Eye Tracking studies. We will explain what they reveal about Usability, and, in turn, how this type of research can help companies create the most intuitively designed Websites that drive call to action.

---

AOI Plot

Explaining the Map
Before we ever analyze Eye Tracking data, we must first break up each web page into distinct areas. To do this, we create a plot for AOIs, or Areas of Interest. We can control how broad or narrow in scope we want the areas to be. For example, we can take a high level approach and see if users focus on an ad while browsing a web page. Or, if the ad is larger and has distinct pieces to it, we can be more specific and create mini-AOIs within the ad to see what specifically catches users' attention.

---

Aggregated Heat Map / Opacity Map

Explaining the Map
Once we have set our AOIs, we are ready to analyze the Eye Tracking data. The colors you see in an Aggregated Heat Map and Gaze Opacity Map represent viewer intensity. They are a reflection of two things: the number of users who look at a page area, and how long they gaze there.

In the Aggregated Heat Map, the areas in red are viewed by the most users for the longest time, followed by orange, yellow, and green. The regions with no color do not receive any attention.

The Gaze Opacity Map offers an alternate way of looking at viewer intensity. The web page is covered in a black film, and then made more transparent in the areas that are viewed the most. So rather than covering the hot spots with colored shading, it illuminates them so that one can view the specific wording or images in question. We normally use both maps during our analysis on Eye Tracking projects.

What These Maps Tell Us

We tested a page on the Web with one of our clients to find out if users were looking at a specific advertisement. Eye Tracking data revealed that most users never saw the ad, and those who did see it spent little time gazing at it. Through a traditional usability interview, we found out that users were overlooking the ad because it was too low on the page and did not attract their attention. The ads that did garner high gaze time, as well as high recall, were placed more prominently, while also having some distinct characteristics — such as showing a person's face, or asking an intriguing question. Through this process of collecting Eye Tracking data and then asking Usability questions, we were able to paint a complete picture of the ad's effectiveness, while also providing user-based recommendations on how to improve it.

Other Things These Maps Tell Us
Ad testing isn't the only arena where Heat and Opacity Maps can be of assistance. Here are some specific examples of other cases in which these maps have illuminated key findings:

• We discovered on one site that users were focusing more of their time on the global site navigation than the primary navigation, which was not intended
• On the same site, Heat Maps showed that users were gazing for long periods of time at three navigation links, and many clicked on the wrong one; when we probed the users, we found out it was because of ambiguous wording
• On another site, we found that the promotion next to the image was much more effective than the promotion next to the product description; users notice images and messaging aligned with images

---

Chronological Gaze Plot

Explaining the Map
The Chronological Gaze Plot shows the order in which users look at different page elements. This is useful because it not only tells us where users look, but also when they look there. The bubble with a 1 is, on average, the first place users look on a page.

The size of each bubble is determined by the number of users who look at that area: the larger the bubble, the more users look there. It's important to make this distinction for the following reason. Let's say that, on average, an ad is the 6th element that users view on a page. That's pretty good when you consider how many elements a page typically has. But if you collect data for 12 users, and only 2 of them actually look at the ad, that ranking is not so meaningful.

During analysis, we evaluate both of these factors in determining whether the amount of time it takes a user to notice a page element is good or needs improvement. Then, using the Eye Tracking data to determine where users looked, supported with interview verbatims, we can understand what the site can do to improve visibility and appeal of the applicable areas.

Other Things Chronological Gaze Plots Tell Us

• On one site, users were distracted by superfluous banners, which delayed their ability to find the links they were looking for. The Chronological Gaze Plot told us that the banners were looked at 2nd, while the links were viewed 5th. It was clear that the banners needed to be redesigned or removed completely, as they were preventing users from quickly accessing information
• On another site, reviewing the order in which users looked at page information caused the site owners to reformat the page layout

---

To Sum Up

We have found that Eye Tracking provides a unique way of discovering insights about navigation, advertising, and content organization that are nearly impossible to uncover via Usability testing alone. When users are asked questions during traditional Usability Labs, they may not always be able to vocalize what they did on a web page, much less remember it. But with Eye Tracking, we automatically track what they did, so we can focus our interviews on finding out why they did it, and how their experience could be made better.

Through our extensive use of Eye Tracking and Usability, we have found they are most useful when used together in the following circumstances:

• Testing the placement, messaging, content, and functionality of in-context advertisements
• Comparing multiple navigation designs or prototypes of a Website
• Evaluating the overall organization and order of content on specific Web pages
• Determining if a site is effectively driving call to action

It is important to note that the above cases are rarely mutually exclusive. Often, we will tackle two or more of these objectives during a study.

The maps we presented above allow us to aggregate qualitative data through users' eye movements and visually represent them in different ways. Not only are these visuals cool to look at, but they are also incredibly effective tools that aid our understanding of how web pages are perceived, digested, and explored.