How to use the Attention Insight Platform
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 is a visual attention prediction algorithm based on deep learning. In simple words, it’s a more accurate, affordable and faster automated eye-tracking study. 

Within minutes, a platform predicts where users will look while engaging with your design – for example, a website landing page. Besides, Attention Insight platform is very simple to use.

STEP #1 Create an account

Sign up with your Facebook account or e-mail. You will get the confirmation email to activate your 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.

screenshoot of an app of Attention Insight

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.

  • 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 Percentage Of Attention that a particular object received. It lets you to evaluate the performance of different objects you want to draw user attention to.
    The algorithm automatically recognizes CTA buttons. In addition, to test other objects (logo, title, etc.), you need to draw AOI by dragging a rectangles 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 doesn’t have to be a big change. Sometimes it’s as easy as increasing the size of the most important text, changing the background picture or the colour of the website elements.

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

  • Make some changes.
  • Add a new version of 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 CTA button placement, attention to CTA has increased 3%.

To sum up, Attention Insight study lets you identify visual attention errors  get insights on user’s attention shifts and make data-based improvements to your visual content. Within minutes you are able to see 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.

Product Hunt deal

FREE for everyone:

Days
Hours
Minutes
Seconds

GET HEATMAP