CRO
Heatmaps
A practical CRO method for visualising interaction patterns and spotting what users notice, ignore, or miss.
How to use heatmaps to understand user attention, interaction hotspots, scroll depth, and layout performance.
Quick take
If you want to see where users focus, click, and scroll at a glance, use heatmaps.
Related Services
What it is
glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term are a quantitative UX and CRO method used to visualise user glossaryInteractionInteraction refers to any action a user takes within a product and how the system responds. It includes clicks, taps, gestures, and inputs that drive the user experience.Open glossary term glossaryDataData is raw information collected and stored for analysis, processing, or decision-making.Open glossary term on a page or screen.
They aggregate glossaryBehaviourBehaviour refers to how users interact with a system, including actions, patterns, and responses.Open glossary term from multiple users and display it as colour overlays, showing where users click, move, and scroll.
Common types include click maps, move maps, and scroll maps.
Unlike glossarySession RecordingSession recording captures user interactions within a product for later analysis.Open glossary term, which show individual glossaryBehaviourBehaviour refers to how users interact with a system, including actions, patterns, and responses.Open glossary term, glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term show patterns at scale. They highlight what attracts attention and what gets ignored.
The goal is to quickly identify areas of glossaryEngagementEngagement refers to how users interact with a product, content, or experience, including actions like clicks, time spent, and interactions.Open glossary term, glossaryFrictionFriction refers to anything that slows users down or makes it harder for them to complete a task. It can be caused by poor design, unnecessary steps, unclear messaging, or technical issues.Open glossary term, and missed opportunities.
Heatmaps are useful when you need a fast visual read on attention and interaction, not a deep explanation of intent.
When to use it
Use this method when you need a fast visual overview of user glossaryInteractionInteraction refers to any action a user takes within a product and how the system responds. It includes clicks, taps, gestures, and inputs that drive the user experience.Open glossary term.
It is most useful when:
It is less useful when:
Heatmaps are often used alongside session replay analysis and analytics to provide both overview and detail.
Key takeaway
Use heatmaps when you need a quick view of attention and interaction patterns before digging deeper.
How to run it
Set up properly.
Before you start, be clear on which pages or screens you want to analyse, what type of glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term you need, and how glossaryDataData is raw information collected and stored for analysis, processing, or decision-making.Open glossary term will be collected.
Ensure enough glossaryTrafficTraffic refers to the number of users visiting a website, app, or digital product over a given period.Open glossary term is captured to produce meaningful glossaryPatternA reusable solution to a common design problem.Open glossary term.
Run the method.
glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term are glossaryDataData is raw information collected and stored for analysis, processing, or decision-making.Open glossary term-driven and visual.
Collect glossaryInteractionInteraction refers to any action a user takes within a product and how the system responds. It includes clicks, taps, gestures, and inputs that drive the user experience.Open glossary term glossaryDataData is raw information collected and stored for analysis, processing, or decision-making.Open glossary term over time. Review click, move, and scroll glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term. Compare behaviour across different pages or variants. Segment data where relevant, such as device or traffic source. Focus on areas of high and low interaction.
Look for glossaryPatternA reusable solution to a common design problem.Open glossary term, not individual actions.
Capture and make sense of it.
The value comes from identifying visual glossaryPatternA reusable solution to a common design problem.Open glossary term.
Look across glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term to identify areas of high glossaryEngagementEngagement refers to how users interact with a product, content, or experience, including actions like clicks, time spent, and interactions.Open glossary term, elements that are ignored, unexpected glossaryInteractionInteraction refers to any action a user takes within a product and how the system responds. It includes clicks, taps, gestures, and inputs that drive the user experience.Open glossary term patterns, and differences between user segments.
Use findings to guide design and glossaryOptimisationOptimisation is the process of improving a product or journey to increase performance, usability, or conversion.Open glossary term decisions.
What to look for
Focus on:
Where it goes wrong
Most issues come from:
glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term show what users focus on, not why.
What you get from it
Done properly, this method gives you:
Key takeaway
It helps you quickly see what is working and what is not.
Get in touch
If this sounds like something you need, we can help you understand where users focus, interact, and glossaryDrop-offDrop-off refers to users leaving a journey before completing a desired action or reaching the next step.Open glossary term.
No guesswork. No assumptions. Just clear glossaryInsightAn insight is a meaningful understanding that explains why something is happening and what it means.Open glossary term you can act on.
FAQ
Common questions
A few practical answers to the questions that usually come up around this method.
What are heatmaps in UX?
glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term are a method used to visualise user glossaryInteractionInteraction refers to any action a user takes within a product and how the system responds. It includes clicks, taps, gestures, and inputs that drive the user experience.Open glossary term glossaryDataData is raw information collected and stored for analysis, processing, or decision-making.Open glossary term, showing where users click, move, and scroll.
When should you use heatmaps?
Use them when you need a quick visual understanding of user glossaryInteractionInteraction refers to any action a user takes within a product and how the system responds. It includes clicks, taps, gestures, and inputs that drive the user experience.Open glossary term and glossaryEngagementEngagement refers to how users interact with a product, content, or experience, including actions like clicks, time spent, and interactions.Open glossary term on a page.
What types of heatmaps are there?
Common types include click maps, move maps, and scroll maps.
What is the difference between heatmaps and session replays?
glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term show aggregated glossaryBehaviourBehaviour refers to how users interact with a system, including actions, patterns, and responses.Open glossary term across many users, while glossarySession RecordingSession recording captures user interactions within a product for later analysis.Open glossary term show individual user sessions.
Are heatmaps reliable?
They are useful for identifying glossaryPatternA reusable solution to a common design problem.Open glossary term, but should be combined with other methods to understand glossaryBehaviourBehaviour refers to how users interact with a system, including actions, patterns, and responses.Open glossary term fully.