Last Updated Aug 20 2019

The complete guide to website heat maps

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.  

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 a website.
Set up your Heatmap now
Sign up for a free Hotjar account, add the tracking code to your site, and start using heatmaps today.
heatmaps-hub-lp-intro

What is a heat map?

A heat map (or heatmap) is a graphical representation of data where values are depicted by colors. Website heatmaps visualize the most popular (hot) and unpopular (cold) elements of a webpage using colors on a scale from red to blue. With heatmaps, you can immediately spot what your users are clicking on, scrolling through, or ignoring.

By aggregating user behavior, heat maps give an at-a-glance understanding of how people interact with an individual website page, which helps identify trends and optimize for further engagement.

what-is-a-heatmap
A SCROLL MAP (LEFT) AND A MOVE MAP (RIGHT) ON THE HOTJAR.COM HOMEPAGE
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. 

Scroll maps

scroll-map
An example scroll map
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-map-1
An example click map
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-map
An example move map
Move maps track where desktop users move and pause their mouse as they navigate the page. The ‘hot’ spots in a move map represent where users pause their mouse, 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-mobile-heatmap
A desktop (left) and mobile (right) click map
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, 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!
benefits-of-using-heatmaps
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 heatmap guide cover:

Real heatmap examples

A deeper dive into heat maps, with real examples and an overview of the best heatmapping use cases for your website.

How to analyze a heatmap

A 5-step checklist you can run through to get actionable insight from heatmaps.

Heatmap case studies

Practical success stories from marketers, designers, and e-commerce & product managers who used heat maps to improve their sites, increase conversions, and grow their businesses.

Creating a heatmap

The setup steps for the Hotjar Heatmap tool (and yes: there is a free forever plan you can use).

Advanced heat map insights

How to super-charge your analysis by combining heatmaps with traditional web analytics and behavior & feedback tools.

Set up your heatmap today

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

Free forever. Get started!

Heatmap FAQs

Got a question about heatmaps?

We collected 10+ of the most popular questions people ask about heatmaps and answered them below.

What is a website heat map?

A website heat map is an aggregated visualization of user mouse movement, scrolling, clicks, and taps. Heat maps are used by designers, UX specialists, and marketers to discover website usage patterns and make data-informed optimizations to increase conversion rate and revenue.

What does a heat map show?

A heat map shows a color-coded overlay of mouse (and tap) movement on a single website page. The ‘popularity’ of page elements is displayed using a color scale from red (the most popular parts of the page) to blue (the least-used parts of a page).

How does a heatmap work?

Hotjar heatmaps work by creating a copy of your page’s HTML code, then categorizing each element by their tag, parent elements, and IDs or classes where relevant. When visitors view the page, Hotjar collects usage behavior and maps all the elements users interact with to the master heatmap report. Heatmap data is sorted into three heat map categories for easier analysis: click map, scroll map, and move map.

Why do we use heat maps?

The primary purpose of heat maps 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.

Heat maps are also a great first step for further user behavior research, like viewing session recordings and collecting survey feedback.

How do I create a website heatmap?

To create a website heatmap, you can use a heatmap tool or software like Hotjar. Sign up for Hotjar, add the Hotjar tracking code (a JavaScript snippet) to your website, then navigate to the Hotjar Dashboard. Click ‘Add Heatmap’, select the page you wish to target, then click ‘Create Heatmap’.

How do I read a heatmap?

You can read any website heatmap in two ways: by looking at the visualization and by reviewing the raw data points. You can spot click trends and issues at a glance thanks to the color-coded nature of heatmaps (red means the most interaction, blue the least). Raw heatmap data tables will reveal more specific insights, such as the HTML elements or pixel locations of clicks and views in order of popularity.

Who invented heatmaps?

The term ‘heatmap’ was first used (and trademarked) by American software designer Cormac Kinney in the early 1990s, after he developed software to graphically display real-time financial market information for traders.

Can I use a heatmap on my Shopify store?

You can set up a heatmap on Shopify and see exactly where customers click on your pages by installing the Hotjar Shopify app or manually adding Hotjar’s tracking code to your Shopify theme.

Can I use a heatmap on WordPress?

You can use heatmaps on any self-hosted WordPress website to find out where users click by installing Hotjar’s WordPress heatmap plugin, or manually adding Hotjar’s tracking script to your WordPress site.

What’s the difference between mouse tracking and eye tracking?

For user experience purposes, eye-tracking measures where people look when viewing a website, whereas mouse tracking measures where people move and click their cursors (or tap on mobile). Eye tracking can be costly, usually takes place in a lab, and requires research participants to wear specialist equipment, whereas mouse tracking is very affordable (even free) and can generate similar heatmaps.

Studies suggest that there is a positive correlation between eye tracking and move heatmaps, as people tend to look where their cursor is located.

Where can I find a free website heatmap?

The best free website heatmap tool we know of is Hotjar’s ‘Free Forever’ basic personal plan, which allows you to collect heatmap data from up to 2,000 pageviews.

Will heatmaps slow down my website?

Technically speaking, any heatmap script you add to your website could potentially slow it down, but Hotjar has been designed to minimize the risk of slowing down your website as much as possible.

Hotjar’s tracking script loads asynchronously, meaning it loads alongside everything else on your website, and uses a CDN (Content Delivery Network) and correct browser caching to keep things loading fast.

Can I use heat maps and comply with GDPR and privacy regulations?

To comply with relevant privacy and GDPR regulations, you need to use a heatmap tool that allows you to responsibly manage any user data you collect. Hotjar has built-in compliance features that let you use the heatmap tool in a GDPR-compliant manner.

All personally identifiable information is automatically anonymized on the end user's side on all heatmaps, and you can also add additional form suppression filters to block any elements you require.