Learn / Guides / Heatmaps guide

Back to guides

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, what they look at or ignore.

Hotjar Tools

Last updated

5 Oct 2021

In this guide, you’ll find an introduction to 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 heat maps are when it comes to improving and growing your website.

What is a heatmap?

A heat map (or heatmap) is a graphical representation of data where values are depicted by color. Heat maps make it easy to visualize complex data and understand it at a glance:

The practice we now call heat maps is thought to have originated in the 19th century, where manual gray-scale shading was used to depict data patterns in matrices and tables.

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 specialist software like Hotjar.

What is a website heat map?

Website heatmaps visualize the most popular (hot) and unpopular (cold) elements of a webpage using colors on a scale from red to blue.

By aggregating user behavior, heatmaps facilitate data analysis and give an at-a-glance understanding of how people interact with an individual website page—what they click on, scroll through, or ignore—which helps identify trends and optimize for further engagement.

Heat maps 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.

Types of heatmap

Heat map is really an umbrella term for different heatmapping tools: scroll maps, click maps, and move maps. Knowing the difference is handy, as each type helps you investigate a slightly different aspect of your website performance.

Hey product teams, checkout the top 12 behavior analytics tools

If you really want to improve your website or app, looking at metrics like pageviews, bounce rates, and conversion rates alone isn’t enough—traditional metrics are out of context: they leave you guessing and making assumptions about what users want.

Happy woman

Scroll maps

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

Click maps

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

Move maps

Move maps track where desktop users move their mouse as they navigate the 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.

Desktop & mobile heatmaps

Desktop and mobile heat maps 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.

See it in action

This is what a Hotjar scroll map, click map, and move map look like on a previous version of this guide. Toggle between different heatmap and device types and play around!

The benefits of using heat maps on your website

Heatmaps help you understand how people interact with your website pages, so you can find answers to business-critical questions such as ‘why are my users not converting?’ or ‘how do I get more visitors to take action?’ Using heatmaps, you can determine if people 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, heat maps help you make informed, data-based decisions for A/B testing, updating, or (re)designing your website. And they are also useful on a wider business scale: heat maps 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 heat map!

Now that you know what heat maps are and why you should start using them on your site, level up your knowledge by exploring the next chapters.

The remaining chapters of this guide cover:

Heatmap FAQs

Set up your heatmap today

Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.