How to Use Attention Insight Platform
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.
Sign up with your Facebook account or e-mail. You will get the confirmation email to activate your account.
STEP #2 Get credits for a research
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 Next. 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.
- Areas of interest (AOI): a platform calculates the percentage (%) of attention that objects got. 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.
A quick walkthrough video ↓