Heatmaps in der Usability Analyse

Website Analyse Tools, wie beispielsweise Google Analytics oder Matomo, eigenen sich hervorragend, um mittels großer Datenmengen einen Gesamtüberblick über die Website zu erlangen. Meistens sind diese Tools jedoch limitiert. Sie helfen oftmals nur bedingt dabei, genau zu verstehen, wie die Nutzer mit der Website interagieren. Die zusätzliche Verwendung von Heatmaps schließt diese Lücke und bietet wertvolle Einblicke in die Nutzerinteraktion und -navigation.

Was sind Heatmaps?

Heatmaps sind eine visuelle Darstellung von Datenpunkten. Sie basieren auf einem Farbcode, welcher Hotspots der Nutzeraktivität hervorhebt. Üblicherweise reicht das Farbspektrum von blau (geringe Nutzeraktivität) bis rot (hohe Nutzeraktivität).

Eine Heatmap ist in der Regel ein halb transparentes Overlay, das auf einer einzelnen Webseite abgebildet wird. Anhand der farbigen Bereiche der Heatmap lässt sich erkennen, mit welchen Elementen der Seite sich die Nutzer am meisten beschäftigen und welche eher übersehen oder ignoriert werden.

Heatmaps unterstützen die Prüfung, ob die Seitenelemente, wie beispielsweise Schaltflächen und Formulare, wie vorgesehen funktionieren. Eine Heatmap kann auch dabei helfen, die Customer Journey zu optimieren, indem Potentiale der Website aufgedeckt werden können, die verbessert werden sollten. Dies kann dazu beitragen, die Conversion Rate zu optimieren.

Wie funktionieren Heatmap Analysen?

Heatmapping Tools sammeln Daten darüber, wie Nutzer mit einer Seite interagieren: Was sie anklicken, wie weit sie scrollen und sogar wo sie den Mauszeiger platzieren. Das Tool zeichnet diese Daten auf und stellt sie visuell als mehrfarbige Karte der Seite dar. Diese sind in der Regel gut verständlich und aussagekräftiger als die alleinstehenden Daten.

Es lassen sich drei Arten von Heatmaps definieren:

Scroll Maps

Die Scroll Map spiegelt wider, wie weit die Nutzer auf einer Seite nach unten scrollen. Eine Scroll Map unterteilt die Seite in große horizontale Abschnitte. Jede Sektion wird eingefärbt, je nachdem wie viele Nutzer diesen Bereich gesehen haben. So ist beispielsweise der oberste Bereich einer Webseite meist rot eingefärbt, da dieser Abschnitt in der Regel von jedem Nutzer gesehen wird. Die unteren Abschnitte der Seite werden dann schrittweise blauer, je nach Prozentsatz der Nutzer, die so weit nach unten scrollen.

Scroll-Maps eignen sich hervorragend für die Analyse der Leistung von längeren Seiten. Auch lässt sich ableiten, ob wichtige Informationen von Nutzern gesehen werden oder ob Sie an einer anderen Stelle besser platziert wären.

Bei der Analyse ist zu beachten, dass oftmals die wichtigsten Aspekte einer Website in dem oberen Bereich eingebettet sind, so zum Beispiel klare Call-To-Action-Schaltflächen, die zum nächsten Schritt führen. So kann es durchaus sein, dass durch die hohe Relevanz der oberen Bereiche die unteren Sektionen weniger gesehen werden. Dies ist jedoch nicht unbedingt ein Indikator für eine schlechte Performance dieser Abschnitte. Aus diesem Grund sollten die Erkenntnisse von Scroll Maps stets mit weiteren Informationen ergänzt und angereichert werden.

Click Maps

Click Maps sind detaillierter als Scroll Maps. Anhand einer Click Map lassen sich die Seitenelemente nachvollziehen, auf die die Nutzer klicken. Die Elemente mit den meisten Klicks werden rot dargestellt. Dazu gehören in der Regel Call-to-Action-Schaltflächen, Navigationsmenüs, eingebettete Videos und Links.

Click Maps können dabei helfen, die Relevanz von klickbaren Elementen zu bewerten. Gegebenenfalls wurden primäre Call-to-Action-Schaltfläche vorgesehen, mit denen die Nutzer interagieren sollen. Gegebenenfalls gibt es jedoch andere Elemente, welche mehr Klicks erhalten. Hieraus kann man ableiten, wonach die Nutzer wirklich suchen und welche Inhalte sie ansprechen, um anhand dieser Erkenntnisse die Seite entsprechend umgestalten zu können.

Ein Vorteil der Click Map Analyse ist es, auch missverständliche Bereiche erkennen zu können. So kann man ableiten, ob Nutzer auf Elemente klicken, die dafür nicht vorgesehen sind. Häufig werden beispielsweise Bilder angeklickt, die nicht klickbar sind. Diese Daten können helfen, Ablenkungen auf der Seite zu erkennen, zu beseitigen und die User Journey weiter zu verfeinern.

Hover Maps

Auf den ersten Blick sehen Hover Maps wie Click Maps aus. Der entscheidende Unterschied ist, dass Hover Maps zeigen, wo Nutzer ihren Mauszeiger platzieren, unabhängig davon, ob sie tatsächlich auf ein Element klicken oder nicht. Dadurch kann das unterbewusste Nutzerverhalten aufgedeckt werden. Ersichtlich wird beispielsweise, wie die Nutzer die Seite lesen und “scannen”, bevor sie sich entscheiden, tatsächlich zu klicken. Es besteht nämlich eine starke Korrelation zwischen der Position des Cursors und der Stelle, an der der Nutzer sich auf der Seite befindet.

Diese Usability Analysen können helfen, eine bessere visuelle Architektur für Landingpages und andere wichtige Bereiche der Website zu entwerfen.

Sie benötigen eine Usability Analyse?

Wir helfen Ihnen und unterstützen Sie dabei!

Vorteile von Heatmaps

Überprüfung der Website-Struktur

Heatmaps können aufdecken, ob die Nutzer wie vorgesehen auf der Website navigieren. Nehmen sie die Schlüsselelemente wahr oder scrollen sie direkt an ihnen vorbei? Klicken sie auf etwas, das sie nicht anklicken sollten? Bewegen sie sich ziellos auf der Seite umher, als ob sie sich Probleme hätten, einen bestimmten Abschnitt zu finden?

Im Idealfall sollten die Nutzer schnell finden, was sie brauchen und zum nächsten Schritt geleitet werden, ohne abgelenkt zu sein. Heatmaps können aufzeigen, ob dies wirklich der Fall ist. Die Usability Analyse für jede wichtige Seite hilft bei der Gestaltung einer konsistenten User Journey auf der gesamten Website.

Optimierung der Conversionrate

Heatmap Analysen können auch die eigenen Strategien zur Optimierung der Conversionrate ergänzen. Mittels solchen Webanalyse Tools kann eingeschätzt werden, wie viele Besucher ein wichtiges Ziel nicht erreichen – Heatmaps können ergänzend zeigen, warum dies geschieht.

Sind beispielsweise die Conversion-Elemente zu weit unten auf der Seite platziert, wo viele Nutzer gar nicht erst hin scrollen? Verschmilzt die Call-to-Action-Schaltfläche mit dem Rest der Seite, so dass sie nur schwer zu erkennen ist? Lenken irrelevante Links Besucher ab und führen sie zu anderen Bereichen Ihrer Website?

Heatmaps können Antworten auf diese und viele weitere Fragen geben und helfen somit, die Website so zu optimieren, dass die wichtigsten Conversionziele erreicht werden können.

Optimierung der Benutzerfreundlichkeit für mobile Zugriffe

Die Nutzung von Websites über mobile Endgeräte nimmt stetig zu. Viele Websitebesitzer konzipieren ihre Seite jedoch vorwiegend für die Desktopnutzung. Eine Seite, die auf dem Desktop perfekt funktioniert, kann jedoch bei der Anzeige auf mobilen Geräten Probleme aufweisen.

Beispielsweise könnte ein wichtiges Element der Navigation weniger gut sichtbar sein, wenn es auf dem Handy in einem eingeklappten Hamburger-Menü versteckt ist. Oder es gibt ein Popup-Fenster, das auf dem Desktop gut funktioniert, aber auf einem kleinen Bildschirm den Zugriff auf ein Element unmöglich macht.

Eine Heatmap Analyse kann dabei helfen, diese Hindernisse zu identifizieren. Ebenfalls kann sie eine bessere Vorstellung dessen geben, wie mobile Nutzer auf der Seite scrollen und klicken. So kann die Website im Hinblick auf die mobile Nutzung weiter optimiert werden.

Wie man Heatmap-Analysen in Kombination mit Webanalysen und A/B-Tests verwendet

Heatmap Analysen funktionieren am besten, wenn sie mit anderen Webanalyse- und Testtools kombiniert werden.

In der Praxis ist es oft am besten, mit dem allgemeinen Webanalysetool (zum Beispiel Google Analytics) zu beginnen, um Bereiche der Website zu identifizieren, die unterdurchschnittlich performen. Sobald diese Bereiche ausfindig gemacht wurden, können darauf basierend Usability Analysen zum Einsatz kommen. Diese können helfen, den Grund für die schlechte Leistung zu ermitteln. Auf diese Weise ist es möglich, mit Hilfe von Heatmaps Hindernisse für verschiedene Website-Besucher zu erkennen und zu beseitigen. So kann die Seiten optimiert werden, um die User Journey zu gestalten und die Website-Ziele zu erreichen.

Wenn ein A/B-Test durchgeführt wird, können Heatmaps ebenfalls einen frühen Hinweis darauf geben, wie zwei Versionen einer Seite im Vergleich abschneiden. Wird die Call-to-Action-Schaltfläche in der B-Version laut einer Hover Map mehr beachtet? Klicken vielleicht sogar weniger Personen darauf? Ist sie gegebenenfalls leichter zu erkennen, hat aber einen verwirrenden Text? Diese Art von Daten können die Schlussfolgerungen aus A/B-Tests ergänzen.

Heatmapping Tools

Je nach Heatmapping Tool stehen verschiedene Funktionen bereit. Folgende Funktionalitäten sollten bei der Entscheidung für oder gegen ein Heatmapping Tool berücksichtigt werden:

Verhaltensanalytik: Hilft einem Unternehmen, sofortige Änderungen an der Website vorzunehmen, um die Benutzerfreundlichkeit zu verbessern. Diese Funktion sammelt und verfolgt alle Mausbewegungen und jegliches Nutzerfeedback.
Prädiktive Analyse: KI-Tools sagen zukünftige Ergebnisse voraus, indem sie historische Daten, Data Mining und maschinelles Lernen nutzen, um Risiken und ROI-Möglichkeiten zu identifizieren, die die Performance einer Website steigern.
Trichter-Analyse: Zeichnet die Reise eines Nutzers durch eine Website auf und identifiziert die Stellen, an denen Besucher stehen geblieben sind. Diese Erkenntnisse werden genutzt, um Webseiten zu optimieren, die Nutzer zu einem Kauf oder einer Registrierung auf der Website führen.
Einsetzbar auf mobilen Geräten: Heatmap-Software-Tools, die auf mobilen Geräten eingesetzt werden können, bieten tiefere Einblicke in das mobile Erlebnis der Nutzer.
Umfragen/Befragungen: Bei Umfragen können Besucher Website-Funktionen auswählen, die sie mögen oder nicht mögen.
Überwachung in Echtzeit: Verfolgt in Echtzeit, wie die Besucher die Website nutzen und ermöglicht es einem Unternehmen, schnell auf Trends zu reagieren.

Die zwei wohl bekanntesten Tools sind Hotjar und Microsoft Clarity, welche die oben genannten Funktionalitäten aufweisen.

Hotjar

Hotjar wird für seine benutzerfreundliche Oberfläche und das einfach zu bedienende Dashboard gelobt. Dieses Heatmapping Tool bietet Scoll-, Click und Hover Maps. Hotjar stellt außerdem Funktionen für Aufzeichnungen, Umfragen und Kundenfeedback bereit. Insbesondere die Feedback-Funktion für Nutzer ist ein nützliches Tool, das bei anderen Heatmap-Produkten nicht angeboten wird. Es gibt kostenfreie und kostenpflichtige Produktpakete.

Microsoft Clarity

Microsoft Clarity ist ein kostenloses Analysetool mit dem Schwerpunkt der Analyse des Nutzerverhaltens. Microsoft Clarity hilft dabei, die Interaktion der Nutzer mit den Funktionen der Website sichtbar zu machen und verstehen zu können. Die einfach zu bedienende Plattform bietet Analysen der Bereiche Session Playbacks und Heatmaps in einem klaren, visuellen Format.

Microsoft Clarity wurde entwickelt, um die Nutzeranalyse zu vereinfachen. Dadurch kann die Nutzererfahrung (UX) optimiert werden. Die Website hat das Ziel, Besucher in irgendeiner Form zu konvertieren. UX-Daten sind dabei der Schlüssel zur Optimierung dieses Ziels. Zusammenfassend lässt sich sagen, dass Microsoft Clarity im Bereich der Datenanalyse eine Menge zu bieten hat. Auch wenn es bei weitem nicht das einzige Tool ist, das man in dem eigenen Analytics-Werkzeugkasten benötigt, bietet es doch eine Reihe von Funktionen, die man mit beispielsweise Google Analytics nicht erhält.