Get started with predictions

A step by step guide
Written by Braingineer
Updated 1 year ago

Predictions is an A.I. powered tool for predicting design performance. The tool predicts with an accuracy of 94% where people will look the first 3-5 seconds they are faced with a visual/design. Hereby, you can quickly and easily assess if the visual hierarchy of the design is clear and whether crucial information is visually salient or not. 

This step by step guide gives you all the information you need to successfully make use of the predictions tool! 

1. Go to 'predictions' in the menu on the left

From every page in Brainpeek, you can click on 'predictions' in the main menu, which will lead you to the overview page of predictions.

2. Upload image

Click on 'new heatmap' in order to upload an image that you want to use for predictions. If you have several images belonging to the same project, you can also create a project first and bundle all your designs belonging to that project. 

3. Create heatmap

After naming your image and allocating it to the right category, you are ready to generate your heatmap! 

After clicking on 'generate heatmap', you'll get a predictive heatmap instantly. This heatmap shows how an eye tracking heatmap would look like on your design with an accuracy of 94%. This gives you insight into what elements people are likely to view the most and the least. 

In the example above, you see that most visual attention goes to 'Steeds een beetje beter' and 'duurzaamheidsverslag 2019 Albert Heijn'. The Albert Heijn logo and the image on the right are poorly seen. 

4. Create area(s) of interest

If you want to know how many visual attention goes to specific elements, you can create area(s) of interest by selecting the desired elements with your arrow. After determining an area of interest, you see how much attention a specific element is getting. Herewith, you can investigate how likely people are to see the crucial elements in your design. 

In the example above, you see that most visual attention goes to the header (38%), then 14% goes to the CTA and only 2% goes to the logo, indicating that the logo will be barely seen. 

5. View the peekthrough

To get an even more comprehensive idea of what elements are likely to be seen and what elements don't, you can make use of the peekthrough functionality. 

6. Compare designs

If you have multiple design options, you can easily compare the effectivity with predictions. Click on 'compare heatmaps' to select an image you want to compare your design with. 

The screenshot above shows that the copy is well read in the left design, whereas most visual attention in the right design goes to the pricing information. 

7. Get started!

Now you have all the information you need to get started with predictions. As a beta member you have access to unlimited heatmaps. In return, we would really appreciate it if you could provide us with some feedback on the tool. So if you have any feedback, suggestions or idea's for improvement, hit that green feedback button.

Good luck and enjoy!

Did this answer your question?