Return to knowledge base main page

Why can’t I draw Areas of Interest below the fold?

For better in-depth analysis and to get more value from our advanced features and heatmap analysis overall, we recommend testing web pages section by section instead of uploading full-page screenshots of the whole webpage in one long image. 

If you upload a full-page image, then you will be able to draw Areas of Interest and get Percentages of Attention only for the above-the-fold section of that long full-page image (the Clarity score is also calculated only for the first fold of the full-page image).

Image showing the error that occurs when drawing Areas of Interest below the fold

By testing separate screen-sized sections of that webpage, you will be able to use our Percentage of Attention and Clarity score features on each section and get more quality insights from a heatmap. 

Our heatmaps are predictive eye tracking heatmaps, not mouse tracking heatmaps. The technologies are different, and some principles are also different. While it is widely accepted to display mouse movement/clicks-based heatmaps as full-page, that is not the best way for attention heatmaps. 

What we predict is attention based on eye movement. It is different from mouse tracking, which shows where people click, and that is not necessarily where they look. Mouse movements can’t be correlated with the attention of a user with sufficient certainty. It might be convenient to get full-page heatmaps for mouse tracking, but full-page heatmaps are not that practical when we talk about eye movements. 

When you upload the image, our prediction algorithm assumes that the viewer dedicates 100% of their attention to that whole image at once and then predicts the attention distribution pattern. Viewers don’t see the entire webpage at once. They don’t consume webpage content like that. They scroll, stop at some places and see the webpage section by section. So the image should represent the portion of the webpage that the viewer sees at once. This is the most appropriate way to analyze attention on a webpage by analyzing separate sections, even though it might be tempting to upload the whole full-page screenshot at once. 

You can use the full-page heatmaps as a rough overview of the overall situation to spot the areas on your webpage that might be the most problematic regarding attention distribution (or you can skip this full-page analysis altogether). Afterward, we advise cutting the webpage image into separate sections and uploading them for a deeper analysis. 

Before uploading, you should know the primary goal of that section – what is the purpose of that section? Is it to persuade the visitor or merely to provide information? Or something else? 

When you know the purpose of each section, you can identify the most crucial design object in that section or maybe the three most important objects in priority order. This is when you can draw Areas of Interest over those objects and calculate the Percentage of Attention for each of them. It allows you to assess whether the most significant object receives the most attention or, in the case of three main objects, to evaluate if the visual hierarchy is maintained.

Regarding the Clarity score, you will get a separate Clarity score for each webpage section. It can vary greatly from section to section. Some sections might be absolutely clear to a viewer, barely causing any cognitive load, while other sections might be very cluttered and too complex, which will be indicated by a low Clarity score. Analyzing the clarity of separate sections enables you to optimize the clarity of the whole webpage section by section and make sure that there’s no unnecessary friction preventing your leads from converting.