If you are interested in the application of heatmap to improve efficiency, web design, templates ... or simply how to read information from the heatmap then the content below is absolutely suitable for you.

Let's start with the question ...

What is Heatmap (or Heat map)?

Heatmap or heat map is a way of displaying visual data of website visitors' behavior through color, with two types of colors (hot color is where most interactions happen, and cool color is where Few interactions occur).

By aggregating all the data collected (over a period of time), heatmap provides a quick view of how visitors interact with each site, thereby recognizing trends in their behavior. , as the basis for optimizing (design, UI, UX ...), increasing engagement and convertibility.

To see the heatmap customer behavior data on your website, the first thing to do is install the heatmap software.

How to install Heatmap for website?

You can install heatmap software on your website by subscribing to web-based behavioral analysis services (online).

For each user through any online service, the installation method is often difficult to imagine, but mainly through a few simple steps below:

Find a provider of this service

Sign up for a trial account

Confirm account registration

Login to the software with the registered account

Get the tracking code and install it on the website

Begin analysis with collected data

Say 6 steps, but once you get used to it, this process happens very quickly, in less than 5 minutes you can go into analysis already.

If you sign up for a Smart Convert heatmap trial account, you can see the installation instructions here.

Why should we use heatmap for website?

The goal of a website is usually a place to serve the needs of finding information, registering services or buying products, but if people visit the website and have difficulty searching for information, they can leave the website. but don't want to go back.

Analyzing the "difficulties and obstacles" is only one part of the visitor analysis model. In addition, we can analyze the motivation as well as the factor that motivates them to convert when entering the website.

That's why you need to use heatmap, because when you look at it, you can tell right away if people have:

Find valuable information?

Click on links, buttons or CTAs on the page?

Pay attention to the important elements you want them to see?

Distracted attention by something?

Where did the problem go and why did it exit the site?

On a higher level, heatmap helps you to:

Draw a visual picture for the client or boss, help them understand what's going on without looking at the data.

Make informed, data-driven decisions on issues like testing, updating and redesigning a website

Measure improvement

Provide strong evidence for your proposal of the website

3 Basic heatmap types

Heatmap is just the general term for 3 different types of behavioral measurement, including Scroll-map, Click-map, and Move-map.

There is already an article on heatmap features that covers these three, but this article will be more detailed.

Click map - Click chart

Click map shows the locations that visitors often click (on PC), finger touch (Tap) on the phone / tablet.

Hot colors (red, orange, yellow) indicate the most clicked / touched positions, while cold colors (green, blue) are the least clicked / touched positions.

When to use clickmap?

Check if visitors click on links, buttons, CTA or not.

(Note: click tracking on a website can be done with Google Tag Manager - GTM software by inserting the tracking / tracking code on the locations you want, however there will be cases where visitors click. in places where you didn't insert the code)

Check for places that are clicked but not linked. If so, then they are misunderstanding the information linked to, or need to find more information.

Compare behavior on different device types. Visitor behavior on Desktop

Move map - The mouse drag chart

Move map, which shows where customers are frequently hovering over the page. The longer the cursor stays at a certain point, the hotter the place will be.

See the areas that are most frequently noticed (mouseover)

See if the important element on the page is in the visitor's attention

See if they interact with more regions than others

See if they are distracted by too many on-page factors

Scroll map - Scroll map chart

Scroll map shows where visitors scroll to exit the page. The hotter the color, the higher the proportion of visitors (to total visitors to the entire page) at that location.

Some scroll charts show the percentage of visitors in a position when you point your mouse to that location, others next to the% of visitors, also show the average time they dwelled. at that location (in seconds), so you can gauge their interest.Usually, when the range of colors turns cold (from green to dark) there is only a smaller percentage of visitors. is going to the bottom of the page.

In addition, you can also see a sudden color change between areas, which occurs when a large percentage of visitors stop scrolling at 1 point on the page.

When to use Scrollmap?

Find important information (that you want people to see) ignored. If so, put it in a position that is easier to see. For long and informative pages like a landing page, this works well.

Find where visitors left the most pages. Sometimes they stop scrolling because they think the page is out, nothing else.

See where the average fold is located, to focus your engagement efforts on the most valuable part of your website. (The average fold is the "invisible" line between the first part of the screen when a visitor visits the website without scrolling and the rest.)