How to use heatmaps and user recordings to understand your website visitors and convert more

As business owners, our natural state requires juggling multiple action items every day.

There are 2 things that we should be aware of:

  1. Time and resources are scarce. You need to maximize every investment and initiative to reach its full potential.

Especially in the beginning, you want every decision that you make to have a positive impact on your users and consequently on your revenue.

  1. Your visitors’ attention is limited. They take 3 to 5 seconds from the time they land on your website to decide whether they want to give you a chance or not. You must treat their time as a commodity and make their visit as valuable as possible.

And how do you do that? Through a website optimized for conversion, of course.

Your website should be:

  1. Well written
  2. Easy to understand
  3. User-friendly

In order for your website to tick all these 3 boxes, you need to understand your visitors’ behavior and identify the biggest opportunities for improvement based on their actions.

Important things to know about your visitors and industry:

  • What makes your visitors tick?
  • What stops them from taking action?
  • Why do most of them leave without buying?
  • Where do they get stuck on your website?
  • What works and what doesn’t for your specific niche?

One of the easiest and effective ways to diagnose problems on your website and answer those questions is by analyzing your website heat maps and recordings of your visitors when browsing through your website.

This way, you can optimize your website pages so that they fulfill their intended purpose and convert more.

Let’s take a look at them one by one and I’ll show you how easy it is to set it all up for your business.

Heatmaps

What is a heatmap?

A heatmap is a visual representation of data that shows you which areas on your page get the most attention by how people interact with your page elements.

Heatmaps use colors (from warm to cool) to highlight the hottest elements on a page (the warmer the color, the most popular that area of the page is).

If visitors haven’t scrolled to the bottom of the page, that area will be displayed in a cold color.

Depending on the tool you’re using, you can play with different types of heatmaps—each report analyzing a slightly different aspect of your page performance.

For example, Hotjar offers 3 types of heatmaps:

  • Click map: This map gives you a visual overview of where visitors clicked the most on your page (the warmer the color, the more a specific element was clicked—red being the hottest).
  • Move map: This map shows where your visitors move their mouse on the screen as they navigate your page. This is indicative of where they’re expecting to find the information they’re looking for.
  • Scroll map: This map shows you how far down the page people scroll so you can get a sense of how people consume the content on your pages. The redder the area, the more visitors saw it, the hotter it is.

In a scroll map, the colors should gradually change from the warm to cold.

A sharp change in color warns you that people suddenly stopped scrolling after reaching a specific point on the page. Take note of sudden changes in color.

How to set up your heatmaps in Hotjar

First of all, you need to sign up for a free account at hotjar.com.

Then, you’ll be directed to a page that guides you on how to install the Hotjar code on your website, like this:

Once you add the code to your header and verify that it is working correctly, go to the left-hand side of your screen, in the sidebar, and click on “Heatmaps”, then click the green button that says “New heatmap” to create your first heatmap.

This will take you to a screen where you need to fill in the name of the page you want to analyze (homepage, your products page, your pricing page, your blog homepage, etc.).

Each time you fill in a field click on the green “Next” button located on the right-hand side of each field.

In the “Number of Pageviews” field you need to select how many page views you want Hotjar to collect until finalizing your report. The number of page views collected depends on the plan you chose.

With the Basic plan, Hotjar collects data from 2,000 pageviews daily, daily pageviews between 2,000 and 10,000 falls under the Plus plan, and if your website gathers more than 10,000 page views per day, that falls under the Business plan.

In the next field, select the first option “Visit a specific page” and in the URL field choose “Exact URL match” from the dropdown, then enter your exact page URL, just like in this example:

The next step is to click on the green “Create Heatmap” button and that’s it! Hotjar will add your page in the Heatmaps list.

Once your heatmap is live, you need to wait for people to visit your page, so Hotjar can start tracking their behavior and add it to your report.

When the report is available, you can click on it in your Heatmaps list to start analyzing it.

The report looks like this:

You can select the type of device you wish to see the heatmap for (ex. desktop, tablet, phone), the type of heatmap you want to see (click, move, scroll), download a detailed report of the data, and much more.

That was easy, right?

What to pay attention to when analyzing your heat maps

1. On your Click map:

Do visitors click on important calls-to-action and links?

In your click report, you should check to see if your main CTAs, buttons, links, and forms get clicks from your visitors.

Your main CTA should attract more eyeballs than any other element on your page. If it doesn’t get any clicks or gets fewer clicks than it should, the reasons could be:

  • People aren’t noticing the CTA buttons. Look at their color in relation to the other elements on your page; look at their size compared to other elements.
  • The CTAs are placed way down below the fold and your visitors aren’t getting to that part of the page.
  • There are other elements that are more visible than your main CTA and are attracting more attention (sliders, carousels, colorful images, pop-ups, etc.).
  • People don’t think it is clickable. This could be because the CTA or your links aren’t highlighted with a different color that suggests they’re clickable.
  • You have 2 or more conflicting CTA buttons and people don’t know which one they should click.
  • Too many form fields in your forms that cause people to drop off before finalizing the conversion.

Also, if you have several links on the page pointing to the same URL, this report will show you which of the links your visitors click on more.

Are there any confusing elements that shouldn’t be clickable and vice versa?

Your click map report can also reveal things that are getting clicked but aren’t clickable, but perhaps should be and vice versa.

Usually these can be logos, images that people click on thinking they can enlarge them, the “+” icon which suggests that an element can be expanded, images with buttons in them that mislead people thinking they’re real clickable buttons, videos that look like pictures and don’t get clicked, and different other visual cues that could confuse your visitors into taking an action that the element wasn’t intending.

2. On your Scroll map:

Is the most important information on your page above the fold?

Look at your Scroll map. The tool will display the “average fold” on your map, which shows you the part of the page people see as soon as they land on your page without needing to scroll.

Does that portion of the page contain your most important information? Is that section of the page convincing enough for people to want to scroll more? Is your main call-to-action visible above the fold?

You may realize that you’ve placed essential information below the fold where you see that people scroll less and less. This will tell you that you need to reorganize the information on your page so that the most valuable details sit above the fold and are easy to reach.

Do people see content that you consider important?

Analyze the percentage of people that got to every section of your page and decide whether there are certain sections that deserve more visibility than they’re getting.

As mentioned earlier, in a Scroll map, the colors should go from the warm to cold gradually on a given page.

A drastic change of color warns you that people suddenly stopped scrolling after reaching a specific point on the page, which might mean that they didn’t find what they were looking for, or they didn’t realize that there was more to the page.

You should pay attention to these sudden color changes on your Scroll map.

3. On your Move map:

Are there unusual mouse movements on the page?

This could mean that people are distracted or confused by your content and/or page elements so they lose focus and don’t know where to look for information.

If your cursor activity is chaotic and spread all over the page, it means that your content flow and page elements aren’t organized enough to take the user to the next logical step on the page.

Are there any areas of the page that receive no interaction?

If there are areas of your page that don’t see any interaction it’s a sign that you should reorganize the information in a more accessible way or remove the parts that people consider irrelevant.

When analyzing your heat maps, determine what your desired user behavior should be and then look out for anomalies.

All three reports give you the possibility to analyze them based on the device used: desktop, tablet, and phone.

Repeat the process described above for both mobile and desktop devices. You’ll usually find discrepancies between desktop and mobile. Some page elements that are visible on a desktop might not be as visible on mobile.

People interact differently with a webpage on mobile so keep in mind that you might need to adapt your design and the use of certain page elements when on mobile.

User recordings

Let’s move on to the second way you can learn about your users’ behavior and identify website problems: user recordings.

These are actual recordings of your users’ journey as they browse your website.

Hotjar recordings capture mouse movement, clicks, scrolls, taps, form submissions, and are an extremely valuable tool that will help you get a feel of how people are using your website and where they get stuck.

This will allow you to uncover errors rapidly and see where your visitors are dropping off in your funnel.

How to set up your recordings in Hotjar

In Hotjar, you can select the Recordings below the Heatmaps, in the sidebar on the left side of the screen.

Then, click on the green “Record Visitors” button.

In the next field, you need to select the number of recordings you’d like the tool to generate.

The number of recordings you can get depends on the plan you have. The snapshot will be completed once the number of recordings has been reached.

Next, you’ll choose “Visit any page” from the “Page Targeting.”

In the next field, Recording Options, you can set the rules for collecting your recordings.

Select what’s relevant to your case.

Lastly, click on the green button that says “Start Recording.”

As people visit your website and are recorded, you’ll be able to see the recordings in your Recordings list and watch them.

What to pay attention to when watching the recordings

Arm yourself with patience, get ready to be amazed, and prepare to take a lot of notes!

  • How are visitors navigating your website?
  • What are the top pages that they’re visiting? Is there a pattern that you noticed among visitors?
  • Are there pages that you consider important that they’re not accessing?
  • How much time do they spend on each page? Do they seem interested in the information? Does it take a lot of time for them to find the information they need? Do they leave the page immediately? Do they scroll around the page chaotically? If they are moving about the page chaotically this might suggest they’re not finding the information they need, or the path isn’t what they were expecting.
  • What’s their path when going from one page to another? Are there any unexpected paths that they keep using? You might consider optimizing those paths for conversion as well, such as placing more CTA buttons or links to important pages.
  • How do they interact with your calls-to-action? Do they have a hard time finding them?
  • Are they displaying unusual behavior when interacting with clickable elements or buttons, such as repeated clicking? This might suggest that a button or a link is broken.
  • Are they displaying unusual behavior when interacting with non-clickable elements? This might suggest confusing elements that seem clickable but aren’t.
  • How are they interacting with your forms? Do they have a hard time filling the fields? Do they drop off mid-way? This might mean you need to reduce the number of fields in your forms or the number of steps they need to take to complete your forms.
  • Take note of how your website loads across different devices. Is it correct on all of them?
  • Pay attention to any element that doesn’t seem to work properly.

That’s it! Imagine the amount of valuable and actionable insights you can get about your visitors and their behavior when it comes to interacting with your product or service.

From now on you’ll make kickass decisions when it comes to your business and discover the easiest way to convert your visitors into paying customers.

What are some other ways you’ve used heatmaps and recordings that proved successful for you? Let me know what you think in the comments below!

Close

50% Complete

Two Step

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.