Illustration by Beth Anne Kinnaird

Website Heat Mapping is a data visualization technique that shows user behavior on a website or app using color to demonstrate user engagement. Heat mapping software enables businesses to further understand how individual website pages are performing. This qualitative data allows designers to better understand the “why” behind our user’s experience in order to help us constantly improve.

Website heat maps allow businesses to identify which areas are getting the most attention as well as areas that may need to be revisited. These effective visualizations have a lot of power if used correctly. We are going to dive deep into heat map design techniques in order to empower you to unleash their power to maximize your business potential.

How does a heat map work?

Heat mapping software collects data from a webpage and displays which areas of the webpage are clicked the most using a dark-to-light color scale. The area users click most often receives a darker red color while areas with fewer clicks and interactions are represented with a blue color. Globally, red represents heat while blue represents coolness. For that reason, this color tracking method is used across all types of heat maps. Some software incorporates other color scales so always check the legend for verification. See this example below:

A typical heat map report. The red colors indicate where users have clicked most.
A typical heat map report. The red colors indicate where users have clicked most. Image credit Fresh Van Source.

These quantifiable visual cues allow a business to gain deeper insight into how the user is interacting with a design. Often, the path which designers create for users to flow through is different from how users actually navigate. Heat maps can help to clear up any ambiguity amongst how users are interacting with particular pages.

Why should I use a heat map?

User research comes in two forms: quantitative and qualitative. The majority of traditional quantitative analytical tools, such as Google Analytics, only tell you how many visitors came to your web page and how many actually converted. These tools give businesses concrete, quantitative numbers such as how “x” came to the website, “y” converted, and it took them “z” amount of time to do so. Other quantitative analytical tools, such as surveys, card sorting, A/B testing also yield concrete numbers allowing companies to put a number on the usability of their product and compare different designs. What these quantitative tools fail to address is the “why” behind the user’s behavior. This lacking qualitative data is where heat maps come into play.

To better understand the use of heat maps, here are some specific instances when heat map use is most common:

  1. Redesigning for a more user friendly UI: Redesigning a more intuitive UI can range from a small adjustment to a complete overhaul. In an effort to constantly improve upon your design, companies leverage heat maps to help them gain insight as to what is working and what can be improved upon. Web design is an artform in itself and there are many web design articles available to help you understand best practices. Once you have your design, a heat map is a way to test your design and understand how users are interacting with it.

Heat maps can also serve as a validation to previous UI enhancements. These adjustments can range from adjustment to call-to-action (CTA) copy, content placement, color scheme choice, and other types of changes. Once you make these adjustments, you are able to measure their success by comparing heat maps. Once you uncover what works best for your audience’s engagement, you are able to reuse these elements throughout your design to make it a more delightful, intuitive user experience with increased conversions and engagement.

  1. Increasing Sign-Ups: If your business’ goal is to increase sign-ups, the usage of heat maps is also a smart choice. For a business-to-business Software-as-a-Service company, sign-ups for a demo or trial can make or break an organization. Most of the time, taking a different approach to your form and placement can have a direct effect on sign-ups. Some companys’ main source of clients stem from these sign-ups which in turn qualify leads for the sales team.

    For example, if you have your free trial request form at the bottom of your page, but your website is getting great traffic due to stellar SEO, then how can you explain the gap between visitors and sign-ups? Heat maps can give you insight into where the users are clicking. Using a heat map, you are able to identify the most popular sections of your page and place the sign-up form in one of those areas to drive maximum visitor engagement.
  1. Reducing Bounce Rate: If reducing bounce rate is your goal, heat maps may be a great option. If you are looking to explain your bounce rate, heat maps can help you identify distractions on your website. Additionally, you are able to optimize content placement, adjust navigational gaps, and understand what type of content to use in order to increase engagement and reduce bounce rate which, in theory, will increase conversions.
  2. Fixing Navigational Gaps: When your website’s navigation does not match the mental model of your visitor, a heat map can provide insight as to where you’ve gone wrong. To eliminate this friction, heat maps can help you readjust your navigation to further help users find exactly what they are looking for.
  1. Running A/B Tests: When comparing one version of a website to the other, heat maps will give further insight as to why one is out performing the other. Heat map analytics will show how users are reacting to and navigating through the different versions. Designers use these comparisons to help understand why one experience is out performing the other. For this reason, this is the most common instance of heat map design.

What can I learn from using heat maps?

There are many qualitative insights one can gain from heat maps. Upon an initial introduction to heat maps, it may not be so apparent as to their power.

Here are some questions to ask yourself when analyzing heat maps:

  1. Which headline or banner converted more visitors?
  2. Which image attracts attention? Did users click unlinked images?
  3. Do visitors locate search options with ease?
  4. Do images or text receive more clicks?
  5. Do users interact with sidebar content?
  6. Are users reading the content or just scrolling through?

Various types of heat maps

Now that we have a good understanding of the foundations of heat map design, let’s break down the various types.

  1. Click Tracking Heat Map: The most traditional type of heat map showcasing visual representation of how a user interacted with a page. Click tracking heat maps use a warm color to signify increased engagement and a blue color to suggest the opposite. The software records users’ clicks over a period of time and creates a visual representation of cumulative user behavior. This report is commonly referred to as a Confetti Report. A common use for a click tracking heat map is to determine if the cause of a low CTA clickthrough rate is due to lack of desire or lack of findability on your page. Are users simply not clicking, or are they trying to click elements that are not clickable?
A click tracking heat map. The areas with the most engagement are red while areas with the least are blue.
A click tracking heat map. The areas with the most engagement are red while areas with the least are blue. Image credit Round Peg.
  1. Scroll Map: A second type of heat maps record visitor’s scrolling behavior. This empowers an organization to see the exact point to where visitors scrolled on a page before leaving the page or site. This can help designers understand if the length of a page is ideal for their user experience. Understanding where users scrolled before bouncing can help guide future design decisions. The bounce could be due to lack of engaging content, and a scroll map can help evaluate changes which can then be validated with A/B testing.
A scroll heat map. Included is a legend to allow the user to understand how to read and understand the data.
A scroll heat map. Included is a legend to allow the user to understand how to read and understand the data. Image credit Crazy Egg.
  1. Mouse Tracking Heat Map: This type of heat mapping tracks visitors’ mouse movement, helping you identify areas where visitors hover most often along with which areas receive the least attention. Tracking how users position their mouse throughout the experience can help a company identify the optimal spot to place things such as CTA buttons. Furthermore, mouse tracking heat maps help you determine the ideal positioning of elements on a webpage.
A mouse tracking heat map software. It combines a heat map with the path of a user’s pointer.
A mouse tracking heat map software. It combines a heat map with the path of a user’s pointer. Image credit Moving Traffic Media.
  1. Overlay and List Reports: An overlay and list heat map generates the percentage of clicks your website receives per element. The software will break down each element visually, giving a percentage of clicks it has received in comparison to the total amount of clicks on the page. This allows an organization to see exactly which elements attract clicks from their users.

In an overlay report, an organization is able to view their page alongside visible annotations next to particular elements on the page. These annotations include information such as percentage of clicks and any other demographic information for that particular element.

An overlay report. It combines a heat map with the percentage of clicks that area received compared to the rest of the page.
An overlay report. It combines a heat map with the percentage of clicks that area received compared to the rest of the page. Image credit CXL.

A list report is similar, but the information is presented in a list format. This allows an organization to identify trends in data and sort the information in ways that suits their needs.

A list report containing the data from the overlay report presented in a list format.
A list report containing the data from the overlay report presented in a list format. Image credit Ptengine.
  1. Eye Tracking Heat Map: This cutting edge technique tracks visitors’ eye movement as they experience your webpage. Eye tracking software plots the data in the same color scale method as a typical heat map. Knowing exactly where users look as they navigate can help a business in many ways. Knowing what catches your user’s eyes helps you know what patterns to continue and what to discontinue. If users gravitate towards the center of your page, you know to locate the most important elements in this area. On the other hand, if a user rarely looks at the right side panel, then maybe you’’ want to avoid placing a CTA in that area.

There are many theories surrounding eye scanning patterns, at the end they day these patterns help a designer know where to place elements that impact conversions the most.  It is a more rare and expensive form of heat mapping. If you are interested in seeing how eye tracking works in action, be advised that you may need to invest in special software and peripherals such as eye tracking glasses.

This eye tracking heat map shows what caught the user’s eye when they visited the page.
This eye tracking heat map shows what caught the user’s eye when they visited the page. There is a legend to let the user know that red stands for areas that caught the user’s eye the most. Image credit VWO.

Cheap heat mapping software

Using heat maps does not have to mean breaking the bank. There are many free or affordable services out there to help suit your business needs.

Crazyegg specializes in heat maps, scroll maps, user recordings, and A/B testing.

Crazy Egg: Crazyegg specializes in heat maps, scroll maps, user recordings, and A/B testing.

Mouseflow is useful for tracking clicks, scrolls, mouse movement, forms, and more. It measures form errors, blank submissions, patterns, and more.

Mouseflow: Mouseflow is useful for tracking clicks, scrolls, mouse movement, forms, and more. It measures form errors, blank submissions, patterns, and more.

Hotjar is known for combining analysis and feedback tools to improve a website's user experience and conversions.

Hotjar: Hotjar is known for combining analysis and feedback tools to improve a website’s user experience and conversions. Their easy-to-use software allows unlimited users and has been an industry leader since 2014.

Motamo allows a company to evaluate the user experience, conversions, and optimization metrics.

Motamo: Motamo allows a company to evaluate the user experience, conversions, and optimization metrics. It provides A/B testing, user recordings, and other real-time data updates.

Inspectlet records videos of visitors’ behavior, empowering organizations to understand the mindset of their users.

Inspectlet: Inspectlet records videos of  visitors’ behavior, empowering organizations to understand the mindset of their users. The software allows you to track mouse movement, scroll patterns, key presses, and more to increase your conversion rate.

Limitations with heat maps

As with most things in life, there are limitations to the information heat maps can provide. Although effective, there are some things one must consider to maximize their use. Here are the main 5 limitations with website heat maps.

  1. Too many diverse distractions that are not accounted for on the heat map. Heat map software may suggest a user struggling with an area of the site when in reality the user was actually distracted by someone in the room, a new text or email. This distraction may lead to them clicking around multiple times which yields inaccurate heat map analytics. Heat mapping software does not account for these other distractions outside the user experience.
  1. Simply because a user does not click on it does not mean that the user doesn’t find it interesting. There are other engaging elements that can’t be measured by heat maps.
  1. Heat maps do not work well with dynamic experiences where the page changes. JavaScript-heavy web pages are difficult to evaluate using most heat maps.
  1. Heat maps literally cover up the element you are trying to inspect, making it a challenge to know what element is engaged with. If you are unfamiliar with the website, you may have a challenge initially identifying what element is covered up due to the red coloring on your heat map.
  1. Finally, in a world of responsive design and varying screen resolutions, data visualization designed for a fixed unchanging aspect ratio is a recipe for inaccurate [x,y] click locations. Heat mapping software divides users into aspect ratio silos. This presents a challenge when trying to combine these silos and create an aggregate visualization. Software averages these aggregate mouse hovers and un-contextual [x,y] click locations which can lead product teams to make product changes based on inaccurate [x,y] information.

Wrapping up website heat maps

Heat map design is a powerful skill set when it comes to evaluating qualitative data for your product. Heat maps empower organizations with valuable insights into the “why” behind their visitor’s behavior. This insight helps guide future design decisions resulting in an improved user experience with increased conversions.