« Jahresrückblick 2012 - Teil 2 - weitere ...
Links der Woche - Bullshit-Index, SEO ... »


Was sind Heatmaps und was bringen sie? – Teil 1 der Heatmap-Serie
Peer Wandiger - 20 Kommentare - Landing Page, Usability, Web Analytics, Webdesign - Ähnliche Artikel


Werbung
Fanpage Generator
Werbung

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.

Werbung

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.


Hier findest Du weitere Informationen zu diesem Thema:

Die besten Artikel zum Thema 'Landing Page'
DomainBoosting
Werbung
Rankseller
Werbung

Der Artikel hat Dir gefallen?
Dann abonniere den Feed! Die Artikel gibt es auch per Mail



Kommentare
20 Kommentare und Trackbacks zu 'Was sind Heatmaps und was bringen sie? – Teil 1 der Heatmap-Serie'

Kommentare zu 'Was sind Heatmaps und was bringen sie? – Teil 1 der Heatmap-Serie' mit RSS

  1. 1 Martin Grünstäudl kommentierte am 10.01.2013 um 13:29 Uhr

    Klingt sehr interessant! Heatmaps kannte ich bisher noch nicht.

    Bin schon gespannt auf die 2 weiteren Artikel!

  2. 2 Michel kommentierte am 10.01.2013 um 14:03 Uhr

    Der Artikel ist ja toll. Da kann man ja nur gespannt sein, was man aus den 2. Artikel lernt!

  3. 3 Manuel kommentierte am 10.01.2013 um 16:32 Uhr

    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.

  4. 4 Vladislav Melnik kommentierte am 10.01.2013 um 16:49 Uhr

    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

  5. 5 Simon kommentierte am 10.01.2013 um 18:03 Uhr

    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.

  6. 6 Tobi2 kommentierte am 10.01.2013 um 18:24 Uhr

    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.

  7. 7 Joanna kommentierte am 10.01.2013 um 22:49 Uhr

    Nun bin ich endlich im Bilde was heatmaps sind.
    Vielen Dank für diesen lehrreichen Artikel.

  8. 8 Kevin kommentierte am 11.01.2013 um 21:46 Uhr

    Ich finde die Heatmaps zu den SERPS bei Google sehr interessant:
    http://blog.kennstdueinen.de/2011/10/google-suchergebnisseiten-aktuelle-eye-tracking-studie-der-serps/

    Beim oberen Heatmap sieht man mal, wieviel Aufmerksamkeit die Anzeigen bekommen…

  9. 9 Matthias kommentierte am 13.01.2013 um 10:39 Uhr

    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.

  10. 10 Yasmin kommentierte am 14.01.2013 um 00:00 Uhr

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

  11. 11 Jörg kommentierte am 14.01.2013 um 19:50 Uhr

    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

  12. 12 Martin kommentierte am 15.01.2013 um 21:30 Uhr

    Na da hab ich dank deines Heatmaps Artikel wieder eine Menge lernen können. Ich danke Dir vielmals !

  13. 13 Matze kommentierte am 29.01.2013 um 20:51 Uhr

    Ganz ehrlich: Wenn ich die heatmaps berücksichtige sind die Einnahmen bis zu 3 mal so hoch.

  14. 14 Dennis kommentierte am 10.02.2013 um 04:35 Uhr

    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.

  15. 15 Andre kommentierte am 10.02.2013 um 22:27 Uhr

    Wow, das kannte ich noch gar nicht! Vielen Dank! Das werde ich auf jedenfall ausprobieren!!

  16. 16 Tobias Breyer kommentierte am 12.02.2013 um 09:54 Uhr

    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.

  17. 17 Claas kommentierte am 18.03.2013 um 16:57 Uhr

    Ich bin echt auf Deine Toolvorstellung gespannt. Wann können wir damit rechnen?

    Gruß
    Claas

  18. 18 Peer Wandiger kommentierte am 18.03.2013 um 19:18 Uhr

    Die Tools habe ich doch schon vorgestellt. Der zweite Artikel ist am Ende von diesem verlinkt.

  19. 19 Peter Demel kommentierte am 05.06.2013 um 13:07 Uhr

    Das ist ja echt interessant. Da muss ich bei der nächsten Seite wirklich darauf achten.
    Danke Peer.

  20. 20 spenny kommentierte am 28.08.2013 um 11:42 Uhr

    Danke. Das ist echt sehr interessant mit diesen Heatmaps.



Werbung





Twitter Selbständig
4.806
Follower
Facebook Selbständig
700
Fans
Google+ Peer Wandiger
4.381
Kreise
WER SCHREIBT HIER?
Peer Wandiger Mein Name ist Peer Wandiger. Ich bin selbstständiger Webentwickler und Blogger. Hier im Blog findest du mehr als 3.000 Fachartikel, die besten Artikel aus über 6 Jahren und alles über den Blog und mich.
Abonniere die neuen Blog-Artikel als RSS-Feed (mehr als 5.000 Leser) oder als Newsletter.
AKTUELLE ARTIKEL
BELIEBTESTE ARTIKEL
WERBUNG
Backlinkseller - SEO
LinkHAMMERPKV Vergleich
Website-Tooltester
AKTUELLE ANGEBOTE
AKTUELLE UMFRAGE

Welche Bildquellen nutzt ihr auf eurer Website?

View Results

Loading ... Loading ...
TOP 5 EINNAHMEQUELLEN*
  1. Backlinkseller.de
    Geld verdienen mit Backlinks.
  2. Adiro.de
    Geld verdienen mit Text-Anzeigen.
  3. Finanzen.de
    Versicherung- und Kredit-Partnerprogramm.
  4. Everlinks.net
    Linkverkauf und bezahlte Artikel.
  5. Superclix.de
    Affiliate-Netzwerk mit Sofortfreischaltung.
TIPPS
ARTIKELSERIEN
BLOG NETWORK
WERBUNG
wpSEO, das Plugin fuer WordPress SEO
LINK-EMPFEHLUNGEN
AKTUELLE KOMMENTARE
Flo
Hallo Peer, sag mal welche Schriftarten verwendest du in der Navigationsleiste und...
16. April 2014

Felix
Interessant. 70K in einem Monat. Die Frage ist nur wie hoch waren seine Kosten um...
16. April 2014

Stefan Gotthold
Webstandards sind meiner Meinung nach sehr wichtig und sollten von...
16. April 2014

der_reisende
Klar achte ich auf Trends, aber ich renne nicht blind jedem...
16. April 2014

Markus
dashfolio hört sich gut an… ich bin mir da aber nie so sicher was die mit...
16. April 2014

SOCIAL NETWORKING
*

View Peer Wandiger's profile on LinkedIn

Blogverzeichnis - Blog Verzeichnis bloggerei.de

INFORMATIONEN