--- title: "Heatmap" url: "https://www.insideuxdesign.com/de/glossar/heatmap" language: "de" description: "Was ist eine Heatmap? Klick-, Scroll- und Move-Maps einfach erklärt, mit Grenzen, Datenschutz-Hinweis und Beispiel. Lies, wie du sie richtig nutzt." published: "2026-10-14T15:19:25+02:00" updated: "2026-10-14T15:19:25+02:00" --- # Heatmap Eine Heatmap zeigt mit Farben, wo auf einer Website besonders viel geklickt, gescrollt oder mit der Maus bewegt wird. Sie macht sichtbar, was Besuchende tun, aber nicht, warum. - **Buchstabe:** H - **Englischer Begriff:** Heatmap UX-Glossar · engl. Heatmap # Heatmap Eine Heatmap zeigt mit Farben, wo auf einer Website besonders viel geklickt, gescrollt oder mit der Maus bewegt wird. Sie macht sichtbar, was Besuchende tun, aber nicht, warum. Stell dir vor, die Startseite eures Online-Shops hat einen großen Button „Jetzt entdecken“. Die Klickzahlen darauf sind mager. Ist der Button schlecht platziert? Oder sieht ihn niemand, weil kaum jemand so weit nach unten scrollt? Aus einer reinen Zahl in der Statistik lässt sich das nicht ablesen. Eine Heatmap macht solche Fragen sichtbar, und zwar direkt auf der Seite selbst. ## Einfach erklärt Eine Heatmap ist eine farbige Darstellung, die zeigt, wo auf einer Seite besonders viel oder wenig passiert. Warme Farben wie Rot und Orange stehen für viel Aktivität, kalte Farben wie Blau für wenig. Die Farben liegen wie eine Folie über einem Screenshot deiner Seite. Ein Vergleich aus dem Alltag: Denk an einen Rasen in einem Park. Dort, wo viele Menschen langlaufen, entstehen Trampelpfade. Eine Heatmap zeigt dir diese Trampelpfade auf deiner Website, nur eben aus tausenden Besuchen zusammengefasst. Der Begriff kommt aus der Datenvisualisierung, wo Heatmaps Werte in einer Fläche oder Tabelle farbig abstufen. Im UX-Bereich sind meist Heatmaps gemeint, die Tools wie [Hotjar](https://www.insideuxdesign.com/de/ressourcen/hotjar) aus dem Verhalten echter Besuchender auf einer Website erzeugen. ## Die wichtigsten Arten - **Klick-Maps:** Sie zeigen, wo geklickt oder auf dem Smartphone getippt wird. Besonders aufschlussreich sind Klicks auf Elemente, die gar nicht klickbar sind, etwa Bilder oder Überschriften. - **Scroll-Maps:** Sie zeigen, welcher Anteil der Besuchenden welchen Bereich der Seite überhaupt erreicht. So erkennst du, ob wichtige Inhalte zu weit unten stehen. - **Move-Maps:** Sie zeigen, wo sich der Mauszeiger bewegt. Die Mausposition hängt zwar mit dem Blick zusammen, ist aber nur ein grober Hinweis darauf, wohin Menschen schauen, und auf Touch-Geräten gibt es keinen Mauszeiger. Manche Tools markieren zusätzlich sogenannte Rage Clicks, also schnelle Mehrfachklicks auf dieselbe Stelle. Sie deuten oft auf Frust hin, zum Beispiel bei einem Link, der nicht reagiert. ## Wo Heatmaps an Grenzen stoßen Heatmaps zeigen, was passiert, aber nicht, warum. Ein heißer Bereich kann bedeuten, dass etwas gut funktioniert, oder dass Menschen verzweifelt etwas suchen. Erst ein [Usability-Test](https://www.insideuxdesign.com/de/glossar/usability-test) oder ein Gespräch klärt die Ursache. Außerdem brauchst du genug Besuche, damit das Bild aussagekräftig ist, und du solltest Desktop und Mobil getrennt betrachten, weil Layouts und Verhalten sich unterscheiden. Auch der Datenschutz spielt eine Rolle. Tools, die Informationen auf dem Endgerät speichern oder auslesen, brauchen in Deutschland nach § 25 TDDDG in der Regel eine Einwilligung. Kläre den Einsatz deshalb vorher mit der verantwortlichen Stelle für Datenschutz und binde das Tool über deine Einwilligungsverwaltung ein. ## Ein Beispiel Ein Beispiel: Bei dem Shop von oben zeigt die Scroll-Map, dass nur ein kleiner Teil der Besuchenden den Button überhaupt sieht. Die Klick-Map zeigt dagegen viele Klicks auf ein Produktfoto weiter oben, das nicht verlinkt ist. Das Team verlinkt das Foto und zieht den Button in den sichtbaren Bereich. Ob das wirkt, prüft es anschließend mit einem [A/B-Test](https://www.insideuxdesign.com/de/glossar/a-b-test). Warum Menschen überhaupt zu Kundschaft werden, beleuchtet der Artikel [Warum konvertieren Besucher zu Käufern?](https://www.insideuxdesign.com/de/blog/warum-konvertieren-besucher-zu-kaeufern). ## In der Praxis - **Starte mit einer Frage.** Leg vorher fest, was du herausfinden willst, etwa ob ein bestimmter Abschnitt gesehen wird. Sonst verlierst du dich in bunten Bildern. - **Kombiniere mit anderen Methoden.** Nutze Heatmaps, um Auffälligkeiten zu finden, und Tests oder Interviews, um sie zu verstehen. - **Trenne nach Geräten und Seitenversionen.** Eine gemischte Heatmap aus Desktop und Smartphone oder aus alter und neuer Seite führt leicht zu falschen Schlüssen. ## Verwandte Begriffe [A/B-Test](https://www.insideuxdesign.com/de/glossar/a-b-test), [Usability-Test](https://www.insideuxdesign.com/de/glossar/usability-test), [Eye Tracking](https://www.insideuxdesign.com/de/glossar/eye-tracking), [Conversion](https://www.insideuxdesign.com/de/glossar/conversion) ## Quellen - [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) - [Bundesministerium der Justiz: § 25 TDDDG, Schutz der Privatsphäre bei Endeinrichtungen. Gesetze im Internet](https://www.gesetze-im-internet.de/ttdsg/__25.html) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)