5 Beispiele für echte Heatmaps und wie du die verschiedenen Heatmap-Arten nutzt

Heatmaps ist ein Oberbegriff für farbcodierte visuelle Darstellungen, wie Nutzende online mit einer Seite interagieren. Hinter jedem Heatmap‑Typ verbergen sich sehr unterschiedliche Insights.

In diesem Kapitel des Heatmap‑Guides sehen wir uns fünf Heatmap‑Beispiele an und wie du sie nutzt, um deine Website zu verbessern.

1. Eine Scroll Map zeigt, dass wichtige Inhalte ignoriert werden

Die Heatmap oben ist eine Scroll Map, die zeigt, wie weit Nutzende auf der Seite nach unten scrollen.

Was die Scroll Map hervorgehoben hat

Wenn du dir die Scroll Map ansiehst, erkennst du sofort zwei scharfe Farbverlaufsänderungen: eine am oberen Seitenrand (von Rot zu Gelb) und eine bei etwa drei Vierteln der Seite (von Grün zu Dunkelblau). Bei einer Scroll Map erwartest du in der Regel, dass die Farben allmählich kälter werden. Eine scharfe Änderung signalisiert, dass ein signifikanter Prozentsatz der Nutzenden nach Erreichen eines bestimmten Punktes nicht weiter gescrollt hat.

Konzentrieren wir uns auf den Grün‑zu‑Blau‑Wechsel am unteren Ende. Basierend auf dem Content‑Layout können wir zwei Hypothesen aufstellen:

1. Besuchende denken, die Seite endet, sobald der Abschnitt „current openings" vorbei ist, und verlassen sie deshalb.

2. Potenzielle Bewerber:innen interessieren sich für die offenen Stellen und klicken, um zur nächsten Seite zu gelangen.

So oder so wird das untere Ende der Seite nur von etwa 20 % aller Besuchenden gesehen.

Und die Glassdoor‑Bewertung von 5 von 5 (überdurchschnittlich) ist ein exzellentes Social‑Proof‑Element für potenzielle Kandidat:innen – aber 80 % der Besuchenden der Seite werden nie davon erfahren.

Warum war eine Scroll Map für diesen Use Case aufschlussreich?

Die Heatmap‑Daten zeigten, dass 80 % der Besuchenden das Seitenende nicht erreichten und den Social‑Proof‑Bereich nicht sahen.

Jetzt schauen wir uns die Heatmap der überarbeiteten Seite an, die kürzer war und Mitarbeiter:innen‑Testimonials direkt unterhalb des Folds enthielt.

Jetzt sehen 75 % der Besuchenden den Testimonial‑Bereich und satte 69 % erreichen das Seitenende!

💡 Profi‑Tipp: Kombiniere numerische Daten aus Heatmaps mit qualitativen Insights aus Contentsquare Voice‑of‑Customer‑Tools, um Feedback zu sammeln und die Seite noch weiter zu verbessern.

Im Beispiel unten wies ein:e Nutzer:in darauf hin, dass Jobs nicht nach Rolle oder Standort gefiltert werden konnten. Mit diesem Wissen könntest du dann dieses Feature hinzufügen, damit Nutzende deine Website mühelos navigieren können.

2. Eine Click Map zeigt, dass Nutzende ein Video ignorieren

Beispiel einer Click Map, die nur 2 Klicks auf ein Video zeigt

Die Heatmap oben ist eine Click Map oder Click Heatmap, die die Anzahl der Klicks als hellere (wenige Klicks) oder dunklere (mehr Klicks) Farbpalette zeigt. Sie wurde auf einer neu gestalteten Version einer „Careers"‑Seite platziert, um die Interaktion mit den Hauptelementen zu untersuchen.

Was die Click Map hervorgehoben hat

Die neu gestaltete Karriere‑Seite enthält ein Video im Testimonial‑Bereich oben. Die Annahme war, dass Besuchende neugierig wären, einen Blick auf das letzte Unternehmenstreffen zu werfen, und auf den „Play"‑Button klicken würden. Nur: Das taten sie nicht.

Dieser einsame Button blieb weitgehend ungeklickt – mit nur 2 Klicks aus 3,3K Sessions (das entspricht einer CTR von 0,02 %).

Warum war eine Click Map für diesen Use Case aufschlussreich?

Die Click Map lieferte einen interessanten Datenpunkt zu der Annahme, dass Nutzende ein Video ansehen wollen würden.

Diese einfache Datenanalyse führt zu zwei Hypothesen, warum Besuchende das Video nicht abspielen:

1. Sie interessieren sich nicht dafür.

2. Sie erkennen nicht, dass dies ein Video ist und der Button klickbar ist.

Um diese Hypothesen zu validieren, könnten wir einen A/B‑Test einrichten, um das Layout oder den Content dieses Bereichs zu ändern und die User Experience zu verbessern.

💡 Profi‑Tipp: User‑Interviews mit Contentsquare Interviews durchzuführen würde dir direktes Feedback von Nutzenden geben, sodass du das „Warum" hinter ihren Aktionen kennst. Im obigen Beispiel könntest du herausfinden, warum sie nicht auf das Video klicken.

3. Eine Movemap zeigt, wohin Nutzende ihre Maus bewegen

Die Heatmap oben ist eine Move Map oder Mouse‑Tracking‑Heatmap, die Mausbewegungen zeigt, während Nutzende durch eine Seite navigieren. Bewusst oder unbewusst folgen die Augen der Nutzenden den Bewegungen der Maus, während sie klicken und über die verschiedenen Elemente der Seite hovern. Move Maps können daher als zuverlässige Eye‑Tracking‑Technologie genutzt werden.

Was die Move Map hervorgehoben hat

Diese Move Map stammt von einem Guide‑Artikel und zeigt, was die Aufmerksamkeit der Lesenden bei diesem Long‑Form‑Content fesselt. Eine interessante Erkenntnis war, dass lange Textblöcke die Aufmerksamkeit der Lesenden nicht halten – erkennbar an der helleren Farbgebung weiter unten im Absatz:

Warum war eine Move Map für diesen Use Case aufschlussreich?

Da weniger Lesende ihre Maus über den unteren Teil dieses Textabschnitts bewegt haben, ist anzunehmen, dass die Mehrheit mit dem Lesen beginnt, dann aber zum Überfliegen übergeht.

Das sagt uns, dass entweder:

1. Der Content an sich nicht fesselnd genug ist, oder

2. Lesende die Informationen, die sie brauchen, bereits am Anfang des Abschnitts erhalten

Im ersten Fall möchten wir vielleicht den Text ändern, um das Lesen bis zum Ende ansprechender zu machen. Die zweite Option zeigt, dass wir den Lesenden das gegeben haben, was sie wollten – in diesem Fall sollten wir in Betracht ziehen, den Abschnitt insgesamt zu kürzen.

Aber bevor wir Entscheidungen treffen, müssen wir möglicherweise den Kontext dieses Verhaltens verstehen und unsere Hypothese validieren – in diesem Fall ist die Move Map ein exzellenter Startpunkt für fortgeschrittene und tiefgehende Recherche.

💡 Profi‑Tipp: Eine Content‑Feedback‑Umfrage (erstellt mit Contentsquare Surveys) hilft dir ebenfalls herauszufinden, ob Lesende mit dem Content der Seite zufrieden sind, was fehlen könnte oder ob ihnen das Layout nicht zusagt.

4. Zonenbasierte Heatmaps zeigen, wie Nutzende mit der Seite interagieren

Zonenbased Heatmaps (auch Engagement‑Zone‑Maps genannt) kombinieren Datensätze aus Klicks, Moves und Scrolls für Desktop – oder Taps und Scrolls für Mobile und Tablets – in einer einzigen Ansicht. Sie sind das Heatmap‑Analytics‑Tool der Wahl für Datenvisualisierung.

Was die zonenbasierte Heatmap hervorgehoben hat

Wenn man sich den Testimonial‑Bereich dieser „About us"‑Seite ansieht, zeigt die Heatmap, dass Nutzende mit den Cards interagieren.

Das Glassdoor‑Logo und die Komponente „Current Contentsquare employee" erhalten die meiste Engagement – als ob Nutzende durchklicken wollten, um die Bewertung auf Glassdoor zu sehen. Aber keine dieser Komponenten ist klickbar.

Schlimmer noch: Nutzende ignorieren komplett das klickbare „Read the review".

Warum war eine zonenbasierte Heatmap für diesen Use Case aufschlussreich?

Das Nutzerverhalten in diesem Bereich deutet auf den Wunsch der Nutzenden hin, die Authentizität der Glassdoor‑Bewertungen zu überprüfen. Schließlich wäre es fair anzunehmen, dass ein Unternehmen, das nicht auf die Testimonials verlinkt, diese einfach erfunden hat.

Zonenbasierte Maps haben eine potenzielle Quelle von Misstrauen aufgedeckt. Mit diesem umsetzbaren Insight könntest du das Design der Testimonial‑Cards überarbeiten, um die UX selbstbewusst zu verbessern, indem du:

• Das Glassdoor‑Logo und das Element unten links klickbar machst, und

• Den CTA „Read the review" sichtbarer gestaltest

5. Rage-Click-Maps zeigen genau, wo Nutzende auf der Seite frustriert sind

Wie du vielleicht schon vermutet hast, zeigt dir eine Rage‑Click‑Map, wo Rage Clicks auf einer Seite auftreten. Rage Clicks sind wesentliche Anzeichen für Nutzerfrustration – sie signalisieren Reibung, die Conversion‑Raten behindert.

Was eine Rage‑Click‑Map hervorgehoben hat

Beim Blick auf die Pricing‑Tabelle fällt am Rage‑Click‑Muster auf, dass es sich auf die Features konzentriert, die in jedem Plan enthalten sind.

Es deutet darauf hin, dass Nutzende nicht verstehen, was diese Features bedeuten, oder mehr Details haben möchten. Nutzende erwarten möglicherweise, dass jedes Feature zu einer Erklärung verlinkt – auf derselben Seite oder einer anderen.

Warum war eine Rage‑Click‑Map für diesen Use Case aufschlussreich?

Das Rage‑Click‑Muster auf dieser Seite sagt uns, dass die Tabellen der Pricing‑Seite möglicherweise zusätzliche Arbeit benötigen, um die User Experience zu verbessern. Einige Optionen:

• Die Info‑Bubbles sichtbarer machen

• Den Inhalt der Info‑Bubbles anzeigen, wenn Nutzende über den Text hovern (nicht nur über die Bubbles)

• Die Info‑Bubbles durch eine Dropdown‑Komponente ersetzen

• Die Features umbenennen, um sie expliziter zu machen

• Einen Link zu den Features hinzufügen, der Nutzende weiter nach unten auf der Seite führt, wo sie eine detailliertere Erklärung finden

Indem Rage‑Click‑Maps Objekte der Nutzerfrustration identifizieren, bieten sie dir UX‑Verbesserungschancen. Anschließend kannst du per A/B‑Test herausfinden, welche Änderungen bei deinen Nutzenden am besten ankommen.

Sammle mehr Insights mit den verschiedenen Heatmap‑Typen

Jetzt, da du weißt, wie du jeden Heatmap‑Typ nutzt, hält dich nichts mehr davon ab, umsetzbare Nutzerverhalten‑Insights zu sammeln. Beginne Daten zu erheben, um die User Experience auf deiner Website zu verbessern und Conversions zu steigern.