I was in charge of almost all the eye-tracking usability testings when I worked at Visa. Our team added eye-tracking research as a complement to the usability testing based on clients’ requests. The eye-tracking usability testing gave customers more visual evidence for the study. The eye-tracking usability testing of the V.me check out process on Rakuten.com project was one of the eye-tracking projects.
Background: V.me was Visa’s e-Wallets method that was used to send/accept internet payments in merchants’ webshops. It was the competitor of PayPal. To check the V.me integration to the merchant’s webshop, the V.me marketing team asked us to test if the checkout process was smooth on Rakuten.com. Furthermore, they wanted to see the eye-tracking research.
Research method: To test the checkout process, I conducted eye-tracking usability testing for this project.
Tools: Tobii X2 eye tracker and iMotions software
Sample of main findings:
- The V.me option gained the most attention on the payment options page.
Image1: Heatmap of Rekuten payment options page before clicking any option
- On the Rekuten payment options page, after users chose V.me payment, they tended to gaze on the header and footer V.me button. But most participants hesitated to click the V.me header or footer button since they thought the header and footer V.me looked like ads. See image 2.
Image 2: The header and footer V.me button
Results: The V.me marketing team fully accepted our findings and used our report including eye-tracking live view recording video to persuade Rakuten to change their design.
Extra about eye-tracking: Eye-tracking research helps answer many questions including, but not limited to:
- What was looked at first?
- How long did it take participants to get a particular area of interest (AOI)?
- Which UI elements attracted/distracted their attention? What did the participants ignore?
- How did users accomplish goals?
- What was looked at just before a usability issue occurs?
- Which design option performed the best?
There were four software features we usually use: live view, heat map, gaze plot, area of interest.
- Live view: see exactly what a person is looking at in real-time and gain immediate and actionable insight.
- Heat map: heat map is a map that illustrates where your visitors’ eyes are most focused. It displayed as a color gradient overlay on the presented image. Usually, red represents the area where the maximum time and attention is spent; yellow indicates less time; green or blue means least duration of fixations. See image 1.
- Gaze Plot: Gaze plots show the location, order, and time spent looking at locations on the web page. This shows what is prioritized by a testing participant when he sees a visual scene.
Image 3*: Gaze plot of a financial webpage
- Area of Interest: researchers draw a boundary around a feature or element of the website or application. The software calculates the desired metrics within the boundary over the time interval of interest so that the researchers would know the fixation or time spent on these areas of interest.
Image 4*: Set area of interest for a website with Tobii
*these images come from internet