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.
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, uninterpreted information collected and stored so it can be analysed, processed, or used to inform decisions. On its own it carries no meaning; context and interpretation are what make it useful.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 a user's real interactions with a product (clicks, scrolls, hesitations, and navigation) for review afterwards. It shows genuine behaviour in genuine conditions, without any ability to ask why.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
Be clear on the pages you are analysing, which glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term type answers your question, and how the glossaryDataData is raw, uninterpreted information collected and stored so it can be analysed, processed, or used to inform decisions. On its own it carries no meaning; context and interpretation are what make it useful.Open glossary term is collected. Click, move and scroll maps answer different things and are routinely confused.
Collect enough glossaryDataData is raw, uninterpreted information collected and stored so it can be analysed, processed, or used to inform decisions. On its own it carries no meaning; context and interpretation are what make it useful.Open glossary term before reading anything. A glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term over a few hundred glossarySessionA session is a single period of user interaction with a product, from entry to exit within a defined timeframe.Open glossary term shows randomness with a colour scheme.
Run the method
glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term are aggregate and visual. They are excellent at showing what people interacted with and unreliable at explaining why, which is the opposite of how they are usually presented.
- 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, uninterpreted information collected and stored so it can be analysed, processed, or used to inform decisions. On its own it carries no meaning; context and interpretation are what make it useful.Open glossary term over a period long enough to cover a full weekly cycle.
- Review click, move and scroll maps separately. Mouse movement correlates weakly with attention, and treating it as gaze glossaryDataData is raw, uninterpreted information collected and stored so it can be analysed, processed, or used to inform decisions. On its own it carries no meaning; context and interpretation are what make it useful.Open glossary term is a common and expensive error.
- Compare glossaryBehaviourBehaviour refers to how users interact with a system, including actions, patterns, and responses.Open glossary term across pages or glossaryVariantA variant is a version of a design or experience used in testing or experimentation.Open glossary term rather than reading one map in isolation. glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term are far more useful comparatively than absolutely.
- Segment by device and glossaryTrafficTraffic refers to the number of users visiting a website, app, or digital product over a given period.Open glossary term source. A desktop glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term laid over a responsive glossaryLayoutLayout is the arrangement of elements on a page or screen, determining how content is organised and presented. It influences readability, usability, and overall experience.Open glossary term describes a page most of your users never saw.
- Focus on both extremes: heavily used areas, and elements that are being ignored entirely.
Focus on 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 rather than attention. A glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term tells you where the cursor went, and the cursor is not the eye.
Capture and make sense of it
The value comes from seeing glossaryEngagementEngagement refers to how users interact with a product, content, or experience, including actions like clicks, time spent, and interactions.Open glossary term distribution. Look across the maps to identify:
- Areas drawing genuine 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
- Elements being ignored, particularly things you consider important
- 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 on things that are not interactive, which glossarySignalsSignals are data points or triggers that indicate changes in user behaviour, context, or external factors.Open glossary term misleading design
- Differences between segments and devices
Use this alongside other glossaryDataData is raw, uninterpreted information collected and stored so it can be analysed, processed, or used to inform decisions. On its own it carries no meaning; context and interpretation are what make it useful.Open glossary term rather than on its own. glossaryHeatmapA heatmap is a visual representation of user interaction data, showing areas of high and low activity.Open glossary term are best at generating hypotheses and poor at settling them.
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 drop off.
No guesswork. No assumptions. Just clear insight 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?
Heatmaps are a method used to visualise user interaction data, showing where users click, move, and scroll.
When should you use heatmaps?
Use them when you need a quick visual understanding of user interaction and engagement 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?
Heatmaps show aggregated behaviour across many users, while session replays show individual user sessions.
Are heatmaps reliable?
They are useful for identifying patterns, but should be combined with other methods to understand behaviour fully.
Quick take
If you want to see where users focus, click, and scroll at a glance, use heatmaps.
Related Services
