XM Knowledge Base
Author: Adam Bunker
Subject Matter Expert: Ray Gerber
Are you struggling to understand why your carefully designed website isn’t converting visitors into customers? Keen to improve your website from a user experience point of view? Here’s the thing: the gap between your UX intentions and real-world user behavior could be costing you millions in lost revenue.
Enter digital experience heatmaps: a powerful visual tool that can uncover hidden UX issues and transform your digital customer experience…
Free eBook: The Digital Experience Playbook
What is a heatmap?
A heatmap is a data visualization tool that uses color to convey intensity or frequency.
When used as analytics tools, heatmaps act as a visual representation of activity that – in the world of websites, apps and digital tools – provide a clear way to understand user behavior by showing how visitors interact with various onscreen elements.
The principles that determine the way a heatmap is displayed have been lifted straight from the concept behind thermal vision, thermal imaging, and weather mapping. With thermal imaging cameras, for example, different temperatures are displayed on a spectrum of color, from blue (cool) to red (hot). That concept has been co-opted for UX and UI analytics to help visualize how much activity and attention various parts of a digital property receive.
Red = “Hot”
This indicates a lot of user activity, movement, or focus
Blue = “Cold”
Colder areas of your heatmap show less trafficked parts of the page
Other colors in-between – typically yellows and greens – represent the middle-ground, where yellow is warmer and green is cooler.
So if a specific button, block of text, or image is the first thing users gravitate towards, a heatmap will show those user interactions in bright red. If areas are being missed or skimmed over, they’ll be on the cooler end of that spectrum.
Heatmaps are often used to finetune user experience design by helping UX teams understand what is and isn’t working.
So that might mean identifying things like:
- Core navigation that’s being missed
- Onscreen decoration being confused for interactive elements
- Images and other media that are or aren’t grabbing people’s attention
- How far people are scrolling down a page
- How much text is actually being read, and in what order
History of the heatmap
The concept of using color to represent data values dates back to the 19th century. French statistician Loua Toussaint created one of the earliest known heatmaps in 1873 to visualize social statistics across Paris districts. The term “heatmap”, however, was coined in 1991 by software designer Cormac Kinney. He created the term to describe a 2D display depicting financial market information.
Key question: What can heatmaps really show?
Heatmaps show, in no uncertain terms, how people are really using your website or app. That’s invaluable because our UX intentions don’t often match up to reality, and user feedback sometimes doesn’t tell you the full story. Heatmaps might even show you that you need to ‘kill your darlings’ and go back to the drawing board on things you thought were obvious to the user.
Benefits of website heatmaps
A website heatmap – or a heatmap for an app or program – is a really valuable way to understand how people are interacting with it. There are various types of heat maps that you can track (which we’ll come onto shortly), and each one offers a strong way to gather visitor behavior insights that can help fuel improvements:
Understand UX issues
If users are reaching dead-ends or entirely missing what you might otherwise think is an obvious next step, then it’s time for a redesign. Heatmap tools help you learn what isn’t working from a UX or UI point of view, and fix things for future visitors.
Audit site or app content
If users aren’t scrolling down your page, or are skimming over entire sections, then you can use that information to reformat your content. That could be by cutting it down to make it more engaging, or reordering important information to areas where people are focussing their attention.
Design for greater conversion
A heatmap tool that shows you what is and isn’t working in terms of UX is an insights goldmine that can help pave the way for a website fine-tuned for conversion. Simple tweaks like placing call-to-action buttons where people naturally focus their attention or reworking page content around a human-first flow can help you drive down churn and boost sales through sheer intuitiveness.
Build a digital experience analytics strategy
Incorporating heatmap information into your business’ analytics represents a step away from purely operational metrics to more experiential data that shows how customers are interacting with your channels.
That can be really powerful. Digital experience analytics is a foundational capability in modern businesses – and those who make use of modern data streams will find doing so well worth the investment.
Forrester’s Total Economic Impact study, for example, found that organizations implementing comprehensive digital experience analytics solutions achieved an ROI of 368% over three years. That’s while Salesforce suggests that 84% of customers think the experience a company provides is as important as its products or services – making the digital experience analytics in your toolbox a crucial part of your business strategy.
What are the limitations of a website heatmap analytics tool?
Heatmaps are incredibly intuitive. You don’t need a degree in data analytics to see one and instantly understand what’s going on, which makes them a great tool for generating fast insights that everybody – across teams – can see and understand. That said, however, heatmaps do have some inherent limitations if you’re using them in isolation.
Heatmaps are visualizations of activity, but they can be fairly blunt instruments. That’s because they show the what, but not the why. In other words: a heatmap showing where user attention or clicks happen can point you in the right direction, but it won’t tell you what the cause of that behavior is.
As such, heatmaps need to be partnered with other forms of behavioral data, customer feedback, and a healthy dose of intuition.
For instance, a heatmap showing that a lot of mouse activity happens on a specific button may at first seem great until it’s partnered with session replay data that reveals those clicks are rage clicks – that would imply that the button is broken. Similarly, having eyes all over your product description can seem like a great sign from a copywriting point of view – until feedback gleaned from forms or social media reveals that customers can’t find how to actually make a purchase.
Long story short: heatmaps are a powerful tool in your arsenal, but they work best as part of a wider user behavior analytics suite than they do by themselves.
Key question: What can heatmaps do for you?
A website heatmap tool takes the guesswork out of UX and UI design – it will highlight experience gaps and areas of your digital properties that need a rethink. Moreover, they act as one part of a wider digital experience analytics strategy. If you’re using heatmaps, you’re showing that you care about the user experience more deeply than if you simply look at operational data like website traffic.
Types of website heatmap
There are several heatmap software types that can be used on a web page or in apps to help understand various aspects of user behavior. The key is in choosing the right heatmap tool for each goal…
Click heatmaps
Click heat maps show the most frequently clicked elements on a webpage through colored and shaded hot spots. This kind of heatmap can help identify your site’s most popular links, buttons, menus, etc., by showing where visitors click most often – as well as ones that aren’t being clicked as often as you’d like.
If a button or other item of page furniture is being clicked on above all the others, you’re going to want to ensure that it takes users to a page they expect and that that page is well-optimized for conversion or retention.
Scroll map heatmaps
Scroll maps visualize how far down on a page visitors are scrolling, by showing different heat gradients at various stages. This can help identify the “above the fold” area that gets the most views, as well as indicating just how far down a page people bother to look for the info they need.
If you have a web page with an overly lengthy product description, for example, you might find that people aren’t scrolling all the way to the bottom – where your call to action is. This scroll map would show that it’s worth repositioning those CTAs to where most people stop scrolling.
Movement heatmaps
Movement, or mouse tracking heatmap software, tracks cursor activity, clicks, and scrolls to reveal user flow patterns. They show the most trafficked areas and paths users take as a static snapshot. You might also be able to infer blocks of text people are reading the most, since people tend to hover their cursor on or near site sections they’re actively reading.
Mouse movement heatmaps are best combined with session replay tools that ‘recreate’ user visits to be able to show the actual behavior of their mouse (including things like rage clicks and dead clicks).
Eye-tracking heatmaps
Probably the most complex kind of website heatmap tool, eye-tracking heatmaps use cameras and software that can actively tell where people’s focus is on each page, and in which order. This shows not only what’s grabbing their attention, but the order in which people scan a page for information.
Because eye-tracking requires camera access, it’s not something you can do without specialist consent. For that reason, eye-tracking heatmaps are often recorded in focus and user testing groups.
Mobile heatmaps
Applied to mobile sites and apps, mobile heatmaps highlight activities like tap locations and swipes on smaller screens. This is especially useful for understanding how the mobile version of your site stacks up against the desktop one.
Funnel heatmaps
A funnel heatmap isn’t a traditional heatmap, but rather a visualization tool that applies the same colouring system to a funnel that shows the number of people exiting a session on each page, for multi-page journeys. That way, marketers and UX teams can understand drop-offs and conversions through each step of the site’s architecture.
Key question: What kind of heatmap is right for you?
As with any kind of analytics, the more data sources you can gather, the better. In that sense, it’s wise to opt for a website heatmap tool that can provide you with a bunch of different heatmap types – and that can turn the information they garner into actionable insight.
How to read user behavior in heatmap data
Reading what a website heatmaps has to show you is very simple on one hand, and just the start of a longer, more complex analytical process on the other.
Here’s how to get started:
Identify “hot” vs. “cold” areas |
Look for intense hot spots that indicate heavy usage, versus cold blue areas with little activity. Focus your optimization efforts on hot areas, as this will have the most impact. |
Find the most used elements |
Buttons, menus, links, and content that show up in your heatmap data as bright hot spots are clear user favorites. These are priority items to refine and highlight. |
Look for unexpected patterns |
Heat spots in odd areas could show user behaviors you probably hadn’t intended. This may require design changes to guide users – or perhaps you can capitalize on existing user interest in those areas. |
Watch for fall-off near the fold |
If heat fades off quickly down the page, it likely signals too much “above the fold” content. You might want to reduce your content, spread it across the length of the page, and visualize that there’s more content further down. |
Aid user flows |
See where people navigate from hotspot to hotspot, then try to find – and replicate – things acting as facilitators to those flows. |
Compare segments |
It’s helpful to see how the heatmaps for a web page change depending on whether you’re looking at new or returning users. This will show that new users might be missing something your returning ones know about. |
Track changes over time |
Compare data from different time periods to measure the impact of your changes – hopefully you’ll be able to spot improvements to user flow and a reduction in drop-off. |
Triangulate with other data |
Combine heatmaps with session replay data, contact center feedback and survey responses to get a more complete understanding of what’s driving the way website visitors interact with it. The most important thing here is to use heatmap data in tandem with other analytics sources to discover what user experience issues or opportunities they point to. Heatmaps make UX data visible and readable, but they need proper human analysis to maximize their value. |
Key question: What should you do with heatmap data?
Heatmaps, scroll maps, Google Analytics… These tools are all useless unless you take what they can show you and turn it into action. Digital experience analytics is all about bringing data together to highlight experience gaps – parts of the user journey that don’t match your ambition – and working to close them. Your heatmap software is just one part of the puzzle; the real value comes from combining data types and learning what your customers expect from you.
How to create a website heatmap
To get started, you’ll need a website heatmap tool that can track various types of user input and visualize it for you – it’s not possible to create a website heatmap manually.
Top website heatmap tools
Looking for a tool to help you create accurate, impactful heatmaps? Here are a few top choices:
Hotjar
Hotjar delivers a variety of heatmap styles to help pinpoint the most utilized elements on websites based on click and movement concentrations. It can also produce scroll-based heatmaps that indicate visibility and engagement relative to scroll depth.
CrazyEgg
CrazyEgg combines heatmaps with scroll maps, recordings, and A/B testing to provide a wide range of in-depth user information. Its heatmaps are presented as one snapshot from which five different reports are compiled.
FullSession
FullSession offers robust heatmap capabilities to help visualize website user activity and engagement. It can generate click and scroll-based heatmaps that highlight a site’s most trafficked elements and reveal activity levels across page content.
Smartlook
Smartlook offers core heatmap capabilities and session recordings in both free and paid plans. Free users can create a website heatmap based on anything up to 3,000 user sessions per month.
Qualtrics® Digital Experience Analytics
Looking to complement your heatmaps with even more user behavior data?
Qualtrics DXA is a digital experience analytics solution that can produce rich user heuristics derived from session replay and smart user engagement scoring – along with powerful insights on what to do to improve things for your customers and users.
Don’t let your digital transformation efforts miss the mark. With Qualtrics, you’ll develop a deeper understanding of broken digital journeys and drop-off points – allowing you to drive better decisions and create a world-class digital experience.
In summary? Heatmaps are one of many tools that can help brands understand why users behave the way they do when they use a website or digital product. They provide powerful insights, but they work best when they’re complimented with wider, intelligently-connected digital experience analytics – that way you’ll garner a full, holistic view of user behavior.
Free eBook: The Digital Experience Playbook