Spis treści
Sie wachen morgens auf und Ihr Shop hat eine Absprungrate von 50 % auf der Produktseite. Was ist da los? Man vermutet: „Vielleicht ist der Preis zu hoch“, „Vielleicht ist die Beschreibung unzureichend“. Heatmaps geben die Antwort. statt zu raten — Ich zeige Ihnen, wo Kunden klicken, wo sie sich verirren und wo sie die Seite verlassen. Ich zeige Ihnen, wie Sie diese Daten extrahieren können.
Zusamenfassend
- Heatmap = visuelle Darstellung der Benutzerinteraktionen (Klicks, Scrollvorgänge, Cursorbewegungen).
- Microsoft Clarity — komplett kostenlos, keine Einschränkungen, Datenschutz inklusive.
- Hotjar — umfangreicher, Umfragen + Feedback-Widget, Bezahlung ab 35 Sitzungen/Tag.
- Die 3 wichtigsten Ansichten: Karte anklicken, Karte scrollen, Sitzungsaufzeichnungen.
Warum Heatmaps?
GA4 zeigt Ihnen die „30%ige Absprungrate auf der Produktseite“. Die Heatmap zeigt Ihnen, dass… Der Kunde versucht, auf das Produktbild zu klicken, aber es passiert nichts. (weil kein Leuchtkasten vorhanden ist). Oder dass Die Schriftrolle endet nach einem Drittel der Seite.Der Kunde sieht daher weder die Beschreibung noch den Handlungsaufruf.
GA4 = Zahlen. Heatmap = Verhalten.
Microsoft Clarity – der kostenlose Riese
Vorteile
✅ Völlig kostenlos — keine Sitzungsbeschränkung, keine Seitenbeschränkung, keine Dauerbeschränkung
✅ Gesponsert von Microsoft — Das gesamte Unternehmen steht hinter dem Tool, es wird nicht morgen verschwinden.
✅ Keine aggressiven Upgrade-Pop-ups wie Hotjar
✅ Datenschutzfreundlich — Automatische Maskierung sensibler Daten (PESEL, Passwörter)
✅ KI-Einblicke — erkennt automatisch Probleme (Wutklicks, Fehlklicks)
Nachteile
❌ Keine Umfragen
❌ Kein Feedback-Widget
❌ Das Laden des Berichts ist etwas langsamer
Was Sie in Clarity sehen werden
- Klicken Sie auf die Karten — wo sie klicken (alle Elemente)
- Scrollkarten — Wie hoch scrollen sie?
- Gebietskarten — ausgewählte Bereiche der Seite, aggregierte Daten
- Aufnahmen — Aufnahmen kompletter Sitzungen
- Einblicke — automatische Problemerkennung
So installieren Sie Clarity
- Gehe zu clarity.microsoft.comMelden Sie sich mit einem Microsoft-Konto an (oder erstellen Sie eines).
- Neues Projekt erstellen
- Tracking-Code kopieren
- W WordPressie wklej w
<head>przez wtyczkę Microsoft Clarity (offiziell) - Nach 24 Stunden werden Sie erste Daten sehen.
Hotjar – Premium, bekannter Standard
Vorteile
✅ Weitere Funktionen — Umfragen, Feedback-Widget, Rekrutierung für Nutzertests
✅ Großartige Benutzeroberfläche — das intuitivste der Branche
✅ Integrationen — Slack, Zapier, GA4
✅ Filter und Segmente — Analyse pro Quelle, pro Gerät, pro Land
Nachteile
❌ Kostenloser eingeschränkter Tarif — 35 Sitzungen pro Tag (nach 14-tägiger Probezeit)
❌ Bezahlte Tarife ab 39 $/Monat (1 Filiale, 100 Sitzungen/Tag)
❌ Stärkerer Cookie-Banner erforderlich
Was Sie auf Hotjar sehen werden
- Heatmaps (klicken, verschieben, scrollen)
- Aufnahmen
- Umfragen (NPS, Zufriedenheit, Kündigungsabsicht)
- Feedback-Widget (Smiley-Emoji + Kommentar)
- Trichter (Visualisierung, bei der Menschen aussteigen)
Hotjar vs. Clarity – Wann und was
| Kriterium | Microsoft Clarity | Hotjar |
|---|---|---|
| Preis | Frei | 39 $/Monat+ |
| Sitzungslimit | Mangel | 100/Tag (Plus) |
| Klicken Sie auf die Karten | ★★★★ | ★★★★★ |
| Scrollkarten | ★★★★ | ★★★★★ |
| Aufnahmen | ★★★★ | ★★★★★ |
| Umfragen | ❌ | ★★★★ |
| Feedback-Widget | ❌ | ★★★ |
| KI-Einblicke | ★★★★ | ★★★ |
| Datenschutz / DSGVO | ★★★★★ | ★★★★ |
Anwendung: Für 80 % der Unternehmen ist Clarity ausreichend. Hotjar lohnt sich, wenn Sie regelmäßig Umfragen oder Nutzerforschung durchführen.
Wie man eine Klickkarte liest
Klicken Sie auf die Karte, um sie anzuzeigen wo der Kunde klickt (rot = viel, blau = wenig).
Wonach suchst du:
1. Der Kunde klickt auf eine Stelle, an der kein Link vorhanden ist („tote Klicks“).
Das heißt: Kunde glaubt, es sei anklickbarVielleicht ist es ein Bild, vielleicht ist es eine Überschrift, die wie ein Link aussieht, vielleicht ist es ein Symbol.
Reparieren: Machen Sie es klickbar – Link, Button. Oder ändern Sie das Design so, dass es nicht klickbar aussieht.
2. Der Kunde klickt nicht dort, wo Sie es wünschen („tote Zonen“).
Der Call-to-Action „Jetzt kaufen“ befindet sich in der Mitte der Seite, aber die Heatmap zeigt 0 Klicks an. Der Kunde sieht es nicht. oder weckt kein Vertrauen.
Reparieren: Ändern Sie die Farbe (Kontrast), den Text (der Handlungsaufruf sollte lauten „Aktion“) und die Position (weiter oben auf der Seite).
3. Der Kunde klickt mehrmals auf „Wut“ – und zwar auf dasselbe Element.
Das bedeutet FrustrationIch habe auf den Knopf geklickt, aber nichts ist passiert (Fehler?), also habe ich immer wieder geklickt. Rote Flagge.
Reparieren: Prüfen Sie, ob die Schaltfläche funktioniert. Möglicherweise wird das JavaScript nicht geladen, oder es gibt keinen Ladestatus (der Client merkt nicht, dass etwas passiert).
Wie man eine Schriftrolle liest
Scrollkarte zeigt bis zu welcher Höhe sie scrollen (rot = alle, grün = wenige).
Wonach suchst du:
1. Die rote Schriftrolle endet nach einem Drittel der Seite.
Das bedeutet: Der Kunde hat den restlichen Inhalt nicht erreicht. Ihr Handlungsaufruf ist auf 2/3 der Seite unsichtbar.
Reparieren: Platzieren Sie die wichtigsten Elemente (CTA, USP, Beschreibung) in erste 50% Seiten. Betrachten Sie den Rest als „Bonus für Interessierte“.
2. Zur Scrollkarte springen (rot, dann grün, dann wieder rot)
Das bedeutet: Es gibt einen Abschnitt übersprungen — Der Kunde scrollt einfach durch, weil er kein Interesse hat.
Reparieren: Prüfen Sie, ob dieser Abschnitt notwendig ist. Vielleicht sollte es „Über uns“ statt eines Call-to-Action sein, vielleicht wiederholt er auch nur Informationen von oben.
3. Alle scrollen bis zum Ende
Das ist großartig – Inhalte fesseln die Aufmerksamkeit. Nutzen Sie das! Fügen Sie ganz unten einen Call-to-Action hinzu..
Wie man Aufnahmen liest
Sitzungsaufzeichnung = Video Benutzerverhalten (Mausbewegung, Scrollen, Klicken, Formulareingabe).
Wonach suchst du:
1. Sitzungen der „Auserwählten“
Sitzungen filtern, die:
– Am Ende kauften sie (was machten sie gut?).
– Dauerte länger als 5 Minuten (fesselnder Inhalt)
– Wutklick beendet (was ist frustrierend?).
2. Häufige Muster
Nachdem man sich 20-30 Sitzungen angesehen hat, erkennt man Muster:
– „Alle versuchen, auf das Logo zu klicken, um zur Startseite zurückzukehren“ (Ist das Logo mit der Startseite verlinkt? Bitte prüfen)
– „80 % klicken dreimal auf den Preisfilter, weil er nicht reagiert“ (der Filter funktioniert nicht oder ist nicht intuitiv).
– „Der Kunde öffnet 5 Produkte, kehrt zur Liste zurück und legt 1 Produkt in den Warenkorb“ (vergleicht vor dem Kauf).
3. Absetzpunkte
Wo findet die Sitzung statt? er beendet (Tab schließen)? Finde die letzten 10 Elemente, die vor dem Schließen angeklickt wurden.
Praktische Fallstudie
Kunde: Online-Sportschuhgeschäft, Absprungrate auf der Produktseite 68%.
Was Clarity zeigte:
1. Klicken Sie auf die Karte: Kunden klicken auf das Produktbild (Sie denken, es sei ein Leuchtkasten) – Zoom funktionierte nicht.
2. Karte scrollen: 40 % beenden den Scrollvorgang auf der Hälfte der Produktkarte. — Beschreibung und Bewertungen befinden sich weiter unten (unsichtbar).
3. Aufnahmen: Alle versuchen, den Abschnitt „Größentabelle“ zu erweitern.Sie klicken an der falschen Stelle
Reparaturen (3 Arbeitsstunden):
1. Lightbox für Bilder hinzugefügt (Klicken = Vergrößern)
2. Bewertungen wurden nach oben verschoben (unter Preis und Handlungsaufforderung).
3. Die Größentabelle wird mit einem Klick auf den gesamten Titel erweitert.
Ergebnis nach 30 Tagen:
– Absprungrate: 68 % → 49 %
– Umwandlung: 1,8 % → 2,7 % (+50 %)
– Zeit auf der Seite: 45 s → 1 min 18 s
Die häufigsten Fehler bei der Verwendung von Heatmaps
❌ Kleine Proben — 50 Sitzungen reichen NICHT aus. Typischerweise sind 500–1000 Sitzungen für statistische Signifikanz erforderlich.
❌ Wenn man nur die Top-10-Seiten betrachtet — Manchmal hat die 11 die schlechteste Konversionsrate, aber das ignoriert man.
❌ Maßnahme basierend auf 1 Aufzeichnung — Eine Person ≠ Trend. Untersuchen Sie mindestens 10–20 Sitzungen in einer bestimmten Gruppe.
❌ Heatmap ohne Segmentierung — Desktop vs. Mobilgerät völlig unterschiedliches VerhaltenSiehe separat
❌ Missachtung der Privatsphäre — Clarity und Hotjar maskieren automatisch, aber Fügen Sie dies Ihrer Datenschutzerklärung hinzu.
Was kommt als Nächstes?
Diese Woche:
- Ein Konto erstellen Microsoft Clarity (clarity.microsoft.com)
- Code auf der Website installieren (5 Minuten)
- Nach 7 Tagen stehen Ihnen Daten zur Analyse zur Verfügung.
- Wählen Sie die Seite mit der schlechtesten Konversionsrate aus.
- 1 Stunde lang 10 Sitzungen ansehen + Karte anklicken + Karte scrollen
- Plan 3 ändert sich aufgrund von Beobachtungen
UX-Audit mit Heatmaps im Rahmen des Conversion-Optimierungspakets Wir analysieren über 200 Sitzungen, erstellen Heatmaps von 5 Schlüsselseiten und liefern eine Liste mit über 12 konkreten Änderungen. Preis: 1.800 PLN netto. Schreiben.
