Praxisguide
Heatmaps sind besondere zweidimensionale Diagramme, in denen verschiedene Mengen durch Farben dargestellt werden. Heatmaps geben Auskunft darüber, auf welchen Elementen Klicks gemessen wurden und wo Besucher ihre Maus bewegt haben.
In diesem Praxisguide beantworten wir zuerst die Frage, für wen sich Heatmaps überhaupt lohnen. Wir stellen die verschiedenen Arten von Heatmaps vor und zeigen insbesondere, welche Erkenntnisse sich aus ihnen ablesen lassen.
Autor
Julian Kleinknecht
Eine Heatmap ist eine besondere Art eines zweidimensionalen Diagramms, in dem verschiedene Mengen durch Farben dargestellt werden. Bereiche mit hohen Werten werden rot (entsprechend „sehr heiß“) dargestellt. Bereiche mit niedrigen Werten in blau. Dazwischen gibt es orangene und gelbe Bereiche (in absteigender Reihenfolge).
In diesem Praxisguide stellen wir Heatmaps für Besucheraktionen auf Websites vor. Diese können basierend auf diese Aktionen generiert werden:
Wir beantworten im nächsten Kapitel zuerst die Frage, für wen sich Heatmaps überhaupt lohnen. In den darauffolgenden Kapiteln stellen wir diese Heatmaps/Berichte vor und zeigen insbesondere, welche Erkenntnisse aus ihnen abgelesen werden können:
Scroll-Heatmaps thematisieren wir in einem eigenen Praxisguide.
Die Antwort auf diese Frage lautet in sehr vielen Fällen „ja“. In den letzten Jahren sind die entsprechenden Tools sehr günstig geworden. HotJar, ein bekanntes Tool, bekommen Sie schon für 29 EUR/Monat.
Außerdem können Kollegen und Vorgesetzte in vielen Fällen mit Visualisierungen besser als mit „bloßen“ Zahlen überzeugt werden. In manchen Fällen können Sie also einfach ein Bild mit Kollegen teilen und zeigen, dass viele Besucher klicken, wo kein Link ist.
Klicks können natürlich auch in Webanalyse-Tools wie Google Analytics aufgezeichnet werden. Insbesondere wenn kein Tag Manager im Einsatz ist, bedeutet dies häufig jedoch viel Arbeit und lange Wartezeiten.
Besonders für Landingpages sind Heatmap-Tools empfehlenswert. Für Online-Shops sind sie jedoch nur auf bestimmten Seitentypen wie die Startseite oder eigenständige Landingpages sinnvoll (siehe Kapitel 3.3).
Klick-Heatmaps sind grafische Repräsentationen der Klicks von Website-Besuchern. Es werden nicht nur Klicks auf Links oder klickbare Elemente dargestellt, sondern auch Klicks auf Bereiche, die eigentlich nicht klickbar sind bzw. wo ein Klick keine Funktion auslöst.
Klick-Heatmap in „ClickTale“
Wie funktioniert das Ganze? Die Tools erstellen Klick-Heatmaps in zwei Schritten.
Alle relevanten Tools basieren auf JavaScript. In die zu analysierende Website wird ein JavaScript-Code („Tag“) eingebaut, der die Daten zum Besucherverhalten an den Server des Toolbetreibers sendet. Das jeweilige JavaScript-Tag registriert, wenn gescrollt wird.
Dann wird die erreichte Höhe in Pixeln per HTTP-Anfrage an das Tool gesendet. Alle Anfragen einer Session werden mit einer eindeutigen Session-ID verknüpft, um das Verhalten einzelner Besucher getrennt analysieren zu können. Zusätzlich werden weitere Daten (beispielsweise Datum, Zeit und Browser-Typ) gespeichert, die später zur Feinauswertung und Segmentierung genutzt werden können.
Abbildung 1: HTTP-Anfrage von „ClickHeat“. Screenshot der Chrome-Entwicklertools. Die Koordinaten des Klicks (341|200) sind gelb markiert
Um die gespeicherten Klicks „über“ die Seite zu legen, wird die tatsächliche Website, einschließlich Bildern entweder
Wenn in der Oberfläche des Tools eine Heatmap angefragt wird, generiert das Tool auf Basis der gesammelten Koordinaten die Heatmaps.
Das generierte Bild wird über den Screenshot der Website gelegt. Zu diesem Zweck wird entweder das schon gespeicherte Screenshot (Variante 1) verwendet oder ein Screenshot von der gespeicherten URL erstellt (Variante 2).
Die zweite Variante hat den großen Nachteil, dass sich Seiten zwischen dem Besuch einerseits und der Generierung der Heatmap andererseits oft verändern. In diesem Fall wird die Heatmap über eine Seite gelegt, welche Besucher so nicht gesehen haben.
Weiterbildung per eLearning.
Keine Anmeldung notwendig
Welche Erkenntnisse können nun aus Klick-Heatmaps gewonnen werden?
Einer der interessantesten Einblicke in das Besucherverhalten durch Klick-Heatmaps ist, welche Bereiche einer Website von Besuchern angeklickt werden, die jedoch mit keiner Seite verlinkt sind und keine Reaktion hervorrufen.
Dies kann in diesen Fällen erfolgen:
Natürlich können auch Klicks auf klickbare Elemente analysiert werden. Diese können zum Beispiel sein:
Wie immer in der Webanalyse gilt auch für Heatmaps: Es muss eine genügend hohe Anzahl an Datenpunkten vorhanden sein, um sinnvolle Erkenntnisse abzuleiten. Eine Heatmap basierend auf nur 100 Besuchern ist wenig wert – insbesondere da nicht jeder Besucher klickt und so die Anzahl der Datenpunkte noch niedriger ist.
Analysieren Sie Heatmaps also erst, wenn eine hohe Anzahl an Besuchern aufgezeichnet wurde. Und achten Sie immer auch auf die absolute Anzahl der Klicks. Gibt es zum Beispiel einen roten Bereich mit scheinbar vielen Klicks, überprüfen Sie, ob es sich nicht nur um 10, sondern eine wirklich hohe Zahl handelt.
Falls sehr eindeutige Ergebnisse vorliegen, kann man jedoch auch mit weniger Datenpunkte vorlieb nehmen. Wenn von 50 Besuchern 49 auf ein Element klicken, welches nicht klickbar ist, dann läuft mit hoher Sicherheit etwas falsch.
Für Online-Shop sind Heatmaps nur beschränkt sinnvoll. Deren Einsatz ist größtenteils auf statische Seiten (Startseite, Landingpages, evtl. Kategorieseiten) und statische Elemente (Header, evtl. Navigation) beschränkt. Die meisten Seiten eines Online-Shop – allen voran Produktdetailseiten und Kategorieseiten – sind hoch dynamisch, das heißt für verschiedene Produkte bzw. Produktkategorien sich Elemente an verschiedenen Positionen platziert sein.
Der sehr dynamische Seitenaufbau von Online-Shops stellt Heatmap-Tools vor große Herausforderungen. Bei Otto.de gibt es auf der Produktdetailseite folgende Unterschiede für verschiedene Produkte:
Produktdetailseite für Laptop auf otto.de
Produktdetailseite für Shirt auf otto.de
Auf otto.de wird das gleiche Problem auch für die Kategorieseiten sichtbar. Die Unternavigation in der Kategorie „Jacken“ ist sehr viel länger als die der Kategorie „Anzüge“.
Kategorieseite auf otto.de
Kategorieseite auf otto.de
Diese Unterschiede dynamischer Seiten wie Produktdetails- oder Kategorieseiten führen zu diesen Herausforderungen:
Wenn Klicks auf einer bestimmten Menge an Produktdetailseiten nun zusammengefasst werden und über das Abbild einer einzelnen Produktdetailseite gelegt werden, sind die einzelnen Elemente höchstwahrscheinlich nicht mehr eindeutig identifizierbar.
Falls Produktdetailseiten in bestimmten Bereichen eines Online-Shops (zum Beispiel Elektronik oder Laptop) alle sehr ähnlich aufgebaut sind, können diese in der Tat aggregiert betrachtet werden. Einzelne Produktdetailseiten können jedoch unmöglich betrachtet werden. Dies wäre bei der großen Anzahl an Produkten äußerst ineffektiv und würde das Besucherverhalten nicht repräsentativ wiedergeben.
Wenn nun beispielsweise die Heatmaps der obigen Kategorieseiten von Otto.de übereinander gelegt werden, ist nicht klar, ob Klicks im linken Bereich auf die Unternavigation (Jacken) oder die Farb-Filter (Anzüge) erfolgt sind.
Als Alternative bietet sich das Tracking von Klicks auf den In-den-Warenkorb-Button, die Größenauswahl oder die Zoomfunktion mithilfe des Ereignis-Tracking des Webanalyse-Tools. Es ist dann zwar keine visuelle Ansicht vorhanden und der Aufwand ist höher, man sich jedoch um die variablen Positionen keine Sorgen machen.
In manchen Heatmaps stehen zusätzliche Informationen über das Klickverhalten auf Links zur Verfügung. Verfügbare Daten sind beispielsweise:
Die Zahlen werden dabei aus allen im Report einbezogenen Besuchersitzungen aggregiert.
Diese Funktion ist insbesondere interessant, da neben der rein visuellen Darstellung schnell „Zahlenfutter“ abgerufen werden kann, um die Heatmap besser zu verstehen und das Verhalten der Besucher tiefer zu analysieren.
Die von den Tools aufgezeichneten Daten für die Link-Analyse lassen sich in zwei Kategorien aufteilen:
Link Analytics in „Clicktale“
Link Analytics in „MouseFlow“
Was kann man mit diesen Daten anfangen? Schauen Sie sich diese Daten an:
Die vergangene Zeit vom Laden einer Seite bis zum Klick auf einen bestimmten Link kann Auskunft darüber geben, wie lange Besucher benötigen, diesen Link zu finden. Wenn diese Zahl hoch ist, sollte der Link möglicherweise an einer prominenteren Stelle platziert werden.
Die Hover-Metriken sind zwar nett, wirkliche Erkenntnisse und Handlungsempfehlungen kann man jedoch aus ihnen nicht ableiten. Das Berühren eines Links entspricht einfach keiner bestimmten Intention eines Besuchers. Man könnte denken, dass das Berühren aber nicht Klicken eines Links dafürsteht, dass Besucher zwar überlegt haben, einen Link anzuklicken, sich dann jedoch dagegen entschieden haben. Dies entspricht jedoch nicht der Realität:
Die Metriken der Link Analytics werden auf ähnliche Weise wie die Heatmaps berechnet. Neben den Koordinaten der Klicks wird für diesen Report zusätzlich noch der Zeitpunkt des Klicks gespeichert. Mithilfe dieser Information kann nicht nur die Zeitspanne vom Zeitpunkt, an dem die Seite geladen wurde, bis zum Klick, sondern auch die Reihenfolge der Klicks bestimmt werden.
Hover-Metriken werden berechnet, indem analog zum Klick auf einen Link auch das „Hovern“ per JavaScript aufgezeichnet wird und die Metriken auf die gleiche Weise wie für Klicks berechnet werden.
Wie der Name vermuten lässt, stellen diese Heatmaps die Mausbewegungen der Besucher dar. Wie auch bei den Klick-Heatmaps repräsentieren rote Bereiche diejenigen Bereiche der Seite, auf welchen die Mauszeiger der Website-Besucher die meiste Zeit und die blauen Bereiche, die wenigste Zeit verbrachten.
Diese Heatmaps sind an das traditionelle Eye-Tracking angelehnt. Statt jedoch die tatsächlichen Blickverläufe zu messen, werden Mausbewegungen gemessen.
Bericht „Mouse Movement“ von „ClickTale“
Mausbewegungs-Heatmap „SessionCam“
Es ist umstritten, welche Informationen tatsächlich aus den reinen Mausbewegungen gezogen werden können. Die Hersteller behaupten gerne, dass die Mausbewegungen sehr stark mit den Blicken der Besucher korrelieren und somit teure Eye-Tracking-Studien in Laboren ersetzen. [1] Mausbewegungs-Heatmaps sollen also zeigen, welche Bereiche und Elemente der Seite die meiste Aufmerksamkeit erhalten.
Folgende Punkte sollten jedoch bei der Beurteilung dieser Funktion im Hinterkopf behalten werden:
Wie beschrieben ist die Evidenz der Toolanbieter für die Korrelation Mausbewegung-Augenbewegungen sehr dünn. Das deckt sich mit unseren Erfahrungen: Jedes Mal, wenn wir Besuchern beim Besuch von Websites über die Schulter geschaut haben, haben diese zwar die Website ausführlich betrachtet, ihrer Maus jedoch nicht im gleichen Umfang bewegt. Als Ersatz für Eye-Tracking sind diese Heatmaps deshalb nicht geeignet.
Vor allem auf Landingpages bietet es sich an, zu überprüfen, ob alle Elemente, die im Vordergrund stehen sollen, dies auch tatsächlich tun. Wenn Trust-Symbole wie Testsieger-Logos beispielsweise auf den Heatmaps vollkommen blau eingefärbt sind, dann könnten diese an einer anderen prominenteren Stelle platziert werden, da sie an der bisherigen Position nicht wahrgenommen werden.
Die Mausbewegungs-Heatmaps sind vor allem auf Kategorieseiten hilfreich. Sie können unter anderem aufzeigen, wie sehr Element wie die Filter, die sich oft am linken Rand befinden, genutzt werden. Je röter dieser Bereich eingefärbt ist, desto mehr Zeit verbringen Besucher dort und verwenden die Filter. Natürlich gelten auch hier die Einschränkungen aus dem Kapitel 3.3.
Mausbewegungs-Heatmaps werden auf sehr ähnliche Art wie Klick-Heatmaps erstellt. Statt Klicks wird vom Tracking-Tool jedoch die Position des Mauszeigers zu verschiedenen Zeitpunkten aufgezeichnet. Diese gespeicherten Positionen werden an den Server des Tools gesendet. Je öfter die Position gespeichert wird, desto präziser sind die später generierten Heatmaps.
Die Informationen werden zunächst im Browser gespeichert und die Daten gesammelt an den Server gesendet. Je höher die Frequenz der Kommunikation mit dem Server, desto geringer ist die Gefahr, dass Daten dadurch verloren gehen, dass der Besucher die Seite verlässt. Je häufiger jedoch mit dem Server kommuniziert wird, desto größer ist die auch die Menge der übertragenen Daten und die dadurch erzeugt Prozessor- und Datenlast im Browser.
Basierend auf der vergangenen Zeit zwischen den aufgezeichneten Positionen werden die Bewegungen rekonstruiert. Je mehr Datenpunkt zu einem Koordinaten-Bereich aufgezeichnet wurden, desto „heißer“ ist der jeweilige Bereich. Das so generierte Bild wird dann, wie bei den Klick-Heatmaps, über den Screenshot der Seite gelegt.
HTTP-Anfragen des eTracker Page Optimizer. Der gelb hinterlegte Teil stellt die Position des Mauszeigers dar (in Klartext: 620, 487), der grüne Teil die Nummerierung der HTTP-Anfragen
[1] „Independent research shows that there is an 84% to 88% correlation between mouse and eye movements, allowing us to create high-precision heatmaps based on just the users‘ mouse movements.“ (http://www.clicktale.com/products/mouse-move-heatmaps)Tatsächlich gibt es nur wenige wissenschaftliche Studien zu diesem Thema. In der 2001 veröffentlichten Studie „What can a mouse cursor tell us more?“ schreiben die Autoren Chen, Anderson und Sohn von der Carnegie Mellon University, Pittburgh, USA: „The data also show that there are regular patterns of eye/mouse movements. Based on these findings, we argue that a mouse could provide us more information than just the x, y position where a user is pointing.“