Heatmaps für Websites

Was ist eine Heatmap?

Eine Heatmap ist eine farbkodierte Darstellung von Daten. Sie ist eine Karte, auf der verschiedene Bereiche unterschiedlich eingefärbt sind. Sie zeigt die verschiedene Intensität von Aktivitäten: Rote Bereiche bedeuten "hier passiert viel", blaue Bereiche "hier passiert wenig".

Das Prinzip kennst du wahrscheinlich aus dem Wetterbericht, wo Temperaturen, Wind oder Regen farblich dargestellt werden. Oder aus der Gebäudethermografie, wo Wärmebildkameras Schwachstellen in der Isolation aufzeigen.

Was sind Website Heatmaps?

Website Heatmaps sind visuelle Werkzeuge, die das Verhalten von Besuchern auf deiner Webseite erfassen und farblich darstellen. Sie zeigen dir, wie sich Nutzer dort tatsächlich verhalten.

Diese Tools erfassen, wo Nutzer klicken, wie weit sie scrollen und wohin sie ihre Maus bewegen. Diese Daten werden dann als farbige Überlagerung auf deine Webseite gelegt. Anhand der Farben kannst du dann sehen:

• Welche Bereiche Aufmerksamkeit auf sich ziehen
• Wo Besucher das Interesse verlieren
• Welche Buttons oder anderen Elemente übersehen werden

Eingesetzt werden Website Heatmaps hauptsächlich bei der Conversion Rate Optimierung. Hierbei ist es wichtig zu erfahren, wie sich die Nutzer verhalten und wie du sie besser zur gewünschten Handlung führst.

Die wichtigsten Arten von Website Heatmaps

Die wichtigsten Arten von Website Heatmaps sind Click Heatmaps zur Erfassung von Klicks oder Taps der User, Scroll Heatmaps die zeigen, wie weit Besucher tatsächlich nach unten scrollen, Heatmaps für Mouse Movement zur Erkennung der Mausbewegung und Attention Heatmaps, die diese Daten kombinieren. Hinzu kommt die Unterscheidung zwischen Desktop- und Mobile Heatmaps.

Click Heatmaps

Click Heatmaps zeigen dir, wo Besucher klicken (PC, Laptop) oder tippen (Tablet, Smartphone). Rote Bereiche markieren die häufig angeklickten Stellen, blaue Bereiche werden von den Usern weitestgehend ignoriert. Du erkennst darauf, welche Buttons funktionieren und wo Nutzer klicken. Selbst dann, wenn ein Klick an dieser Stelle aktuell gar keine Aktion auslöst.

Scroll Heatmaps

Scroll Heatmaps verraten dir, wie weit Besucher auf deiner Seite nach unten scrollen. Die Farben werden kälter, je weniger Nutzer bis zu diesem Punkt gelangen. Du siehst darauf, wo die meisten Besucher deine Seite verlassen und ob wichtige Inhalte demnach zu weit unten stehen.

Mouse Movement Heatmaps

Diese Heatmaps verfolgen die Mausbewegungen der Website-Besucher. Die Idee dahinter ist, dass Menschen oft ihre Maus dorthin bewegen, wo sie auch hinschauen. Damit sind Mouse Movement Heatmaps eine günstige Alternative zum Eye-Tracking. Allerdings ist die Genauigkeit umstritten, da nicht jede Mausbewegung dem Blick entspricht.

Attention Heatmaps

Attention Heatmaps kombinieren verschiedene Datenquellen: Klicks, Scrollverhalten und Verweildauer. Sie zeigen dir, welche Bereiche insgesamt die meiste Aufmerksamkeit erhalten. Sie dienen als Gesamtbild über das Nutzerverhalten auf der Website.

Website Heatmaps für Desktop und Mobile

Mobile und Desktop-Nutzer verhalten sich völlig unterschiedlich, und das müssen Heatmaps abbilden. Auf dem Smartphone tippen Nutzer statt zu klicken, sodass es keine Mausbewegung gibt. Mouse Movement Heatmaps fallen hier demnach raus. Das Scrollverhalten ist auf dem Tablet und Smartphone anders als auf dem Laptop oder PC und die Nutzer haben beim mobilen Surfen weniger Geduld.

Die wichtigsten Unterschiede: Mobile Nutzer scrollen schneller und weiter, aber sie brechen auch häufiger ab. Buttons müssen grösser sein, weil Finger weniger präzise sind als Mauszeiger. Was auf dem Desktop funktioniert, kann mobil komplett versagen.

Deshalb solltest du Heatmaps immer nach Gerätetyp getrennt betrachten. Viele Tools bieten diese Filterung standardmässig an. So erkennst du: Funktioniert dein Design wirklich auf allen Geräten? Oder optimierst du nur für Desktop-Nutzer, während mobile Besucher frustriert abspringen?

Wofür werden Website Heatmaps eingesetzt?

Heatmaps sind ein viel eingesetztes Werkzeug für die Conversion Rate Optimierung (CRO). Sie liefern dir die Daten, die du brauchst, um aus Besuchern Kunden zu machen.

Conversion Rate Optimierung bedeutet: Du verbesserst systematisch den Prozentsatz der Besucher, die eine gewünschte Aktion ausführen. Das kann ein Kauf sein, eine Anmeldung oder ein Download. Statt also mehr Traffic über den Kauf von Ads auf die Website zu schaufeln, holst du mehr aus deinem bestehenden Traffic heraus.

Die Website Heatmaps zeigen dir, wo deine Conversion-Funnel noch Löcher haben, wo du potenzielle Kunden verlierst und welche Elemente die User von deinen Zielen ablenken.

Mit Website Heatmaps Conversion-Killer identifizieren

Heatmaps decken auf, wo Nutzer hängen bleiben. Scrollt niemand bis zu deinem wichtigsten Call-to-Action? Klicken Besucher auf Elemente, die nicht klickbar sind? Solche Probleme siehst du sofort in der Darstellung der Heatmap.

So kannst du auch das Erwartungsbild der User besser verstehen. Wenn sie oft auf ein Bild klicken, auf dem jedoch bisher nichts passiert, kannst du ablesen, dass sie dort eine Aktion erwarten. Typisch ist, dass sie die Vergrösserung des Bilds erwarten. Diese Funktion kannst du dann nachliefern.

Platzierung von Buttons und Elementen optimieren

Du dachtest, der neue Button fällt auf? Die Heatmap zeigt dir, ob das stimmt. Oft werden wichtige Buttons übersehen und andere Elemente erhalten unerwartet viel Aufmerksamkeit. Mit Erkenntnissen dieser Art kannst du dein Layout gezielt anpassen.

Content-Performance messen

Heatmaps zeigen dir, ob dein Content ankommt oder ob wichtige Informationen im "toten Bereich" stehen, den niemand erreicht. Auf diesem Weg findest du heraus, welche Texte tatsächlich gelesen werden und welche Bereiche die Nutzer praktisch nie zu Gesicht bekommen.

Beispiel für eine Website Heatmap und Conversion Rate Optimierung

Die dänische Modemarke Rains zeigte, wie Heatmaps mit Mouseflow zu messbaren Erfolgen führen. Das Unternehmen analysierte über 500.000 Sessions und verbesserte dadurch ihre Conversion Rate im Warenkorb um 9,8 % und im Checkout um 10,8 %.

Rains stellte fest, dass viele Nutzer den Checkout-Prozess abbrachen. Die Zahlen aus Google Analytics zeigten das Problem, aber nicht die Ursache. Erst mit Heatmaps und Session-Aufzeichnungen identifizierte das Team konkrete Schwachstellen:

• Nutzer klickten auf Elemente, die nicht klickbar waren
• Wichtige Buttons wurden übersehen
• Der Checkout-Prozess war zu komplex

Basierend auf den Heatmap-Daten erstellte das Team von Rains Hypothesen, die sie in umfangreichen A/B Tests auf die Probe stellte. Ihre Tests konzentrierten sich auf Verbesserungen der Benutzerfreundlichkeit, wie zum Beispiel die Klickbarkeit von zuvor nicht anklickbaren Elementen und die Optimierung des Checkout-Prozesses.

Die Änderungen führten zu einer deutlichen Steigerung der Conversion Rate. Wichtig war dabei, dass RAINS nur Änderungen mit einer statistischen Sicherheit von über 90 %  implementierte.

Typische Fehler beim Umgang mit Website Heatmaps

Die Aussagekraft von Website Heatmaps hat ihre Grenzen, wenn die Stichprobengrösse zu gering ist, Mausbewegung und Blickverlauf verwechselt werden oder die Tests unscharf sind.

Zu geringe Stichprobengrösse bei Website Heatmaps

Wenn du für eine Website mit nur 50 Besuchern eine Heatmap erstellst, können fehlende Klicks auf einen bestimmten Button schlicht Zufall sein. Erst ab 2.000 bis 3.000 Seitenaufrufen werden die Muster zuverlässig. Alles darunter kann dich in die Irre führen. Deshalb: Sammle genug Daten, bevor du Änderungen vornimmst und in den Test schickst.

Gleichsetzen von Mausbewegungen und Blickverlauf

Viele Tools bewerben Mousetracking als "günstiges Eye-Tracking". Aber das ist nur teilweise richtig. Zwar bewegen Menschen ihre Maus oft dorthin, wo sie hinschauen, aber längst nicht immer. Nutze Mousetracking deshalb nur als Indiz, aber nicht als Beweis.

Dynamische Inhalte verwirren die Heatmap Tools

Wenn sich deine Webseite je nach Nutzer verändert, etwa durch Personalisierung oder A/B-Test, werden Heatmaps unscharf. Die Tools können nicht immer unterscheiden, welche Version ein Besucher gesehen hat. Das Ergebnis ist eine vermischte Heatmap, die wenig aussagt. Wenn du Heatmaps für verschiedene Website-Versionen erstellen möchtest, dann immer getrennt pro Version.

Nutzung von Website Heatmaps als alleiniges Tool

Eine Heatmap zeigt dir, wo Nutzer abspringen. Sie verrät dir aber nicht, warum. Liegt es am Design? Am Text? An einem technischen Fehler? Um das herauszufinden, brauchst du weitere Methoden: Session-Aufzeichnungen, Nutzerumfragen oder direktes Feedback.

4 Website Heatmap Tools

Hotjar

Hotjar ist der Platzhirsch bei Heatmap-Tools. Das Unternehmen bietet Klick-, Scroll- und Movement-Heatmaps, kombiniert mit Session-Aufzeichnungen und Nutzerumfragen. Der grosse Vorteil: Alle Tools sind integriert. Du klickst auf einen Bereich in der Heatmap und siehst sofort die dazugehörigen Session-Aufzeichnungen.

Preise starten bei 32 Dollar pro Monat für 100 Sessions täglich. Es gibt auch eine kostenlose Version mit eingeschränkten Funktionen.

Crazy Egg

Crazy Egg konzentriert sich auf das Wesentliche: Heatmaps und A/B-Testing in einem Tool. Besonders stark ist die "Confetti"-Funktion, die Klicks nach Besuchertypen filtert – etwa nach Herkunft oder Gerät. Das hilft bei der Zielgruppenanalyse.

Der Nachteil: Crazy Egg bietet nur jährliche Abrechnungen. Die Preise beginnen bei 29 Dollar pro Monat.

Mouseflow

Mouseflow punktet mit detaillierten Filtermöglichkeiten und einem "Friction Score", der problematische Bereiche automatisch erkennt. Das Tool eignet sich besonders für grössere Websites mit komplexen Analysenanforderungen.

Die Preise für Mouseflow starten bei 31 Dollar pro Monat, es steht jedoch auch eine kostenfreie Version mit beschränkten Funktionen und Sessions zur Verfügung.

Microsoft Clarity

Microsoft Clarity ist kostenlos und bietet Click-, Scroll- und Area-Heatmaps. Für Einsteiger oder kleinere Projekte eine gute Wahl. Allerdings fehlen erweiterte Funktionen wie Nutzerumfragen oder A/B-Testing. Microsoft bewirbt die Software als DSGVO- und CCPA-fähig.

Heatmaps und Conversion Rate Optimierung von Axisbits

Website Heatmaps liefern dir die Daten, aber die Umsetzung braucht Zeit und Expertise. Für eine gewinnbringende Conversion Rate Optimierung musst du Daten analysieren, Hypothesen entwickeln, Tests durchführen und Ergebnisse richtig interpretieren. Das sind zeitaufwändige Schritte, die deine volle Aufmerksamkeit verlangen und täglich mitunter viele Stunden beanspruchen.

Falls du an besseren Conversion Rates deiner Website arbeiten möchtest, aber vom Aufwand überwältigt bist, können wir die Heatmap-Analyse und laufende Conversion Rate Optimierung für dich übernehmen. Du kümmerst dich um dein Business, wir um deine Zahlen. Melde dich mit deinem Projekt bei uns!

{{fs-btn-cta}}

Weiterlesen: Diese Themen könnten dich interessieren:

• Unsere Übersicht zu A/B Testing Tools
• Wie gutes UX Design auf die Conversion Rate einzahlt

6 Trigger für mehr Verkäufe aus der Verkaufspsychologie