How to read and analyze heatmaps

Heatmaps are a good visual tool for analyzing your website and how the visitors interact with it. You can use it for evaluating if the visitors engage with the content, how they navigate, and if there are differences in behavior across devices.

In this article, we’ll go through the three types of maps and how to interpret the information. This will not only help you understand the heatmaps you already have, but also help you understand what you can use heatmaps for moving forward.

Click map

The click shows where the visitors clicked on the page. The larger the red area, the more clicks. This map is great for evaluating how the visitors navigate. For example, do they click on the main menu? Do they click on the sub menu? Do they click on links in the text? Do they click on the footer?

If they are not using an element as much as you were expecting, can you see any reasons why? Are the links in the text the same color as the main text and therefore difficult to see? Is the element only visible if you scroll far enough and therefore easy to miss? Is the link text small or placed over an image, and therefore difficult to read?

However, not using links or buttons doesn’t have to indicate a problem. If there are easy shortcuts at the top of the page and the sub menu is easy to use, maybe the visitors don’t need to use the main menu as much as you’d expect them to use it.

Another thing the click map can tell you is if visitors are misinterpreting elements to be links. If you notice that they click on images or cards that are not in fact links, perhaps you should add links to those elements. The visitors are telling you how they would like to navigate, and it’s better to adapt to the visitors than forcing the visitors to adapt to you.

Fold line

Lastly, the click (and move) map will give you an “average above the fold” line, which gives you a good idea of how much the visitors see without scrolling. This is useful information, because with vastly different screen sizes and settings, how much you see can be very different from how much somebody else sees, even if you are both using desktops. By using the average, you get a good understanding of where to place elements and information.

A common mistake we see is to have an image take up the entire space between the main menu and the fold line. With nothing more than an image, you are not encouraging the visitors to scroll down, and they may not see the helpful shortcuts you’ve added, or the latest news they may be interested in, and so on. If you want your visitors to scroll down below the fold line, you need to encourage them with interesting headings.

The fold line is also useful when evaluating the placement of elements. Perhaps you have a link or button you want the visitors to use, but it doesn’t get as many clicks as you think it should be. If it is placed below the fold line, it’s a good idea to move it up above the line and see if that increases the engagement.

Move map

The move map tracks the movements of the cursor. The redder the area, the more movement. Studies have shown that there is a relationship between eye movements and cursor movements, and the move map will therefore give you information about what the visitors are reading and what is grabbing their attention.

If you have a lot of text on the page, you may find that some paragraphs or subjects are more engaging than others. Perhaps there’s information you can remove from the page, or maybe you could add more information about something else. In some cases, it may not be that some information is more interesting, but that some headings are more attention grabbing, and that by updating the headings you get more engagement.

The same goes for other elements, such as cards, shortcuts, highlights, etc. If you find that the visitors are scrolling past these without engaging, it may be that you have selected the wrong information. However, it can also be the design that is lowering the engagement. If there is a lot of text on a busy background, for example over an image, it may be difficult to read the text, and the visitors choose to scroll past instead. Or perhaps the elements are too discreet and don’t offer a reason to stop and read. By making some design changes, you may find that the engagement increases.

The move map will also show you the fold line, which you can read more about above.

Scroll map

The scroll map shows how far down the visitors scroll on the page. The redder, the more views. If you hover on the map, you can see how many percent scrolled to that specific spot. The scroll maps can be used to evaluate the engagement on the page. If most visitors move on to other pages without scrolling or without scrolling very far, it may indicate that the information on the page doesn’t grab their attention.

As mentioned for the click map, we have seen a pattern of large image at the top of the page that may look pretty, but they discourage visitors from scrolling down and reading the information and links you have selected for them. It may also be that the visitors didn’t scroll far enough to find the information that would grab their attention. In that case, it would be better to move that information further up to make it easier for the visitors to find. If they can at least see a heading that interests them, they will scroll down to read the main text. Once they have started to scroll and read, they are more likely to keep scrolling if they find the information interesting.

Another option is that there is nothing wrong with the placement, but that the information isn’t interesting enough. Perhaps it’s the wrong information in the wrong place, or the headline isn’t attention grabbing. If you suspect that may be the case, try replacing the information and see if that increases the engagement on the page.

Combining the maps

To gain the most from your heatmaps, you should combine the information from all three maps. How do the clicks relate to how far down they scroll? Are there overlapping patterns for some of the maps? By combining the information from the three different maps, you can draw better conclusions about how the visitors use the page and what you can do to improve both the specific page and the general navigation on the website.

Don’t forget that for each map, you can also choose which device you want to see. You may find that there are differences in navigation and engagement across the devices. If possible, you can adapt accordingly, or you can strive to find a happy medium where the same pages work equally well regardless of which device the visitor is using.

Knowledge base