Last updated Feb 14 2020

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.

What is a heat map?

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:

Heatmap data visualization
THE DATA ON THE LEFT IS THE SAME AS THAT ON THE RIGHT—BUT ONE IS MUCH EASIER TO UNDERSTAND

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.

heat-map-example
AN EARLY HEAT MAP 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 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.

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, 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!

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 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 heatmap analytics with traditional web analytics and behavior & feedback tools
  • A heatmap infographic
    Everything you need to know about heatmaps—in infographic format.

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!
hub-image-placeholder-CTA-box

Heatmap FAQs

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

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.

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).

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.

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.

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’.

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.

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.

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.

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.

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 research can be costly, usually takes place in a lab, and requires research participants to wear specialist equipment, whereas mouse-tracking (also known as click-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.

Hotjar was founded on the premise that to truly understand your users, you need to combine qualitative and quantitative analysis. Insights from heat maps can be easily combined with those from Google Analytics (or other analytics tools) to get a more accurate picture of how people interact with your website pages.

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.

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.

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.