Return to knowledge base main page
How to interpret attention heatmap? (with examples)
The Attention heatmaps, provided by Attention Insight, demonstrate a 90-96% accuracy in predicting where visitors will look within the first 3 to 5 seconds of seeing the design.
Warmer colors indicate places that get more user’s attention. Cooler colors indicate places that get a little bit less attention, and where there are no colored spots, those places get 0% or very close to 0%. The warmest color that we use to indicate places that get the most attention is dark red, and the coolest is blue.
As an initial recommendation, we usually advise our customers to establish 3 to 4 key areas where they desire the users’ attention to be focused. It is important to determine these areas prior to analyzing the results with Attention Insight to avoid potential bias.
To identify these key areas within your design, consider asking the following questions:
- What is the primary objective of the webpage?
- What are user intentions (e.g., research or purchase)?
- What critical information are they actively seeking?
When you know the main objective of the webpage, you can identify which area is the most important, which is the second in order, the third, and so on. By drawing Areas of Interest, you can calculate the Percentage of Attention each of those areas gets.
Looking at these percentages, you can evaluate if the visual hierarchy of the webpage is as intended. The most important area should have the biggest percentage and accordingly less important areas smaller percentages.
If the most crucial area doesn’t get the most attention or some other area’s percentage of attention is not aligned with the intended visual hierarchy, then you have to make changes in the design. By changing the properties of some design elements or the layout itself, you can change the attention distribution on the design and the amount of attention each element gets. If you want to learn more on how to test your design using Areas of Interest and the Percentage of Attention, you can check this article.
You can also see the attention percentages of your Areas of Interest in the left sidebar and, depending on the Benchmark type that you selected, design elements visibility benchmark, and some recommendations.
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.
Our predictive AI models are trained on eye movement data representing how people see the images. People consume webpages in sections, meaning that, as they scroll, they see only one webpage section at any given time. What’s displayed in the observed section affects their attention distribution. That’s why it makes more sense to analyze webpages in sections rather than as a whole.
You can also see a Clarity score in the right sidebar that shows how visually clean and clear the design is for a new user, whether it is overloaded with elements and conflicting colors or it is clean and clear (see image on the right).
The higher the score, the more clean-looking the design is. On the other hand, a low score indicates that your design is cluttered and important elements are not easily visible.
The clarity score is calculated separately from the heatmap and is not related to the hotspots.
If you upload webpage cut into sections, you will get a separate Clarity score for each webpage section. Clarity score can vary greatly from section to section. Some sections might be clear to a viewer, barely causing any cognitive load (image below).
While other sections might be cluttered and too complex, which will be indicated by a low Clarity score (image below).
Analyzing the clarity of separate sections enables you to optimize the clarity of the whole webpage, section by section, and to make sure that there’s no unnecessary friction preventing your leads from converting.
Example #1: The Skin Deep landing page
The Skin Deep is a brand that created THE AND interactive documentary, THE AND relationship card games, and Honest X card games. Their sales were booming during a 6-month hot streak following their Emmy award-winning documentary. However, they realized that this marketing tactic based on the success of their documentary would soon dry up.
Also, recognizing the suboptimal state of the current unoptimized Shopify Plus site and its potential customer leakage, The Skin Deep team hesitated to allocate additional funds toward marketing. It was necessary to improve the customer experience to continue growing by converting new unaware visitors from ads. So they turned to conversion rate optimization.
One of the things that were uncovered during the CRO audit was that website visitors who hadn’t seen the ads weren’t converting. No content on the homepage would explain The Skin Deep brand or how their card games are different from the competitors’ products. It’s hard for the colder audience to convert if they can’t understand what the product is about.
Here’s how it looked:
Most of the attention (~24%) goes to the product packaging, which shows only the product name and the title of the edition. That isn’t very descriptive, and if you don’t know anything about the product, this product image doesn’t convey any interesting info about the product. It could be changed to an image giving a sneak peek into the actual use of the product.
A comparable amount of attention (23.2%) is allocated to the heading informing about the ongoing sale with a 15% discount. The subheading at the bottom is announcing about two new editions. Both of these are targeted to returning customers or at least well-informed leads. To improve conversions for colder audiences, the heading should be changed to declare a unique selling proposition that is relevant to them.
Targeting returning customers is further reinforced by the fact that above the average amount of attention (5.7%) is paid to the logo so that visitors who watched the documentary could easily recognize the familiar brand. Such a highlight on the logo might not be necessary when targeting a colder audience.
Regarding the Shop Now button, it is placed on a different side than the heading and subheading, which breaks the attention flow, and it’s harder to notice it. As we can see, it receives only 1.3%, which is well below the 4% average for the CTA buttons on landing pages.
The CTA button could be brought closer to the heading to improve the attention flow and make it less fragmented.
Additionally, the design looks a bit dated, and there is a lot of unused whitespace on the sides that could be utilized.
Having all this in mind, a few iterations later, they came up with a redesign:
With an asymmetrical design and increased white space around it, the heading on the left screen side became the main focal point, now receiving 29% of the attention. The text, instead of informing about the sale, now subtly tells how buying the product would benefit them.
It proposes that this connection card game is not only the best in the world but can also be a great alternative to flowers as a gift. It’s implied that the game is more valuable than flowers since it is more effective at deepening the connection between partners. A first-time visitor now understands the value proposition of the product.
The second most prominent object is the image of the product in actual use, with 27.8% of the attention drifting to it. People now don’t just see the packaging of the product, but they get a sneak peek at what it would feel like to use it. They get to read one question from the card game from this POV perspective like they were the ones playing the game. It conveys that it’s an engaging question that will spark an interesting conversation, really deepening the connection.
The CTA button now gets more attention as it’s part of a natural attention flow where the visitor’s attention naturally drifts from the heading to the CTA button right below it. It’s more alluring to click it even though it’s a ghost button possessing less visual weight from a graphic design standpoint.
In the end, these changes resulted in a 93% increase in conversions on desktop and tablet homepages.
Source: Blue Stout
Example #2: Sport Check cart page
Sport Chek, Canada’s largest sporting goods retailer of footwear and apparel, was working on increasing conversions in the form of transactions. They offer free shipping for orders over a certain order value. Nowadays, providing free shipping is quite common sense, and it’s nothing too special; accordingly, information about free shipping is not too prominent on their cart page.
Let’s analyze this cart page. Which elements are most important on this page? Of course, the product name and info that are used to double-check if the correct product was selected, followed by a quantity, total price, the Checkout button, and the Free Shipping banner.
Regarding visual attention, the Free Shipping banner receives only 9.2% of the attention, which could be improved based on this attention heatmap. So, one of the goals became to make this free shipping info more prominent visually so it’s more noticeable.
Vibrant colors and some icons can be used to draw more attention to it.
Moreover, the attention to the concerned element is affected not only by the properties of the element itself but also by the properties of other elements and the whole layout. A significant amount of attention is scattered on the page title, link Back to Shopping, product name, and product info that could be shaved off from these elements. Also, trivial column labels such as Items(s) and Qty could be removed, as well as links Remove Item, Move to Wish List, and + Additional information so they don’t distract the customer from the main task and the Free Shipping banner.
Promotional Code? section can be connected to the Order Summary section to make only three distinct sections on the right: the Order Summary section, the Free Shipping banner, and the Checkout button. It would make the attention flow even smoother, concentrating on the essential elements and leaking even less attention.
Another goal was to communicate this info about free shipping in such a way that it would make it more relevant for the customer so it would seem kind of as an added value to the customer that differentiates them from others.
Hence, they decided to personalize this Free Shipping message by stating that the user qualifies for the free shipping or displaying how much the customer needs to increase the order value to qualify for it.
They tested out a few variations, and here is the winning design variation:
And the comparison of both designs side by side:
As you can see, the amount of attention on the Free Shipping banner increased almost two and a half times, from 9.2% to 22.2%. Now, the attention flows smoothly and naturally from the Order Summary section above to the Free Shipping banner below (see image below), and thus the latter gets noticed more.
Since the product name and details take up less space, attention to them decreased and was transferred to the sections on the right. Since the customer already chose the product, it’s not so important to highlight the product name and specs – they are needed just for a quick double-check. At this stage, the most important thing is to guide the customer to the checkout.
To add more, since they increased the white space a bit and removed some trivial text elements, the Clarity score increased by 2%. That’s not very much, but reducing the cognitive load and boosting the visual clarity on this page might add to a more effortless customer experience and, thus, higher conversions.
This winning variation resulted in a 7.3% increase in transactions with solid 99.5% confidence.
Having in mind that thousands of transactions are made every week, this increase was a big win and a significant added revenue.
Source: Conversion
Conclusion
As you can see, the use of Attention Heatmaps is valuable in pinpointing design flaws and confirming whether changes have been implemented effectively.
You can check whether the attention flow is smooth and uninterrupted or scattered all over the place, which means leaking attention from the main message. By quantifying Attention Heatmaps using the Percentage of Attention feature, one can inspect if the actual visual hierarchy matches the intended one.
You can also check if your main message or CTA button is noticeable or it gets undermined by other elements. Attention Heatmaps can validate design changes or decisions. If critical sections of a website are optimized to attract the necessary attention, you can observe a noticeable increase in the key metric, the Percentage of Attention.
Lastly, the Clarity score shows how visually clear the design is for a new user, whether it is overloaded with elements and clashing colors or is clean and clear. Cleaner design can reduce the cognitive load and thus improve the user experience.
