Was sind Heatmaps und was bringen sie? – Teil 1 der Heatmap-Serie

Heatmaps - Infos, Tipps und Tricks zur Website-OptimierungHeute möchte ich eine kleine Serie über Heatmaps starten.

Im ersten Teil kläre ich, was das eigentlich ist und wozu diese nützlich sind.

Zudem gehe ich darauf ein, wie man Heatmaps nutzen kann und sollte.

In den weiteren 2 Teilen dieser Serie stelle ich dann einige Heatmap-Anbieter genauer vor und ich zeige, wie ich Selbständig im Netz mit Hilfe von Heatmaps optimiert habe.

Was sind Heatmaps?

Heatmaps gibt es schon lange. Noch bevor diese im Web genutzt wurden, hat man Heatmaps für alle möglichen Zwecke genutzt.

Ursprünglich leitet sich der Name von der Visualisierung von Temperaturunterschieden ab (Quelle: Wikipedia).

Für uns sind aber die Heatmaps interessant, mit denen man das Verhalten von Website-Besuchern visualisieren kann.

Dabei muss man jedoch zwischen verschiedenen Varianten unterscheiden, die landläufig alle unter dem Titel Heatmap zusammengefasst werden:

  • Heatmap
    Heatmaps - Infos, Tipps und Tricks zur Website-OptimierungDie klassische Heatmap ähnelt der Darstellung von Temperaturunterschieden. Man analysiert in der Regel per JavaScript die Klicks, die Websitebesucher auf einer Website vornehmen und je mehr Klicks in einem bestimmten Bereich stattfinden, umso “heißer” wird dieser Bereich.

    Blau sind dabei Bereiche mit relativ wenigen Klicks. Das Farbspektrum geht dann meist über grün, gelb und rot. Sehr oft angeklickte Bereiche sind weiß.

    So eine Heatmap ermöglicht es, sehr schnell zu erkennen, welche Bereiche (meist Links, aber auch sonst wird viel geklickt) oft angeklickt werden und welche nicht.

  • Mouse Movement Heatmap
    Etwas anders funktionieren Mouse Movement Heatmaps. Hier werden nicht die Klicks, sondern die Bewegungen der Mouse aufgezeichnet.

    Nun fragt sich der eine oder andere, was man mit der Maus Bewegung anfangen soll?

    Das ist ganz einfach. Sehr viele Website-Besucher fahren mit der Mouse die Bereiche ab, die sie gerade anschauen/lesen. Das bedeutet, dass man mit so einer Heatmap zumindest ungefähr nachvollziehen kann, was sich die Besucher angeschaut und welche Inhalte sie wahrgenommen haben.

    Das ist sicher kein vollwertiger Ersatz für teure Eyetracking-Analysen, aber es kommt dem am nächsten.

  • Clickmap
    Heatmaps - Infos, Tipps und Tricks zur Website-OptimierungAuf einer Clickmap werden die Klicks nicht abstrakt dargestellt, sondern jeder einzelne Klick.

    So gibt es z.B. sogenannte Confetti-Maps, die jeden Klick anzeigen. Die unterschiedlichen Farben zeigen dabei unterschiedliche Besuchertypen. So kann man bei dem Anbieter, den ich nutze, z.B. verschiedene Farben für unterschiedliche Referrer (Herkunftsseiten) anzeigen lassen oder z.B. neue vs. wiederkehrende Besucher.

    Ich finde solche Confetti-Maps oft noch interessanter als normale Heatmaps.

    Eine andere Variante sind Clickmaps, die für einzelne Links anzeigen, wie oft darauf geklickt wurde. Das ist eine sehr analytische Form der Auswertung, aber dafür bekommt man auch exakte Prozentwerte und absolute Klickzahlen.

    Interessanterweise bietet unter anderem Google Analytics so eine Form der Clickmap an, auf die in Teil 2 dieser Serie dann noch genauer eingehen werde.

  • Scrollmap
    Heatmaps - Infos, Tipps und Tricks zur Website-OptimierungEine weitere Variante ist die sogenannte Scrollmap.

    Diese zeigt an, welche Bereiche der Seite von wie vielen Besucher gesehen wurden. Weiß ist hier der Bereich, der am meisten angesehen wurde bzw. zu dem am häufigsten gescrollt wurde.

    Je kälter die Farben werden (über rot, grün bis hin zu blau) umso weniger Leser haben bis dort gescrollt.

    Daran kann man gut sehen, welche Bereiche überhaupt vom Großteil der Leser wahrgenommen werden.

Man muss sicher nicht alle Heatmap-Varianten nutzen. Allerdings ergeben sich oft aus der Kombination verschiedener Infos die besten Resultate.

Wozu sind sie nützlich?

Aufmerksamkeit ist ein wichtiger Faktor auf Websites. Man möchte die wichtigsten Elemente einer Website möglichst so einbauen, dass sie von den meisten Lesern wahrgenommen werden.

Allerdings ist es trotz Best Practices oft nicht so eindeutig, ob bestimmte Elemente gut und aufmerksamkeitsstark eingebaut sind. Zudem beeinflussen sich die verschiedenen Elemente auch untereinander.

Deshalb sollte man nicht raten oder vermuten, was die Besucher wahrnehmen, sondern man sollte es testen. Und dafür bietet sich die Heatmap (inkl. ihrer verschiedenen Ausführungen) an.

In einem Shop ist es z.B. wichtig, dass die Leser sofort der “Warenkorb”- und den “zur Kasse”-Button sehen. Das kann man mit einer Heatmap sehr gut analysieren (auch wenn Eyetracking dafür noch besser wäre). Aber auch eine Scrollmap ist in diesem Fall eine gute Analyse-Möglichkeit. Vielleicht sehen die meisten Besucher ja gar nicht die wichtigen Button.

Aber auch bei normalen Websites und z.B. Blogs ist es sehr interessant zu sehen, wie die Besucher mit der eigenen Website interagieren und welche Bereiche diese wie stark wahrnehmen bzw. diese anklicken. Die Reihenfolge, wie die einzelnen Inhalte wahrgenommen werden, ist oft sehr wichtig. Dies kann man mit der Mouse Movement Heatmap analysieren.

Landingpages sind oft so aufgebaut, dass die Leser in einer bestimmten Reihenfolge bis zum Bestellbutton (oder etwas ähnlichem) geführt werden. Das sollte man mit Hilfe einer Heatmap dann auch wirklich analysieren und optimieren.

Ich habe die Heatmap z.B. zur Analyse und Optimierung meiner Navigation genutzt. Aber auch die Inhalts-Struktur von einzelnen (wichtigen) Seiten konnte ich damit optimieren.

Andere Möglichkeiten sind z.B. die Erhöhung der Verweildauer, die Senkung der Absprungrate, die Steigerung der Zugriffe auf eine bestimmte Seite, die Wahrnehmung von Abo- oder Sharing-Buttons, die Optimierung des Aufbaus von Artikeln und vieles mehr.

Bei der Steigerung der Einnahmen kann so eine Heatmap ebenfalls helfen, indem man z.B. Affiliate-Links oder -Banner so platziert, dass mehr Leser darauf klicken. Eine Heatmap gibt hier oft sehr gute Hinweise.

Wie oben schon angedeutet, kann man bei der Analyse sehr ins Detail gehen. So kann ich mir z.B. anschauen, wohin Besucher geklickt haben, die von einer bestimmten Suchmaschine oder einer Website kamen. Dadurch kann man z.B. für bestimmte Besuchergruppen wichtige Elemente besser platzieren.

Wie sollte man Sie nutzen?

Die Möglichkeiten sind vielfältig, aber es gibt ein paar Regeln, an die man sich halten sollte bzw. Dinge, die mach beachten muss.

  • genug Traffic
    Zum einen sollte man wissen, dass man genügend Traffic braucht, damit Heatmaps aussagekräftig sind. Mit 20 Besuchern am Tag wird man kaum wirklich relevante Heatmaps erzeugen können. Selbst bei mir braucht es je nach Seite, die ich analysiere, ein paar Wochen bis belastbare Datenmengen gesammelt wurden.

    Im Zweifel muss man es eben länger laufen lassen, wobei man in dieser Zeit keine Änderungen an der betreffenden Seite durchführen sollte.

  • dynamische vs. statische Seiten
    Ein wichtiger Punkt ist, dass eine Heatmap eigentlich nur bei statischen Seiten richtig Sinn macht. Hat man eine Seite, auf der sich ständig in Inhalte ändern, macht es wenig Sinn, über 2 Wochen die Klicks zu messen. Diese werden dann überall verteilt sein.

    Das betrifft z.B. die Blog-Homepage, wo sich jedes mal, wenn ein neuer Artikel erscheint, zumindest der Content-Bereich ändert. Trotzdem habe ich auch meine Startseite analysiert, da dort ja ebenfalls statische Bereiche vorhanden sind, wie z.B. den Header oder die Sidebar.

  • Split-Tests
    Split-Test kann man gut mit Heatmaps verbinden. Allerdings müssen die unterschiedlichen Elemente nacheinander und nicht abwechselnd getestet werden. Also 1 Woche Banner A und danach 1 Woche Banner B. Bei den meisten Heatmap-Tools kann man zeitlich filtern, so dass man dann die jeweilige Woche separat analysieren und vergleichen kann.
  • einzelne Änderungen
    Findet man auf Basis der Heatmap Optimierungspotential, so sollte man immer nur ein Element verändern und dann schauen, wie sich die Heatmap verändert.

    Verändert man dagegen mehrere Elemente, so kann man am Ende nur schwer sagen, welche dieser Änderungen für welchen Effekt verantwortlich ist.

  • strukturiert vorgehen
    Man sollte bei Heatmaps strukturiert vorgehen. Ich habe mehrere Seiten definiert, die ich gerne analysieren wollte. Dann habe ich diese Testfälle angelegt und ein paar Wochen gewartet.

    Danach habe ich diese Heatmaps ausgewertet und meine Schlüsse gezogen. Nach den Änderungen habe ich dann wieder Heatmaps dieser Seiten erstellt und wieder ein paar Wochen gewartet.

Heatmaps sind eine nützliche und spannende Sache, aber man sollte dabei ein paar Dinge unbedingt beachten.

Grenzen von Online-Heatmap-Services

In Rahmen dieser Artikelserie werde ich ein paar Online-Heatmap-Services verstellen und auf einen ganz besonders eingehen.

Allerdings möchte ich vorher auf die Nachteile und Grenzen solcher Online-Heatmaps zu Sprechen kommen.

So sind Klicks allein nicht die ganze Wahrheit. Nur weil viele Besucher auf einen bestimmten Link klicken, muss damit nicht alles in Ordnung sein. So erkennt man anhand einer Heatmap nicht, wenn zwar viele Leute auf einen Link klicken, dann aber auf dieser Seite merken, dass es nicht das ist, was sie erwartet haben und den Blog dann vielleicht sofort verlassen.

Das bedeutet, dass man so eine Heatmap mit anderen Daten verknüpfen sollte. In dem Beispiel sollte man also mal schauen, wie hoch die Absprungrate und die Verweildauer auf der verlinkten Seite ist.

Man sollte sich zudem bewusst sein, dass Heatmaps kein Eyetracking ersetzen können. Mit den Mausbewegungen kann man zwar den Blickverlauf annähernd nachstellen, aber es ist eben doch nicht dasselbe. Zudem kann man bei richtigen Eyetracking-Studien auch Rückfragen stellen und z.B. bestimmte Aufgaben definieren.

Ganz wichtig ist zudem, dass eine Heatmap selber noch gar nicht viel sagt. Es ist erst die Interpretation der Heatmap-Daten, die entscheidend ist.
Hier liegt auch die Crux. Es wird immer davon gesprochen, dass man im Web alles so genau messen kann, aber das ist nur die halbe Wahrheit. Meist müssen die Daten interpretiert werden, um sinnvolle und nützliche Ergebnisse zu erhalten.

So stellt sich z.B. die Frage, warum ein großer Teil der Leser z.B. auf einen bestimmten Link klickt. Ist es die Farbe, die Beschriftung, die Position oder was anderes?

Diese Punkte zeigen, dass Heatmaps kein Selbstläufer sind. Stattdessen muss man sich damit beschäftigen, Erfahrungen sammeln und viel testen. Dann aber können sie sehr nützlich sein.

Fazit

Heatmaps sind eine interessante Analyse-Möglichkeit, die uns einen Einblick in das Verhalten der Website-Besucher ermöglichen. Es gibt verschiedene Varianten und Filter-Möglichkeiten.

Allerdings gibt es auch einige Dinge, auf die man achten sollte, damit man den größtmöglichen Nutzen aus diesen Heatmaps ziehen kann.

So geht es weiter

Im nächsten Teil stelle ich eine Reihe von Heatmap-Services und -Tools vor und gehe auf Vor- und Nachteile ein.

Peer Wandiger

21 Gedanken zu „Was sind Heatmaps und was bringen sie? – Teil 1 der Heatmap-Serie“

  1. Klingt sehr interessant! Heatmaps kannte ich bisher noch nicht.

    Bin schon gespannt auf die 2 weiteren Artikel!

    Antworten
  2. Ich finde Heatmaps für Usability-Tests sehr wichtig. Da gibt es ja durchaus mehrere Tools mit denen man das auch in kleinem Umfang recht schnell und einfach machen kann. Finde es super da eine Reihe drüber zu starten.

    Antworten
  3. Hallo Peer,

    danke für den Artikel!

    Als nächstes steht bei mir auch der Heatmap-Dienst Crazy Egg an. Ich denke, Neil Patel weiß einfach was er macht.

    Gruß
    Vladislav

    Antworten
  4. Ich finde, Heatmaps sind eine feine Sache und freue mich schon, wenn ich hier noch mehr darüber lesen kann. Besonders gespannt bin ich auf die Erklärung für die GA Clickmap-Funktion.

    Antworten
  5. Hallo Peer,

    deine Serie zu den Heatmaps kommt genau zu rechten Zeit. Wir haben aktuell auch einen neuen Heatmap-Analyse-Service “scoreweb”, welchen wir bald in den Live-Betrieb übernehmen werden: http://sw.de/

    Das Besondere ist hierbei, dass wir die Maps nicht auf Basis von Klicks sondern auf einem wissenschaftlichen Algorithmus berechnen. Dieser stimmt bis zu 90% mit echten Eye-Tracking-Analysen überein – welche oftmals mehrere Tausend Euro kosten. D.h. man kann auch neue Seiten im Vorfeld testen, ohne echte Besucher haben zu müssen.

    Wenn Du willst, richte ich dir einen Zugang ein, sobald wir mit scoreweb online sind.

    Antworten
  6. Die Heatmaps haben schon Relevanz, jedoch habe ich festgestellt dass es auch das Thema zum Klickort beiträgt. Ich habe 3 Seiten bei mir die etwas gleichen traffic haben verglichen und da fällt der Klickort trotz gleichem Aufbau doch anders aus.

    Antworten
  7. Schön geschriebener Artikel. Ich freue mich auf die weiteren Teile. Mich würden dann vor allem die Preise interessieren.

    Antworten
  8. Hallo,

    toller Bericht. Habe bisher nicht mal gewusst, dass es so etwas gibt.
    Bisher kannte ich nur die On Page Analyse von Google, aber da sieht man ja nur wo am meisten geklickt wurde.
    Bin echt auf die Fortsetzung gespannt.
    Dank auch an Kevin für den zusätzlichen Link

    Antworten
  9. Interessantes Thema. Das es solche, doch eher speziellen Analysetools gibt, war mir bisher nicht bewusst. Sicherlich das von Google, aber dies stellt ja keine Grafiken, wie oben dargestellt, zur Verfügung. Super Blog übrigens.

    Antworten
  10. Danke für den interessanten Artikel. Eine Heatmap ist dann also salopp gesagt ein Eyetracking-Ersatz für jedermann. Spannend wäre jetzt noch ein wenig Literatur um die Heatmaps auch wirklich sinnvoll auswerten zu können und dann aus diesen Infos die richtigen Schlüsse zu ziehen.
    Auf jeden Fall ist das ein spannendes Thema.

    Antworten
  11. Die Heatsmap Analyse über Hotjar hat mir sehr geholfen umd die CTR Rate zu steigern. Also absoulut ein muss für die Optimierungen für Leads.

    Antworten

Schreibe einen Kommentar