Heat maps are a fantastic tool to know what users are doing on your site. But what specific applications do you have to optimise conversions?. By using Heat maps we can increase the conversions through our website or blog. So, in this article, I am going to explain about CRO heat maps, its use and tools to generate heat maps.
What are Heat maps?
Heat maps are a visual representation of how users interact with your site style thermal images of an infrared camera. Red implies high mouse activity or touch screen, while blue implies low activity.
What are Heat maps for?
- The movements of the mouse on the page.
- Areas of greatest visual impact.
- Where and to what extent clicks and pulsations are made.
- How far is the scroll?
Different types of CRO Heat Maps
Here are different types of maps and their features. See below.
1. Hover Maps
They show the areas where the mouse moves, which in theory are the same ones on which the user directs the view. They are very popular and are often sold.
The mouse movement maps are based on the idea that users use the cursor to guide the look on the screen (just like the index finger on a paper). However, it has been denied that this is the habitual behaviour of the user (as is reading with the finger).
The position of the cursor rarely corresponds to the direction of the gaze, hence it is best to be wary of such maps.
2. Visual attention maps
A variant of the previous ones, with the difference that the areas of interest are calculated mathematically. The algorithms of visual attention predict attention to the different page elements from the colours, contrast and visual hierarchy, among others.
By disregarding human interaction, they are interesting to evaluate new designs or sites with little traffic. In any case, you must take them with caution since the results are only one interpretation.
3. Click maps
Clicks maps show areas where users clicked on our site.
These click maps are useful to track:
- What links and buttons do users use.
- Where they click is not a link or button.
With this information you can identify:
- Elements that distract the attention of the user, preventing them from clicking.
- Areas aspect clickable (only apparently).
- Sections that do not stand out enough.
4. Scroll maps
They show how far people come with the scroll, revealing the point at which they leave.
They are especially useful when working with landing pages, as they reveal:
- What content users are not seeing.
- At what height they lose interest.
Thanks to this scroll maps as we can:
- Try to upload the most important content.
- Detect confusing points that look like the end of the fold.
- Assess the possibility of adding visual signals.
Additional Functions of Heat maps
Along with heat maps, software packages often incorporate other features, such as:
- Recording of video sessions.
- Funnels for conversion.
- Use of forms.
They complement the information provided by the maps. Let’s see:
1. Session video replays
Session videos record users behaviour throughout the site.
Thanks to them you can detect:
- Bottlenecks where users stop completing the action.
- Usability problems.
Session videos are the closest thing to user testing, except that they show real users (who do not know they are being watched). Truly valuable information.
2. Conversion analytics
Similar to Google Analytics, they show the point where users leave the conversion funnel. The difference is that the reports are linked to session videos, so you can see the complete route of the users.
Conversion analytics allows you to:
- See the reasons that prevent the action from being completed more clearly.
- Compare the behaviour of users who convert versus those who do not.
3. Form analytics
They give you the ability to analyse the performance of the form fields separately. That way it is easier to find the ones that are problematic.
Form analytics points out fields that users:
- They tend to fill in badly, causing errors.
- They are left blank, despite being mandatory.
- They take the time to complete, perhaps because of doubt or difficulty.
In front of a form that is not sent, the form analytics tells you the exact point of the problem so that you can solve it.
How to make heat maps?
Heat maps are created using tools that collect data on the use of the site and generate visual representation. There is a large market with solutions for all our needs and pockets.
The most recurring tools are:
- Clicktale – High-level business solution.
- SessionCam – Alternative in business tools.
- Inspectlect – Comprehensive and accessible, it analyses more data than others in its category.
- Mouseflow – Good quality/price and installation without code in all types of CMS and E-commerce.
- Crazyegg – Very popular although its functions are limited.
- Hotjar – The all in one affordable (and with free plan).
All of them work the same, with a JavaScript tracking code installed on the page. The code sends the data to a server, after processing, generates the maps. Some developers offer plugins for the most popular content and e-commerce managers, such as WordPress.
As for tools to calculate visual attention are:
Heat maps usage tips
For valuable information on heat maps and avoid confusion, be sure to:
- Collect a sample large enough – It is not reliable what 20 users do. As a general rule collects at least 2,000 visits per page/device.
- Using heat maps with other tools – In isolation, they can lead you to the wrong conclusions. Combine them with other research methods such as digital analytics ( Google Analytics ) and qualitative studies.
Fundamental Ideas
- Mouse motion maps are questionable.
- Visual attention maps employ algorithms and can be used for sites with low traffic.
- Click maps tell you where people click and where they do not.
- Vertical scrolling maps help you optimise the length of pages.
- Session videos reveal the behaviour of users.
- Conversion analytics complements Google Analytics conversion funnels.
- Form analytics helps you identify problem areas.
This is all about the CRO heat maps you need to know about. I hope this article helps you in solving the user interaction problems and increases the visibility range. If you have any queries about the CRO heat maps, let us know in your comments. We can discuss and sort it out.
Which CRO heat maps do you use for your website?
