So nutzt man eine Heatmap-Analyse – Teil 3 der Heatmap-Serie mit Praxisbeispiel und Video

Im dritten Teil der Heatmap-Artikelserie wird es praktisch.

Ich zeige die Heatmaps, die ich im ersten Schritt für Selbständig im Netz erzeugt habe und welche wichtigen Erkenntnisse ich daraus gewonnen habe.

Zudem gehe ich auf die Änderungen ein, die ich darauf basierend vorgenommen habe.

Ergänzend gibt es einen recht langen Screencast, in dem ich ausführlich CrazyEgg vorstelle und meine Heatmaps kommentiere.

< zurück zum zweiten Teil

Analyse der Heatmaps

Genauso wie die Erfassung der Website-Statistiken mit Google Analytics an sich noch gar nichts bringt, ist es mit der Generierung einer Heatmap natürlich ebenfalls nicht getan. Erst wenn man die Heatmap dann wirklich auswertet und analysiert, kann man Probleme erkennen und beseitigen.

Deshalb sollte man in regelmäßigen Abständen Heatmaps erstellen lassen und diese nach einem gewissen Zeitraum auswerten.

Ich wurde von einigen Lesern gefragt, wie viele Daten so eine Heatmap enthalten muss, damit man aussagekräftige Analysen durchführen kann. Da gibt es keine eindeutige Antwort, aber es sollte klar sein, dass man mit 100 Visits keine wirklich belastbaren Daten bekommt.

Ich versuche bei Unterseiten mindestens 1.000 Visits zu erreichen und bei besser besuchten Seiten (z.B. die Homepage) werden es schon mal 4.000 Visits oder mehr.

Deshalb sollte man sich für den Einsatz einer Heatmap Seiten der eigenen Website aussuchen, die über einen gewissen Traffic verfügen. Will man z.B. eine Landing Page analysieren, die nicht so viele Besucher hat, ist es z.B. möglich mit Google AdWords für einen gewissen Zeitraum mehr Besucher auf die Seite zu bringen, anstatt Wochen oder sogar Monate warten zu müssen, bis genügend normale User die Seite angeschaut haben.

Die eigentliche Analyse einer Heatmap ist dann natürlich Geschmackssache. Gerade die klassische Heatmap gibt ja keine konkreten Zahlen aus, sondern zeigt “nur” Tendenzen. Ich schaue mir so eine Heatmap dann genauer an und versuche aus User-Sicht zu beurteilen, warum manche Elemente häufig angeklickt wurden und andere nicht.

Zudem überlege ich mir natürlich, welche Aktionen ich gern von den Besucher möchte. Wenn diese z.B. einen bestimmten Link anklicken sollen und die Heatmap zeigt, dass dieser bisher kaum angeklickt wurde, dann ändere ich dessen Aussehen und/oder Position.

Auf diese Weise kommt eine Ideensammlung pro Heatmap zusammen, die ich danach umsetze.

Praxis: Optimierungen auf SiN

So eine Ideensammlung ist natürlich auch für “Selbständig im Netz” zusammen gekommen. Insgesamt hatte ich 3 Heatmaps bei CrazyEgg.com (30 Tage kostenlos testen) gestartet und zwischen einer und zweieinhalb Wochen laufen lassen.

SiN-Startseite
(4.203 Visits & 2.562 Klicks in rund 6 Tagen)

Zum einen habe ich die Startseite meines Blogs analysiert.

So nutzt man eine Heatmap-Analyse

Das ist durchaus problematisch, da auf der Startseite dynamische Inhalte existieren. Jeden Tag kommen neue Artikel hinzu, so dass die Klicks auf die einzelnen Artikelüberschriften nicht viel Aussagekraft haben.

Allerdings kann man mit den Klickdaten für den Header und der Sidebar arbeiten.

Auf dem Screenshot kann man zum einen erkennen, dass die Hauptnavigations-Buttons durchaus unterschiedlich genutzt werden. Die Hauptnavigation ist eines der wichtigsten Elemente des Blogs und deshalb war das natürlich ein Ansatzpunkt für Optimierungen.

Interessant fand ich ebenfalls, dass die Suchfunktion, trotz ihrer Platzierung rechts oben, gut genutzt wurde.

Nicht so glücklich war ich über die Klickhäufigkeit auf die Sneeze Pages am oberen Rand.

Nicht auf dem Bild zu sehen ist, dass auf den Link zur zweiten Seite mit den älteren Artikeln sehr häufig geklickt wurde. Ein wichtiger Hinweis, dass diese Seite populär ist und ich dort sicher etwas optimieren könnte.

Geld verdienen Seite
(4.464 Visits & 5.842 Klicks in rund zweieinhalb Wochen)
Ebenfalls analysiert habe ich die Geld verdienen Seite, die eine der am häufigsten besuchten Seiten meines Blogs ist.

So nutzt man eine Heatmap-Analyse

Hier wurde insgesamt häufiger geklickt als auf der Startseite, was man schon an den “heißeren” Flecken im Header erkennen kann. Allerdings wird auch hier klar, dass die Hauptnavigationsbutton nicht alle gleich stark frequentiert wurden.

Nicht auf dem Screenshot zu sehen sind die Klicks auf die einzelnen Einnahmequellen-Links. Das hat mir sehr wichtige Erkenntnisse gebracht, auf die ich weiter unten genauer eingehen werde.

Top 5 Freeware für einfache Videobearbeitung
(6.057 Visits & 6.069 Klicks in rund zweieinhalb Wochen)

Die dritte Heatmap habe ich für einen Artikel angelegt. Dieser ist sehr beliebt und bekommt sehr viele Besucher. Gerade solche populären Artikel eignen sich sehr gut zur Analyse, aber auch zur nachträglichen Optimierung.

So nutzt man eine Heatmap-Analyse

Sehr interessant ist bei dieser Heatmap, dass die Leser dieses Artikels kaum auf die Hauptnavigation geklickt haben. Ob das für alle Artikel gilt, muss ich noch testen.

Nicht im Bild zu sehen sind die Klicks auf die einzelnen externen Links zu den Videotools. Diese wurden sehr stark genutzt, was bei diesem Artikel natürlich auch Okay ist. Trotzdem habe ich auf Basis dieser Heatmap die eine oder andere Schlussfolgerung gezogen.

wichtige Erkenntnisse und Schlussfolgerungen

Im Folgenden möchte ich einige meiner Erkenntnisse und die darauf basierenden Schlussfolgerungen für die Optimierung vorstellen.

Header
Die folgenden Optimierungen gelten für alle Seiten, da der Header überall gleich ist.

Ein wichtiges Element der Analyse war natürlich der Header. Die verschiedenen Heatmaps haben hier zumindest teilweise unterschiedliche Ergebnisse geliefert.

Recht deutlich wurden jedoch folgenden Dinge:

  • Manche Hauptnavigationsbuttons wurden viel seltener angeklickt.
    Während die Buttons “Geld – Verdienen im Internet”, “Fachbücher” und “Linktipps” sehr häufig angeklickt werden, war dies bei den anderen Buttons nicht der Fall.

    Also habe ich den Button “Podcast” ganz entfernt und nun steht er “nur” noch oben in der kleineren Navigation. Stattdessen habe ich den Button “Software” rein genommen, da nach meiner Erfahrung das Thema Software sehr beliebt ist.

    Des Weiteren habe ich den Button “Hardware” in “Technik-Ecke” umbenannt und etwas weiter nach links verschoben. Ich werde beobachten, ob dies mehr Aufmerksamkeit erzeugt und ggf. weitere Bezeichnungen testen.

    Beim Button “FAQ” habe ich die Bezeichnung von “Eure Fragen” in “Antworten” geändert, da dies einfach Lösungsorientierter ist. Schließlich geht es den Besuchern primär um Antworten und nicht um Fragen.

    Ich habe zudem schon einige Ideen für andere aufmerksamkeitsstarke Button-Bezeichnungen. Allerdings muss ich dafür dann erst einmal die passenden Unterseiten erstellen. Eine wichtige Erkenntnis ist aber, dass man in der Hauptnav. wirklich interessante und attraktive Button-Bezeichnungen haben sollte.

  • Sneeze Pages brauchen mehr Aufmerksamkeit
    Die Klicks auf die 9 Sneeze Pages sind mir zu gering. Das ist ein wichtiges Element meines Blogs und gerade neue Besucher sollten dort häufiger drauf klicken.

    Deshalb habe ich den Text “Top-Artikel” nun orange hinterlegt, weshalb er deutlicher auffallen sollte.

  • Suche funktioniert
    Das Suchfeld oben rechts wird ausreichend stark wahrgenommen, weshalb ich daran nichts geändert habe.
  • Die oberen kleine Navigation muss etwas optimiert werden
    Auch hier gab Links, die häufiger angeklickt wurden, als andere. Deshalb habe ich ein paar kleine Änderungen an manchen Links vorgenommen. So wurde aus “Vorschläge” “Eure Ideen für SiN”.

    Zudem habe ich den Link “Gastautor” etwas deutlicher als “Gastautor werden” bezeichnet.

Homepage & zweite Seite
Für die Homepage und die zweite Seite habe ich ebenfalls ein paar Erkenntnisse gewonnen und darauf basierend Änderungen vorgenommen.

Ich hatte im Rahmen des letzten Layout-Relaunches ja bereits einen Text auf der Startseite eingefügt. Diesen habe ich nun etwas ausgebaut und noch ein paar weitere interessante Links gerade für Erstbesucher eingefügt. Zudem habe ich diese in einer Liste etwas übersichtlicher angeordnet.

Eine weitere Änderungen war die Ergänzung des Links “Artikel weiterlesen …” unter jeder Artikelvorschau. Viele wissen natürlich, dass sie auf die Headline eines Artikel klicken können, um zum vollständigen Artikel zu gelangen, aber eben nicht alle. Deshalb habe ich diese zweite Möglichkeit ergänzt.

Auf der zweiten Seite habe ich den Text oben leicht erweitert und zudem die Headline “Artikel-Archiv” hinzugefügt. Das sollte es nun deutlicher machen, wo man sich befindet.

Geld verdienen Seite
Ein sehr wichtige “Baustelle” war die Geld verdienen Seite.

Hier liste ich die Einnahmequellen auf, mit denen ich Geld verdiene und natürlich nutze ich dort auch Affiliate-Links. Zudem ist es eine der am häufigsten besuchten Seiten meines Blogs.

So nutzt man eine Heatmap-Analyse

Eine sehr wichtige Erkenntnis, die ich aus der Heatmap entnehmen konnte, war, dass die Leser die Reihenfolge der aufgelisteten Einnahmequelle offensichtlich als Ranking ansahen. Der erste Link je Einnahme-Kategorie wurde am häufigsten geklickt.

So ein Ranking hatte ich bei der Erstellung der Seite aber gar nicht im Sinn. Nun fiel es mir aber wie Schuppen von den Augen, dass ich hier die Einnahmequellen entsprechend ihrer Bedeutung für mich ranken sollte.

Deshalb habe ich die Einnahmequellen-Links dementsprechend neu angeordnet und zudem die eine oder andere entfernt. Ganz besonders deutlich was dies beim Link zu Trigami. Dieser stand im Bereich “bezahlte Artikel” bisher ganz oben und wurde am häufigsten angeklickt. Dabei ist Trigami mittlerweile so gut wie tot.

Im Nachhinein fragt man sich, wieso einem das nicht vorher aufgefallen ist. Aber bei mir hat es eben erst die Heatmap gebraucht, um das zu erkennen.

Zudem habe ich oben eine kleine interne Artikel-Navigation eingefügt, um zu den verschiedenen Bereichen im Artikel zu springen.

Artikel
Auf Basis der Heatmap für den Video-Artikel habe ich zwar keine großen Änderungen vorgenommen, aber dennoch das eine oder andere erkannt.

So habe ich nun vor, wichtige und gut besuchte Artikel einzeln per Heatmap auszuwerten und z.B. passende weiterführende Links darin zu platzieren. Schließlich möchte ich die Leser auf meinem Blog halten und da bedarf es thematisch genau passender interner Links.

Zudem habe ich erkannt, dass die Klicks auf die “ähnlichen Artikel” noch nicht optimal sind. Deshalb habe ich diese nun mit einem kurzem Text-Anriss etwas umfangreicher und auffälliger gestaltet. Mal schauen, was das bringt.

Footer
Ebenfalls leicht angepasst habe ich den Footer. Ich habe einige Links ergänzt, mein Foto geändert und meinen neuen Blog Social-Insider.de hinzugefügt.

Zudem habe ich die Auflistung der Einnahmequellen ebenfalls optimiert.

Allerdings muss man sagen, dass vergleichsweise wenige Leser bis zum Footer scrollen und dort auch noch was anklicken. Deshalb müsste ich hier eine Heatmap deutlich länger laufen lassen, um genügend Klicks auch im Footer zu generieren. Das braucht Zeit.

Nach der Heatmap ist vor der Heatmap

Insgesamt muss ich aber sagen, dass die Analyse der eigentlichen Artikel und deren Aufbau erst später erfolgen wird. Im ersten Schritt lag der Fokus auf Header, Startseite und Geld verdienen Seite.

Im zweiten Schritt werde ich nun für die überarbeiteten Seiten erneut Heatmaps generieren lassen. In 1-2 Wochen werde ich diese dann mit den vorherigen vergleichen und meine Schlüsse ziehen. Sicher werde ich diesen Vergleich dann auch hier im Rahmen eines Artikel veröffentlichen.

Im dritten Schritt möchte ich weitere Bereiche analysieren, wie z.B. die Sidebar und der eigentliche Artikeltext.

Zudem werde ich weitere wichtige Artikel tracken und versuchen, die Verweildauer und die Pages/Visit zu steigern. Mehr dazu ebenfalls in einem zukünftigen Artikel.

Video – Einblicke in CrazyEgg

Ich habe gestern ein Video aufgenommen, in dem ich das Tool CrazyEgg.com genauer vorstelle, euch ein paar Funktionen zeige und die 3 bisherigen Heatmaps mal genauer anschaue.

Das Video ist mit rund 26 Minuten zwar etwas länger ausgefallen, aber ich denke, es ist eine sehr gute Ergänzung zu diesem Artikel.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden


So geht es weiter

Im nächsten Teil der Artikelserie über Heatmaps widme ich mich der Frage, wie man die Erkenntnisse aus der Heatmap-Analyse mit anderen Analysen (z.B. Google Analytics) in Einklang bringen kann.

Zudem schaue ich mir die Möglichkeiten des User Testing genauer an.

Peer Wandiger

11 Gedanken zu „So nutzt man eine Heatmap-Analyse – Teil 3 der Heatmap-Serie mit Praxisbeispiel und Video“

  1. Hallo Peer,
    auf die auswertung habe ich gewartet. Sehr interessant das zu lesen und auch hier wieder von dir zu lernen.
    Vor allem die allg. Optimierung der Navigation interessiert mich, da hier bei vielen Blogs (einschließlich meinen ) ein großes Potential verschenkt wird.
    Danke für die ausführliche Betrachtung und vor allem wieder für Deine Gedanken dahinter.

    Viele Grüße
    Stefan

  2. Hallo,
    vielen Dank für den ausführlichen Artikel. Was mich noch interessieren, würde ist wie man mit Heatmaps die Adsense Werbung optimieren kann.
    Aber das ist für dich wahrscheinlich nicht so interessant, da du ja viel auf private Advertiser setzt.
    Grüsse

  3. Ich bin zwar mittlerweile probeweise auf Joomla umgestiegen, aber für meine persönliche WordPress Profilseite nutze ich ein das kostenlose WP Super Heatmap Plugin, das auch bisher nahezu problemlos funktioniert. Für alle die ohnehin mit WordPress arbeiten wäre das vielleicht eine Alternative zu CrazyEgg. Wie gut das Plugin bei extrem hohen Besucherzahlen skaliert konnte ich (mangels extrem hoher Besucherzahlen 😉 noch nicht ausprobieren.

  4. Heute vormittag habe mir nun doch einmal die Zeit genommen und mir das Video anzugucken.
    Mein Kompliment, klasse gemacht. Für alle, die das Video noch nicht geshen haben -> unbedingt angucken !

    Sehr interessant, was man aus den Heatmaps ablesen kann.
    Auch sehr interessant, wie hoch der Anteil der Besucher ist, der wilrd in der Gegend herumklickt.
    Vielleicht sind das Mobile-User, die nur scrollen möchten (?)

    Freue mich auf weitere Artikel und Videos zu Crazy Egg.

  5. Hallo,
    dank Wolfgang’s Kommentar habe ich mir auch mal das Video angeschaut und es ist wirklich gut geworden.
    Interessant fidne ich die Anmerkung zu Bereichen (Überschriften, Bilder) die trotz fehlendem Link geklickt werdn. Peer, Du hattest hier die Idee dort Links zu hinterlegen. Es wäre meine Meinung nach aber auch ein Zeichen für das Style und Layout der Schrift bzw. die Bilder besser zu markieren, die geklickt werden können.
    Vielleicht erkennt der Besucher nur nicht richtig, dass dies kein Link ist und um das zu erfahren probiert er es aus.
    Nur eine zweite Idee zu diesem Besucherverhalten.
    Gruß
    Stefan

  6. @ Stefan
    Das ist sicher auch eine Möglichkeit und ich werde dies demnächst mal genauer prüfen.

    Evtl. sollte man bestimmte wichtige Elemente wirklich noch deutlich herausheben.

    Wobei man auch sagen muss, dass es immer auch Klicks einfach in den Content geben wird. Es geht mir halt vor allem um sehr häufige Klicks auf ein Element, was gar kein Link ist.

  7. Sehr interessanter Artikel. Was du aus den Analysen mit Heatmaps herausgelesen hast, ist sehr hilfreich.

    Ich muss mich unbedingt auch mal mehr mit dem Thema beschäftigen, um meine Webseiten zu optimieren…

  8. Ich kann mich Daniel nur anschließen. Da kann ich selber noch einiges optimieren.
    Ich hab dem Bereich bisher wohl viel zu wenig Aufmerksamkeit geschenkt.

    Ich sollte wohl häufiger dein Blog besuchen ;-).
    Danke für deinen wirklich hochwertigen Content.

    Hannes

  9. Ich habe heute Mittag CrazyEgg einmal auf meiner Seite installiert.
    Sehr interessant, was man da auch schon nach wenigen Stunden und gerade mal 200 Aufrufen auf der Startseite sehen kann.

    Gibt es eigentlich gute Tutorials, vergleichbar mit Deinem Artikel und Deinem Video, die bei der Interprätation und der Optimierung mit CrazyEgg unterstützen. Quasi Case-Studies.

Schreibe einen Kommentar