Was ist eine Heatmap – und wie funktioniert sie?
Eine Heatmap ist eine visuelle Darstellung des Nutzerverhaltens auf deiner Website. Sie zeigt dir in Farben – von kalt (blau) bis heiss (rot) – wo Besucher klicken, wie weit sie scrollen und wo ihre Maus verweilt.
Es gibt drei Haupttypen:
Typ | Was er zeigt | Wann er hilft |
|---|---|---|
Click Map | Wo Besucher klicken | Klicken sie auf das Richtige – oder auf Dinge, die gar keine Links sind? |
Scroll Map | Wie weit Besucher scrollen | Sehen sie deinen Call-to-Action überhaupt? |
Move Map | Wo die Maus sich bewegt | Wo wird gelesen, was wird überflogen? |
Die bekanntesten Tools dafür: Hotjar (kostenlose Version verfügbar), Microsoft Clarity (komplett kostenlos) und Lucky Orange.
Schritt 1: Heatmap Tool einrichten
Bevor du auswertest, musst du Daten sammeln. Das dauert je nach Traffic 3 bis 14 Tage.
Microsoft Clarity – kostenlos und einfach:
Gehe zu clarity.microsoft.com und erstelle ein kostenloses Konto
Füge deine Website hinzu
Kopiere den Tracking-Code und binde ihn in deine Website ein:
Framer: Projekt-Einstellungen → Custom Code → Head
Webflow: Project Settings → Custom Code → Head Code
Squarespace: Einstellungen → Erweitert → Code-Injection
Warte mindestens 7 Tage, bis genug Daten vorhanden sind
💡 Microsoft Clarity ist komplett kostenlos – ohne Limits. Für die meisten KMU und Dienstleister reicht es vollständig aus.
Schritt 2: Die Scroll Map auswerten – siehst du dein Wichtigstes?
Die Scroll Map ist oft der aufschlussreichste Einstieg. Sie zeigt dir, wie weit Besucher auf deiner Seite nach unten scrollen.
Was du siehst und was es bedeutet:
Scroll-Tiefe | Was das bedeutet |
|---|---|
80–100% scrollen bis oben | Perfekt – Besucher lesen die ganze Seite |
Starker Abfall bei 30–40% | Etwas oben auf der Seite hält nicht – Inhalt oder Design verliert früh |
Abfall genau bei einem Bild oder Block | Dieser Abschnitt signalisiert unbewusst «Ende der Seite» |
Weniger als 20% scrollen bis zum CTA | Dein Call-to-Action wird von den meisten nie gesehen |
Was du konkret tust: Wenn du siehst, dass der Grossteil der Besucher bei 40% abbricht – schau dir an, was genau an dieser Stelle steht. Ist es ein langer Textblock? Ein unattraktives Bild? Ein Abschnitt, der wie ein Footer wirkt? Genau dort liegt der Hebel.
Schritt 3: Die Click Map auswerten – klicken sie auf das Richtige?
Die Click Map zeigt dir, worauf Besucher tatsächlich klicken. Und das ist oft überraschend.
Häufige Erkenntnisse:
Besucher klicken auf Dinge, die keine Links sind Wenn viele Besucher auf ein Bild, eine Überschrift oder ein Icon klicken, das keinen Link hat, erwarten sie dort eine Aktion. Das ist ein klares Signal: Mach daraus einen Link oder einen Button.
Der eigentliche CTA-Button wird kaum geklickt Wenn dein «Jetzt anfragen»-Button kaum Klicks hat, kann das bedeuten:
Er ist zu weit unten – die meisten scrollen nicht so weit
Er fällt farblich nicht auf
Der Text ist zu passiv («Kontakt» statt «Jetzt kostenlos anfragen»)
Navigation wird mehr genutzt als erwartet Wenn Besucher stark in der Navigation herumklicken, finden sie auf der Hauptseite nicht, was sie suchen. Das ist ein Hinweis, dass die Startseite klarer strukturiert werden muss.
Besucher klicken auf Elemente ausserhalb des sichtbaren Bereichs Das passiert, wenn das mobile Layout nicht stimmt – Besucher tippen auf Stellen, die auf dem Handy anders dargestellt werden als erwartet.
Schritt 4: Die Move Map auswerten – was wird wirklich gelesen?
Die Move Map zeigt, wo Besucher die Maus bewegen. Auf dem Desktop korreliert das stark mit dem, was gelesen wird – Augen folgen oft der Maus.
Was du erkennst:
Heisse Zonen oben: Die Einleitung wird gelesen – gut. Aber was danach?
Kalte Zonen bei langen Textblöcken: Viel Text wird überflogen, nicht gelesen – kürzen oder strukturieren
Maus bleibt bei Preisen oder Testimonials: Diese Bereiche erzeugen Aufmerksamkeit – gut platziert?
Maus verlässt den Bereich früh: Besucher suchen etwas und finden es nicht – Navigation oder Struktur überdenken
Die häufigsten Probleme – und was du dagegen tust
❌ Besucher scrollen nicht bis zum CTA
Lösung: Platziere einen zusätzlichen Call-to-Action weiter oben – idealerweise bereits im sichtbaren Bereich ohne scrollen («Above the Fold»). Warte nicht bis zum Ende der Seite, um Besucher zur Aktion aufzufordern.
❌ Viele Klicks auf ein Element, das kein Link ist
Lösung: Füge einen Link hinzu oder mache daraus einen Button. Besucher zeigen dir damit, dass sie mehr wollen – gib ihnen den nächsten Schritt.
❌ Grosser Abfall bei einem bestimmten Abschnitt
Lösung: Schau dir diesen Abschnitt genau an. Ist er zu lang? Zu technisch? Wirkt er wie ein Abschluss? Kürze ihn, gestalte ihn visuell ansprechender oder entferne ihn ganz – und prüfe danach, ob der Abfall sich verschiebt.
❌ Mobile Nutzer klicken auf falsche Stellen
Lösung: Teste deine Website auf verschiedenen Handys. Oft sind Buttons zu klein, zu nah beieinander oder Elemente überlagern sich auf kleinen Bildschirmen. Das lässt sich mit gezielten Anpassungen im Design beheben.
❌ Besucher verlassen die Seite ohne jegliche Interaktion
Lösung: Das deutet auf ein Problem ganz oben hin – die ersten Sekunden überzeugen nicht. Prüfe: Ist sofort klar, was du anbietest und für wen? Ist der erste Satz stark genug? Lädt die Seite schnell genug?
So nutzt du Heatmaps richtig – ein einfacher Rhythmus
Heatmaps bringen nur dann etwas, wenn du sie regelmässig anschaust und Erkenntnisse umsetzt.
Empfohlener Rhythmus:
Zeitpunkt | Was du tust |
|---|---|
Nach 7–14 Tagen | Erste Auswertung – grobe Probleme identifizieren |
Nach Änderungen | Prüfen ob die Anpassung gewirkt hat |
Alle 3 Monate | Regelmässige Überprüfung, neue Erkenntnisse |
💡 Wichtig: Ändere nie mehrere Dinge gleichzeitig. Sonst weisst du nicht, was die Verbesserung gebracht hat. Eine Änderung, messen, auswerten – dann die nächste.
Zusammenfassung: Deine Auswertungs-Checkliste
Frage | Geprüft? |
|---|---|
Wie weit scrollen die meisten Besucher? | ☐ |
Sehen sie meinen CTA überhaupt? | ☐ |
Wird auf Elemente geklickt, die keine Links sind? | ☐ |
Wird der CTA-Button geklickt – oder ignoriert? | ☐ |
Gibt es einen Abschnitt, bei dem viele abbrechen? | ☐ |
Funktioniert das Verhalten auf Mobilgeräten anders? | ☐ |
Habe ich nach der letzten Änderung neu gemessen? | ☐ |
Fazit: Hör auf zu raten – fang an zu sehen
Die meisten Website-Optimierungen basieren auf Vermutungen. Heatmaps ersetzen Vermutungen durch echte Daten. Und echte Daten führen zu gezielten Änderungen – statt zu teuren Redesigns, die das eigentliche Problem nicht lösen.
Wer weiss, wo Besucher hängen bleiben, kann gezielt eingreifen. Das spart Zeit, Geld – und bringt mehr Anfragen.
Du willst wissen, was auf deiner Website wirklich passiert?
Ich analysiere deine Website – inklusive Heatmap-Auswertung – und zeige dir, wo du konkret verlierst und was du ändern solltest.
Jetzt kostenlose Website-Analyse anfragen →
Häufige Fragen
Wie viele Besucher brauche ich, damit eine Heatmap aussagekräftig ist?
Als Faustregel gilt: mindestens 200–300 Besucher pro Seite, bevor du Muster zuverlässig erkennst. Bei weniger Traffic brauchst du einfach mehr Zeit – 3 bis 4 Wochen statt einer. Die Daten werden trotzdem wertvoller, je länger du sammelst.
Ist Microsoft Clarity wirklich kostenlos – ohne versteckte Kosten?
Ja, Microsoft Clarity ist vollständig kostenlos – ohne Limits bei Seitenaufrufen, Aufzeichnungen oder Heatmaps. Microsoft finanziert das Tool indirekt, weil es Daten für die eigene KI-Forschung liefert. Für KMU und Dienstleister ist es die beste kostenlose Option auf dem Markt.
Verletzt eine Heatmap den Datenschutz meiner Besucher?
Das hängt vom Tool und der Konfiguration ab. Microsoft Clarity anonymisiert Daten standardmässig und ist DSGVO-konform einstellbar. Wichtig: Informiere Besucher in deiner Datenschutzerklärung über das Tracking – und stelle sicher, dass dein Cookie Banner das Tool korrekt einschliesst.
Bereit für eine Website, die wirklich funktioniert?
Ich analysiere dein Projekt kostenlos und zeige dir, was möglich ist.