How to interpret Attention Maps

The Attention Maps, provided by Clueify, indicate with an accuracy of 92% where users will look at in the first 5 - 10 seconds when visiting a webpage.

As a first step, we usually recommend to our customers to define 3 to 5 key areas where you want the user's attention to be drawn. This should be done before analyzing with Clueify, as seeing the results beforehand could create bias in one direction or the other.

To identify those key areas of your design, you should ask the following questions:

• What is the goal of the webpage?
• Where are users coming from and with what intention?
• What is the critical information they are looking for?

Example 1 - Arenaturist Landing Page

Arenaturist is a leading hotel group in Croatia with properties in Central and Eastern Europe. The main goal of their landing page is to generate new bookings for their accommodations.

Nowadays, people visit a hotel website usually for two reasons. Either they found one of their properties on a travel booking site like Booking.com and are searching for a better offer when booking directly through the hotel. Or they already know the hotel chain from a previous trip and want to see if it has a property in their next destination.

In both cases, users want information about whether a hotel is in the desired location, its availability, and how much it costs. Accordingly, the booking form should attract the most attention, as it is what users are looking for.

When running the landing page through a Clueify Analysis, we can see with the Heatmap that a lot of attention is drawn to the pricing tag of a special offer.

Since most users know that the price depends significantly on the location and the date of travel, the offer is at best marginal information and should not be the main focus.

Considering that the second most attention is captured by the title of the booking form and not by the form itself, there is room for improvement.

The marketing team of Arenaturist tested different designs and came up with a new layout for their landing page. Two significant changes were made. The offer banner is now placed at the bottom right. The booking form has a vertical layout instead of the previous horizontal alignment.

As we can see, these adjustments have resulted in the booking form now getting 37% of the available attention instead of the previous 19%. In addition, the value of the booking button (CTA) has also increased from 3% to 4%.

In an experiment with over 70.000 website visits, both layouts were tested to validate the design choices further. Upon the first visit, a user was randomly presented with either version A or B.

The subsequent evaluation with Google Analytics showed a conversion rate of 0.23% for the previous design and 0.32% for the redesigned landing page. Therefore, the design improvements led to a 52% increase in conversions and 32 additional bookings during the experiment.

Source: Carmelon Digital

Example 2 - Flos Cart Page

Established in 1962 in Merano, Italy, Flos is recognized as a world-leading manufacturer of innovative lighting solutions in the residential and architectural sectors. The products are exported to more than 70 countries, making the eCommerce store the most important distribution channel for Flos.

This example will focus on the shopping cart page, whose primary goal is to drive users to the checkout and complete their purchase.

From the customer's point of view, it is important to check which items are in the shopping cart and whether an item has not been mistakenly added too often. In addition, the customer would like to know here what the entire order will cost him. Accordingly, the following areas should be the most visible:

• Selected items
• Quantity of the items
• Grand total
• Checkout button

The heatmap above shows that much of the attention falls on the top left area and the various credit card icons. In contrast, the previously defined key areas remain largely unnoticed. The current design is failing in this regard. It does not direct the user's focus to the information he is looking for.

Based on this, designers working for Flos came up with a new version by experimenting with the positioning of elements, colors and the removal of distracting elements.

First of all, it is noticeable that the entire footer area has been removed. Visitors already committed to the sales process are extremely valuable and should not be distracted by unnecessary links.

Furthermore, the credit card icons, which attract a lot of attention due to their bright colors, have been placed closer to the checkout button. This leads to some of the attention being transferred to the button. The primary CTA (call to action) now receives 14% of the attention compared to 6% in the old design.

The visibility of the selected item was also increased from 1% to 7% by increasing the font size of the name and choosing a more contrasting color (blue). To not overload this area, the product details were hidden in an expandable panel.

A small change was also made to the quantity specification. The added black border highlights the element and leads to a doubling of attention (1% -> 2%).

The superiority of the redesign was confirmed at a later stage with a comprehensive A/B test. The design improvements resulted in a conversion rate uplift of 37%.

Source: VWO

Conclusion

Attention maps help identify weaknesses of a design and can validate if changes have been made in the right direction. Suppose key areas of the website are optimized to receive the required attention. In that case, a clear improvement in the key metrics can be observed.