What Are Heat Maps And What Tools Can You Use?

What Are Heat Maps And What Tools Can You Use?

What Are Heat Maps And What Tools Can You Use?

Heat maps or heatmaps are tools that provide very valuable information about the behavior of users on your website. The truth is that they are an excellent complement to web analytics.

With heat maps, you can know what the user is doing while browsing, which areas of your page attract their attention, and how they interact. Not bad, huh? With the information obtained, you can improve the structure and navigability of your website.

What is a heat map?

A heat map is a visual representation that shows the areas of most interest on a web page. Its appearance is reminiscent of weather maps. With a simple color code, we can interpret at a glance which areas of our website users move the most.

The color code used to interpret the heat maps is usually very similar in all the available tools, so whatever tool you use, the visible results are very similar.

Cold tones (blue and green) are used to identify the areas that generate the least interest like someone click on Whiteboard Animation keywords and (areas where users do not spend time) and warm tones (yellow, orange, and red) correspond to the most interesting areas for users. Those that we are most interested in reinforcing.

And how are these colors generated?

The heat maps analyze the movement of the mouse on the screen, detect the elements where the user clicks and the vertical displacement or scroll.

With all this, a very reliable behavior pattern is obtained. Of course, you need a sufficient number of visits (2,000 or 3,000) to extrapolate the data from the analysis. You have it?

Different types of heat maps

As we have mentioned, heat maps can identify mouse movement across the screen, clicks and scrolling. To interpret the behavior we need to analyze, at least, mouse movement and clicks.

1. Mouse movement

This type of heat map records the movements of the mouse (and also when it is stopped). A stopped mouse can mean that the user has focused his attention on an area of ​​the page, so it will be represented with more color presence.

However, usability experts warn that this type of map assumes that when the user is reading, the mouse is also in that area and we all know that this does not have to be the case in all cases.

So maps are useful resources but with limitations:  to obtain reliable data it is convenient to contrast with other sources , such as web analytics tools such as Google Analytics or with other heat maps.

2. Mouse clicks

This type of map indicates the points on the page where users have clicked. Mainly they will be links and buttons, but it also collects actions on inactive elements such as texts and images without links.

In this case, the mouse click is quite reliable, since it collects voluntary actions from the user.

3. Vertical shift

Scrolling or vertical scrolling is also a voluntary and conscious action of the users. The heat map that the scroll collects tells us to what place on the page users have navigated.

Analyzing these behaviors helps us to identify areas of little interest and to consider a change in the structure of the website or menus.

Tools to generate heat maps

Now that you know what heat maps are and how to interpret them to improve your web page, let’s see what tools you can use to generate them.

1.  Heat-map

Heat-map is a freemium platform that provides reports with areas of little interest. Thanks to these alerts, you will know what elements should be improved on your website to make them more interesting for users.

Its free version only allows two analyzes per page but you can choose between three paid plans. The best thing is that it does not collect user data or need to insert code on your website.

2.  Crazyegg

It has become one of the most popular tools for creating heat maps and obtaining other useful data. Although it is paid, you can start with a free 30-day trial. In addition to heat maps, it allows us to perform A / B tests and provides information on search terms, browsers, and operating systems used.

Its visual reports, session recordings, and data sharing are the best things about this tool.

3.  Hotjar

Another freemium tool that works with the main web page creation and eCommerce platforms. Being responsive, heat maps can be created regardless of the device used by visitors.

You can record the sessions and measure the conversion rate from the data you enter. The truth is that it works wonders.

4.  Mouseflow

It offers a free trial version with which you can check its functionalities. Mouseflow tracks user behavior and sends the data to the platform. Of course, to install it you need to add a code snippet on your web page.

5.  ClickTale

Another very complete tool that provides an interesting analysis of your website traffic even in real-time.

Along with Crazyegg, it is one of the most popular, although it is not as easy to use as others. It is focused on web pages with a high volume of traffic.


Heat maps are very useful tools to detect improvement points on your website, although they are not very cheap. However, they provide relevant information, especially for eCommerce.