What is a heatmap in UX?
A heatmap in UX is a visual overlay that uses color to show where users click, tap, scroll or look on a page, with warmer colors marking more activity.
also calledclick map · attention map · scroll map
Picture a thermal camera pointed at your web page. The spots people click glow red, the spots they ignore stay cold and blue. A heatmap gives you that picture, which is why it is often the first thing a team looks at when they wonder what visitors are really doing.
- A heatmap uses color to show clicks, taps, scrolling or gaze on a page.
- Different heatmap types answer different questions, so choose the one that matches yours.
- It shows what happened, not why, so follow up with qualitative research.
- Use enough data and segment by device before trusting a pattern.
The main kinds of heatmaps
Not every heatmap measures the same thing, and mixing them up leads to wrong conclusions.
- Click or tap maps show where people press, including elements that are not even clickable.
- Scroll maps show how far down the page people get before leaving.
- Move maps track mouse movement, which loosely hints at attention on desktop.
- Attention or gaze maps come from eye tracking and show where eyes rest.
Most website tools produce the first three by recording visitor behavior with a small script.
What a heatmap can tell you
It is brilliant at surfacing surprises. A cluster of clicks on an image that is not a link suggests people expect it to be one. A scroll map that goes cold halfway down tells you the content below that line is barely seen, however good it is.
It also helps settle arguments about layout. If nobody touches the carefully designed secondary menu, that is hard to ignore.
How to read one without fooling yourself
Start with a question, not a hunt for pretty colors. Are people finding the main button? Is the pricing section reached? Then check the data volume, because a map built from a few dozen visits is unreliable.
Segment where you can. Mobile and desktop behave differently, and so do new and returning visitors. A single combined map can average out two very different patterns into something that describes nobody.
What a heatmap cannot tell you
It tells you what happened, not why. A hot spot could mean interest or frustration. People click repeatedly on things that do not respond, and the map shows that as a success. A cold area might be ignored, or it might be perfectly clear and not needed.
That is why a heatmap is a starting point. Follow up with session recordings, user interviews or a quick usability test to understand the reasons.
When it is worth the effort
Use heatmaps on high-traffic pages where a small improvement matters, such as the home page, pricing page or checkout. Run them for long enough to capture normal weeks, not just a launch spike.
Avoid reading too much into a page that few people visit, or one that changed mid-collection. If the layout changed, start a fresh map. Mixing old and new layouts muddies everything.
Heatmap: your questions, answered
What does a heatmap show in UX?
It shows where users click, tap, scroll, move their cursor or look, using color from cool to warm. Hot areas have the most activity. Designers use it to see which elements get attention and which get ignored.
How do heatmaps work?
A small script on your site records visitor interactions and combines them into one overlay on a screenshot of the page. Gaze maps are different: they come from eye tracking hardware or software that estimates where people look.
How much data do you need for a heatmap?
Enough that patterns are stable. A few dozen visits can mislead, while a few thousand views on the page usually produce a clearer picture. Exact numbers depend on the tool, so check whether the pattern stays the same as more data arrives.
What are the limitations of heatmaps?
They cannot explain motives, they average different user groups together and they can mislead on low traffic. Dynamic content like pop-ups and carousels can also be hard to represent. Treat them as clues that point to follow-up research.
Which tools create heatmaps?
Several analytics and behavior tools offer click, scroll and move maps through a short tracking script. Pick one based on traffic limits, privacy features and price. Make sure it complies with your privacy rules and consent requirements.
More quick answers
What is the difference between a heatmap and eye tracking?
A heatmap can show clicks or scrolling, while eye tracking records real gaze. Gaze heatmaps are a visualization of eye tracking data.
What does a red area on a heatmap mean?
It marks the highest concentration of whatever the map measures, such as clicks. It does not say whether that activity was good or frustrating.
Are heatmaps qualitative or quantitative?
They are mostly quantitative, since they aggregate behavior, though people read them qualitatively. Pair them with interviews for the why.
What is a scroll map?
A scroll map shows what share of visitors reach each point on a page. It helps you decide where to place important content.
Are heatmaps GDPR compliant?
It depends on the tool and settings. Look for options that mask personal data and respect consent, and check with your privacy lead.
Eye tracking in UX is a research technique that records where and for how long a person looks on a screen, to show what draws attention or gets missed.
Clickstream analysis in UX is the study of the recorded sequence of clicks and page views people make so you can see how they actually move through a product.
A/B testing in UX means showing two versions of a design to different groups of users and measuring which one gets the better result.
Above the fold in UX is the part of a page visible on screen without scrolling, while below the fold is everything you only reach by scrolling down.
Quantitative user research is the collection and analysis of numerical data about user behavior or attitudes, showing how many people do or think something.
Found this useful? A GitHub star helps other designers find it.