In the last few decades, eye tracking technology opened new possibilities for research and provided various specialists including marketers, UX researchers, and designers with new methods to evaluate their designs. With recent advancements in AI, new predictive eye tracking tools have the potential to aid in our understanding of where users are likely to look.
What is eye tracking and what is it used for?
A typical eye tracking setup. Source: https://www.businessinsider.in/oculus-acquired-danish-eye-tracking-technology-company-the-eye-tribe/articleshow/56237875.cms
Eye tracking is a process of measuring eye position and movement, determining where the person’s gaze is directed. It helps to find out where a person is looking, how long and even in what order.
UX researchers use eye tracking to get insights into people’s visual attention. For example, in usability testing, eye tracking studies help to determine which elements on a web page or advertisement attract the most users’ attention. With this knowledge in mind, organizations can optimize their page layouts and create more effective advertisements.
Eye tracking is also used in neuroscience, medical research, analyzing the buying process in retail, and improving the learning process in online courses.
Heatmaps illustration of the most attended areas of animal and human faces by individuals with autism spectrum disorder (ASD), attention-deficit/hyperactivity disorder (ADHD), and typical development (TD).
Source: https://www.researchgate.net/figure/Heat-diagrams-illustration-of-the-most-attended-areas-of-animal-and-human-faces-by-TD_fig3_283717348
Most eye tracking research takes place in a controlled laboratory-like environment and requires special equipment. Only recently, technological advancements allowed to carry out eye tracking research using a regular webcam, thus decreasing the cost and time needed for such studies in exchange for some accuracy.
How does traditional eye tracking work?
Optical eye tracking is the currently accepted standard, and it commonly relies on the pupil center corneal reflection technique (PCCR). An invisible pattern of near-infrared light is projected onto a user’s eye, which creates reflections in the pupil and the cornea. A high definition infrared camera tracks the positions of these two reflections.
Optical eye tracking is the currently accepted standard. Source: https://www.sr-research.com/about-eye-tracking
The main thing which is measured in this process is the vector between the center of the pupil and the reflection in the cornea. This vector can be explained as the distance between them and the position in relation to one another.
Advanced computer algorithms are then used to calculate the eye’s position based on changes in this vector. Also, some calibration is needed, and the head movement needs to be taken into account to calculate the gaze point – the particular spot where the user is looking.
What is predictive eye tracking?
Recent developments in Artificial Intelligence (AI) technology have opened new possibilities for assessing visual attention. Predictive eye tracking is a software-based alternative to traditional hardware-based eye tracking studies. Heatmaps, generated by AI, appear just like traditional eye tracking heatmaps, and show which areas of a visual stimuli are the most and least likely to be viewed.
Example of an Attention Insight heatmap of a web page. Dashed rectangles depict defined Areas Of Interest (AOIs), and the number below represents the AI calculated percentage of attention that a particular object received.
Typically, these heatmaps are used to simulate the first 3-5 seconds of a user’s attention on a website. You can find out whether your page’s visual hierarchy is done right and if key pieces of information get noticed by most users on their first impression before they click anything.
This technology can predict where people will look when engaged with a presented stimuli. Attention Insight‘s predictive eye tracking tool claims to have a 90% accuracy of prediction for websites and 94% for other images. The accuracy of Attention Insight algorithm results were determined by comparing it to MIT’s data set containing images with eye tracking data. In order to compare eye tracking results with their algorithm results, the Area Under the Curve (AUC Judd) metric was used, currently the main metric in the MIT saliency benchmark.
Real eye tracking study vs. Attention Insight prediction. Source: https://www.attentioninsight.com/about-the-technology/
To make such predictions, it doesn’t need actual participants for an eye tracking study. To complete an evaluation you upload an image that you want to test, and in a minute, you can get an analysis of your image, usually presented in the form of a heatmap.
How does predictive eye tracking work?
Predictive eye tracking relies on an AI algorithm and learns from data over time that helps to improve its accuracy. Complex deep learning algorithms are trained on tens of thousands of images produced in real eye tracking studies. While analyzing these images, the AI recognizes particular patterns in user attention flow and systematizes them. This enables AI to make predictions on what will attract the most interest on your website.
The more data that is given to these algorithms, the better they get at predicting where people’s gaze will be directed. This method’s accuracy is currently lower than that of participant-based eye tracking studies, but it’s likely to improve with time.
Advantages and disadvantages of predictive eye tracking
Predictive eye tracking can be used as a much quicker pre-launch analytics tool to improve design performance and allows product teams to make faster, data-driven choices. There is no need to wait days or weeks to have the data on users’ attention analyzed as is the case with traditional eye tracking. Designers can test different design ideas and be more flexible in the creative process because they can get the results of attention predictions in a matter of seconds. Predictive eye tracking tools are a considerably cheaper option than traditional eye tracking and do not require expensive eye tracking hardware.
Predictive attention heatmaps help to analyze user attention flow before clicking anything or interacting with the mouse in any way, something that click maps or mouse-tracking hover maps don’t offer. So it’s more like a complementary tool rather than an alternative to these methods.
On the downside, some accuracy is sacrificed in exchange for reduced cost and time. Furthermore, attention flow in a three-dimensional environment can’t be predicted. All studied stimuli have to be reduced to an image or a video format for AI to make gaze predictions. Also, there are usually fewer data presentation options available.
Getting the most out of AI-generated attention heatmaps
Here are some of the potential uses of predictive eye tracking:
Experimenting with many different design variations
Testing 10 – 20 design variations could take months with A/B testing. A quick analysis with AI attention heatmaps helps you dismiss designs with the least potential. It is much better to start halfway up the ladder than to start at the bottom.
A/B testing of a web page design in a comparison mode.
Identify opportunities to improve conversion rates
Predictive eye tracking allows you to audit your existing design and check for conversion rate optimization possibilities. You can investigate whether your page has a clear visual hierarchy and user attention flows through essential page elements. Also, AI heatmaps show if there’s anything that distracts users’ attention from your CTAs.
Analyzing competitors’ websites
Since there’s no need to insert any code snippet, you can test literally any website of your choice. This offers an excellent opportunity to benchmark your website against the competition. You can find a competitor in your niche that is really on top of their game and maybe ahead of your business and analyze their website, design clarity, CTA visibility, etc. It might lead you to some insights about what you can improve on your website.
Testing low traffic sites
When you launch a new website, it doesn’t have substantial traffic just yet. So, A/B testing is not feasible at this stage because it would take quite a long time to get enough data to do the analysis. Fortunately, the traffic is irrelevant when you use predictive eye tracking since AI heatmaps are generated based on previously gathered eye tracking data.
Case study: How Omnisend increased demo signups by 30%
In this case study, the omnichannel marketing automation platform Omnisend set a goal to increase demo requests coming from their landing page. Therefore, Omnisend aimed to analyze their original landing page using AI-powered attention heatmaps and make design changes to increase the number of demo requests.
Attention Insight predictive eye tracking tool was used for a design audit above the page fold.
Attention heatmap of the original Omnisend homepage.
The heatmap indicates that attention for the logo and the main heading converges due to the lack of white space in between. Because of that, Omnisend decided to add the whitespace between the logo and the main heading to increase emphasis on the landing page information block.
The percentage of attention indicates that two main CTAs – “Get a Demo” and “Start My Free Trial” – compete for users’ attention with 4% and 3% of attention accordingly. According to Hick’s Law, which applies to web design, the more choices you have, the easier it is to choose nothing. Since Omnisend chose the goal is to increase demo signups, the “Start My Free Trial” button has to go.
Attention heatmap of the new Omnisend homepage.
After this change, the “Request Demo” button gets 7% of Attention, which is higher than the previous 4%. Users now have one highly visible CTA choice, which makes it easier to make a decision.
The repetitive CTA buttons in the header also make users’ decisions more complicated even though they attract little attention in the first 4-5 seconds. Omnisend decided to remove those two buttons in the header and replace them with the “Start Free Trial” button. This new button is easily found by those who seek it. However, 1% of Attention in the first few seconds is not enough to divert attention from the primary CTA, which was the aim of Omnisend. After these changes, A/B testing of the new homepage showed almost 30% higher Demo requests.
Predictive eye tracking tools
Examples of AI-based predictive eye tracking tools:
https://towards.ai/deepgaze-ml-powered-eye-tracking-gaze-prediction/
https://www.visualeyes.design/
https://www.expoze.io/products
https://www.attentioninsight.com/
Eye tracking resources
Learn about the many applications of eye tracking in the field of user experience.
Learn how to design, conduct, and analyze the results from eye tracking studies.