Eye Tracking Simulation – Knowing Where Attention is Focused

An algorithm predicts user attention patterns, giving you valuable insights into how users interact with your design. By analyzing your website’s visual hierarchy, contrast, and layout, eye tracking simulation creates a heatmap that highlights the areas most likely to grab user attention. See your website through your users’ eyes!

Run Eye Tracking Simulation to Generate a Heatmap

1. Export your design as an image and save it to your computer.
2. Go to the Attention Insights website and log in.
3. Upload your design image for a new analysis.
4. Specify the type of page (e.g., landing page) and ensure the image is uploaded correctly.
5. Analyze the image, allowing the AI to process it and make predictions about user attention.

Interpreting the Results

1. Once the analysis is complete, a heat map will be displayed, showing where users are likely to look on the page.
2. Select different areas to see the percentage of attention given to each section.
3. Label the areas (e.g., blog, services) to better understand the attention distribution.
4. Scroll through the page to see how users will scan the content.
5. Check the overall clarity score, which indicates how well your design performs compared to other websites.
6. Review the focus score, which measures the level of attention the image is likely to receive.

The Value of Simulated Eye Tracking

AI-powered eye tracking tools like Attention Insights provide valuable insights into how users will interact with your website design. By predicting where users will look on the page, these tools can help you ensure that your most important content is seen and engaged with. The heat maps and attention percentages allow you to make informed decisions about the placement and prominence of various elements on your page. Additionally, the clarity and focus scores provide a quick assessment of your design’s overall effectiveness in capturing and holding user attention. Incorporating AI-powered eye tracking into your design process can give you greater confidence that your website will effectively communicate your key messages and guide users to the desired actions.

Eye Tracking Simulation Video Transcript

So one of the most common challenges you face when you’re designing a website is ensuring that users will see the content you want them to see.

As you can see I’m currently redesigning my own website and so I’m keen to know whether or not people are going to see all the key pieces of information on this particular page.

So what I’m going to do is I’m going to export that image and just save it onto my computer.

Then next I’m going to go to a website called Attention Insights.

Attention Insights basically will predict where people will look at a piece of design work that you do based on thousands of hours of eye tracking study.

Now it’s not perfect but it has about a 90 to 96% accuracy in terms of predicting where people will look on the page.

So once you’ve gone to the site and you’ve logged in, he says confidently, there we go.

Once you’ve logged in you’re going to be presented with an interface where you can upload a new analysis.

So this particular page is a desktop page so I’m going to take my design and I’m going to upload it.

Once it’s uploaded I can also specify that the type of page it is.

So this is a landing page.

Basically sometimes it will use more credits if it’s a particularly long page which this one is.

I don’t care about that.

I can inspect it to make sure it’s uploaded correctly and the page is looking good which that is.

And then when I’m ready to go I’m going to analyze this.

Now what it’s doing at this point is it’s processing the image and using its AI to make predictions about where someone would look on the page and how clear that page is going to be.

When it’s finished it will display a heat map like this.

So as you can see I can now go in and I can select different areas and it will tell me how much attention has been given to these different areas.

So BOAG World is my blog so we’re going to label that blog.

And we can see that 15% is going there which is pretty good.

I’m pretty happy with that.

I’m fine that less attention is going to my services.

I’m in no hurry from that point of view.

But then you can see how on this individual page we’ve got highlighted different areas that I can go in and label.

It’s trying to make a prediction of where I was looking at these were calls to action and done a poor job at it.

But anyway.

And then I can scroll down and basically see where someone is scanning all the way down the page.

And I’m pretty happy with that.

As you can see it’s got an overall clarity score of 69 which means that it’s got a better score than 60% of most websites.

And a focus score which measures the level of attention that the image is going to get is really high.

Brilliant.

Really pleased with that.

So what that means is that I can now be much more confident that users are going to look where I want them to look on the page.

And that is why I like these eye tracking simulation software.

It is effectively almost like a spell checker or a grammar checker for designers.