--- title: "Heatmap" url: "https://www.insideuxdesign.com/en/glossar/heatmap" language: "en" description: "What is a heatmap? Click, scroll and move maps explained simply, with limitations, a privacy note and an example. Learn how to use heatmaps well." published: "2026-10-14T15:19:26+02:00" updated: "2026-10-14T15:19:26+02:00" --- # Heatmap A heatmap uses color to show where people click, scroll or move the mouse on a website. It reveals what visitors do, but not why they do it. - **Buchstabe:** H - **Englischer Begriff:** Heatmap UX glossary · engl. Heatmap # Heatmap A heatmap uses color to show where people click, scroll or move the mouse on a website. It reveals what visitors do, but not why they do it. Imagine the homepage of your online shop has a big “Start exploring” button. It barely gets any clicks. Is the button in the wrong place? Or does nobody see it because hardly anyone scrolls that far? A single number in your analytics can’t tell you. A heatmap makes questions like this visible, right on the page itself. ## Explained simply A heatmap is a color overlay that shows where a lot or very little happens on a page. Warm colors like red and orange mean lots of activity, cool colors like blue mean little. The colors sit on top of a screenshot of your page, like a transparent sheet. Think of a lawn in a park. Wherever many people walk, paths get worn into the grass. A heatmap shows you those worn paths on your website, aggregated from thousands of visits. The term comes from data visualization, where heatmaps shade values in an area or table by color. In UX, it usually refers to heatmaps that tools like [Hotjar](https://www.insideuxdesign.com/en/ressourcen/hotjar) generate from the behavior of real visitors on a website. ## The main types - **Click maps:** They show where people click, or tap on a phone. Clicks on elements that aren’t clickable at all, such as images or headings, are especially revealing. - **Scroll maps:** They show what share of visitors reaches each part of the page. That tells you whether important content sits too far down. - **Move maps:** They show where the mouse cursor moves. Cursor position is related to where people look, but it’s only a rough hint, and touch devices have no cursor at all. Some tools also flag so-called rage clicks: rapid repeated clicks on the same spot. They often point to frustration, for example a link that doesn’t respond. ## Where heatmaps fall short Heatmaps show what happens, but not why. A hot area can mean something works well, or that people are desperately looking for something. Only [usability testing](https://www.insideuxdesign.com/en/glossar/usability-testing) or a conversation reveals the cause. You also need enough visits for the picture to be meaningful, and you should look at desktop and mobile separately, since layouts and behavior differ. Privacy matters, too. In the EU, tools that store or read information on a visitor’s device generally require consent. In Germany, this is set out in § 25 TDDDG, the German law on data protection for telecommunications and digital services. Check with whoever is responsible for data protection before you start, and load the tool through your consent management setup. ## An example Here’s an example: for the shop above, the scroll map shows that only a small share of visitors ever sees the button. The click map, on the other hand, shows lots of clicks on a product photo further up that isn’t linked. The team links the photo and moves the button into the visible area. Then it checks whether the change works with an [A/B test](https://www.insideuxdesign.com/en/glossar/a-b-testing). For more on why people become customers, read [Why Do Visitors Convert into Buyers?](https://www.insideuxdesign.com/en/blog/why-do-visitors-convert-into-buyers) ## In practice - **Start with a question.** Decide up front what you want to learn, such as whether a specific section gets seen. Otherwise you’ll get lost in colorful pictures. - **Combine it with other methods.** Use heatmaps to spot anomalies, and tests or interviews to understand them. - **Separate devices and page versions.** A heatmap that mixes desktop and mobile, or the old and new version of a page, easily leads to wrong conclusions. ## Related terms [A/B Testing](https://www.insideuxdesign.com/en/glossar/a-b-testing), [Usability Testing](https://www.insideuxdesign.com/en/glossar/usability-testing), [Eye Tracking](https://www.insideuxdesign.com/en/glossar/eye-tracking), [Conversion](https://www.insideuxdesign.com/en/glossar/conversion) ## Sources - [Hotjar: Types of Heatmaps. Hotjar Help Center](https://help.hotjar.com/hc/en-us/articles/36820020346385-Types-of-Heatmaps) - [Jeff Huang, Ryen W. White, Susan Dumais: No Clicks, No Problem: Using Cursor Movements to Understand and Improve Search. CHI, 2011](https://jeffhuang.com/papers/CursorBehavior_CHI11.pdf) - [German Federal Ministry of Justice: § 25 TDDDG, Protection of privacy in terminal equipment. Gesetze im Internet (in German)](https://www.gesetze-im-internet.de/ttdsg/__25.html) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio)