![[Visual] Stock photo for heatmap guide](http://images.ctfassets.net/gwbpo1m641r7/2iSvnDwHqHGIYW3ypzPqPU/97df0813e75a2dce8f53e3afa4ac9fc4/BLOG-SMB-survey-tools-5838317__1_.jpeg?w=3840&q=100&fit=fill&fm=avif)
Beispiel 1: Eine Scrollmap zeigt, dass wichtige Inhalte ignoriert werden
Die obige Heatmap ist eine Scrollmap, die anzeigt, wie weit die Besuchenden auf der Seite nach unten scrollen. Sie wurde auf der langen Karriereseite von Contentsquare platziert, um zu sehen, wie potenzielle Bewerber:innen mit dem Inhalt interagieren.
Wenn du dir die Scrollmap anschaust, kannst du sofort zwei starke Änderungen im Farbverlauf erkennen: eine am oberen Rand der Seite (von rot zu gelb) und eine im unteren Viertel (von grün zu dunkelblau). In einer Scrollmap ist allgemein zu erwarten, dass die Farben im Verlauf nach unten allmählich kälter werden. Eine starke Veränderung ist ein Hinweis darauf, dass ein signifikanter Prozentsatz der Nutzenden das Scrollen an einem bestimmten Punkt abbricht.
Konzentrieren wir uns auf den Wechsel von grün zu blau am unteren Rand. Aufgrund der Gestaltung des Inhalts können wir zwei Hypothesen aufstellen:
Entweder
a) die Besuchenden denken, dass die Karriereseite mit dem Abschnitt „Aktuelle Stellenangebote“ endet, und verlassen sie deshalb, oder b) potenzielle Bewerber:innen interessieren sich für die offenen Stellen und klicken, um zur nächsten Seite zu gelangen.
In beiden Fällen wird das untere Ende der Seite nur von etwa 20 % der Gesamtbesucherzahl gesehen.
Die Glassdoor-Arbeitgeberbewertung von Contentsquare mit 5 von 5 Punkten (was weit über dem Durchschnitt liegt) ist ein hervorragendes Social-Proof-Element für potenzielle Bewerber:innen, aber 80 % der Personen, die auf die Seite gelangen, schauen sich diese nicht einmal an.
Wenn du die Effektivität dieser Seite allein auf der Grundlage dieses Scrollmap-Beispiels verbessern möchtest, hast du mindestens zwei Möglichkeiten:
Füge unter dem Abschnitt mit den offenen Stellen ein Element hinzu, um anzuzeigen, dass es weitere Inhalte gibt.
Platziere das Social-Proof-Element weiter oben auf der Seite.
💡Pro tip: we combined numerical data from Heatmaps with qualitative insights from Contentsquare Feedback to make even more improvements to the page.
For example, a user pointed out they couldn’t filter openings by roles or location. So we added that option:
User insights like these are a gold mine for your site, product, or service.
Beispiel 2: Eine Clickmap zeigt, dass die Benutzenden ein Video ignorieren
Die Heatmap oben ist eine Clickmap, die auf einer alten Version der Homepage von Contentsquare platziert wurde, um die Interaktion mit den Hauptelementen zu untersuchen.
Die Seite verfügte über eine Abspieltaste „Above the Fold“ (Bereich der Seite, der ohne Scrollen beim Öffnen der Seite sichtbar ist), auf die Besuchende klicken konnten. Nur haben sie es nicht getan:
Siehst du den einsamen, nicht angeklickten „Play“-Button in der Mitte der beiden Heatmaps? Die Desktop-Clickmap ist besonders aufschlussreich: Von fast 7.000 aufgezeichneten Klicks entfielen 3 (drei!) auf das Video.
Wäre dies deine Seite, könntest du also mit Sicherheit davon ausgehen, dass sich praktisch niemand das Video angesehen hat. Und wenn das Video an sich wertvolle Informationen enthält, die nicht in schriftlicher Form an anderer Stelle auf der Seite wiedergegeben werden, liefert allein diese Clickmap deinem UX-Team genügend Beweise dafür, dass die Seite korrigiert werden muss.
Das haben wir übrigens auch getan: Kurz nachdem wir diese Clickmap gesehen hatten, begannen wir mit der Gestaltung und dem Testen einer Reihe neuer Homepages – keine davon mit einem Video „Above the Fold“:
💡Pro tip: conducting user interviews with Contentsquare Engage could also help us get direct feedback from users on why they don’t click on the video. This preliminary product research step would inform the type of change we need to make to the section before setting up an experiment.
Beispiel 3: Eine Movemap zeigt, wohin Benutzende ihre Maus bewegen
Die obige Heatmap ist eine Movemap, die die Mausbewegungen von Nutzenden während ihrer Navigation auf der Seite anzeigt.
Sie wurde im Blog von Contentsquare in einem Beitrag über Heatmaps veröffentlicht (ja, das ist sehr meta). Die aus dieser Art von Heatmap gesammelten Informationen geben dir eine klare Vorstellung davon, was die Aufmerksamkeit der Besuchenden am meisten fesselte:
Die Besuchenden bewegten den Mauszeiger viel häufiger zu dem Bild als zu allen anderen Bereichen der Seite. Was sagt uns das? Zum einen zeigt dies, dass dieser Bereich die Aufmerksamkeit vieler Menschen erregt, sodass wir dafür in Zukunft eine Erweiterung oder eine eigenständige Seite in Betracht ziehen könnten. Bevor wir jedoch konkrete Entscheidungen treffen, müssen wir den Kontext dieses Verhaltens analysieren und unsere Hypothese bestätigen – in diesem Fall ist die Movemap ein hervorragender Ausgangspunkt für weiterführende und vertiefende Untersuchungen.
💡Pro tip: a content feedback survey can also help us determine whether readers are satisfied with the content on the page, what might be missing, or whether the layout isn’t to their liking.
4. Engagement-Zonen-Karten zeigen, wie Nutzer mit der Seite interagieren
Engagement-Zonen-Karten kombinieren Datensätze aus Klicks, Mausbewegungen und Scrolls auf Desktop – bzw. Taps und Scrolls auf Mobilgeräten und Tablets – in einer einzigen Ansicht. Sie sind das zentrale Heatmap-Analyse-Tool für Datenvisualisierung.
Was die Engagement-Zonen hervorgehoben haben
Beim Blick auf den Testimonial-Bereich unserer „About us“-Seite zeigt das Heatmap-Tool, dass Nutzer mit den Cards interagieren (yay!).
Das Glassdoor-Logo und das Element „Current Contentsquare employee“ erhalten die meiste Interaktion, als wollten Nutzer darauf klicken, um die Bewertung direkt auf Glassdoor zu sehen… aber keines dieser Elemente ist klickbar (uh oh).
Schlimmer: Der CTA „Read the review“, der tatsächlich klickbar ist, wird komplett ignoriert (uh oh).
Warum Engagement-Zonen für diesen Use Case wertvoll waren
Das Nutzerverhalten in diesem Bereich deutet darauf hin, dass Besucher die Authentizität der Glassdoor-Bewertungen überprüfen möchten. Man könnte schließlich annehmen, dass ein Unternehmen ohne verlinkte Testimonials diese einfach erfunden hat.
Diesen Eindruck wollen wir unbedingt vermeiden – zumal wir tatsächlich auf die Glassdoor-Bewertungen verlinken.
Engagement-Zonen-Karten haben hier eine potenzielle Vertrauenslücke sichtbar gemacht. Mit diesem Insight können wir das Design der Testimonial-Cards überarbeiten, um die UX zu verbessern, indem wir:
das Glassdoor-Logo und das untere linke Element klickbar machen und/oder
den CTA „Read the review“ sichtbarer gestalten.
💡Pro Tipp: Bevor wir Änderungen vornehmen, können wir mit einer Concept-Testing-Umfrage einen Preferenztest durchführen, um herauszufinden, welches Design bei den Nutzern am besten ankommt.
5. Rage-Click-Karten zeigen genau, wo Nutzer auf der Seite frustriert sind
Wie der Name vermuten lässt, zeigt eine Rage-Click-Karte, wo auf der Seite Rage-Klicks auftreten. Rage-Klicks sind wichtige Hinweise auf Nutzerfrustration — sie deuten auf Reibungspunkte hin, die Conversion Rates beeinträchtigen.
Was die Rage-Click-Karte hervorgehoben hat
Beim Blick auf die Preistabelle fällt auf, dass das Rage-Click-Muster besonders auf die in jedem Plan enthaltenen Features abzielt.
Das deutet darauf hin, dass Nutzer entweder nicht verstehen, was diese Features bedeuten, oder mehr Details erwarten. Nutzer könnten davon ausgehen, dass jedes Feature zu einer Erklärung führt — entweder auf derselben oder einer separaten Seite.
Warum die Rage-Click-Karte für diesen Use Case wertvoll war
Das Rage-Click-Muster zeigt, dass unsere Preistabellen möglicherweise überarbeitet werden müssen, um die UX zu verbessern. Mögliche Optionen:
Info-Bubbles sichtbarer machen
Die Inhalte der Info-Bubbles anzeigen, wenn Nutzer über den Text hovern (nicht nur über die Bubbles)
Info-Bubbles durch ein Dropdown-Element ersetzen
Die Feature-Bezeichnungen klarer formulieren
Einen Link einfügen, der Nutzer weiter unten auf der Seite zu detaillierten Erklärungen führt
Indem sie Frustrationspunkte sichtbar macht, liefert die Rage-Click-Karte konkrete UX-Optimierungsansätze. Wir können nun A/B-Tests durchführen, um herauszufinden, welche Änderungen bei unseren Nutzern am besten ankommen.
Pro-Tipp:
Wenn Sie nach weiteren Beispielen suchen, finden Sie im Kapitel Heatmaps Case Study Erfolgsgeschichten von Marketern, UX-Designern und E-Commerce-Managern, die Website-Heatmaps zur Verbesserung ihrer Websites genutzt haben.
Gather more insights with the different types of heatmaps → Mehr Insights mit verschiedenen Heatmap-Typen
Jetzt, da Sie wissen, wie jeder Heatmap-Typ funktioniert, steht nichts mehr im Weg, um verwertbare Insights zum Nutzerverhalten zu sammeln. Beginnen Sie mit der Datenerhebung, um die User Experience auf Ihrer Website zu verbessern und die Conversions zu steigern.
![[Visual] Contentsquare's Content Team](http://images.ctfassets.net/gwbpo1m641r7/3IVEUbRzFIoC9mf5EJ2qHY/f25ccd2131dfd63f5c63b5b92cc4ba20/Copy_of_Copy_of_BLOG-icp-8117438.jpeg?w=1920&q=100&fit=fill&fm=avif)