Many site owners and web developers, when designing a resource, organizing its structure or adding any elements, are guided by their own opinion, believing that site visitors will see everything with their eyes and act according to their plan. But often this opinion turns out to be erroneous, and the mistakes made hinder the conversion, accordingly, everything does not go as we would like.
For this, specially developed tools have been used for many years that allow you to look at the site through the eyes of visitors, to study statistics and their behavior on the resource. One of these very important tools for website analysis is heatmaps…
Surely many of you already know firsthand what it is, but, as they say, repetition is the mother of learning. And for those who do not know, this article will become a real discovery, after which you will begin to analyze your resource with interest.
Heatmap: what is it?
Heatmap Is a graphical representation of data where values are displayed in different colors. In simple terms, these are reports in which all variables are indicated by colors: warm shades mean the most active elements, and cold shades – less.
Each of you has met with a heatmap at least once. They are used for visualization in many areas. For example, Yandex has formed its own heat maps for profitable housing investments:
Fig. 1. Thermal Yandex.Maps for housing investments
Heatmaps are used in football. For example, this is what Cristiano Ronaldo’s heatmap looks like:
Fig. 2. Heatmap in football
And there are many more such examples, but the task of any heatmap is to help you carry out a quick analysis using the color difference. The same is true for websites: heatmaps play a very significant role, allowing you to conduct a high-quality analysis of user behavior.
After studying heatmaps, you can not only understand which elements or areas on the site are more viewable / clickable, but also conclude what needs to be corrected, swapped, where it is better to add a button with a call to action, and where to remove the ad banner. But more on that later. For now, I propose to figure out what parameters can be viewed using heat maps and how to correctly interpret service reports.
What can be analyzed through heatmaps?
I will consider the most common and convenient, in my opinion, heat map service – Yandex.Metrica. Although there are already quite a few services, they all work almost according to the same principle (script installation), but some of them are paid, some have only a version in English. And Yandex.Metrica is available to all Russian-language resources, it is free, informative and very convenient.
To start using heatmaps from Yandex.Metrica, set the meter code and do not forget to enable heatmap reports in the settings first:
Fig. 3. Setting up Heatmaps and Webvisor
If the counter is not installed or is banned, then when you open heat maps, you will receive the following message from the service.
Fig. 4. Heatmaps not working
If ok, when you click on the Maps tab, you will see reports for different heat maps:
Fig. 5. Heatmaps in Yandex.Metrica
- Link maps;
- Click maps;
- Scrolling maps.
This heatmap helps you learn which links are most likely to be clicked on by your site’s users. The link map shows a report on all transitions – it can be menu sections, product cards, shopping cart, clickable phone in the header of the site, etc.
The color gradient serves as a hint: the warmer the tone (closer to red, yellow), the more often users click on the link, the colder – the less often.
Fig. 6. Link maps
You can view not only the main page, but also the internal ones – just specify the address in the search bar. You can select the desired period for showing, as well as compare segments.
An example of a link map of a company selling projects of houses and baths:
Fig. 7. Link map example
The map shows that users are actively switching to pages with projects of stone houses, houses made of wood, they are slightly less interested in projects of frame houses, and the sections “Cottage villages in Russia” and “Builders and materials” are practically not clickable.
But according to the links from the footer of the site, the report says that very often users are interested in new projects and free offers.
Fig. 8. Link Map Report
To improve conversion, it is worth swapping links so that access to free projects and new products is already on the first screen, and visitors do not need to reach the footer of the site.
Link maps provide a range of insights. For example, you can identify what is most in demand on your site, what goods or services are more interesting to users – and bring them to a prominent place.
In the screenshot below, you will see that pool filters are the most requested category, and a separate section in the main menu for filters, like steam generators, would be helpful.
Fig. 9. Active links in the link map
And the next map of links makes it clear that it is easiest for users to discuss everything with a manager – they open contacts, write a request in feedback forms. It is likely that adding an online consultant to the site would greatly help in sales, all answers would be received immediately, customers did not waste time, and the store – customers waiting for a call or an email response.
Fig. 10. Example of popular links
In addition, when you click on a specific link, you can get more detailed information:
- the number of clicks on the link;
- proportion of clicks relative to other links on the page.
Fig. 11. Detailed information on the link
This report demonstrates the click-through rate on a site page, and it can be a link with a transition, or any other element. Heatmap is very useful for improving website usability and increasing conversions.
With the help of its analysis, you can identify various problems: determine the area where users often click, thinking that there is a link, understand which buttons should be moved, because users do not see them, whether it is necessary to remove call-to-action buttons or feedback forms connections because visitors ignore them, etc.
Heatmap has several modes:
Fig. 12. Heatmap modes
Thermal conditions – a mode that displays clicks in color. The warmer the tone – the more clicks, the colder – the less.
Fig. 13. Heat mode heatmap
Monochrome card – the mode in which the highest density of red dots indicates higher activity.
Fig. 14. Monochrome heatmap
Clicks on links and buttons – a mode in which sites are analyzed where site visitors click on links.
Fig. 15. Clicks on links and buttons
This report is very similar to a heatmap of links, but here clicks that are not on links or buttons are shown in blue, but in red those that are a hyperlink or button.
Many of you, I think, have come across in your experience a segment in the text that is very similar to a link, but it is not. So this heatmap mode will immediately help to identify an area that users perceive as a link or button, and they try to click on it.
Or you can determine where to fix the clicked area. For example, users often click past the button area you designate. Just such a situation can be seen in an example:
Fig. 16. Invalid click area
Visitors miss a little when clicking on the projects of the combined houses, it is worth taking care of expanding the area of this button.
Transparent – a mode in which the page is darkened and clicks are highlighted in white. For the convenience of viewing, I advise you to lower the transparency in the “Options” mode, so the clicks will be clearly visible.
Fig. 17. Transparent heatmap mode
Element map – the mode shows all the elements of the page, and their color indicates the frequency of clicks according to the standard principle of a heat map.
Fig. 18. Item Maps
Another very important type of heatmaps, which allows you to see how deep the user scrolled the page and how his attention is focused on the study of the material.
The scroll map, in simple terms, is also very significant for marketing. With the help of it, you can understand how readable the material is – perhaps it should be shortened or changed, because users do not reach the end, it is worthwhile to understand whether to use pagination pages or infinite scrolling, determine where it is better to place the CTA buttons, and more.
Scrolling maps have two modes.
Scrolling map heatmap – everything is simple: the most visible areas are indicated by warm colors, the least studied – colder. From red to blue.
Fig. 19. Scrolling heatmap
Transparency map – in this mode, areas that are more attractive to visitors are transparent, those that users are less interested in are darkened.
Fig. 20. Scrolling transparency map
What are heatmaps for?
Above, I showed you with examples what you can see and change with heatmaps. Now, point by point, I propose to analyze the situations in which heat maps will become excellent helpers.
When redesigning a site
If you decide to change the design of your resource, you must know exactly which elements are popular and in no case should you change them.
Once you’ve done a redesign, you need to make sure that the new project is no worse than the old one and that the innovations are only beneficial. Heatmaps will help you with this.
To improve usability
Heatmaps can help open your eyes to things you might not have noticed. For example, whether the CTA buttons are located effectively or is it better to move them, whether the text length is optimal, whether the ad blocks are placed correctly, etc.
Conducting an A / B test
Heatmaps will help you to competently conduct testing in order to understand which landing page to choose, where to place ad units, where to place a call to action button, and more.
To improve website conversion
Yes, heatmaps often help with this. For example, one of the clients of our service just had to raise the button with the call “Leave a request for settlement” in the first scroll window, and not place it at the very bottom, where the button was originally located, as the applications were sent immediately. On the heatmaps, it was clearly visible that users did not even reach this button and clicks it completely.
To eliminate errors
Very often, heatmaps help you see problems that seem to be on the surface. For example, to understand that users mistake an element for a link and click on it, or do not get to the clicked area.
To improve the content on the site
You can find your text interesting, and users only read the first two paragraphs and don’t even scroll below. The scrolling map will tell you this, after which you will shorten the text, indicating all the most important first.
A tool like a heatmap is very important when promoting a website, it helps you see many things that can improve the usability of your site, influence user behavior and increase conversions. If you have not yet started using heat maps in your work, then I think this article will encourage you, at least out of interest, to see if everything on your site is arranged as you imagined.
We will be happy to help you analyze Yandex.Metrica reports, improve your resource and do everything possible for its effective promotion. Let us know your wishes to the staff of our Support Service and get advice on SEO optimization and other work for your site.