Heatmaps: So verstehst und verbesserst du deinen Onlineshop

Du hast deine Produktseite sorgfältig gestaltet: Die Bilder zeigen dein Produkt von allen Seiten, die wichtigsten Informationen stehen im Text und der Warenkorb-Button ist gut sichtbar. Trotzdem verlassen einige Besucher:innen deine Seite, ohne etwas zu kaufen.

Woran liegt das? Vielleicht finden sie eine wichtige Information nicht oder klicken auf ein Bild und erwarten, dass sich eine Detailansicht öffnet. Was während des Besuchs auf der Seite passiert, bleibt dir anhand der Verkaufszahlen verborgen. Du siehst das Ergebnis, aber nicht, welche Elemente Besucher:innen genutzt oder übersehen haben.

Heatmaps helfen dir, solche Fragen gezielter zu untersuchen. In diesem Beitrag erfährst du, wie sie funktionieren, welche Arten es gibt und wie du die Ergebnisse für deinen Onlineshop nutzt.

Wie funktionieren Heatmaps?

Heatmap-Tools erfassen bestimmte Interaktionen auf einer Shopseite, um sie anschließend visuell aufzubereiten. Je nach Funktion registrieren sie beispielsweise Klicks, Mausbewegungen oder die Stellen, bis zu denen Besucher:innen scrollen. Dabei werden die Daten vieler Besuche gesammelt und zu Verhaltensmustern zusammengefasst. Du siehst also ein Muster über mehrere Besuche hinweg und nicht einfach den Weg einer einzelnen Person.

Das Tool legt die Ergebnisse anschließend als farbige Ebene über die untersuchte Seite. Welche Werte hinter den Farben stehen, hängt davon ab, welche Daten die Heatmap zeigt.

Welche Arten von Heatmaps gibt es?

Je nachdem, welche Frage du untersuchen möchtest, kannst du unterschiedliche Arten von Heatmaps einsetzen.

Klick-Heatmaps

Klick-Heatmaps zeigen, auf welche Bereiche einer Seite Besucher:innen klicken oder tippen. So erkennst du beispielsweise, ob sie deinen Warenkorb-Button nutzen oder wiederholt auf ein Element klicken, das gar nicht verlinkt ist.

Scroll-Heatmaps

Scroll-Heatmaps zeigen, wie weit Besucher:innen auf einer Seite nach unten scrollen. Damit kannst du prüfen, ob wichtige Informationen oder Angebote überhaupt erreicht werden.

Mausbewegungs-Heatmaps

Diese Heatmaps erfassen, wohin Besucher:innen ihren Mauszeiger bewegen und wo er verweilt. Das kann Hinweise darauf geben, mit welchen Bereichen sie sich beschäftigen. Die Position des Mauszeigers verrät allerdings nicht zuverlässig, wohin jemand schaut.

Aufmerksamkeits-Heatmaps

Aufmerksamkeits-Heatmaps führen je nach Tool mehrere Signale zusammen. Sie können dir helfen, Bereiche zu finden, mit denen sich Besucher:innen besonders intensiv beschäftigen. Was genau als „Aufmerksamkeit“ zählt, hängt dabei vom jeweiligen Tool ab.

Segmentierte Heatmaps

Bei segmentierten Heatmaps betrachtest du für jedes Segment, etwa Mobilgeräte oder Desktop-Computer, eine eigene Auswertung. So kannst du erkennen, ob Menschen deinen Onlineshop auf unterschiedlichen Geräten anders nutzen.

Wie liest und interpretierst du eine Heatmap?

Eine Heatmap wirkt auf den ersten Blick eindeutig: Manche Bereiche leuchten kräftig, andere bleiben blass. Was das für deinen Shop bedeutet, erschließt sich aber erst, wenn du die Darstellung mit einer konkreten Frage verbindest.

1. Starte mit einer Frage

Überlege, was du über die Seite herausfinden möchtest. Interessiert dich, welche Elemente angeklickt werden? Oder fragst du dich, ob Besucher:innen einen bestimmten Abschnitt überhaupt erreichen? So richtest du deinen Blick auf die Daten, die für deine Entscheidung wichtig sind.

2. Lies die Farbskala

Sieh dir die Legende des Tools an, bevor du einzelne Stellen bewertest. Je nach Heatmap stehen die Farben für unterschiedliche Messwerte. Achte dabei auch auf die angezeigten Zahlen: Ein kräftig gefärbter Bereich sagt für sich genommen noch wenig darüber aus, wie viele Besuche in die Auswertung eingeflossen sind.

3. Betrachte die ganze Seite

Schau nicht nur auf die auffälligste Stelle, sondern auch auf das, was davor und danach passiert. Liegt ein kaum genutztes Element weit unten? Lenkt ein anderer Bereich die Interaktion auf sich? Erst im Zusammenhang mit dem Layout kannst du eine plausible Erklärung finden, ohne aus einem einzelnen Farbfleck zu viel abzuleiten.

4. Prüfe den Kontext der Besuche

Vergleiche Daten, die unter ähnlichen Bedingungen entstanden sind. Ein Sale, eine neue Kampagne oder ein Relaunch der Seite kann das Ergebnis beeinflussen. Auch Zeiträume vor und nach einer solchen Änderung solltest du bewusst getrennt betrachten.

5. Formuliere eine überprüfbare Vermutung

Halte fest, was du beobachtest und welche Änderung du daraus ableitest. Zum Beispiel: „Dieser Abschnitt wird selten erreicht. Wenn wir die Information weiter oben platzieren, finden mehr Besucher:innen sie.“

Passende Kennzahlen oder ein A/B-Test helfen dir anschließend, fundierte Entscheidungen zu treffen.

So nutzt du Heatmaps für deinen Onlineshop

Heatmaps lassen sich auf verschiedenen Shopseiten einsetzen. Besonders nützlich sind sie, wenn du Inhalte, Navigation oder das Design einer Seite gezielt optimieren möchtest.

Produktseiten verbessern

Werden Produktbilder häufig angeklickt, könnte eine vergrößerte Ansicht für Besucher:innen hilfreich sein. Mit einer Scroll-Heatmap kannst du außerdem visualisieren, wie viele Besucher:innen die Informationen zu Versand, Größen oder Materialien weiter unten auf der Seite erreichen.

Navigation und Kategorieseiten prüfen

Auf Kategorieseiten erkennst du, welche Filter, Produktkacheln oder Menüpunkte Besucher:innen anklicken. Häufige Klicks auf ein nicht anklickbares Element können darauf hindeuten, dass Besucher:innen dort eine Funktion erwarten.

Warenkorb-Buttons und andere CTAs prüfen

Mit einer Klick-Heatmap siehst du, ob Besucher:innen einen Button tatsächlich nutzen. Bleiben Klicks aus, prüfe gemeinsam mit einer Scroll-Heatmap, ob sie den Button überhaupt erreichen. Anschließend kannst du beispielsweise seine Position oder Beschriftung testen.

Probleme auf Mobilgeräten erkennen

Ein Shop kann auf dem Smartphone anders genutzt werden als am Desktop. Vergleiche deshalb die Heatmaps getrennt: Vielleicht verdeckt ein dynamisch eingeblendetes Element wichtige Inhalte oder ein Button ist auf kleinen Bildschirmen schwer zu erreichen.

Änderungen mit A/B-Tests überprüfen

Eine Heatmap liefert Hinweise für eine Änderung, etwa einen besser platzierten Warenkorb-Button. Ob die neue Version tatsächlich zu mehr Conversions führt, kannst du anschließend mit einem A/B-Test und deinen Shop-Kennzahlen überprüfen.

Wie du wichtige E-Commerce-Kennzahlen einordnest, erfährst du in diesem Video (auf Englisch):

Wie erstellst du eine Heatmap für deinen Shopify-Store?

Um eine Heatmap zu erstellen, brauchst du für deinen Shopify-Store ein passendes Tool. Im Shopify App Store findest du Apps, die Klicks und andere Interaktionen auf deinen Shopseiten darstellen. Die Einrichtung unterscheidet sich dabei je nach App.

1. Wähle eine Seite und eine Frage aus. Entscheide anschließend, welche Art von Heatmap du für diese Seite erstellen möchtest.
2. Installiere eine passende App. Prüfe vorab, welche Heatmap-Arten sie anbietet und wie sie in deinen Store eingebunden wird. Folge anschließend den Einrichtungsschritten der App.
3. Prüfe die Erfassung. Wenn die App einen App-Pixel verwendet, kannst du im Shopify-Adminbereich unter Einstellungen → Kundenereignisse nachsehen und seine Funktion mit dem Shopify Pixel Helper testen.
4. Sammle Daten und werte sie aus. Lass die Heatmap zunächst genügend Besuche erfassen. Vergleiche Mobilgeräte und Desktop getrennt und leite aus auffälligen Mustern eine konkrete Änderung ab.

Fazit: Heatmaps verstehen und sinnvoll nutzen

Heatmaps zeigen dir, wie Besucher:innen mit einzelnen Seiten deines Onlineshops interagieren. Du erkennst zum Beispiel, welche Elemente angeklickt werden und ob wichtige Inhalte weiter unten auf der Seite überhaupt erreicht werden. Das hilft dir, mögliche Hürden zu finden und Änderungen gezielter zu planen.

Eine Heatmap erklärt allerdings nicht, warum sich Besucher:innen so verhalten. Betrachte auffällige Muster deshalb zusammen mit deinen Shop-Kennzahlen und überprüfe anschließend, ob eine Anpassung den gewünschten Effekt hat. So nutzt du Heatmaps als Grundlage für konkrete Verbesserungen, statt dich allein auf einen ersten Eindruck zu verlassen.