How to Use the Attention Insight Heatmap Tool

It has never been easier to test your designs.

Watch our demo video now or follow the step by step guide below to learn.

Attention Insight heatmap tool is a visual attention prediction algorithm based on deep learning. In simple words, it is a much more affordable and faster option with 90-94% accuracy compared to real eye-tracking studies.

Within minutes, a platform predicts where users will look while engaging with your design – for example, a website landing page.

Spot the most eye-catching parts of your design, so you can pre-test what’s hot and what’s not.

Besides, Attention Insight platform is very simple to use.

STEP #1 Create an account

STEP #2 Get credits

To analyse your designs you need credits. New user has 5 free credits for the initial test cases. 1 credit – 1 design study. Ran out of credits? Login into your account, on the top right go to Credits section and choose one of the suggested plans or simply purchase as many credits as you need.

STEP #3 Create a study

On the top right choose a green button + Create.
Enter a Study name.
Upload images that you want to test (max 30 per 1 study) or scrap image from the web page by entering its URL.
Select your Design type: Desktop / General / Mobile.
Select your Web page type: Landing / E-commerce / News /Other.
On the top right choose Analyze. That’s it, your study has been created!

STEP #4 Analyse results

In 1 minute you will get a visual representation of how user’s attention distributed in design.

Attention Heatmaps shows which objects the user will notice first. Warm colors (red and yellow) represents which areas attract the most attention.
Clarity Score describes how clear your design is: whether it is overloaded with elements, conflicting colors or it is clean and clear. 100% indicates maximum clean design.
Alexa Sites Rank compares your design clarity with your industry standard. It shows where your design ranks compared with TOP 170 Alexa sites in a certain category.

Percentage Of Attention you can mark Areas Of Interest (AOI) (i.e., title, description, button), and AI calculates the Percentage Of Attention that a particular object received. It helps you evaluate and improve user attention on websites and display advertising. The algorithm automatically recognizes CTA buttons. Besides, to test other objects (logo, title, etc.), you need to draw AOI by drawing a rectangle on the image. Once you draw a rectangle, press Add. Also, you can name it. The percentage of attention that a particular object received is calculated instantly.

Above all, you can analyse the results online or download it (on the top right choose a green button Download Study). You will be able to reach all your created studies anytime, anywhere – just login into your account.

STEP #5 Improve your design & do A/B testing

After you identify visual attention errors, make small changes to your design. The beauty is that it does not have to be a significant change. Sometimes, it is as easy as increasing the most important text size, changing the background picture or the website elements’ color.

Let’s say a CTA button on your website is not standing out.

Make some changes.
Add a new version of the design to the same study. On the top left, choose a blue button Add/Remove Images.
Compare the performance of two different designs.

In the example below, after changing a CTA button placement, attention to CTA has increased by 3%.

To sum up, the Attention Insight heatmap tool lets you identify visual attention errors, get insights on users’ attention shifts, and make data-based improvements to your visual content. Within minutes you can see a design through the eyes of users.

Have questions? Our team is here to help – shoot an email to [email protected] with any questions you have!

Get the first 5 heatmaps for free.

No credit card required.