Zuletzt aktualisiert: September 22, 2021

Eine Heatmap ähnelt einem Wärmebild oder einem farbigen Diagramm. Aber was hat sie mit Online-Marketing zu tun? Heatmaps zeigen, wie sich User auf Deiner Website verhalten. Dadurch weißt Du, welche Bereiche gut funktionieren und welche nicht. Mit diesem Wissen kannst Du Deine Website optimieren.

In dem folgenden Artikel erklären wir Dir, was man unter Heatmaps genau versteht und wie sie funktionieren. Außerdem erfährst Du wofür Heatmaps genutzt werden und welche verschiedenen Arten es gibt. Zum Schluss stellen vor die Alternative des Eye Tracking vor.

Das Wichtigste in Kürze

  • Heatmaps ermöglichen Dir Daten einfach in eine Grafik umzuwandeln. Sie werden vor allem im Online-Marketing genutzt, um Websites zu optimieren.
  • Die unterschiedlichen Arten der Heatmap können das Verhalten von Website-Besuchern analysieren. Dabei werden wichtige Bereiche der Website lokalisiert und dort relevante Inhalte platziert.
  • Je nachdem wie professionell Du Deine Webseite untersuchen möchtest, benötigst Du unterschiedlich viele Features. Auf dem Markt gibt es verschiedene kostenlose und kostenpflichtige Anwendungen der Heatmap.

Glossareintrag: Der Begriff Heatmap im Detail erklärt

Um Dir zu erklären was Heatmaps sind und wofür sie genutzt werden, haben wir für Dich alle wichtigen Fragen beantwortet. So bist und bleibst Du gut informiert, wenn es um die Analyse Deiner Webseite geht.

Was ist eine Heatmap?

Unter Heatmap versteht man eine Darstellungsform, mit der Daten visualisiert werden. Dazu gehören beispielsweise die Aufmerksamkeit, das Engagement und die Interaktion der Besucher auf einer Internetseite. (1)
Heatmaps haben ihren Namen aus dem Englischen. heat = Hitze map = Karte. Sie werden so genannt, weil sie klassischerweise mit den gleichen Farben wie Wärmebildkameras arbeiten.

Zum Beispiel zeigen warme Farben die Stellen, an denen die Aufmerksamkeit am größten ist. Kalte Farben deuten auf die Bereiche der Webseite hin, die von den Besuchern übersehen werden.

Dank dieser Analyse kannst Du eine Art Wärmebild erstellen, welches die Bereiche einer Website hervorhebt, die die meiste Aufmerksamkeit bekommen oder die das meiste Engagement erzeugen.

Wie funktioniert eine Heatmap und wie ist sie aufgebaut?

Eine Heatmap arbeitet mit verschiedenen Farben, die typischerweise Temperaturen zugeordnet werden. Die folgenden Farben werden genutzt: (5)

  • Rot: „ganz heiß“
  • Orange: „mittel heiß“
  • Gelb: „warm“
  • Grün: „kühl“
  • Blau: „kalt“

Je wärmer die Temperatur, desto höher ist die Intensität der abgebildeten Daten. So wird beispielsweise auf einer Website eine rot eingezeichnete Fläche am häufigsten von Besuchern angeklickt.

Der Vorteil von Farben ist, dass sich auch Zwischenstufen leicht verständlich darstellen lassen.

Wozu sind Heatmaps nützlich?

Heatmaps sind ein wirksames Tool, um Websites zu analysieren und herauszufinden, welche Inhalte die größte Aufmerksamkeit beim Nutzer erzeugen. (2)
Ziel ist es, die wichtigsten Elemente einer Website so zu präsentieren und platzieren, dass der Besucher sie wahrnimmt. Im besten Fall klickt er darauf oder liest und verweilt auf der Website.

Beispielsweise kann die Anordnung von Bildern, Texten, Überschriften und Textblöcke, aber auch die Verwendung von Farben und Symbolen Einfluss auf das Nutzerverhalten haben. Durch gezielte Visualisierung und Platzierung wird dem User automatisch die Navigation erleichtert beziehungsweise teilweise sogar ganz abgenommen. (7)

Allerdings ist es trotz langjähriger Erfahrung oft nicht so eindeutig, ob bestimmte Elemente gut eingebaut sind. Deshalb solltest Du nicht raten oder vermuten, was die Besucher wahrnehmen, sondern die Daten mit einer Heatmap testen.

Heatmaps helfen bei der Analyse von Webseiten. Sie geben Aufschluss über die Wahrnehmung der verschiedenen Bereiche und Buttons. (Bildquelle: Unsplash / Myriam Jessier)

Heatmaps können, anhand der unterschiedlichen Farben, beispielsweise folgende Daten visualisieren:

  • Klicks von Usern auf das Webangebot (Click-Through-Rate)
  • Mausbewegungen auf der Website
  • Scrollbewegungen (3)

In einem Shop ist es zum Beispiel wichtig, dass der Nutzer sofort den “Warenkorb”- und den “zur Kasse”-Button sieht. Außerdem soll er sich den Shop nicht nur anschauen, sondern auch etwas kaufen. Die Seite sollte also so aufgebaut werden, dass sie zu einer Conversion führt. Dieses Verhalten kannst Du mit einer Heatmap sehr gut analysieren.

Aber auch bei anderen Websites und Blogs ist es sehr interessant zu sehen, wie sich der Besucher verhält und welche Bereiche er wie stark wahrnimmt.

Landingpages (Startseiten einer Website) sind oft so aufgebaut, dass der Leser in einer bestimmten Reihenfolge bis zum Bestellbutton (oder etwas Ähnlichem) geführt wird. Das kannst Du mithilfe einer Heatmap veranschaulichen, analysieren und optimieren.

Aus der Analyse der Heatmap ergeben sich wichtige Erkenntnisse für die OnPage Optimierung.

Heatmaps sind auch für SEOs und Marketingstrategen sehr interessante Analysewerkzeuge. So können Experten Heatmaps zum Beispiel dafür nutzen, wichtige Bereiche ihrer Website zu lokalisieren, um dort relevante Inhalte zu platzieren. Dies kann wiederum zu einer höheren Click-Through-Rate (CTR) führen. Auf diese Weise hilft die Heatmap dabei, die Usability zu steigern. (5)

Für Webdesigner kann die Heatmap Belege für die Gestaltung einer Internetseite liefern. Dadurch können Designer Seiten so gestaltet, dass sich Nutzer wie gewünscht verhalten.

Damit eine Heatmap aussagekräftige Ergebnisse anzeigt, solltest Du auf Folgendes achten:

  • Traffic / Verkehr: Je mehr Besucher eine Webseite besuchen, desto höher ist die Aussagekraft einer Heatmap. (6)
  • Minimale Änderungen: Bei der Optimierung solltest Du immer nur einzelne Elemente verändern. So kannst Du einzelne Effekte besser zuordnen. (6)
  • Statische Inhalte: Damit Du eine aussagekräftige Heatmap erstellen kannst, müssen die Inhalte zunächst erstellt und getestet werden. Während des gesamten Testzeitraumes müssen die Inhalte unverändert bleiben. Für dynamische Inhalte sind Heatmaps eher ungeeignet. (6)
  • Split-Tests: Hier werden zwei unterschiedliche Varianten einer Webseite miteinander verglichen. Dafür werden sie für einen bestimmten Zeitraum nacheinander geschaltet. (6)

Welche Arten von Heatmaps gibt es?

Es gibt viele verschiedene Arten von Heatmaps, die unterschiedliche Verhaltensmuster von Nutzern analysieren. Dazu gehörten Aktion wie zum Beispiel Klicken oder Scrollen. Diese werden dann aufgrund ihrer Intensität in unterschiedlichen Farben in der Heatmap dargestellt.

Du musst nicht alle Heatmap-Varianten nutzen. Allerdings ergeben sich oft aus der Kombination verschiedener Informationen die besten Resultate. Für jede Webseite eignet sich außerdem eine andere Art der Heatmap.

Die Clickmap

Die klassische Heatmap, auch Clickmap genannt, analysiert die Klicks der Website-Besucher auf einer Website. Je mehr Klicks in einem bestimmten Bereich stattfinden, umso “heißer” wird dieser Bereich. (4, 6)

Eine Clickmap ermöglicht es, zu erkennen, welche Bereiche oft angeklickt werden. Zu den meist angeklickten Bereichen gehörten meist Links.

Die Scrollmap oder „Content Analyse“

Eine weitere Variante der Heatmap ist die sogenannte Scrollmap. Diese zeigt an, welche Bereiche der Webeite von wie vielen Besucher gesehen wurden, das heißt wie weit die Website-Besucher herunterscrollen.

Als “Above the Fold”-Bereich wird der Bereich bezeichnet, den der User ohne Scrollen sieht.

Alles was sich unterhalb des sogenannten “Above the Fold”-Bereich befindet, kann vom Besucher nur durch scrollen gesehen werden. Deshalb wird der “Below the Fold”-Bereich von Nutzern weniger oft gesehen und beachtet. (4)

Außerdem wird in der Scrollmap markiert, welche Elemente die meiste Aufmerksamkeit auf sich ziehen und wo der Besucher verweilen.

Rot bedeutet auch hier wieder, dass dieser Seitenbereich am meisten von Nutzern wahrgenommen wurde. Mittels der Scrollmap Analyse siehst Du also welche Bereiche der Webseite für den User nützlich sind. (6)

Die Percentage of Clicks Heatmap

Die Percentage of Clicks Heatmap ergänzt die klassische Heatmap. Mit ihr kannst Du nachvollziehen, wie viele Klicks von jedem einzelnen Inhalt generiert wurden. (4)

Es hilft Dir dabei Aussagen über folgende Dinge zu treffen:

  • Wie wichtig seid einzelne Elemente oder Bilder für meinen Nutzer?
  • Gibt es Bilder ohne Links auf meiner Seite, die der Nutzer anklicken kann?

Beantwortest Du die Fragen und optimale irrtet dementsprechend Deine Website, erhöhst Du die Usability.

Die Confetti Heatmap

Auf diesen Heatmaps werden die Klicks nicht abstrakt mit unterschiedlichen Farben dargestellt, sondern jeder einzelne Klick als Punkt. Dadurch entstehen sogenannte Confetti Maps.

Unterschiedliche Farben helfen dabei unterschiedliche Besuchertypen zu bestimmen. So kannst Du beispielsweise verschiedene Farben für unterschiedliche Herkunftsseiten anzeigen lassen oder Klicks neuer und wiederkehrender Besucher darstellen.

Mit der Confetti Heatmap kannst Du außerdem erkennen, ob jemand versucht hat nicht-klickbare Bereiche anzuklicken – falls ja kannst Du das Problem nun lösen. Das ist im Hinblick auf die Usability sehr wichtig. (4)

Mouse Movement Heatmap

Mouse Movement Heatmaps zeichnen die Bewegungen der Mouse auf. Aber was willst Du mit der Mousebewegung anfangen?

Das ist ganz einfach. Sehr viele Website-Besucher fahren mit der Mouse die Bereiche ab, die sie gerade anschauen oder lesen. So kannst Du mit der Heatmap ungefähr nachvollziehen, was sich Deine Besucher angeschaut und welche Inhalte sie wahrgenommen haben. (6)

Dadurch ist es möglich oft angeschaute Bereiche bei der Optimierung noch einmal mehr in den Vordergrund zu rücken.

Wie erstelle ich eine Heatmap?

Um eine Heatmap zu erstellen, gibt es verschiedene Möglichkeiten. Diese unterscheiden sich stark voneinander und können daher auch zu unterschiedlichen Ergebnissen führen.

In der folgenden Tabelle stellen wird Dir einige Heatmaps vor:

  • Heatmap-Simulationen: Diese Simulationen werden kostenlos im Internet angeboten. Sie arbeiten auf Grundlage von Datenbeständen, Algorithmen und Erfahrungswerten. Die daraus entstehenden Heatmaps sind jedoch oft unpräzise und deshalb nur uneingeschränkt zu empfehlen. (7)
  • Mit Excel: Excel bietet seit der Version 2013 die sogenannte Power Map Funktion an. Je nach Version musst Du Power Maps als Add-In installieren. Zur Erstellung gibt es einige gute Erklärungen im Internet. (9)
  • Skripte und Plugins: Für WordPress gibt es viele verschiedene Plugins wie zum Beispiel das „Heatmap – Realtime Analytics“. Dieses Tool kann eine Heatmap der eigenen Webseite erzeugen. Auch Skripte, die auf einem lokalen Server installiert werden, können Heatmaps erstellen. Beide Tools können allerdings den Server oder die Datenbank belasten und somit die Ladezeiten der Webseite verlängern. (7)
  • Kostenpflichtige Anbieter: Diese Heatmaps sind geeignet für ausführliche Analysen. Sie beinhaltet meist mehrere Features wie zum Beispiel Click- und Scrollmaps, sowie Mouse-Movements. Daraus erstellen diese Programme hochwertige und aussagekräftige Heatmaps. (7)

Zu den kostenpflichtigen Anbieter gehören beispielsweise crazyegg.com, overheat.de oder mouseflow.com.

Allgemein ist allerdings festzuhalten, dass Heatmaps nur erste Indizien liefern. Die anschließende Interpretation der Daten stellt den entscheidenden Faktor dar. Daher empfiehlt sich eine Kombination mit Daten aus anderen Programmen wie Google Analytics.

Wodurch zeichnet sich eine gute Heatmap aus?

Wenn Du auf der Suche nach einem Heatmap Tool bist, solltest Du folgende Punkte beachten: (4)

  • Segmentierung nach Verhalten: Das Heatmap Tool sollte Dir ermöglichen, Heatmaps für einzelne Besuchergruppen zu erstellen. Dazu gehören zum Beispiel neue Besucher, Besucher, die bereits Kunden sind und Besucher, die über Kampagnenlinks auf Ihre Seite gelangen.
  • Heatmap Vergleich: Die Ergebnisse verschiedener Heatmaps solltest Du einfach miteinander vergleichen können.
  • Organisieren von Seitenvorlagen: Für jede Unterseite eine einzelne Heatmap zu erstellen, kann sehr aufwändig sein. Bei hunderten oder tausenden Unterseiten dauert es ewig bis Du alle Produktseiten analysiert hast. Die Heatmap sollte daher Ergebnisse von Seiten einer bestimmten Art zusammenfassen können.
  • Responsive Heatmaps: Das Heatmap Tool sollte auch auf Webseiten funktionieren, die über mobile Geräte – wie beispielsweise Handys – aufgerufen werden. Aktivitäten wie Touch, Scrollen oder Swipen sollten ebenfalls aufgezeichnet werden. In der Analyse sollte das Tool die Ergebnisse von Mobile und Desktop Devices unterscheiden können.
  • Heatmap exportieren: Die Heatmap sollte außerdem aus der Anwendung exportiert und geteilt werden können. So kannst Du die Ergebnisse ganz einfach mit Deinen Kollegen teilen.
  • Dynamische Heatmaps: Ein Heatmap-Toll sollte auch die Klicks auf dynamischen Elementen zeigen können. Dazu gehören beispielsweise Dropdown Menüs, Slider oder Carousel-Ads.
    Je nachdem wie professionell Du Deine Webseite untersuchen möchtest, benötigst Du unterschiedliche viele Features. Eine Anwendung, die alle oben genannten Tool beinhaltet, ist sehr komplex und daher eher für Experten geeignet.

Es gibt auch einfachere Anwendungen, die ebenfalls aufschlussreich sein können. Auch mit kostenlosen Anwendungen kannst Du wichtige Informationen über das Verhalten Deiner Nutzer analysieren.

Welche Alternativen gibt es zu Heatmaps?

Wie bereits angedeutet sind Heatmaps nicht immer ausreichend, um alle wichtigen Verhaltensweisen der Nutzer zu beobachten. Daher solltest Du in Kombination andere Programme verwenden oder auf das Eye Tracking zurückgreifen.
Während Heatmaps hauptsächlich die Mausbewegung und die Klicks der Nutzer auf einer Webseite aufzeichnen, analysiert das Eye Tracking ihre Blicke.

Beim Eye Tracking werden die Augenbewegungen der Probanden aufgezeichnet, während sie sich Inhalte von Webseiten ansehen. (4)

Der Vorteil des Eye Tracking ist, dass Du genau nachvollziehen kannst, wie Besucher Deine Seite anschauen. Dadurch kannst Du die aufmerksamkeitsstärksten Bereiche Deiner Webseite einfach analysieren. Zusätzlich bietet es die Möglichkeit Probanden zu bestimmten Elementen zu befragen. (8)

Die Methode des Eye Traking ist allerdings sehr zeitaufwendig und kostenintensiv. Das liegt daran, dass im Vorhinein Probanden ausgewählt werden müssen und benötigtes Equipment für die Messung bereitgestellt werden muss. Im Nachhinein ist zusätzlich eine Auswertung der Ergebnisse notwendig. (8, 10)

Fazit

Heatmaps stellen eine interessante Analyse-Möglichkeit dar. Sie geben Dir einen Einblick in das Verhalten der Website-Besucher und ermöglichen Dir dadurch die Optimierung Deiner Seite. Es gibt verschiedene Varianten und Filter-Möglichkeiten, die entweder kostenlos oder kostenpflichtig erhältlich sind.

Allerdings gibt es auch einige Dinge, auf die Du achten solltest. Beispielsweise solltest Du zusätzliche zu Heatmaps Daten aus anderen Programmen nutzen. So kannst Du den größtmöglichen Nutzen aus Deiner Analyse ziehen.

Weiterführende Literatur: Quellen und interessante Links

[1] [https://www.xovi.de/was-ist-eine-heatmap/]

[2] https://onlinemarketing.de/lexikon/definition-heatmap

[3] https://de.ryte.com/wiki/Heatmap

[4] https://www.abtasty.com/de/blog/heatmap/

[5] https://www.gruenderszene.de/lexikon/begriffe/heatmap

[6] https://www.selbstaendig-im-netz.de/usability/was-sind-heatmaps-und-was-bringen-sie-teil-1-der-heatmap-serie/

[7] https://www.advidera.com/glossar/heatmap/

[8] https://eyetracking.ch/wissen/was-ist-eye-tracking/

[9] https://excelnova.org/wie-man-eine-heat-map-flachenkartogramm-in-excel-erstellt/

[10] https://www.producthunt.com/alternatives/competitive-heatmap-analysis

Bildquelle: pixabay / Pexels

Warum kannst du mir vertrauen?

Testberichte