There are many ways to understand how people interact with your website. You can look at analytics, watch session recordings of your site visitors, or run on-site surveys.

Some of these tools are better than others in helping you understand how people use and interact with your site.

For most digital marketers and conversion specialists, heat map tools provide a comprehensive overview of visitor behavior.

Heat map software tracks visitors’ clicks, scroll depth, and mouse movements for all visitors on all devices.

The software presents the data in one easy-to-read graphical report. It provides an at-a-glance understanding of how people interact with the site, making heatmaps an excellent tool for data analysis.

What is a heat map?

heat maps

A heat map is a data visualization that displays spatial variation with color. The variations can be by hue or intensity. Heatmap platforms show variation through colors or intensity, providing visual cues about how the phenomenon is clustered or varies over space.

Heat maps were originally manual and used gray-scale shading systems on matrices and tables to see patterns with data,

As early as the late 19th century, we see that scientist Loua visualized social statistics across the districts of Paris using a shading matrix.

In 1957, Sneath displayed cluster analysis results by swapping the order and location (or row and column) of two matrices–the clustering.

Cormac Kinney patented the term ‘heat map’ in 1991 to describe a two-dimensional display that shows financial information. The company that acquired Kinney’s patent in 2003 unintentionally allowed the trademark to lapse.

What is a website heat map?

A website heat map is a graphical representation of the visitor interaction data shown in a diagram or map where differently colored points on the map represent different data sets and values.

website heatmap tools capture visitor clicks and movement, scroll depth for all devices in one report. With aggregated user behavior, heatmap facilitates data analysis and provides an at-a-glance understanding of how people interact with this website.

Website heatmaps use a warm-to-cold color scheme to show how visitors interacted with the website. Warm colors indicate the highest visitor engagement, and the colder colors indicate low levels of user engagement.

Website heatmaps are great for figuring out which section of a page has the highest visitor engagement, where visitors are clicking the most, whether they are clicking an element, whether they reach the bottom of the fold, and many other insightful aspects it users’ behavior.

How do website heatmaps work?

As visitors interact with a page on your site by moving their mouse, clicking on elements, and filling out forms, the website heatmap sends that data into a heatmap processing server that collects every visitor interaction.

Heatmap platforms typically capture visitor data as follows:

  1. Heatmap records visitor clicks when they happen, capturing the cursor’s position relative to the clicked element.
  2. The tool records the visitor cursor position and scroll position at regular short intervals that vary from one heatmap platform to the next. The more frequently these captures happen, the more accurate that the heat map data is.
  3. Heatmap software sends the data to the heatmap processing server using WebSockets or XHR requests at regular intervals.

The more visitors interact with the page, the more the heatmap stores visitors’ interaction with every element. 

By comparing and contrasting the visitors’ interaction with different page elements, the software can now create a visual representation showing different interaction intensities.

Some heatmaps are more challenging to generate compared to others. Scroll-maps show a graph of how further down a page visitors scroll are easiest to generate compared to movement heatmaps.

How to read, understand and analyze a heat map?

It’s rather a simple task once you’ve got the hang of it. Let’s take the scroll map as an example.

FigPii’s Scroll Heat Map

As you can see from this screenshot, the above-the-fold part of our pricing page gets the most visits, and the more you scroll down, the fewer visits you get.

So that means if you have important information to display for your customers, you need to keep them as high on your page as possible because if you put them down on the page, there’s a strong chance your visitor won’t see them.

Let’s take a look at a click heat map next.

FigPii’s Click Heat Map

Just like the scroll depth heatmap, click heat map shows clicks on your page. The warmer the color, the more clicks this element got, and if there’s no color appearing on certain elements, then that means the visitor didn’t click on this element or this part of the page.

You got the essential elements and guidelines of how to read a heat map. You’re now able to read any heatmap without any complications.

How do heat maps benefit your website?

You can use website heatmaps to understand how users interact with your website.

Marketers and designers alike need to capture user behavior to understand their needs better, wants, and demands.

Some of the benefits associated with this type of analysis are:

  1. Increasing wesbite conversion rate by figuring out areas of the site that are not working well for visitors and fixing these.
  2. Understanding the areas of your site that are getting the most/least interaction so you can focus on these, thus increasing your conversion rates

Different types of website heat maps

There are mainly three different types of heat maps:

-Click Maps

-Scroll Maps

-Mouse Movement Map

Some heatmap software tries to provide additional types of heatmaps, such as attention heat maps and geographical heatmaps.

Not all of the different heat maps have the same usefulness. When users first start using heat map software, they are usually fascinated by it. However, their fascination disappears when they try to dig up useful or actionable information.

With each type of heat map, you will see us answer two questions that we use to judge the usefulness of a heatmap:

  • Does the heatmap provide useful information?
  • Does the heatmap provide actionable information?

Scroll heat maps

Scroll maps are all about understanding how visitors move through content on your site or application. This heatmap provides a data visualization of how further down a page visitors scroll (scroll depth), average scroll movement per page, and the total number of scrolls across different regions on each page.

Scroll maps are helpful when trying to determine where you should place content or discovering what percentage of users see specific content on the page.

Scroll heatmap allows you to see the “average fold height” of your pages— how many lines down people take in a typical visit. Anything above the fold is visible and seen by everyone visiting your page. A small percentage will only see anything below the fold of them.

How useful are scroll heat maps?

A scroll map is useful to figure out if people view what you might consider an important piece of content on your site.

Let’s say you notice that some of your important messaging are placed below the fold, where only 10% of the visitors view it. This data visualization will tell you that you should move that content to a higher location on the page.

Scroll maps allow you to see if all of your content gets viewed or only some of it— and how further down the fold are visitors scrolling.

It might also tell you where they stop reading– this can help in both writing more compelling copy and figuring out what type of images are best for each piece of text.

The bottom line with scroll maps: anything above the fold should have an important message; everything else should support those messages but not contain any major information or calls.

When do you use a scroll Heat map?

You want to use a scroll map to see:

  1. How visitors are reading a web page.
  2. Determine the best placement for different elements on the page.

How useful is this heatmap: 8 out of 10

How actionable is a scroll map: 8 out of 10

Mouse Movement Map

Mouse movement heat maps show you how visitors move their mouse around the page. In addition, these heat maps provide additional information, such as the total number of clicks on different elements on the page.

Research shows that people tend to put their mouse where they direct their attention.

While mouse movement heat maps look pretty, we do not think they are beneficial! Instead, they are the epitome of data visualization that provides marketers with little action.

How useful is the mouse movement heatmap: 5 out of 10

How actionable is mouse movement heat map: 3 out of 10

Click Heat Maps

These heat maps show you how visitors interact with different elements on the page. They provide information such as the total number of clicks, average click time per element, and the total number of mouse movements across a specific area on the page.

Click maps are useful in discovering buttons/navigations which users are ignoring. For example, imagine if you have a large CTA button on the screen that you want users to click on.

However, the click heat map shows you that visitors are not clicking on it.

Another example is discovering which elements in your top navigation attract more clicks and which elements are not getting any clicks.

Segmenting Click heat map data

Some heat map platforms allow you to segment how visitors from different traffic sources interact with the different elements on the page.

Let’s take an example with a page that receives 1,000 visitors.

The main button on the page gets 100 clicks.

By breaking down the numbers further based on traffic source, you discover the following:

Let’s take an example of two traffic sources:

organic traffic

  • Website visitors coming from organic traffic: 100
  • Website visitors coming from organic traffic who click on the button: 30
  • The click rate for website visitors coming from Google organic: 30/100 = 30%

Google PPC:

  • Website visitors coming from Google PPC: 400
  • Website visitors coming from Google PPC who click on the button: 20
  • The click rate for website visitors coming from Google organic: 20/400 = 5%

Questions to ask:

  • Why is there such a discrepancy between the two traffic sources? Why is a user coming to the web page from Google PPC interact differently from a user coming from Google organic?
  • What messaging is the user seeing before landing on the website, and how does that impact their action?
  • What analysis should you consider as a marketer?
  • How does discrepancy impact the website conversion rate?

How useful is the click heatmap: 9 out of 10

How actionable is click heat map: 9 out of 10

Attention Heat map

An attention Heat map provides a visual representation of where users have spent the most time on your page.

Attention heat maps are sometimes known as time heat maps. This type of heat map is derived from scroll heat maps; however, they rely on showing time instead of scrolling. In theory, these heat maps attempt to measure how long users spend on a particular piece of content.

How useful is attention heatmap: 5 out of 10

How actionable a geographical heatmap: 3 out of 10

How do I create a website heat map?

1. Log in to FigPii. 

2. The FigPii code will appear at the bottom section of the dashboard3. Click on “copy code”4. Paste the FigPii Tracking Code into the <head> section of your website.

3. Click on “copy code”

4. Paste the FigPii Tracking Code into the <head> section of your website.

FigPii integrates with major CMS and e-commerce websites, check our full list of integrations right here

5. Check your FigPii dashboard to verify the installation. When the tracking code is installed on your site, the tracking indicator will show you that the code is active.

Once you have added the FigPii Tracking Code to your site, you will need to wait for about an hour to check if it is installed correctly. This usually happens the moment your site is loaded with the FigPii tracking code installed in. But there can be a delay for up to an hour before it shows as “Active”.  

6. log in to FIgPii’s dashboard, and go over the heatmap section from the side menu.

7. Press on create a heat map

8. Name your heat map

9. Choose the number of recordings that you want

10. Choose which platform you would like to record, you can choose mobile or desktop.

You’re also able to track new visitors or returning users.

11. Choose which page or pages you would like to track with your heatmap.

12. Configure your map with advanced options that help you create more accurate data

You’re done! Now you’ll be able to track your users like you never could before!

How do multi-page heat maps work?

All you have to do when creating your heat map is to add all of the pages that you need to track in step 4 when creating the heat map.

A multi-page heat map captures the data from multiple pages on your site and displays it over a single page representing all of these pages.

Let’s say that you run an e-commerce website and want to see how users interact with the different product pages.

Unfortunately, you do not have enough users coming to the different product pages, so it would be great to create a heat map that shows how users interact with ALL of your product pages.

That is what a multi-page heat map does. It combines the visit clicks from all the product pages and displays it as a single page.

Since the data is from all the product pages, which page will the data be shown?

Different heat map tools handle this situation differently.

In FigPii, we provide two options:

  • At first, FigPii shows the heat map data on the first page a user comes to from the group of pages. So, if you create a heat map for 1,000 product pages, we will show the data on the first product page that a user landed on after you created the heat map.
  • FigPii allows you to change the page on which the data is displayed. If for some reason, you do not like the page on which the data is displayed on, then you have the option to select a different page.

What types of heat maps for a WordPress site?

You should ask yourself how much traffic do you get to the different pages on the site?

At a minimum, you should consider creating four different heatmaps for a WordPress site:

  • Homepage heatmap – single page heatmap
  • Posts heatmaps – this is a multi-page heatmap
  • Category page heatmap – this is a multi-page heatmap
  • Contact us heatmap

What types of heat maps for a Shopify site?

Similar to any other type of site, start by assessing how much data the different pages of the site receive.

At a minimum, you should consider creating four different heatmaps for a Shopify site:

  • Homepage heatmap – single page heatmap
  • Category page heatmap (collection pages) – this is a multi-page heatmap
  • Product page heatmaps (PDP) – this is a multi-page heatmap
  • Cart page heat map – single page heatmap
  • Checkout heatmaps – single page heatmap
  • About us page heat map – single page heatmap

When creating a multipage heatmap for a category or product page, start by figuring out the URL structure for these pages.

Your heat map tool will expect you to input a way to identify the group of pages on the site.

Let’s take an example of using FigPii to set up a heatmap for category pages on an e-commerce site. Let’s assume that the site has the following structure for its collection pages:

mysite.com/collections/men

mysite.com/collections/women

mysite.com/collections/accessories

FigPii will allow grouping these pages in multiple ways:

  1. You can use a simple contains (because I know that all the category pages have the word collections
  1. You can use a regular expression to identify the pages.

Creating heatmaps for checkout pages on Shopify

Recently, Shopify limited the ability of non-Shopify plus members to insert javascript in the header of the checkout pages. As a result, you will NOT be able to create a heatmap for checkout pages without inserting the heatmap code into the header of the checkout pages.

What types of heat maps for an e-commerce site (Magento, bigCommerce, Woocommerce, etc.)?

Similar to any other type of site, start by assessing how much data the different pages of the site receive.

At a minimum, you should consider creating four different heatmaps for a Shopify site:

  • Homepage heatmap – single page heatmap
  • Category page heatmap (collection pages) – this is a multi-page heatmap
  • Product page heatmaps (PDP) – this is a multi-page heatmap
  • Cart page heat map – single page heatmap
  • Checkout heatmaps – single page heatmap
  • About us page heat map – single page heatmap

When creating a multipage heatmap for a category or product page, start by figuring out the URL structure for these pages.

Your heat map tool will expect you to input a way to identify the group of pages on the site.

Let’s take an example of using FigPii to set up a heatmap for product pages on an e-commerce site. Let’s assume that the site has the following structure for its collection pages:

mysite.com/products/men-product.html

mysite.com/products/women-product.html

mysite.com/products/accessories-product.html

FigPii will allow grouping these pages in multiple ways:

  1. You can use simple contains (because I know that all the product pages contain the word product
  2. You can use a regular expression to identify the product pages

Do heatmaps cause a slow down for the website

Photo by Frans Van Heerden from Pexels

Every JavaScript code you add to your site can affect it and will most likely cause performance degradation.

So, yes, there is some impact to using heatmap script on your site.

Heatmaps are designed to have a minimal impact on your site performance.

This is primarily because heatmap scripts ONLY work in modern browsers, which execute JavaScript efficiently.


Like most other analytics tools, they all require a modern browser to run, including google analytics.

That is the reason our analysis has shown that some heatmap software causes page load times that are anywhere between 300 to 500 milliseconds.

Also, you might need to optimize your web pages to minimalize the effects of the heatmap javascript code, you need to optimize your images, the structure for these pages, make sure that your code is optimized, etc.

Why does my page speed test tell me my pages and website are slower when using a heatmap platform? 

One of the more popular ways to test page speed load time is to use front-end performance evaluation tools such as Google PageSpeed Insights, Web page test, or GTmetrix

There are a few things you should consider when using these tools to measure the impact of the heat map script on your page load time:

Some of the tools, such as Google’s page speed tool, use a “mobile-first” approach for its scoring, and it is designed to measure the load time of pages on mobile devices first before desktop or laptop computers. 

When looking at the reports from these pages, you should distinguish between page interactive time and page load time.

The page interactive time is all about how long a user spends on a page and what they do while interacting with elements that are not loading. You can find the page interactive time using Google Analytics reports as well.

On the other hand, page load time is the time it takes for all elements on a page to load. The users can interact with the page while the browser is still loading its element.

Remember that a heatmap tool will have to send visitor data back to the processing server. That means the connection between your page and the processing server is still open.

So a tool such as Google page speed insights reports that the page document is still loading while the document loading is complete in reality.

How do you make sure that your heatmap tool does NOT slow your site?

There are three things that every heatmap should make use of to ensure it does not cause a slow down for your site.

  1. Make your JavaScript load asynchronously so that it doesn’t block the rendering of your page. Although most heatmap scripts are loaded asynchronously, a few platforms load an initial synchronous call to the server, causing a page slow-down.
  2. Use a content distribution network (CDNs) to serve the end-users on behalf of the origin servers. The CDN caches the script in multiple locations worldwide so that it can be delivered faster for all visitors globally.
  3. Make proper use of the browser cache. Although the script loads asynchronously, it also takes advantage of the browser cache by sending a 304 response for any script that has been previously loaded. It is still important to get the script loading and running as quickly as possible when tracking visitor behavior.
  4. Make sure that you’re not running multiple analytics codes at the same time, use Google Tag Manager to keep track of which codes you have installed and use light analytic tools like google analytics to gather all the data you need.

The top heatmap tools: how to choose the best heatmap tool for your site

Tools that allow you to create a heat map or evaluate heat maps include: 

Crazy Egg

Hotjar

FigPii

Mouseflow

Google Analytics Heat Map

We have written an article on the best heatmap tools to compare the best heatmap tools available and the pros and cons of each.

Conclusion

Website analytics are extremely important for any business, that’s why online business has google analytics installed for example.

They want an overview of what’s happening on your website, and that’s what website heat maps help you do best.

If you’re looking for ways to increase your website’s conversion rates and engagement, heat maps are a valuable tool.

Heat maps can help determine what are successful pages on your site by tracking where people click on different parts of it.

By using this information, you can make changes that result in more conversions. The best way to start implementing these strategies is with an eye-catching heat map!

FigPii specializes in providing high-quality web analytics tools such as heatmaps, user polls, A/B testing, and session recordings so signup today for 14 days free trial period and see how we can grow your business together!

Heat maps by FigPii

Author