{"id":76833,"date":"2023-01-05T16:39:35","date_gmt":"2023-01-05T11:09:35","guid":{"rendered":"https:\/\/vwo.com\/blog\/?p=76833"},"modified":"2025-11-13T15:17:57","modified_gmt":"2025-11-13T09:47:57","slug":"heatmaps-online-shop","status":"publish","type":"post","link":"https:\/\/vwo.com\/blog\/de\/heatmaps-online-shop\/","title":{"rendered":"\u00a0Heatmaps: Definition und Beispiele f\u00fcr Ihren Online-Shop"},"content":{"rendered":"\n

Website-Heatmaps sind ein unerl\u00e4ssliches Tool, um die Performance des eigenen Online-Shops im digitalen Wettbewerb zu bestimmen und zu verbessern. Im Kampf um Traffic, Engagement und Conversion ist das Wissen, welche Elemente zielf\u00fchrend arbeiten und welche nicht, von entscheidender Bedeutung. In diesem Artikel erfahren Sie, was Website-Heatmaps sind, welche Typen es gibt und wie man sie erstellt.<\/p>\n\n\n\n

\"Heatmaps<\/figure>\n\n\n\n

Was ist eine Heatmap?<\/h2>\n\n\n\n

Die Website-Heatmap ist eine bestimmte Methode, um Daten zum Nutzerverhalten zu visualisieren und damit die Performance einer Webseite grafisch sichtbar zu machen. Eine Heatmap bereitet Daten in Form eines Diagramms oder einer Karte auf, wobei unterschiedliche Farben f\u00fcr Datens\u00e4tze und Werte stehen. In der Regel kommt ein Warm-Kalt-Farbschema zum Einsatz. Warme Farben bedeuten, dass ein Bereich einer Website viel Aufmerksamkeit auf sich zieht. Kalte Farben stehen f\u00fcr weniger Aufmerksamkeit und farblose Bereiche f\u00fcr gar keine. Dank dieser Darstellung erkennt man auf den ersten Blick, welche Elemente gut und welche weniger gut funktionieren.<\/p>\n\n\n\n

\"Heatmap
Bildquelle: ryte.com<\/a><\/figcaption><\/figure>\n\n\n\n

Was ist die Geschichte von Heatmaps?<\/h2>\n\n\n\n

Die Idee der Heatmap ist uralt. Laut Wikipedia<\/a> haben Stadtplaner in Paris bereits im 19. Jahrhundert Karten eingef\u00e4rbt, um statistische Daten aus einzelnen Stadtbezirken anschaulicher gegen\u00fcberstellen zu k\u00f6nnen. Das Konzept ist also buchst\u00e4blich \u201caltbew\u00e4hrt\u201d.<\/p>\n\n\n\n

Im Kern sind Heatmaps nichts anderes als Clusteranalysen. So bezeichnet man Verfahren, die dabei helfen, \u00c4hnlichkeiten in gro\u00dfen Datenbest\u00e4nden zu entdecken und sichtbar zu machen. Die konkreten \u00c4hnlichkeiten bei Heatmaps bestehen darin, dass sich User in Bezug auf ein bestimmtes Objekt gleich oder fast gleich verhalten. Zum Beispiel schauen viele Besucher beim Besuch eines Online-Shops zuerst auf die gleiche Stelle, klicken auf den gleichen Link oder scrollen bis zu einer bestimmten H\u00f6he. Heatmaps bilden diese \u00c4hnlichkeiten grafisch ab und machen es so viel einfacher, Muster zu erkennen, fundierte Hypothesen \u00fcber die Gr\u00fcnde zu erstellen und Webseiten wohlbegr\u00fcndet zu optimieren.<\/p>\n\n\n\n

\"Blog<\/a><\/figure>\n\n\n\n

Welche Arten von Website-Heatmaps gibt es?<\/h2>\n\n\n\n

Es gibt zahlreiche Arten von Website-Heatmaps. Welche davon die richtige ist, h\u00e4ngt von verschiedenen Faktoren ab. Dazu z\u00e4hlen die M\u00f6glichkeiten der Datenerhebung, die relevante Kennzahl, die Ziele, die gew\u00fcnschte Form der Visualisierung usw. Die drei f\u00fcr Online-Shops wichtigsten Heatmap-Typen stellen wir im Folgenden vor.<\/p>\n\n\n\n

Clickmaps <\/strong>bilden die Klicks auf Elemente einer Webseite ab. Oft geklickte Elemente werden in w\u00e4rmeren Farben angezeigt, weniger oft geklickte in k\u00e4lteren. Zu diesen Elementen z\u00e4hlen insbesondere Bilder, Links und Call-to-Action-Buttons (CTA). Clickmaps verraten zum einen, welche Elemente besonders beliebt sind. Zum anderen zeigen Sie auch Navigationsl\u00fccken auf einer Webseite. Wenn z. B. viele User auf ein Produktfoto klicken, das aber nicht verlinkt ist, haben Sie ein ganz starkes Argument daf\u00fcr in der Hand, einen Link zu hinterlegen. Denn offenbar erwarten die User ja, \u00fcber den Klick bestimmte Inhalte aufzurufen, z. B. eine detaillierte Produktbeschreibung oder weitere Bilder. Clickmaps k\u00f6nnen auch die Information liefern, ob ein CTA an der richtigen Stelle oder eher abseits der Aufmerksamkeit der User platziert ist.<\/p>\n\n\n\n

\"Heatmap
Bildquelle: ryte.com<\/a><\/figcaption><\/figure>\n\n\n\n

Scrollmaps <\/strong>zeigen, wie die User eines Online-Shops nach oben und unten scrollen und in welchen Abschnitten sie verweilen. Anhand der Daten l\u00e4sst sich nachvollziehen, wie viele User die Seite komplett oder nur zum Teil gesehen haben. Au\u00dferdem k\u00f6nnen Sie erkennen, welche Sektionen die Besucher l\u00e4nger gefesselt und welche sie eher zum Absprung veranlasst haben. Mit Hilfe von Scrollmaps k\u00f6nnen Sie die optimale L\u00e4nge einer Seite bestimmen und einzelne Abschnitte besser auf das Conversion-Ziel ausrichten, z. B. indem Sie den zentralen CTA in den Bereich verlegen, der ohnehin die gr\u00f6\u00dfte Aufmerksamkeit der Besucher genie\u00dft.<\/p>\n\n\n\n

\"Heatmap
Bildquelle: hotjar<\/a><\/figcaption><\/figure>\n\n\n\n

Eye-Tracking-Heatmaps<\/strong> f\u00e4rben diejenigen Bereiche des Online-Shops ein, die wirklich betrachtet werden. Zu diesem Zweck beobachtet ein Ger\u00e4t die Bewegungen der Aug\u00e4pfel. Elemente, die User h\u00e4ufig und lange ansehen, sind auf der Heatmap w\u00e4rmer eingef\u00e4rbt. Eye-Tracking-Heatmaps sind sehr n\u00fctzliche Tools, wenn es darum geht, das Suchverhalten der Besucher zu analysieren und mit dem Conversion-Ziel einer Seite abzugleichen. Das Ergebnis einer Analyse einer Produktseite eines Online-Shops k\u00f6nnte z. B. darin bestehen, dass aufmerksamkeitsstarke Elemente (Bilder, Videos etc.) User ablenken und so vom Kauf abhalten. (\u00dcbrigens verwechseln viele Eye-Tracking-Heatmaps mit Mouse-Tracking-Heatmaps. Erstere basieren auf den Augenbewegungen, wohingegen letztere nur den Mauszeiger erfassen und von diesem auf die Augenbewegungen schlie\u00dfen. Dahinter steht die Hypothese, dass die Augen dem Mauszeiger folgen.)<\/p>\n\n\n\n

\"Heatmap
Bildquelle: Wikipedia<\/a><\/figcaption><\/figure>\n\n\n\n
\"Free<\/a><\/figure>\n\n\n\n

Wie lassen sich Online-Shops mit Heatmaps optimieren? <\/h2>\n\n\n\n

Online-Shops sind umsatzrelevante Websites mit einem klaren Ziel: Besucher m\u00f6glichst effizient zum Kauf zu f\u00fchren. Daher lohnt sich der Einsatz von Heatmaps zur Analyse des Userverhaltens und zur Optimierung des Conversion-Funnels auf jeden Fall! Denn das Ergebnis lautet: steigende Conversion Rate, mehr Umsatz, h\u00f6herer Gewinn.<\/p>\n\n\n\n

Schauen wir uns ein paar Beispiele f\u00fcr den Einsatz von Heatmaps im Online-Shop an.<\/p>\n\n\n\n

Landingpages<\/strong> sind definiert als Websites, auf die ein potenzieller Kunde nach einem Klick auf ein Suchergebnis (bei Google o. \u00e4.) oder eine Anzeige (z. B. einen Banner) gelangt. Auf der Landingpage soll der Nutzer eine bestimmte, zuvor definierte Aktion ausf\u00fchren, z. B. sich f\u00fcr einen Newsletter anmelden oder ein Produkt kaufen.<\/p>\n\n\n\n

In diesem Beispiel untersuchte ein Anbieter von Babywindeln seine Landingpage. Eine Eye-Tracking-Heatmap lieferte ein ganz klares Ergebnis: Das Foto des Babys, speziell das niedliche Gesicht, absorbierte fast die komplette Aufmerksamkeit. Kaum jemand achtete auf die eigentlichen \u201cHauptdarsteller\u201d, die Windel und die Marke des Anbieters. Offenbar war der Eyecatcher zu gut – auch das gibt es.<\/p>\n\n\n\n

\"Heatmap
Bildquelle: emerce.nl <\/a><\/figcaption><\/figure>\n\n\n\n

Der Anbieter tauschte das Bild aus. Das Baby \u00e4nderte die Blickrichtung, weg vom User, hin zur Headline und zum Werbetext. So lenkte das Baby die Aufmerksamkeit der Besucher auf die Botschaft des Anbieters. Diesen Effekt belegte eine neue Eye-Tracking-Heatmap.<\/p>\n\n\n\n

\"Heatmap
Bildquelle: emerce.nl <\/a><\/figcaption><\/figure>\n\n\n\n

Produktseiten<\/strong> sind daf\u00fcr verantwortlich, dem User alle Informationen zu liefern, die er f\u00fcr seine finale Kaufentscheidung braucht. Oft genug kommen User bereits mit fester Kaufabsicht und sind auf emotionaler Ebene l\u00e4ngst \u00fcberzeugt. Dennoch ist es unerl\u00e4sslich, dass die Produktseite alles daf\u00fcr tut, um den Interessenten nicht von seinem Vorhaben abzubringen, sondern ihn – im Gegenteil – schnellstm\u00f6glich zum Kaufabschluss zu geleiten. Mit vollst\u00e4ndigen Informationen, mit guten Argumenten, mit einer attraktiven Produktdarstellung.<\/p>\n\n\n\n

\"Heatmap
Bildquelle: sitecentre<\/a><\/figcaption><\/figure>\n\n\n\n

Das obige Beispiel zeigt eine Clickmap einer Produktseite f\u00fcr eine Armbanduhr. Es f\u00e4llt sofort auf, dass viele User auf die Produktabbildung klickten. Offenbar erwarteten sie, dass sich das Bild f\u00fcr eine detailliertere Ansicht vergr\u00f6\u00dfert. Leider sah der Online-Shop diese Funktion nicht vor. Die Clickmap zeigt, dass viele Interessenten die Uhr dennoch ihrem Warenkorb hinzuf\u00fcgten. Aber wer wei\u00df, wie viele von ihnen wegen dieses vermeintlich kleinen Vers\u00e4umnisses kurz vor dem Kauf noch abgesprungen sind?<\/p>\n\n\n\n

Checkout-Seiten<\/strong> sind die virtuellen Kassen von Online-Shops. Dort w\u00e4hlt der Kunde sein bevorzugtes Zahlungsmittel, gibt Liefer- und Rechnungsadresse an und best\u00e4tigt seine finale Bestellung bzw. Buchung. Diese letzte Stufe im Sales-Funnel ist kritisch, denn viele Kunden brechen den Kaufvorgang an dieser Stelle ab – je nach Studie ein bis zwei Drittel! Daf\u00fcr gibt es viele Gr\u00fcnde: zuvor unbekannte Lieferkosten, zu lange Lieferzeiten, umst\u00e4ndliche Eingabeformulare, fehlende Optimierung f\u00fcr Smartphones (und daher schlechte UX), zu wenig Informationen, zu viele Informationen, aber auch Informationen an der falschen Stelle.<\/p>\n\n\n\n

\"Heatmap
Bildquelle: mouseflow<\/a><\/figcaption><\/figure>\n\n\n\n

Zur Erinnerung: Scrollmaps zeigen u. a. an, bis zu welcher Stelle auf einer Webseite User scrollen. Das Beispiel zeigt, dass viele relevante Angaben von einem betr\u00e4chtlichen Teil der User nicht gesehen werden. Die Zahlungsm\u00f6glichkeiten sehen noch 80 %, die namhaften Referenzen nur noch 60 % und die FAQs nur noch die H\u00e4lfte. Das muss nicht, kann aber problematisch sein. Es ist wichtig, dass diejenigen Informationen, die f\u00fcr den Kaufabschluss von entscheidender Bedeutung sind, im direkt sichtbaren Bereich der Checkout-Seite platziert sind. Je weiter Interessenten nach unten scrollen m\u00fcssen, um sie zu finden, desto unwahrscheinlicher ist es, dass sie \u00fcberhaupt wahrgenommen werden.<\/p>\n\n\n\n

Wie erstellt man eine Heatmap?<\/h2>\n\n\n\n

Es existieren zahlreiche Heatmapping-Tools, mit deren Hilfe sich Heatmaps erstellen lassen. Um Ihre Daten aus der Webanalyse zu visualisieren, bieten sich z. B. Google Sheets\/Excel<\/a> und Google Analytics<\/a> an.<\/p>\n\n\n\n

Wenn Sie tiefere Einblicke gewinnen m\u00f6chten, ben\u00f6tigen Sie leistungsf\u00e4higere L\u00f6sungen. Mit integrierten Tools wie VWO Heatmaps <\/a>k\u00f6nnen Sie die Performance Ihrer Website direkt den Zielen Ihres Conversion-Rate-Optimierungsprogramms gegen\u00fcberstellen. Daf\u00fcr m\u00fcssen Sie lediglich einen kleinen Codeschnipsel namens Smartcode in Ihre Website einf\u00fcgen. Anschlie\u00dfend kann VWO-Heatmaps das komplette Engagement Ihrer User auswerten und die Daten so visualisieren, dass Sie am laufenden Band wertvolle Tipps zur Verbesserung Ihrer Website erhalten.<\/p>\n\n\n\n

\"Frame<\/a><\/figure>\n\n\n\n

Wie finde ich das richtige Heatmap-Tool?<\/h2>\n\n\n\n

Nicht jedes Heatmap-Tool ist gleich. Und nicht jedes ist gleich gut. Es ist gar nicht so einfach, eine L\u00f6sung zu finden, die Ihren Anforderungen gerecht wird. Wir raten Ihnen, bei der Wahl der besten Heatmapping-Software auf diese Parameter zu achten:<\/p>\n\n\n\n