AI Feature in Webtrends Optimize

AI Predictive Heatmaps

Designers make hundreds of layout decisions based on gut feel and experience. Predictive Attention Heatmaps supports them with data - instant, AI-powered heatmaps built on predicting eye-tracking attention and fixation.

Designers make hundreds of layout decisions based on gut feel and experience. Predictive Attention Heatmaps supports them with data - instant, AI-powered heatmaps trained on predicting eye-tracking attention and fixation.

Predictive attention heatmap, overlaid on this web page
Predictive attention heatmap, overlaid on this web page

THE PROBLEM

Designers are the last team to be evidence-backed

Analytics and User Testing fuel ideation and strategy. Code reviews, Copilots and QA Testing support dev. But designers need to rely on gut-feeling, experience and brand guidelines - not data.


Traditional heatmaps require the experience to go live, which is too late. And eye-tracking studies are costly and time-consuming to do. So new pages launch blind, and there's often a post-launch scramble to iterate.


So strategy is backed by data, but design isn't. Until now.

WHY IT'S SO DIFFICULT

01 - Heatmaps need traffic first

Heatmaps and Analytics both need thousands of sessions for meaningful conclusions to be drawn.

02 - And user testing is hard to scale

Eye-tracking hardware is expensive, and studies take considerable time - too much for every piece of creative made.

03 - So new pages and features launch blind

Guidance comes post-launch, but by then all the key decisions have been made and you can only tweak moving forward.

OUR SOLUTION

AI Generated Predictive Attention Heatmaps

Generated in a few seconds, our AI Predictive Heatmaps allow you to iterate rapidly on your designs with much-needed feedback.

Run on Sovereign AI hardware from Webtrends Optimize

Trained on 5M+ eye-tracking and mouse movement studies

Geniune "deep-learning" models

Responds quickly, directly in Slack / Teams

Flowchart showing iteration in the design phase

OUR SOLUTION

AI Generated Predictive Attention Heatmaps

Generated in a few seconds, our AI Predictive Heatmaps allow you to iterate rapidly on your designs with much-needed feedback.

Run on Sovereign AI hardware from Webtrends Optimize

Trained on 5M+ eye-tracking and mouse movement studies

Geniune "deep-learning" models

Responds quickly, directly in Slack / Teams

Flowchart showing iteration in the design phase

OUR SOLUTION

AI Generated Predictive Attention Heatmaps

Generated in a few seconds, our AI Predictive Heatmaps allow you to iterate rapidly on your designs with much-needed feedback.

Run on Sovereign AI hardware from Webtrends Optimize

Trained on 5M+ eye-tracking and mouse movement studies

Geniune "deep-learning" models

Responds quickly, directly in Slack / Teams

Flowchart showing iteration in the design phase

THE EVIDENCE

Findings from 500+ AI heatmaps

Findings from 500+ AI heatmaps

AI Predictive Heatmaps insights

Ghost buttons aren't invisible

Ghost buttons aren't invisible

Contrast and being different is important. And if your primary CTA is the same colour and thickness as text, it can be ignored.


Conventional wisdom says ghost buttons are less prominent than solid buttons, but it's much more nuanced than that with exact positioning, colours etc. all factoring into how much something stands out.

Contrast and being different is important. And if your primary CTA is the same colour and thickness as text, it can be ignored.


Conventional wisdom says ghost buttons are less prominent than solid buttons, but it's much more nuanced than that with exact positioning, colours etc. all factoring into how much something stands out.

Predictive attention heatmap, overlaid on the Lego website.
Predictive attention heatmap, overlaid on the Halfords website.

AI Predictive Heatmaps insights

Clashing colour schemes

Clashing colour schemes

We know that branded-primary colours should be reserved for key elements, but the same principle of being different applies to anything that should attract attention. Having embedded badges be the same styling as CTAs, despite being slimmer, leads to undue fixation.

We know that branded-primary colours should be reserved for key elements, but the same principle of being different applies to anything that should attract attention. Having embedded badges be the same styling as CTAs, despite being slimmer, leads to undue fixation.

AI Predictive Heatmaps insights

People like people

People like people

People attract fixation more often than not. In around 80% of screens uploaded with people present, the people overwhelmingly take attention over other onpage elements.


Most often, although not always, it's the face that we're paying attention to and in particular we fixate on mouths.

People attract fixation more often than not. In around 80% of screens uploaded with people present, the people overwhelmingly take attention over other onpage elements.


Most often, although not always, it's the face that we're paying attention to and in particular we fixate on mouths.

Predictive attention heatmap, overlaid on the Odeon Cinemas website.
F-Shaped Predictive attention heatmap

AI Predictive Heatmaps insights

F-Shaped reading patterns

F-Shaped reading patterns

F or Z-shaped reading patterns aren't set in stone, but we're seeing that that they are much more prominent in text-heavy pages.


Along the same lines - we assume people often read from left-to-right (especially for English/Latin pages) but the data shows that fixation does not support left-to-right. It happens based more on prominence than position.

F or Z-shaped reading patterns aren't set in stone, but we're seeing that that they are much more prominent in text-heavy pages.


Along the same lines - we assume people often read from left-to-right (especially for English/Latin pages) but the data shows that fixation does not support left-to-right. It happens based more on prominence than position.

Rapid iterative design with our state-of-the-art model

Rapid iterative design with our state-of-the-art model

Rapid iterative design with our state-of-the-art model

It takes seconds to generate a predictive heatmap. So designers can fire in a mockup, get some feedback and iterate quickly, landing on a solid data-informed design within an hour - far better than a week or more to get data from real heatmaps.

It takes seconds to generate a predictive heatmap. So designers can fire in a mockup, get some feedback and iterate quickly, landing on a solid data-informed design within an hour - far better than a week or more to get data from real heatmaps.

Flowchart showing iteration in the design phase
Flowchart showing iteration in the design phase

Frequently Asked Questions (FAQs)

Frequently Asked Questions (FAQs)

Where is this feature?

This is currently available as a Slackbot in Slack, allowing users casual and quick access to the feature.

Where is this feature?

This is currently available as a Slackbot in Slack, allowing users casual and quick access to the feature.

What is this trained on?

This is trained on eye-tracking studies, and over 5 million fixation points. The model has set a benchmark of just over 90% accuracy, making it firmly in the state-of-the-art class.

What is this trained on?

This is trained on eye-tracking studies, and over 5 million fixation points. The model has set a benchmark of just over 90% accuracy, making it firmly in the state-of-the-art class.

What can I use this on?

It's built for Website screenshots, both live and mockups. Desktop and Mobile. It does however work very well on ad creative, and even things like street-level photography - areas we're continuing to explore.

What can I use this on?

It's built for Website screenshots, both live and mockups. Desktop and Mobile. It does however work very well on ad creative, and even things like street-level photography - areas we're continuing to explore.

How can I get this enabled?

It's coming to our UI soon. Until then, reach out to the support team and we will enable it in a shared Slack environment. We are also investigating integration into Microsoft Teams for a wider potential net of users.

How can I get this enabled?

It's coming to our UI soon. Until then, reach out to the support team and we will enable it in a shared Slack environment. We are also investigating integration into Microsoft Teams for a wider potential net of users.

How can I feed back into the process?

This is an early-stage AI feature, and so we are happy to get feedback. Please feed back through the support-desk channel or through the shared Slack/Teams environments and we will happily factor your feedback into the future of this feature.

How can I feed back into the process?

This is an early-stage AI feature, and so we are happy to get feedback. Please feed back through the support-desk channel or through the shared Slack/Teams environments and we will happily factor your feedback into the future of this feature.

Rated #1

For Support

Rated #1

For Support

26 Years

The original testing solution

26 Years

The original testing solution

Alla Bennett, Optimisation Consultant, Webtrends Optimze

Alla Bennett

Optimisation Consultant

Alla Bennett, Optimisation Consultant, Webtrends Optimze

Alla Bennett

Optimisation Consultant

Sandeep Shah, Product Director,Webtrends Optimze

Sandeep Shah

Product Director

Sandeep Shah, Product Director,Webtrends Optimze

Sandeep Shah

Product Director

Zero

Restrictions on features

Zero

Restrictions on features

Let's Talk

Let's Talk

See how we can help with a personalised demo/quote.