Person looking at e-commerce products with mobile testing eye tracking

User testing with eye tracking goes mobile

How to perform UX studies of web pages and apps on mobile phones.

Mobile phone User Experience Usability research Tobii Pro Nano Tobii Pro Lab

Using visual attention data to inform product design is a valuable tool that many UX Research Teams can benefit greatly from at any stage of the design process, as we have already outlined in an earlier article. But let’s face it, incorporating eye tracking into the stack of research tools has not always been easy, for two reasons:

  • Most eye tracking solutions were optimized for desktop testing, with testing on mobile devices being a quest for the brave. However, mobile already accounts for approximately half of web traffic worldwide, so UX research with eye tracking must be mobile-first.
  • Visual attention research has been difficult to incorporate into testing routines, due to unfamiliarity with the data and corresponding analysis.

Tobii Pro has tackled both and we will outline in three use cases, how two of our new advancements work together to make UX research with eye tracking easier and what insights can be obtained.

1. Testing on mobile phones with a Tobii Pro Nano

The Mobile Testing Accessory (MTA) is a device that enables highly accurate tracking of visual attention of small mobile devices. UX Researchers can benefit from HD video capture of the phone’s screen as a user browses a website or application. The accessory is suitable for research or usability tests where you want to understand how people interact with various elements of the user interface on a mobile device. This accessory is used in conjunction with the Tobii Pro Nano eye tracker which provides minimally intrusive, high-quality eye tracking data.

2. Saving analysis time with assisted mapping in Tobii Pro Lab

Tobii Pro Lab has extended the mapping functionality; assisted mapping is now available for mobile testing and is ideal for directional research and quick turnaround studies. It is suitable for UX Research Teams who are trying to evaluate how users interact with an interface, what is seen or not seen by the user, how users navigate through a site or application and what content is consumed. With assisted mapping, researchers can automatically get data and create visualizations that show typical order viewing of stimuli (gaze plots) and an aggregate of visual attention to a stimulus over time (heat maps). Assigning Areas of Interest (AOI) enable numerical and statistical analysis based on regions or objects of interest in the stimuli. Metrics such as time to first fixation and total fixation duration allow researchers to understand how quickly users notice and engage with pertinent areas of interest as they delve deeper into site content. These insights can then be used at any stage of the design process to inform strategy to improve user experience.

Three examples for mobile UX studies with eye tracking

Navigation

As a user launches the browser on the mobile device, they are exposed to a variety of content and messaging prior to navigating deeper into the site. The Mobile Testing Accessory ensures a controlled setting where site navigation can be evaluated without interference. The assisted mapping tool allows researchers to accurately determine and measure user path and opportunity to interact with other features or content on the site. Gaze plot visualizations can provide a visual example of user path, while heatmaps can provide examples of visually engaging content on the site and opportunities to redirect visual attention.

Messaging

Messaging is the most concise way of communicating important information to product users. Placement and delivery can impact the engagement with the messaging noticeably. In this example, the placement of the messaging is at the top of the home page. Despite the user noticing the messaging relatively quickly, engagement with the content is relatively low-- with most users opting to scroll past in favor of seeking other content. Video review allows researchers to clearly observe user behavior. By using the assisted mapping tool and assigning AOI to a screenshot, researchers can accurately measure noticeability (time to first fixation), engagement (total fixation duration), and frequency of viewing (average visit count) of the messaging on the site to determine if users have the opportunity to benefit from their interaction. These insights can help researchers determine how best to optimize and drive visual attention to messaging on the site (i.e. adjusting placement, position, color, size, length, content, etc.).

Commerce

Eye tracking can be used to evaluate or create the most intuitive, simple design for users. There are a variety of functional features that can vastly affect user perception of the website, platform, products, or brand. An e-commerce platform with high usability can aid the end user by creating a more efficient path to purchase—ultimately resulting in continued use of the platform.

For both Product Listing Pages (PLP) and Product Display Pages (PDP), visual attention and engagement with products can be impacted by the ratio of text to imagery. Eye tracking allows researchers to visually determine a balance of content that engages the user rather than overwhelming them. For Product Listing Pages, filters are a functional feature that can be evaluated via the use of the Mobile Testing Accessory and Pro Lab. For mobile devices where filters obscure the PLP, researchers can determine best placement for most utilized filters, assess how options below the fold may or may not be used, and assess how responsiveness of product selections on search results impact utilization of filters. Functional aspects of the Product Display Page can also impact path to purchase. Functional features continue to impact path to purchase as users shift to the Product Display Page. On this surface, researchers can use the data collected with the Mobile Testing Accessory and Pro Lab to understand what features to employ that work for all users and/or how intuitive current features are.

Potential applications include:

  • The use of color icons vs. dropdown menus in selecting specific products on PDP
  • Responsiveness of product preview on customization of product options
  • Optimize image preview (i.e. static image with click for additional options, moving carousel, etc.)
  • User consumption or utilization of content below the fold to evaluate or select products