The complete guide to heatmaps

Heatmaps are a powerful way to understand what users do on your website pages—where they click, how far they scroll, and what they look at or ignore.

In this guide’s chapters, you’ll find an introduction to the different types of heatmaps and how to create and analyze them. You’ll also get real case studies and practical examples, so you can see for yourself just how valuable and useful heatmaps are when it comes to improving and growing your website.

What is a heatmap?

A heatmap is a graphical representation of data where values are depicted by color to display complex information in a way you can quickly comprehend. 

Product and website heatmaps visualize the most popular (hot) and unpopular (cold) elements of your content using colors on a scale from red to blue. Like this:

The data on the left is the same as that on the right—but one is much easier to understand

Heatmaps are essential in detecting what does or doesn't work on a website or page, and which parts and elements of a page users engage with.

By experimenting with how certain buttons and elements are positioned on your website, heatmaps let you evaluate your product’s performance and increase user engagement and retention as you prioritize the jobs to be done that boost customer value.

The practice we now call heatmaps is thought to have originated in the 19th century, where manual gray-scale shading was used as a visual representation to depict numerical data patterns in matrices and tables.

An early heatmap showing population density in 19th century Paris districts

The term heatmap was first trademarked in the early 1990s, when software designer Cormac Kinney created a tool to graphically display real-time financial market information. 

Nowadays, heatmaps can still be created by hand, using Excel spreadsheets, or with experience intelligence tools like Contentsquare.

How do heatmaps work?

Contentsquare Heatmaps work by creating a copy of your page’s HTML code, then categorizing each element by its tag, parent elements, and IDs or classes where relevant. When visitors view the page, Contentsquare collects usage behavior and maps all the elements users interact with to the master heatmap report. 

Why do people use heatmaps?

The primary purpose of heatmaps is to visualize website user behavior. By looking at an aggregate of all user interactions on a web page, it becomes easier to spot issues and opportunities for improvement.

Heatmaps are also a great first step for further user behavior research, like viewing session replays and collecting feedback from surveys.

How can you use heatmaps to improve your product?

Heatmaps give product teams, marketers, digital and data analysts, user experience (UX) designers, social media specialists—and anyone who sells anything online—deep insight into people’s behavior on their site, helping them discover why users aren’t adopting their product, using call to action (CTA) buttons, or converting. 

By aggregating user behavior metrics, heatmaps facilitate data analysis—combining quantitative and qualitative data—and give a snapshot understanding of how your target audience interacts with an individual website or product page—what they click on, scroll through, or ignore—which helps you identify trends and optimize your product and site to increase user engagement, conversions (CRO) and sales.

A scroll map (left) and a move map (right)

Heatmaps also usually display the average fold, which is the portion of the page people see on their screen without scrolling as soon as they land on it.

What are the benefits of using heatmaps on your website?

Heatmaps help product managers and website owners understand how people interact with their website pages to find answers to critical business questions and goals such as ‘Why are my users not converting?’ or ‘How do I get more visitors to take action?’

Using heatmaps, you can determine if users are

• Reaching important content or failing to see it

• Finding and using a page’s main links, buttons, opt-ins, and CTAs

• Getting distracted by non-clickable elements

• Experiencing issues across devices

As a visual tool, heatmaps help you make informed, data-based decisions for A/B testing, updating, or (re)designing your website. They're also useful on a wider business scale: heatmaps let you show team members and stakeholders what’s happening and get their buy-in more easily when changes are needed—it’s hard to argue with a heatmap!

Contentsquare’s Heatmaps tool continuously collects and lets you filter data and create special heatmaps based on user attributes—like the user's role or title, the date they created their account, whether they're on a trial version of your product, and more—so you can quickly find targeted insights. 

For example, product teams might use heatmaps to prioritize bug fixes or to test how users interact with a new feature.

Whereas UX and UI designers will use heatmaps to measure the popularity or dislike of a page design, and implement changes that make it easier for customers to navigate their website.

What are the different types of heatmaps?

Heatmap is an umbrella term for different heatmapping tools:

1. Scroll maps

2. Click maps

3. Move maps

4. Engagement zone maps

5. Desktop, tablet, and mobile heatmaps

Knowing the difference is handy, as each type helps you investigate a slightly different aspect of your website and product performance.

1. Scroll maps

Scroll maps show the exact percentage of people who scroll down to any point on a page: the redder the area, the more visitors see it.

An example of a scroll map

2. Click maps

Click maps show you an aggregate of where visitors click their mouse on desktop devices and tap their fingers on mobile devices (in this case, they are known as touch or tap heatmaps). The map is color-coded to show the elements that have been clicked and tapped the most (red, orange, yellow).

A click map example

3. Move maps

Move maps track where desktop users move their mouse as they navigate a page. The hot spots in a move map represent where users have moved their cursor on a page, and research suggests a correlation between where people are looking and where their mouse is—meaning that a move map gives you an indication of where people might be looking as they go through your page.

A move map example

4. Engagement zones

Engagement zones combine interaction data sets from click, scroll, and move heatmaps into one simple view.

It’s a powerful data visualization tool that helps you analyze pages in seconds, so you can get a well-rounded view of user engagement with your product.

Engagement zones help you discover new insights, like images that don’t get clicks but wow your users overall

5. Desktop, tablet, & mobile heatmaps

A desktop (left) and mobile (right) click map

Desktop, tablet, and mobile heatmaps help you compare the performance of your website on different devices. For example, content that is prominent on a desktop page might sit much further below the fold on a phone—and you need to see if interaction differs, and how.

How to create a website heatmap

You can use a free heatmap tool or software like Contentsquare to create a website heatmap.

Request a demo for Contentsquare and we’ll help you get set up for free. 

Ready to create a heatmap and improve your website experience?

Heatmaps are easy to create and understand, and they let you discover actionable insights that help you improve the user journey and your product pages to increase retention and sign-ups on your website!

FAQs about heatmaps