Heatmap: Was ist es und wie kann ich damit meine Webseite verbessern?

Wer eine Website betreibt und Gewinn erzielen möchte, der weiß: Die Krux liegt darin, die Aufmerksamkeit der Besucher auf dem Weg zur Conversion nicht zu verlieren. Wie Ihnen dabei eine Heatmap helfen kann, möchten wir heute genauer beleuchten.

Dennoch gibt es eine Menge Websites, auf denen eher wahllos mit den Mitteln der Website Optimierung experimentiert wird. Ein Beispiel: Dem Marketing-Team fällt auf, dass sich seit zwei Jahren nichts mehr auf der Website geändert hat. Schon werden ein paar Tipps, von denen man in einem Online-Artikel gelesen hat, auf die eigenen Seite umgemünzt und man fühlt sich gerüstet für die nächsten zwei Jahre.

So sollte es nicht laufen! Undurchdachte Änderungen auf Ihrer Seite sind der beste Weg:

  • die Conversion Rate zu senken
  • Absatz zu verlieren
  • Besucher abzuschrecken

Ihr Ziel: Ihre User sagen Ihnen selbst, was sich an Ihrer Website ändern sollte.
Und genau dafür gibt es Heatmaps.

Was ist eine Heatmap?

Heatmaps sind eine visuelle Darstellung von Aufmerksamkeit, Engagement und Interaktion Ihrer Besucher. Sie entstehen durch das Navigieren Ihrer User auf Ihrer Seite.

Sie können dank dieser Analyse eine Art Wärmebild Ihrer Website erstellen, welches die Bereiche hervorhebt, die die meiste Aufmerksamkeit bekommen oder die das meiste Engagement erzeugen.

So könnte eine Heat Map aussehen:

Example of heat map
Quelle: www.pixeller.co

Warme Farben zeigen die Stellen, an denen die Aufmerksamkeit am größten ist und kalte Farben deuten auf die Bereiche Ihrer Webseite hin, die von Ihren Besuchern übersehen werden.

Nun können Sie analysieren, wie sich Ihre Besucher auf Ihrer eigenen Website verhalten und gezielte Änderungen vornehmen, um die Conversion zu steigern. Eine großartige Lösung oder nicht?

Lassen Sie sich von Ihren Usern die Bereiche zeigen, die noch verbessert werden können. Machen Sie einfach die entsprechenden Änderungen und messen Sie, wie gut sich diese auf Ihren Absatz auswirken – zum Beispiel mit A/B Testing.

Wann sollten Sie für Ihre Website eine Heatmap erstellen?

Heatmaps sind extrem hilfreich. Sie messen Aufmerksamkeit, Engagement und sogar die Zahl der Klicks auf Ihrer Website.

Um Ihnen ein paar konkrete Beispiele zu geben – hier sind einige Gründe, warum Sie Heatmaps nutzen sollten:

  • Engagement messen. Wenn Sie z. B. Online Artikel schreiben und wissen möchten, bis zu welchem Punkt Ihr Publikum eigentlich liest – benutzen Sie eine Heatmap. Diese kann Ihnen das Scroll-Verhalten Ihrer Leser zeigen, und auch wo sie interagieren. Falls Sie beispielsweise merken, dass nur ein kleiner Anteil bis zu Ihrem Call to Action scrollt, ist es Zeit für ein paar Änderungen.
  • Interaktion messen. Wo klicken meine Besucher? Klicken Sie auf die richtigen Felder? Mithilfe von Heat Maps können Sie herausfinden, ob Ihre Besucher die gewünschten Aktionen durchführen oder ob sie an einer bestimmten Stelle aufgehalten werden.
  • Aufmerksamkeit messen. Welche Headlines oder welche Bilder bekommen die meiste Aufmerksamkeit? Welche Elemente lenken von den wichtigeren Inhalten Ihrer Webseite ab? Sehen Ihre Besucher das Kontaktformular? Sobald Sie Antworten auf Ihre Fragen gefunden haben, können Sie schon die Änderungen durchführen, die Ihre Conversion Rate steigern werden.

Information delivered by a heat map
Quelle: Unbounce

Antworten auf die obigen Fragen zu finden, kann Ihnen außerdem helfen, noch mehr bohrende Fragen zu beantworten:

  • Wo sollten Sie Ihre wichtigsten Inhalte platzieren?
  • Was ist der beste Weg, Bilder und Videos einzubauen?
  • Wo werden meine Besucher abgelenkt?
  • Wo sollte ich über mein Produkt bzw. meinen Service sprechen?

Da Sie nun schon einiges über Heatmaps wissen, fragen Sie sich vielleicht, ob es mehrere Formen von Heatmaps gibt. Ganz richtig – die gibt es.

Welche Heatmaps sollten Sie nutzen?

Die meisten Heatmap Tools geben Ihnen eine Darstellung der User Interaktion aus verschiedenen Blickwinkeln.

Beziehen Sie sich auf alle zur Verfügung stehenden Darstellungen, um das Verhalten Ihrer Besucher bestmöglich erkennen zu können.

Heatmap oder Click Heatmap

Diese Form der Heatmap ermöglicht es, Aktionen auf Ihrer Webseite zahlenmäßig zu messen. Es ist eine visuelle Darstellung aller Klicks, die User auf Ihrer Seite tätigen. Dieses Bild stellt Ihnen sehr wertvolle Daten zur Verfügung, da Sie ganz genau sehen, wo die Leute auf Ihrer Webseite interagieren.

Jedes Mal, wenn ein Klick erfolgt, markiert die Heat map genau diese Stelle mit einem weißen Punkt. Wenn Sie große weiße Bereiche sehen, klickt hier der Großteil Ihrer Besucher.

Click heat map
Quelle: Sumo

Da Sie die „Hot Spots“ sehr schnell und deutlich identifizieren können, ist auch eine Analyse einfach: Klicken Ihre Besucher dort, wo Sie es sich wünschen?

Auf dem obigen Bild von Sumo sehen wir zum Beispiel schnell, dass „SHARE“ und „IMAGE SHARER“ die unbeliebtesten Bereiche sind.

Die Scrollmap oder "Content Analyse"

Die Scrollmap zeigt Ihnen, wie weit Ihre Website-Besucher herunterscrollen. Außerdem, welche Elemente die meiste Aufmerksamkeit auf sich ziehen und wo Ihre Besucher verweilen.

Mithilfe einer Scroll Map können Sie feststellen, ob Ihre User die richtigen Bereiche Ihrer Seite sehen oder ob sie von unwichtigen Elementen abgelenkt werden.

Scroll heat map
Quelle: nguyenvincent.com

Schauen wir uns z. B. diesen Screenshot eines SEO-Artikels an. Wir sehen, dass das Bild und die zwei Zeilen darunter am beliebtesten sind: ca. 85 % der Besucher haben dieses Element gesehen.

Die "Percentage of Clicks" Heatmap

Die “Percentage of Clicks” Heatmap ergänzt die klassische Heat Map. Mit ihr können Sie nachvollziehen, wie viele Klicks von jedem einzelnen Bild oder Element generiert wurden. Die Möglichkeit, Klicks pro Element quantifizieren zu können, ist extrem wichtig.

Es hilft Ihnen dabei:

  • Zu verstehen, wie wichtig einzelne Elemente für die User sind.
  • Zu vermeiden, dass Nutzer Bilder ohne Links anklicken.Percentage of click heatmap

Quelle: nguyenvincent.com

Die "Confetti" Heatmap

Die Confetti Heatmap ist zwar ähnlich zu der klassischen Heat Map, doch ein Unterschied liegt darin, dass Sie jeden einzelnen Klick sehen können und nicht nur eine Dichte von Klicks. So können Sie genau erkennen, ob jemand versucht hat nicht-klickbare Bereiche anzuklicken – falls ja können Sie das Problem nun lösen.

Confetti heatmap
Quelle: CrazyEgg

Sie haben bereits einiges über Heatmaps erfahren. Aber es gibt noch eine weitere Art, das User-Verhalten zu analysieren: Eye-Tracking.

Der Unterschied zwischen Heatmaps und Eye Tracking

Während Heatmaps hauptsächlich die Mausbewegung und die Klicks der User aufzeichnet, analysiert das Eye Tracking ihre Blicke.

Der Vorteil des Eye Tracking ist, dass Sie tatsächlich nachvollziehen können, wie Besucher Ihre Seite anschauen, um die aufmerksamkeitsstärksten Bereiche Ihrer Webseite zu analysieren.

Heat map versus eye tracking
Quelle: Nielsen Norman Group

Während beim Heatmapping die warmen Farben nur den Bereich anzeigen, der die meiste Aufmerksamkeit bekommt.

So hilfreich das Eye-Tracking auch sein mag, es beruht auf einer Technologie, die wesentlich aufwändiger ist als die der Heatmaps. Dafür benötigt man spezielle Ausrüstung, die nur wenige Agenturen besitzen.

Wenn Sie interessiert an Eye Tracking sind: Es gibt Algorithmus-gestützte Lösungen wie Feng-Gui Feng-Gui oder EyeQuant, mit denen sie Eye Tracking durch Algorithmen simulieren können.

Die wichtigsten Heatmap Features

Wenn Sie auf der Suche nach einem Heatmap Tool sind, beachten Sie folgende Punkte:

  • Segmentierung nach Verhalten: Das Heatmap Tool sollte Ihnen ermöglichen, Heatmaps für bestimmten Besuchergruppen zu erstellen. Diese sollten Sie selbst nach bestimmten Zielgruppen- und Segmentkriterien bestimmen können (z. B. Neue Besucher, Besucher, die bereits Kunden sind, Besucher, die über Kampagnenlinks auf Ihre Seite gelangen …).
  • Heatmap Vergleich: Die Ergebnisse verschiedener Heatmaps (z. B. von unterschiedlichen Segmenten) sollten einfach miteinander vergleichbar sein.
  • Organisieren von Seiten-Vorlagen: Für jede Unterseite eine einzelne Heatmap zu erstellen, kann ziemlich aufwändig werden, wenn Sie Produktseiten analysieren wollen – davon hat man oft hunderte oder sogar tausende. Sie sollten also die Heatmap Ergebnisse von Seiten einer bestimmten Art zusammenfassen können.
  • Responsive Heatmaps: Das Heatmap Tool sollte auch auf Seiten funktionieren, die über ein mobiles Gerät aufgerufen werden. Aktivitäten auf mobilen Geräten wie Touch, Scrollen oder Swipen muss ebenfalls aufgezeichnet werden können. In Ihrer Analyse sollten Sie außerdem die Ergebnisse des Verhaltens und Navigierens Ihrer User von Mobile und Desktop Devices unterscheiden können, um die Daten richtig zu interpretieren.
  • Heatmap exportieren: Dank solch einer Funktion können Sie die Ergebnisse ganz einfach mit Ihren Kollegen teilen.
  • Dynamische Heatmaps: Sie sollten auch die Klicks auf dynamischen Elementen Ihrer Seite sehen können: Dropdown Menü, Slider, Carousel, mit AJAX oder JavaScrip framework wie React.js oder Angular.js. geladene Inhalte.
  • Rückwirkende Heatmaps: Hat Ihr Website Design sich seit der letzten Heatmap geändert? Eine Heatmap Lösung sollte die vorherigen Ergebnisse für die zu der Zeit aktuelle Website zeigen und nicht einfach auf das neue Design ummodeln – die Ergebnisse würden sonst verfälscht sein.

Steigern Sie Ihre Conversion Rate: Kombinieren Sie Heatmaps und AB Testing

Stellen wir uns einmal vor, Sie haben eine Heatmap genutzt, um besser zu verstehen, wie Ihre Website Besucher mit Ihrer Marke umgehen. Sie haben starke und schwache Stellen auf Ihrer Seite identifiziert und möchten nun die passenden Änderungen machen.

Frage: Wie können Sie messen, wie effektiv diese Änderungen am Ende sind? Dafür gibt es nur eine Lösung: AB testen Sie Ihre Veränderungen.

Die Idee dahinter ist, verschiedene Versionen Ihrer Webseite, Anzeigen, Landing Pages usw. zu erstellen, um deren jeweilige Performance zu vergleichen.

Durch das kombinieren von Heat Mapping und A/B Testing arbeiten Sie mit einer 3-Stufen-Methode:

  • Probleme identifizieren mithilfe von Heatmaps
  • Potentielle Lösungen mit A/B Testing prüfen
  • Die effektivste Lösung umsetzen

Laden Sie hier unseren kompletten Guide zum A/B Testing herunter.

Zum Abschluss noch ein Beispiel: auf dieser Website für Haushalts-Reparaturen lässt sich gut erkennen, dass die Aufmerksamkeit der User zwischen zu vielen Elementen hin- und hergerissen wird.

Insight: Die Aufmerksamkeit wird gestreut und die Conversion ist niedrig.

heatmap and ab testing
Quelle: KissMetrics

Mithilfe von AB Testing konnte das Unternehmen einige gezielte Änderungen vornehmen und so den Fokus der Besucher wieder auf den Call to Action richten.

Nach den Änderungen wurde eine zweite Heatmap erstellt.

Insight: Die Aufmerksamkeit konnte wieder auf die Telefonnummer und den wichtigsten CTA gerichtet werden und somit das Ziel der Conversion Steigerung erreicht werden.

A/B test your heatmap
Quelle: KissMetrics

Wir fassen zusammen:

Nutzen Sie Heatmaps und AB Testing, um:

  • Besucherverhalten und Engagement zu analysieren
  • Starke und schwache Bereiche Ihrer Webseite aufzudecken
  • Gezielte Wege zur Steigerung der Conversion Rate zu finden
  • Die Lösungswege zu testen, bis Sie Ihre Conversion Rate ansteigen sehen

Seien Sie Ihren Mitbewerbern immer eine Conversion voraus!

Beatrix Schneider

Beatrix Schneider ist Junior Marketing Managerin bei AB Tasty und zuständig für Online und Offline Events im deutschsprachigen Raum. Sie sorgt dafür, dass Sie AB-Tasty auch persönlich erleben können – vom Webinar bis zum Messeauftritt.

Related Posts