The complete guide to website heat maps
Hey, product teams,
check out the top 12 behavior analytics tools
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 your website.
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:
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.
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 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 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:
- 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.
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.
How do I create a website 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?
What’s the difference between mouse-tracking and eye-tracking tools?
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.
How should I use heatmaps with other analytics tools?
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.
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.
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!