If you generated at least one or few analyses in the Attention Insight platform, there’s a chance that you noticed you could draw some rectangles on the heatmaps. Those rectangles are called Areas of Interest, and it’s an important feature of our platform.
Areas of Interest on a website heatmap generated by Attention Insight.
You might wonder what are they used for or what that percentage in the corner means? It’s time to answer all of these questions regarding the Areas of Interest feature and the Percentage of Attention metric.
Table of Contents
What are Areas of Interest?
An Area of Interest (also referred to as AoI) is a selected region of a displayed stimulus that is used to extract metrics specifically for that region. So those selected regions are referred to as Areas of Interest (AoIs), and the whole feature that allows selecting those regions we call Areas of Interest.
An example of an Area of Interest.
Areas of Interest are used in eye tracking research to extract some metrics, such as time to first fixation, ratio, fixations, etc., for specific regions. It is not a metric by itself, but it defines the area for which other metrics are calculated.
At the moment, in our platform, we have one metric – Percentage of Attention – that is calculated for specific regions. You can use Areas of Interest to calculate how much user’s attention your design elements get.
What is Percentage of Attention?
Percentage of Attention is a metric that provides quantified attention data (a percentage) of certain areas in your design with key elements inside them. By defining your Areas of Interest, you quantify the heatmap data and get an exact percentage of the user’s attention a particular object receives.
Don’t mix up Areas of Interest and Percentage of Attention. Areas of interest are selected regions, and Percentage of Attention is a score expressed as a percentage that characterizes that region. Percentage of Attention is displayed at the bottom right corner of an Area of Interest.
This number at the corner of that Area of Interest represents the Percentage of Attention.
How to interpret Percentage of Attention?
Our algorithm mimics the human vision of the first 4 seconds after seeing the image for the first time. The Percentage of Attention for the specific area is calculated based on how many fixations it would get if real people would look at your image. Fixation means that the gaze stops and lingers at someplace for a more extended period of time.
Our algorithm calculates the fixation density for your design or image. We assume that the whole image takes up 100% of the user’s attention. If you select the entire image, you will get 100% of the attention. When you draw an Area of Interest, our algorithm calculates how much user’s attention that area receives depending on how many fixations fall into that region.
It shows how many times an average person would look at that area compared to all image areas. In other words, what percentage of the average user’s attention that area attracts.
Drawing Areas of Interest in Attention Insight platform
You can define an Area of Interest simply by clicking the left mouse button on the image and dragging the mouse until you draw a rectangle over your Area of Interest. Then you can either choose a name for your Area of Interest from suggested names in the drop-down menu or enter a custom name.
You can draw Areas of Interest with a simple click and drag action.
This is how you can select a CTA button, heading, subheading, logo, product image, registration form, or any other design element and find out how much user’s attention it gets.
Using Percentage of Attention in Comparison
If you want to use our Comparison mode to compare how much attention the same Areas of Interest get in different design versions, you need to give exactly the same names to the same areas. You can’t draw Areas of Interest in Comparison mode, so you need to do it while in analysis viewing mode.
When you draw Areas of Interest over your CTA buttons in different designs, you shouldn’t name them differently, for example: “CTA,” “CTA button,” “button,” “cta.” It would be best if you stuck to exactly the same name for a CTA button in all the designs that you want to compare. This way, our algorithm will be able to compare them.
Areas of Interest in action
How to use Areas of Interest to improve your design?
There are few ways how you can benefit from using Areas of Interest.
Checking your design for visual hierarchy
Visual hierarchy is an organization of elements on the web page by their importance. The main goal is to prioritize visually and to direct your user’s attention to the desired objects.
Whenever users open your page, they will immediately have several questions that they expect your page to answer:
- Does this page have what I look for?
- Where is it?
- How do I get it?
Also, these questions can be:
- What is this page about?
- Why should I care?
- Where should I go next?
Make sure that your page answers these or other questions that your user has in mind. Also, you need to make sure that these answers are answered in the right order and that the user’s attention flow is smooth and uninterrupted.
You can check how your page is doing regarding visual hierarchy by determining the visibility of your most important design elements:
- Identify what the essential elements in your design are.
- Determine the hierarchy between them. Which of them should be seen first, which second, etc.
- Draw Areas of Interest over those design elements.
- Evaluate their Percentages of Attention. Does the most important element get the most attention, and the least important gets the least?
If a user’s attention is distributed between these elements not as you intended, consider making some changes.
Regarding landing pages, usually, your main message should get the most attention. Some supporting text that explains something on most occasions is a little bit less visible. Lastly, a CTA button should close the deal and the attention flow by directing the user’s attention to take a specific action.
According to our design element visibility benchmark, on landing pages of some of the best companies, a heading on average gets 24% of the user’s attention. A subheading tends to get ~15% of the user’s attention, and a primary CTA slightly less than 4% of the attention.
We have gathered this data by analyzing TOP 500 companies on Crunchbase regarding their revenue and employee count. So, this is the data of the landing pages of some of the most successful companies. Probably they are doing something right regarding their landing pages also if they’re on this list.
Remember that in most cases, spatially uninterrupted and smooth attention flow can be as important as trying to optimize individual attention percentages. Try to organize page elements that would be intuitive and feel like a natural attention flow on a page. Consider avoiding lengthy spatial jumps between elements in your visual hierarchy, as these do not align very well with the proximity principle in the Gestalt theory.
Increasing design elements visibility
Let’s suppose your visual hierarchy is more or less intact. However, one or a few design elements gets a little less attention than you would consider sufficient. For example, after you define your Areas of Interest, you notice that the Percentage of Attention directed to the main title is 27%, and you would like it to be in the 30-40% range.
You can consider tweaking the font size, contrast, color, or placement of your main title to make it stand out more. Also, you can try experimenting with the amount of white space around that element or making it the focal point of your design.
After these corrections, you can analyze your design again. By using Areas of Interest, you can figure out if there’s any increase in attention on these elements and, if so, exactly how big an increase. Is it 3%, 5% or even 10%. You can repeat such an iterative process for each design element until you’re satisfied with the result.
Spotting conversion problems
While engaged in such a process of optimizing the visibility of your design elements, you might come up with some striking insights regarding your design or its conversion optimization. Suppose you have more than one different CTA button close to each other, suggesting taking different actions. You could entertain such an idea:
Aren’t we making it harder for the user to choose?
After all, Hick’s law states:
When you increase the number of choices, the time required to make a decision increases as well.
With such a realization, the team of the omnichannel marketing automation platform Omnisend was struck while analyzing their design. They realized that the two CTAs, “GET A DEMO” and “START MY FREE TRIAL,” that are paired together below the subheading in their landing page conflict with their goal to increase their demo sign-ups.
The old design of the Omnisend landing page. The Demo CTA button gets 4% of the attention.
They forced the user to choose between two options, and when it’s hard to choose, sometimes the easiest route is not to choose at all. You don’t need to inflict such a headache on your potential clients. It’s better to seamlessly streamline them down the pipe straight to the payment page or a call with the Account Executive in this case and make them feel like it was meant to be.
Omnisend decided to do just that, getting rid of the one button and leaving only the CTA, leading to a demo call. This change allowed them to increase the attention percentage that this CTA got from 4% to 7%.
New design of the Omnisend landing page. The Demo CTA button gets 7% of the attention.
As a result, the number of their demo requests increased almost by 30%. Such a significant improvement was achieved simply by discarding a competing CTA button and concentrating the attention of the user on just one thing.
Conclusion
Here you go. Now you know how to draw Areas of Interest, understand what the Percentage of Attention is, and probably you could explain it to others. Also, you just found out at least three ways how you can use Percentage of Attention to test your design. Now go and find out what Percentage of Attention that CTA of yours gets!
P.S. Check out our article on how to interpret attention heatmaps. You’ll find all the crucial things you need to know to get the most out of our heatmaps and even 2 example cases.
