Predictive eye-tracking new emerging technology

Eye-tracking vs Predictive Eye-tracking

Why do you need to know about predictive eye-tracking?

In the last decades, eye-tracking technology opened new possibilities for research and encouraged various specialists, including marketers, designers, and web developers, to reassess their working methods.

With recent innovations of AI, a new technology of predictive eye-tracking emerged, and it has the potential to bring even more changes. 

If you haven’t heard what predictive eye-tracking or eye-tracking altogether is, it’s about time to find out. It is especially so if you work in marketing or design because these areas are among those who will be changed by this technology the most. You don’t want to be left behind, do you? 

No worries, we’ve got you covered.

Eye-tracking definition and its uses

Eye-tracking is a process of measuring eye position and movement, determining where the person’s gaze is directed.

In other words, eye-tracking enables assessing visual attention. It helps determine where a person is looking, how long, and even in what order.

An eye-tracking experiment set-up.

That said, it’s not only about what gets attention. Eye-tracking also reveals what people don’t notice, what distracts them, what are their attention patterns. 

Various researchers, including marketing and UX researchers, use eye-tracking to get insights on people’s 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, companies can design more user-friendly webpages and create more effective advertisements.

In retail, businesses employ it to generate shelf attention analytics and get insights into the buying decision process.

Diagram of customer gaze time evaluation for different products on a shop shelf. Eye-tracking technology can be used to determine the best product placement strategies on a shelf. 

Neuroscientists use this technology to understand how people identify emotions in the faces of others.

Also, medical researchers utilize eye-tracking to diagnose conditions like Alzheimer’s disease or Autism

Eye-tracking is also used to improve the learning process of online courses and develop methods to increase driving safety.

There are even more ways to apply eye-tracking in various fields, and it would require a separate article to name them all.

Researchers study attention patterns of drivers to increase driving safety.

Most eye-tracking research takes place in a controlled laboratory-like environment and requires special equipment. Only recently, technological advancements allowed us 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 eye-tracking work?

The basic principle is relatively straightforward, but the technology behind it is quite complicated. It involves a sophisticated eye-tracking device and specialized software to make calculations, analyze collected data and present it in a meaningful way.

Optical eye-tracking is the currently accepted standard, and it commonly relies on the pupil center corneal reflection technique (PCCR). An eye tracker projects an invisible pattern of near-infrared light onto a user’s eye, reflecting in the pupil and the cornea. A high definition infrared camera tracks the positions of these two reflections. 

Optical eye tracking is the current accepted standard.

The main thing that researchers measure in this process is the vector between the center of the pupil and the reflection in the cornea. You can imagine this vector as an aggregate of the distance between them and the direction in which the reflection drifts from the pupil’s center.

Optical eye-tracking – vector between the center of the pupil and the reflection in the cornea

Main measured metric – vector between the center of the pupil and the reflection in the cornea.

Advanced computer algorithms are then used to calculate the position of the eye 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 at. 

To tell the truth, it’s a simplified explanation of the basic principle. There are more nuances to it and some other techniques which slightly differ from the one described, but generally this is the basics of how eye tracking works.

Basic eye-tracking metrics and data representation

Collected data about the attention of the user can be presented in several ways.  

When it comes to attention, the most basic unit of measure is a gaze point. One gaze point equals one raw sample recorded by an eye tracker.

If an eye tracker works at a 100 Hz sampling rate, it means that it captures 100 gaze points per second. The sampling rate of consumer-oriented eye trackers varies from about 30 Hz to 60 Hz, while the sampling rate of research-oriented devices may fall in the interval of 120-1250 Hz.

When the gaze lingers at one place for a more extended period, it is called a fixation.

Another way of depicting attention patterns can be fixation sequences or scanpaths, which show in what order the eyes scanned through fixations.

Studies can show in what order the eyes scanned through content.

If you want to see what attracts the most attention among the group of participants, a heatmap is a great tool

Heatmap is an aggregation of all recorded gaze points on presented stimulus visualized in a color-coded way.

Red color represents a high density of gaze points, which means a high interest of participants. Yellow and green coloring mark regions of less interest, and parts without any overlaid coloring didn’t get any attention. 

Attention Insight Heatmap, moderate clarity score
AI generated attention heatmap of AirPods Pro website

Attention heatmap of web design.

When you need to compare how much attention several different elements got in the same picture, Areas of Interest (AOI) can come in handy.

AOI is a specific selected region for which you can extract the metrics separately.

aoi
AI generated attention heatmap with AOIsof AirPods Pro website

Dashed rectangles depict Areas Of Interest, and the number below represents AI calculated percentage of attention that a particular object received.

Types of eye trackers

There are several types of eye trackers:

  • Screen-based (remote)
  • Wearable (head-mounted) 
  • Webcam-based 

Types of eye trackers

Screen-based devices come as independent units placed near a screen, as panels attached to a monitor or laptop, and as eye trackers already integrated into a tablet or other device.

They are used in research where participants sit in front of a monitor and interact with screen-based stimuli. These eye trackers do not require respondents to wear any attachments and are great for studies in a controlled environment.

There are a few options for wearable eye trackerseye-tracking glasses and a VR headset with an integrated eye tracker.

In the case of eye-tracking glasses, a small device is mounted on an eyeglass frame and attached to the participant’s head. Eye-tracking glasses allow free movement and are suitable for studies in any real-life environment. They are great for product design and various usability studies or to study customers in a supermarket. 

Suppose a real situation involves too much risk or is too costly or difficult to set up. In that case, you can introduce a VR-based eye tracker to study attention in any virtual environment. 

Lastly, webcam-based eye-tracking uses regular low-resolution webcams which do not record infrared light. The direction of the gaze is calculated using simple images recorded by a webcam. This technology is far less accurate than others but also the cheapest.

The pros and cons of eye-tracking

Since eye-tracking provides you information on where people are looking and what is most interesting to them, it eliminates the guesswork.

You don’t need to rely on your intuition while improving your product or website because you already have the data. 

On the other hand, not everyone can afford eye-tracking studies. Equipment required for such studies is quite expensive – an eye tracker can cost you up to $50,000. In addition, you need the software, knowledge of how to set up an experiment, and at least 39 participants for qualitative analysis.

You can reduce the cost by buying these studies as a service from another company for a few hundred dollars a month. Still, it would take a considerable amount of time to produce one case study since one individual test can last 60 minutes or even more, and you need several dozen respondents in one study. 

These limitations may not be a big deal considering academic research, but that’s not the case in a fast-paced business environment where time is precious and every dollar matters.

However, recent developments in Artificial Intelligence (AI) technology have opened new possibilities. Some innovators dared to ask themselves how to acquire the same data about people’s attention patterns, not in weeks or days but seconds. This led to the emergence of predictive eye-tracking. 

Predictive eye-tracking

Predictive eye-tracking is an AI-based alternative to eye-tracking studies.

Heatmaps, generated by AI, just like eye-tracking heatmaps, show which areas of the visual materials people are likely to view the most and the least. 

Usually, it focuses on simulating the first 3-5 seconds of user attention on a website. You can determine whether your page’s visual hierarchy is clear and if crucial information pieces get noticed by most users on their first impression before they click anything.  

This technology can predict precisely where people will look when engaged with the presented content with up to around 95% accuracy. For example, the Attention Insight predictive eye-tracking tool is approved by MIT and has 90% accuracy of prediction for websites and 94% for other images.

Real eye-tracking study

Our prediction

MIT’s researchers determined the accuracy of the Attention Insight algorithm results by comparing it to their data set containing images with eye-tracking data. To compare eye-tracking data with our algorithm results, they used the Area under ROC curve (AUC-Judd) metric, the primary metric in this MIT saliency benchmark.

It makes Attention Insight the most accurate commercially available predictive eye-tracking tool that has its accuracy evaluated by an independent research institution, and that evaluation publicly reported by that independent party.

To make such predictions, Attention Insight doesn’t need to carry out an actual eye-tracking study. It is best suited to predict attention patterns on screen-based stimuli like web pages, apps, advertisements, etc. 

You can quickly assess design element visibility before launching your website or advertisement and make improvements if it’s needed. You just need to upload an image you want to test, and in seconds you can get an analysis of your image, usually presented in the form of a heatmap. No equipment, participants, or data collection is required.

How does predictive eye-tracking work? 

So, what are the underlying principles that hide beneath predictive eye-tracking technology? It relies on an AI algorithm that learns from data and improves itself.

Complex deep learning algorithms are trained on tens of thousands of images produced in real eye-tracking studies.

While analyzing these images, AI recognizes particular patterns in user attention flow and systematizes them. It enables AI to make predictions on what will attract the most interest on your website. 

The more data is given to these algorithms, the better they get at predicting where people’s gaze will be directed. At the moment, academic visual saliency prediction models’ accuracy peaks at around 95%. Most commercial algorithms claim to have an accuracy somewhere around 90%, give or take a few percent, but it’s likely to improve with time.

The pros and cons of predictive eye-tracking

When it comes to the advantages of this technology, there are quite a few. You can use predictive eye-tracking as a much quicker pre-launch analytics tool to improve design performance. 

For example, predictive eye-tracking allows marketers to make fast data-driven choices.

There is no need to wait days or weeks to have the data on users’ attention, which can back your arguments at the meeting with your manager or CEO. You can implement A/B testing and get the results in a minute.

Eye-tracking helps to optimize your Conversion Rates

Web developers can test more 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.

Designers can benefit from these predictions too. They can see their design from the perspective of a user. Also, even to do that without leaving the design software. 

Moreover, predictive eye-tracking is a way cheaper option. All this described luxury usually cost less than $100 a month for individuals and a few hundred dollars for enterprise plans.

Some may wonder how AI-generated attention heatmaps compare to click maps, mouse-tracking hover maps, or even scroll maps. It is different from these mouse-tracking tools since it indicates where visitors look versus where they click or hover the mouse.

AI-generated attention heatmaps depict user attention flow before making a click or interacting with a mouse in some way, something that click maps or mouse-tracking hover maps can’t show you. So you can use these AI heatmaps not as a substitute for mouse-tracking but as a complementary tool. 

On the downside, it sacrifices some accuracy as a trade-off for reduced cost and time. Furthermore, you can’t use it to predict attention flow in a three-dimensional environment. You need to reduce all stimuli you want to study to an image or a video format for AI to make gaze predictions. Also, predictive eye-tracking tools usually offer less data presentation options.

How to make the best use of AI-generated attention heatmaps?

When you have the attention analysis results in the form of a heatmap, it may not always be so obvious what your next step needs to be or what is the best way to get the most value out of these AI-generated attention heatmaps.

Predictive eye-tracking can analyze your design’s current situation, but it will not do the work for you with regard to coming up with a perfect design, at least not yet.

Here are some best uses of predictive eye-tracking:

Experimenting on the go with 10-20 different design variations. 

It would take months with regular A/B testing. Also, traffic costs resources. 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. 

Predictive Eye-tracking A/B testing of two designs

Example of predictive eye-tracking used for A/B testing. Evaluation of two different designs in Comparison mode on the Attention Insight platform.

Proving design decisions to clients

If you work in either the marketing, advertising, CRO, or web development area, the chances are that you will need to convince your clients to trust some of your choices or to pinpoint some trouble areas in their design. These tasks can get much easier when you have data-based evidence about user attention provided by predictive eye-tracking. Bringing AI-powered attention heatmaps to the table can definitely add some persuasiveness to your design choices and help to close a deal.

Testing websites and banners in the pre-launch stage

Make sure the most important elements are visible and the design has high clarity. There are limited methods to test web design during the development stage. Therefore, AI attention heatmaps are a great alternative to time-consuming user interviews and focus groups.

Analyzing competitors’ websites

Since there’s no need to insert any code snippet, you can test literally any website of your choice. It is 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 really complicated 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 the predictive eye-tracking since AI heatmaps are generated based on previously gathered eye-tracking data.

Optimize conversion rate

Predictive eye-tracking allows you to audit your existing design and check for conversion rate optimization possibilities. You can inspect your page’s visual hierarchy and investigate whether user attention flows through essential page elements. Also, AI heatmaps show if there’s anything that distracts users’ attention from your CTA buttons. 

Case study – Omnisend

Here’s how the omnichannel marketing automation platform Omnisend increased their demo requests by 30% using AI-powered attention heatmaps.

Omnisend set a goal to increase demo requests coming from their landing page. Therefore, they analyzed their original landing page and made design changes to increase the number of demo requests.

Attention Insight predictive eye-tracking tool was used for a design audit above the fold.

Omnisend old Landing Page
AI Heatmap of Omnisend old Landing Page

Attention heatmap of original Omnisend homepage.

Attention heatmap indicated that attention for the logo and the main heading converges due to the lack of white space in between.

Also, it was clear 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 decided to increase demo signups, the “Start My Free Trial” button has to go.

Omnisend New Landing Page
AI Heatmap of OmnisendNew Landing Page Case Study

Attention heatmap of new Omnisend homepage.

After this change, the “Request Demo” button gets 7% of the attention, which is higher than the previous 4%. Users now have one highly visible CTA choice, which simply makes it easier to make a decision.

A/B testing of the new homepage showed almost 30% higher Demo requests!

If you want to find out more details, here’s an in-depth examination of this case study.

Which to choose?

Predictive eye-tracking technology is based on artificial intelligence algorithms

Should you choose regular eye-tracking or predictive eye-tracking? It depends on what your needs are, what you will use it for, and your budget.

You should choose traditional eye-tracking studies if the highest possible accuracy is more important than the time and cost it takes to get the results. It might be relevant for big corporations with large budgets and high stakes on the table. For academic research, it’s a no brainer to study real participants instead of AI predictions.

Predictive eye-tracking becomes very attractive in a dynamic business and startup environment, where flexibility and fast decisions are crucial to success.

This technology is especially great for assessing the visual attention of a user if you have a lower budget and can’t wait for days or even weeks to get the results. Also, it offers a lot of flexibility. You can use these AI-generated attention heatmaps for A/B testing designs, auditing websites, conversion optimization, and even benchmarking.

If you are a marketer, UX researcher or designer, CRO, or web development specialist, predictive eye-tracking might be invaluable for you in your everyday workflow. 

Also, the more marketers and designers use predictive eye-tracking, the more it becomes impossible to avoid it in order to be among the best.

At the end of the day, take your needs into account, clarify your goals, consider all provided information, and it should be quite clear whether regular eye-tracking or predictive eye-tracking better suits your needs and your particular situation.

Product Hunt deal

FREE for everyone:

Days
Hours
Minutes
Seconds

GET HEATMAP