Eye Tracking

What Can Eye Tracking Tell Us About Usability Testing?

Usability testing is one of the methods used in user experience research, commonly known as UX research. In general, UX research aims to examine and better understand consumers’ needs and motivation to deliver products and services based on their preferences. The purpose is to gain insight into how a brand is perceived from the user’s perspective.

Although there’s a variety of methods, they all have the same goal — to find out what the customers want and what they wish for, as well as what their experience with the brand’s products or services is. 

However, there is a distinction between user experience research that aims to understand the motives, needs and behavior of customers (through typical measurement of attitudes) and how the customers engage in the use of products. Namely, this distinction is sometimes regarded as the difference between user testing and usability testing

Table of Contents

User testing vs. usability testing

While user testing is mostly focused on the users themselves, what they think, and their attitudes towards the brand and its products, usability research is more focused on the product. Usability research, commonly known as usability testing, aims to understand how users interact with products by observing their behavior. Ultimately, both approaches aim to improve the users’ experience by delivering user-tailored products and services. 

In recent years, usability research is most commonly focused on website design and quite often done with eye tracking. Brands turn to eye tracking since the method offers significant data which is not easily obtained through behavioral measures. Eye tracking enables researchers to enter the subconscious mind of the consumer by exploring how their user experience relates to where they look at the most, how long they look, and in what order.

Eye tracking research is popularly utilized in website design, as it can be conducted through common web cameras. It is of great value for web designers to understand which part of the page users are focusing on when engaging with the website. Brands conduct this type of research to analyze what bits of the already existent websites can be improved to achieve a more pleasurable user experience

website usability testing
Image source: https://www.hotjar.com/blog/website-usability-testing/

What are the most common methods of usability testing? 

There are different types of usability testing you can conduct, depending on what your research interests are. Here, we point out some of the most common ways to conduct usability research.

Moderated vs. unmoderated testing

You might be interested in understanding how the users interact with the website in real-time. This can be achieved by questioning them while they are actively engaged. In this case, moderation is required, as the researcher needs to be present to ask why the user made a specific interaction with the site. 

However, this type of research is more costly and time-consuming. On the other hand, unmoderated testing can be useful when exploring behavioral patterns but requires a larger sample to obtain meaningful insight. 

You might be interested in understanding how the users interact with the website in real-time. This can be achieved by questioning them while they are actively engaged. In this case, moderation is required, as the researcher needs to be present to ask why the user made a specific interaction with the site. 

However, this type of research is more costly and time-consuming. On the other hand, unmoderated testing can be useful when exploring behavioral patterns but requires a larger sample to obtain meaningful insight. 

Remote vs. in-person testing

Remote research is unmoderated and provides lower levels of control. However, distributing the tests remotely is an efficient way of obtaining valuable data if one needs quick results. 

In-person testing is supervised and conducted in a lab by an on-sight researcher who distributes the tests, one participant, at a time. It is most useful when one needs a better understanding of individual experiences, especially when examining target groups. Remote testing can provide more insight into how the majority of users engage with the website.

Explorative testing

This type of usability testing is conducted as an open-ended discussion with participants with the aim of exploring new ideas and concepts. It may be organized as a moderated focus group, with the main topic being the experience of the website that is still in beta testing. 

Explorative testing is most valuable in the early stages of product or website development, as brainstorming sessions can help you learn from previous user experiences.

Assessment research 

While explorative techniques are commonly used pre-hoc, assessment research is conducted once the users have had a chance to experience the website for some time. It can be conducted in-person via guerilla testing or individual interviews, but in most cases,, assessment is done on a wide sample to identify potential issues. 

Users are being asked for their opinions and attitudes, but they may as well be questioned to judge the quality of their experience with the website and the way they used it.

A/B testing

The A/B testing method is commonly used in experimental research. A/B testing typically compares two variants of the same website with repeated measures, meaning that all participants see both website versions.

Once they have a chance to interact with both versions, the participants are asked to judge which of the two they prefer. As the method implies changing only one feature at a time, researchers know that it can only be due to this particular feature when the participants make their decisions.

What usability testing goals can you achieve with eye tracking?

Eye tracking can be combined with any of the previously mentioned methods. Data from eye tracking studies can help bridge the gap between intentions and behavior, enabling researchers to understand what the users focus on before they are even aware of it. 

Moreover, eye tracking data can provide evidence for a deeper understanding of behavioral data. By combining eye tracking with standard UX research methods, researchers can answer the following:

  • What aspects of the site are the users most drawn to?
  • Which features catch users’ attention the most?
  • How long do users keep their attention on specific areas of the site?
  • Are there any areas of the page that are ignored?
  • Are there distracting elements on the page?
  • How easy is it for users to navigate the website?

 

Depending on your research goals, eye tracking can be more or less crucial for usability research. If you’re interested in how users navigate the site and whether their decisions are guided by the site’s page design, then including eye tracking is more than welcome. It may also be helpful when pre-testing the design to make the site more appealing and functional for a stronger first impression. Typically, users spend less than a minute per webpage, which is why it’s important to make the site as user-friendly as possible.

eye tracking
Image source: https://www.worldviz.com/post/is-now-the-time-to-buy-a-vr-headset-with-built-in-eye-tracking

Types of eye trackers used in usability testing

What makes eye tracking especially convenient for UX research is that many of the techniques commonly used for studying UX are methodologically based on the same principles. Both require a sample of users’ attention, both include session recording (either screen recording or video recording) and both may base conclusions on heatmaps. 

Thus, eye tracking can be added alongside click recording, mouse movement tracking, and key logs to provide additional information on usability. There is more than one way to do so, depending on what kind of eye tracker is available and, once again, what the research goals are. 

Infrared eye trackers

The oldest and the most popular gaze research method to this day is the infrared light method. Infrared trackers may be screen-based or wearable. Those looking for a higher degree of precision in lab conditions may opt for screen-based trackers. At the same time, research in natural surroundings is commonly done with wearable trackers, typically in the form of glasses. 

Infrared eye trackers emit a near-infrared light that reflects the eye’s surface and returns information about the position of the gaze by measuring the distance between the pupil and the cornea. The infrared reflection allows for high precision recordings if properly calibrated. 

Combined with traditional usability research methods, infrared eye trackers can provide significant temporal and spatial data of the users’ website experience. Not only can one know precisely where the person is looking while interacting with the website, but it’s also possible to match this data with interactive events (clicks, scrolls, mouse movement, etc.) to predict how the user will behave on the website.

Webcam eye tracking

Eye tracking programs based on web cameras enable researchers to gather vast amounts of data in short periods of time. Once the participants initiate the eye tracking software, the program’s algorithm activates the camera on their computer and records where they look while scrolling the website. Nowadays, there are online webcam eye trackers available as well. 

Although this option is the most affordable, one pays the cost for inaccuracy. Unlike the infrared eye trackers, webcams record the image of the gaze (not the gaze itself) and calculate the viewing angle under quite a few presumptions:

  1. That the participant is not moving
  2. That the recordings are short
  3. That the participant is sitting just at the right angle 
  4. That the distance from the computer screen is optimal
  5. That the calibration has been done properly.

 

Even when all of these conditions are met, webcam eye trackers typically have an accuracy of 2-5 degrees of visual angle, which in return means that the gaze location can vary up to 2.5 inches (6 cm). Thus, webcam eye tracking is not recommended when there’s a need for high-precision data, while it can be a good option if the researchers are only interested in rough gaze locations.

Predictive eye tracking

A more recent type of eye tracking has been developed based on AI algorithms that use pre-recorded eye tracking data to predict where the users will be looking at a website. This novel approach is becoming more and more popular with companies interested in improving their website usability since it doesn’t require new data to be gathered. 

The predictive eye tracking algorithm focuses on simulating the first 3-5 seconds of a typical user’s attention on a webpage. As already mentioned, the users’ attention on a single page tends to be very short. Thus, what a user will most probably tend to look at first is valuable information for those wishing to sell their products or services through their website. 

Moreover, this algorithm is quite accurate. Attention Insight’s algorithm has been tested and approved by an MIT study that showed it is 90% accurate in predicting web page attention compared to traditional eye tracking methods.

Eye tracking use cases in usability testing

Eye tracking can provide insights to UX researchers which otherwise might not be available. One example is a study from Usability Geek, where they were interested in testing the usability of a browser-based game prototype. Particularly, they wished to see whether the participants would be able to find the record of their game results. 

What they found with conventional usability testing is that only half of their participants completed the task successfully. Still, this data alone was not sufficient to understand why they were not able to find the record easily. The task could be completed successfully by clicking the “Review” buttons.

eyetracking prototype
Image source: https://usabilitygeek.com/what-is-eye-tracking-when-to-use-it/

After conducting the eye tracking study, heatmaps showed attention is highly focused on the buttons (areas colored in red being the most focused ones), which means the issue lies elsewhere, perhaps in the choice of the word “review.” Without this knowledge, researchers couldn’t have ruled out the possibility that the participants were simply not paying attention to the buttons.

eyetracking prototype
Image source: https://usabilitygeek.com/what-is-eye-tracking-when-to-use-it/

Another useful insight from this study is that users don’t necessarily tend to click to where they look the most. The amount of their visual focus can reflect not only preference but confusion as well. Attention focusing is based on cognitive load, which means that the more users look at a part of the screen, they might be more confused.

To avoid confusion and make sure that the users focus their attention where you wish them to, it’s important that the users can easily find the answers to the 3 Ws, proposed by EyeQuant:

  1. What is this page about?
  2. Why should I care?
  3. Where should I go next?

 

One study of the National Retail Federations’ top 50 eCommerce platforms showed that only 30% of brands ensured that the 3 Ws were visible on their websites within the first 3 seconds of the user’s attention. A good example is ASOS, which highlights the most important aspects for entering an online purchase funnel: 1. the product, 2. the price, and 3. the CTA (Add to Bag).

asos dress - eyetracking
Image source: https://www.eyequant.com/resources/effective-visual-hierarchy-design-on-websites-the-3-ws/

There are also some bad examples, such as the website from Office Depot. Although the product is quite evident and all of its important features highlighted in the title, the price seems to draw no attention, and the CTA is not evident. Thus, the purchasing process is made more complicated. 

Image source: https://www.eyequant.com/resources/effective-visual-hierarchy-design-on-websites-the-3-ws/

Both cases show how predictive eye tracking can help you see with the users’ eyes what they find important and what they locate easily, as well as what distracts them from focusing on the more important features and, consequently, purchasing the product.

Usability testing with Attention Insight 

Attention Insight provides an AI algorithm that predicts visual attention on any webpage based on data previously collected in eye tracking studies. The algorithm itself can be used as a plugin for Adobe XD (as well as Sketch, Figma and Chrome extension) or directly in the application. It’s especially useful for simulating A/B testing conditions by comparing two versions of the same page. The algorithm will produce heatmaps with Percentages of Attention (PoAs) for both images, enabling you to visually compare them.

aoi heatmap

In the first image, the area that is predicted to attract the most attention is the title which is central to the screen, an obvious focal point. However, the primary CTA is located to the lower left part of the screen. As typical users tend to gaze through less information-dense pages in a Z-shaped pattern, the CTA area should still receive some attention. However, the PoA here is only 3%, and there are several reasons why this might be so:

  • The page lacks visual hierarchy, as there is only the most dominant focal point, while there are no subordinates. 
  • The font size of the primary CTA is the same size as the rest of the text. 
  • There is no contrast to the CTA button, which makes it less noticeable.

 

aoi heatmap

After making the font larger, adding contrast to the CTA button and making it more central, the visual hierarchy is more balanced, and the PoA is predicted to be higher. By making simple visual tweaks, you can improve your design significantly. Predictive eye tracking tools can provide you with real-time feedback of the potential effects these design changes can have.

CTAs are important aspects of every landing page, thus it’s crucial for web designers and companies to have knowledge about how much attention they draw. When analyzing the most successful companies in the Crunchbase database with Attention Insight’s predictive eye tracking tool, results show that on average primary CTAs get 4% of attention, while secondary CTAs get 2%.

However, it might surprise you that 11% of companies don’t have CTAs in the above-the-fold section of their websites which are not visible at all. Making the CTAs more visible can improve the conversion rate and the overall time a potential user spends on the website, which makes the website itself more functional.

This landing page from a company that sells sneakers shows the importance of white space for achieving a balanced visual hierarchy. The primary CTA here is predicted to receive a PoA of only 2%. Although this button is big, most attention is spread between the title and the text on the right side. There is basically no white space on the page, as the image in the background covers the whole screen.

aoi heatmap

After making some important changes, a different design enabled a jump in PoA for the primary CTA by 3%:

  • The long passage was removed from the right and only one sentence was added beneath the title.
  • There is only one main visual object of attention (the sneaker)
  • The plain yellow colored background now has a lot of white space.

 

These changes have made the design less over saturated. The page as a whole is more balanced according to the Gestalt principles. Moreover, the minimalist appeal lowers cognitive load, which in return creates a more pleasant viewing experience.

aoi heatmap

Thanks to predictive eye tracking tools, you can learn whether the CTAs on your pages are visible enough and make them more appealing to potential users. You can also learn more about other features that you wish to highlight, such as images, headings, links etc.

Conclusion

User experience research has been significantly enhanced with the use of eye tracking, and it continues to be among the most useful tools to gain novel insight into usability testing. Not only can eye tracking provide information on where the users are looking, but it can also help researchers dig deeper into understanding human attention mechanisms.

There are a few eye tracking techniques to choose from, each with its upsides and downsides, and choosing the right one for your particular needs should be a matter of careful thought. Eye tracking is not necessary, as traditional usability research methods can provide a lot of useful information. 

However, if these methods haven’t provided satisfactory results so far, or if you wish to have a more in-depth understanding of usability from a user’s point of view, then eye tracking along with qualitative research methods is the way to go.

FAQ

What is UX research?

UX research is short for user experience research. It is conducted with an aim of understanding the motives and preferences of users in order to tailor products or services specifically to the targeted user group(s).

What is usability testing? 

Web designers turn to usability testing when trying to understand how the website is perceived and operated from a user’s point of view. Usability testing can be conducted through various sorts of assessments, including eye tracking and qualitative techniques.

About Author

Complete Guide to DATA-DRIVEN DESIGN

Get ebook for free. Just leave your email below.

You will be subscribed to our mailing list.