Heat map analysis: how to visualize your visitors’ behavior

If you want your website to do well online, you need to make sure you get enough visitors to it. It’s very important to provide good quality content and to ensure it’s optimized for search engines. Just having a lot of traffic isn’t enough since the project somehow needs to be financed as well. It doesn’t matter whether you run an online store and sell products or provide information and finance your site through paid advertising: you need your visitors to take action and click on your content. In addition to increasing the number of visitors (known as conversions), you also have to tailor your content so they are more likely to click on it.

The usability of your website has a particularly strong effect on how many conversions your site achieves. The more user-friendly your page, the greater likelihood that your site will be a success. One reason that you’re not getting any conversions could be the simple fact that your call-to-action button is hard to find. An interesting way to analyze the user-friendliness of your own web project is to carry out a heat map analysis.

Contents

Heat map analysis: definition
How to create heat maps from users‘ website behavior
Heatmap analysis: tools and providers at a glance
The weakness of heat map analyses
Heat map analysis: a look behind the scenes

Heat map analysis: definition

The heat map analysis is a form of investigation to analyze users and their website behavior. For this purpose, a heat map is created that shows different colors depicting the strengths and weaknesses of how user-friendly each analyzed page is. Just like with a thermal imaging camera, the colors are available for different temperature gradations: the classic heat map consists of the colors red (hot), yellow (warm), and blue (cold). Colors such as orange (medium heat) and green (cool) depict the transitions between the individual heat levels.

Heat maps are by no means an invention of online marketing. As early on as the 19^th century, the Parisian statistician Toussaint Loua published a tabular overview of the different Parisian districts, showing specific characteristics of the population. It was first released in black and white, and later in color. Today, the useful visualizations are not only required in web analysis, but also for presenting weather maps, in energy consultation, or analyzing soccer matches.

How to create heat maps from users‘ website behavior

The expected temperature for the next few days can be summarized in a heat map based on simulated data. The paths taken by the soccer players are visualized in values, which are gained from GPS tracking. When it comes to website and visitor behavior, however, the question is: where does the information for an informative visual representation come from? This is done by means of various tracking mechanisms that capture certain user actions. These actions fall into four groups.

Whether it be in medicine, psychology, market research, or computer science - eye tracking is a widely-used analysis method that is becoming increasingly popular. With the help of special devices, you can record the test subject’s eye movements as well as what they fixate their gaze on. By looking at the duration and frequency with which the test person’s eyes linger on specific areas of elements, you can create a classic heat map with the right software after the tracking process is complete. In addition to mobile systems, which are mounted to the test person’s head using special equipment, there are various external systems (remote eye tracking) that are installed directly on a screen or are simply attached to it. Various providers, such as IVP also offer eye tracking solutions that function using standard webcams.

Click tracking

Another effective way to determine users’ behavior is to record and analyze mouse clicks. It is mainly about which links, media content, and menu items are clicked on the most frequently. At the same time, however, you can gain knowledge from sections on the website that don’t even have a function since users often click on these areas too. Sometimes it’s by accident and sometimes it’s so they can highlight or copy blocks of text. In order to register the users’ clicks, an event handler is added to the source code of the website, which is where event tracking comes into play. This event manager allocates a unique object ID to the individual elements and positions. With this ID the analysis software can organize the user clicks.

The final result is not usually presented as a heat map, but as a click map. This form of visualization shows where a user has clicked. The areas can also be displayed in different colors in order to distinguish the various types of visitors, but this depends on the selected tracking provider or the software used. It’s also possible to find out which website sent them to yours and to differentiate between new and returning visitors. Another option is click maps, which show how often users have clicked on individual links. The heat map is ultimately a possible display format.

Scroll tracking

If your web project has quite long blocks of text on it, scroll tracking can be a good solution for testing the impact of these extensive pages. While ordinary web analytic tools reveal how long a user has been on a particular page, they don’t say whether they have scrolled to the end or just read the top part. This scroll depth can be an important indicator of how well your content is received by website visitors. If scrolling shows that the parts of the texts located at the bottom are read less frequently, this may indicate that the overall quality of your texts and other content needs to be improved or that the text is maybe too long.

It’s possible to track a user’s scrolling activities on any page that has normal scrolling. Similar to click tracking, you can use events for this purpose by assigning specific object IDs to individual page sections. By default, the results of the scroll tracking analysis are displayed in a tabular overview and as a percentage. This way, you can find out how many of your users have seen 25%, 50%, 75%, and 100% of the page. It is possible to visualize using heat map-typical color gradients – beginning with red for the starting point and blue for the section of the page that’s seen the least. The results could reveal whether you need to position important elements differently or whether you need to change your concept.

Mouse movement tracking

To find out the order in which a visitor scans your website, you can create a mouse movement heat map. This form of visualizing user behavior is not based on eye movements, scrolling behavior, or the number of clicks, but rather on mouse movements. As a rule, this provides a very accurate picture of which areas a user has viewed at a certain point in time. Like eye tracking, this method of analysis needs a recording of the complete user session. You don’t, however, need any special hardware, simply a suitable software solution that enables you to record and analyze movements.

Heatmap analysis: tools and providers at a glance

There are several technical possibilities for creating a heat map, which are categorized depending on the intensity and the tracking methods available. This means that tools come in a range of different prices, which is why searching for the right tool in order to analyze user behavior is a question of cost.

Scripts and plugins: with the help of scripts and extensions for your CMS, which run on your own server, you have full control over the recording of mouse movements and clicks. With the necessary knowledge, you can implement tracking solutions like these. Alternatively, you can use ready-made tools such as hotjar. The JavaScript library provides you with the necessary base, including very detailed documentation so that you can configure mouse tracking for your web project using just a few lines of code. You can then generate a heat map with the recorded data. You can try it for free for 15 days.

Heat map simulations: if you are rather reluctant to carry out comprehensive analysis because of the costs and time required, you could consider tracking simulation. Different providers offer online services such as EyeQuant or Feng-GUI that simulate the potential behavior of your visitors based on data, algorithms, and experience. To do this, you simply need to upload a screenshot of the page that you want to test, and you’ll receive the corresponding heat map.

Paid heat map analysis tool: there are also options on the internet in case you need a professional visualization of user behavior that doesn’t require you to have programming skills or expertise. Various paid web services offer their own JavaScript programs for recording and evaluating data. You choose a subscription, insert the corresponding code lines into your web project and define what needs to be tested. Depending on the provider, visualizations of users’ clicks, mouse movements, or scrolling activities are available after tracking has been completed. Some interesting examples of extensive heat map analysis services are Crazy Egg, Clicktale and Mouseflow.

The weakness of heat map analyses

By creating heat maps to analyze users and their website behavior, you can gain valuable insights into how well your website’s layout and design works regarding functionality and usability. However, the web analysis results need to be classified and analyzed correctly. Even though you can get quite a good impression of how often a link was clicked on, a heat map doesn’t reveal whether the user found what they were looking for. You won’t know the reasons why they clicked on your site (because of the positioning of certain elements, by accident, etc.).

For this reason, you should always consider other pieces of data when carrying out a heat map analysis. In particular, the bounce rate or how long the visitor stayed is worth noting. A 100% reliable statement about whether a particular element of your web project achieves the desired level of usability can only be obtained by asking your visitors directly.

Sites with low traffic can often experience problems: the lower the site traffic is, the lower the significance of the heat map analysis and the greater the possibility of misinterpretation – similar to with A/B testing. Since each visitor accesses and uses your website differently, you need to collect data over a long period of time so that clear trends have time to form. Using heat maps on dynamic web projects can be problematic since the content regularly changes. While you can focus on elements that stay fixed in place such as navigation menus, it is hard to measure how much influence certain content has if it constantly changes.

Heat map analysis: a look behind the scenes

If you want to find out where your most important content should be placed on your site, or which parts or elements need more work, a heat map analysis should answer all your questions. Visualizing visitors’ behavior provides you with more depth than superficial information such as the absolute length of stay or whether a conversion took place or not. The results of click tracking, eye tracking, mouse movement tracking, and scroll tracking provide detailed information about how your website is perceived and used. If you combine the insights gained from the generated heat maps, together with common web analytics methods, you have a great chance of increasing your conversion rate.