Alles, was Sie wissen müssen, bevor Sie eine Landing Page Heatmap verwenden

Die Software von Cormac Kinney begann als Werkzeug, um Wall Street-Händlern zu helfen, den Aktienmarkt zu spielen. Es verwandelte Finanzdaten in „leuchtende Mosaike aus roten und blauen Quadraten“, sogenannte „Heatmaps“, die den Händlern signalisierten, wann sie mit Farbe kaufen oder verkaufen sollten.

Mehr als zwei Jahrzehnte später profitieren nicht nur Händler von Heatmaps und deren Erkenntnissen. Vermarkter (und jetzt Instapage-Kunden) verwenden sie auch. Auf diese Weise lernen sie genau, wie sich potenzielle Kunden auf ihren Webseiten verhalten.

Was ist eine Heatmap?

Eine Heatmap ist eine Datenvisualisierung, die zeigt, wie Besucher mithilfe eines farbcodierten Systems mit einer Webseite interagieren. Schauen Sie sich zum Beispiel die vielleicht bekannteste Heatmap aller Zeiten (zumindest von digitalen Vermarktern) an, die zeigt, dass die Leute im Web in einem F-förmigen Muster lesen:

Die roten und gelben Teile der Karte weisen auf einen stark frequentierten Bereich hin. Das Blau ist dort, wo die Besucher am wenigsten geschaut haben.

Diese speziellen Daten wurden von der Nielsen Norman Group aus einer Eye-Tracking-Studie aus dem Jahr 2006 gesammelt, bei der die Blicke von Besuchern beobachtet wurden, die auf Text auf einer Webseite stießen. Aber Tests wie diese sind nicht die, die Sie wahrscheinlich im Internet sehen werden.

Eye-Tracking-Heatmaps vs. Maus-Tracking-Heatmaps

Heatmaps aus Eye-Tracking-Experimenten sind am genauesten, aber auch am teuersten und umständlichsten in der Herstellung. Studien wie die von Nielsen Norman finden normalerweise in einer kontrollierten Umgebung (Labor, intern) mit einem Forschungsteam oder teurer Hardware statt, die die Augen Ihrer Besucher beobachtet, während sie mit Ihrer Webseite interagieren. Diese können mehrere tausend Dollar kosten.

Da die Einstellung eines ganzen Forscherteams für die meisten Unternehmen nicht in Frage kommt, wenden sich viele stattdessen an Maus-Tracking-Software. Im Gegensatz zur Überwachung der tatsächlichen Augenbewegungen überwacht die Mausverfolgungssoftware die Mausbewegungen von Besuchern wie Klicks, Scrollen und Schweben.

Da diese Methode keine formelle Laborumgebung oder einen großen Teil des Unternehmensbudgets erfordert, ist sie viel leichter zugänglich. Heute können Sie Maus-Tracking-Software installieren und sofort mit der Überwachung des Besucherverhaltens beginnen – und einige Untersuchungen zeigen, dass dies fast so genau ist wie formale Eye-Tracking-Studien.

Die linke Heatmap wurde aus einer formalen Eye-Tracking-Studie erstellt, während die rechte mit Mouse-Tracking erstellt wurde. Laut ClickTale haben Experimente, bei denen beide Techniken gleichzeitig angewendet wurden, gezeigt, dass zwischen ihren Ergebnissen eine Korrelation von 84-88% besteht.

Grundsätzlich stimmt es in einigen Fällen überein, wo Menschen ihre Maus bewegen und wo sie hinschauen (dazu später mehr).

Die verschiedenen verfügbaren Arten von Maus-Tracking-Heatmaps

Wenn Menschen von einer „Heatmap“ sprechen, beziehen sie sich auf eine Visualisierung, die das Benutzerverhalten anzeigt. Dieses Benutzerverhalten ist jedoch nicht immer gleich. Einige Heatmaps zeigen, wie Personen scrollen, während andere Typen erkennen können, wo sich Personen mit ihrer Maus auf einem Bildschirm bewegen. Die Haupttypen von Maus-Tracking-Heatmaps sind wie folgt:

Klicken Sie auf Heatmaps

Klickkarten zeigen, wo ein Besucher auf Ihre Webseite geklickt hat. Sie sind besonders wertvoll, um beliebte Links oder Bereiche zu entdecken, die Besucher für Links halten, es aber nicht sind.

Nehmen Sie zum Beispiel diese spezielle Karte, die aufdeckte, dass die am häufigsten angeklickten Elemente auf einer Seite Fotos des Produkts waren:

Der Gründer der Brothers Leather Supply Company, Adam Kail, erklärt, wie diese Karte den Fokus des Unternehmens in Bezug auf das Design von Produktseiten verändert hat:

Heatmaps haben unseren Bedarf an großartigen Bildern auf allen unseren Produktseiten verstärkt. Früher haben wir uns um die richtige Kopie gekümmert – aber jetzt verbringen wir Zeit damit, die richtigen Bilder zu bekommen. Jedes Bild zeigt eine andere Verwendung oder einen anderen Blickwinkel für unsere Taschen... Künftige Kunden möchten wissen, wie die Tasche mit einem Laptop darin aussieht, wenn sie voll ist, wenn sie jemand trägt.

Letztendlich ist das das Ziel der Heatmap-Analyse – das reale Besucherverhalten zu entdecken, mit dem Sie die Benutzererfahrung optimieren können. Sehen wir uns zur Veranschaulichung eine weitere Klickkarte an, die von einer Post-Click-Landingpage eines Mobiltelefons stammt:

Rot umrandet, werden Sie feststellen, dass sich das am häufigsten angeklickte Telefon weit unterhalb der Klappe befindet und sich unter mehreren weniger beliebten Modellen befindet. Wie können Sie diese Karte verwenden, um die Benutzererfahrung zu verbessern?

Ersetzen Sie eines der weniger beliebten Modelle über dem Falz durch das rot umrandete. Auf diese Weise müssen die Leute nicht suchen, um es zu finden.

Die vielleicht relevanteste Heatmap für das Post-Click-Landingpage-Design stammt aus einer Fallstudie von VWO über einen Kunden, Pair (jetzt Couple).

Hier ist die ursprüngliche Homepage der App:

Und so sah die Klick-Heatmap dieser Homepage aus:

Bemerken Sie, was der Wachstumsvermarkter von Pair, Lim Cheng Soon, in dieser Heatmap gemacht hat? Er sagt:

Es stellte sich heraus, dass zu viele Leute oben auf die Navigationsleiste klicken, anstatt auf die Konvertierungsschaltfläche (Link zum AppStore und Google Play) zu klicken. Also habe ich eine Theorie aufgestellt, dass es keine so gute Idee war, zu viele „Ablenkungen“ um die Konvertierungsschaltfläche herum zu haben.

Also mache ich ein paar A/B-Tests, die auf der Theorie basieren, die „Ablenkungen“ um den Conversion-Button herum zu entfernen.

Die Ergebnisse?

• Das Ausblenden des Textes „kostenlos herunterladen“ über der Schaltfläche erhöhte die Conversion-Rate um 10 %.
• Das Ausblenden des Navigationsmenüs erhöhte die Conversion-Rate um 12 %

Soons Theorie von „zu vielen Ablenkungen“ ist überhaupt nicht erfunden. Wie mehrere andere Tests gezeigt haben, können Navigationslinks die Conversion-Rate drastisch senken. Auf Ihrer Post-Click-Landingpage schließen Sie sie am besten aus Ihrem Design aus.

Klickmaps wie die oben genannten sind besonders wertvoll, da ein Klick die Absicht signalisiert – die Aktion ist eher zielgerichtet als zufällig. Wenn jemand klickt, tut er dies, weil er mehr über ein bestimmtes Element oder den entsprechenden Inhalt erfahren möchte (ein CTA-Button, „Über uns“-Link usw.).

Heatmaps scrollen

„Du wirst diesen Artikel nicht beenden“ war der Titel eines 2013 von Slate veröffentlichten Artikels. Darin enthüllte Autor Farhad Manjoo Ergebnisse einer gemeinsamen Heatmap-Analyse von Chartbeat und dem Online-Magazin, die ergab, dass nur sehr wenige Leute alles lesen den Weg durch Artikel.

Obwohl beeindruckende 86,2 % des Engagements unterhalb der Faltung stattfanden, scrollten nur 25 % der Leute über die Pixelzahl 1600 hinaus (die meisten Slate-Artikel sind etwa 2.000 Pixel lang). Erkenntnisse wie diese sind hilfreich beim Aufdecken von Scrollmaps – insbesondere bei längeren Seiten.

In Post-Click-Landingpage-Begriffen ist dies höchstwahrscheinlich eine Verkaufsseite. Diese fachmännisch erstellten überzeugenden Marketingmaterialien können riesige Ausmaße annehmen. Dieser zum Beispiel ist über 5.000 Wörter lang (klicken Sie hier für die ganze Seite):

Eine Scroll-Map auf einer Seite wie dieser kann ihren Erstellern sagen, wo die Leute im Leseprozess absteigen. Mit diesen Daten können Entwickler Hypothesen über die Gründe für den Abbruch aufstellen – glanzlose Texte, nervige Werbung oder sogar eine Änderung der Hintergrundfarbe, sagt Peep Laja:

Wenn Sie starke Linien oder Farbänderungen haben (z. B. weißer Hintergrund wird orange), werden dies als „logische Enden“ bezeichnet – oft denken die Leute, dass das, was folgt, nicht mehr mit dem Vorherigen verbunden ist.

Von dort aus können Optimierer mögliche Wege testen, um die Leute dazu zu bringen, die ganze Seite zu lesen – was ein Experiment der Nielsen Norman Group zeigt, dass es sicherlich möglich ist:

Es ist selten, aber möglich.

Denken Sie daran, dass die obige Karte Augenbewegungen enthält, nicht ausschließlich die Scrolltiefe. Das bedeutet, dass es detaillierter ist als das, was Sie auf einer Scroll-Karte sehen, die nur anzeigt, wie weit Ihre Besucher auf der Seite vorangekommen sind. Hier ist ein Beispiel aus einem Test, der auf der Website von RJMetrics durchgeführt wurde:

Die am häufigsten aufgerufenen Bereiche auf dieser Webseite sind nach Farbe:

• Weiß
• rot
• Gelb
• Grün
• Blau

Wir wissen, was Sie denken: Wie könnte der oberste Teil einer Seite weniger als die Mitte angezeigt werden?

Nun, Untersuchungen von Chartbeat zeigen, dass viele Leute dazu neigen, zu scrollen, bevor eine Seite überhaupt geladen wird, was bedeutet, dass sie ganz oben verpassen.

Ihre Forschung zeigt auch, dass das Engagement für viele Seiten knapp unter dem Falz liegt:

Und das könnte erklären, warum der Bereich in der Nähe der Falte rot ist, während ein Großteil des Bereichs darüber gelb ist.

Aus dieser Karte hat Stephanie Liu, eine ehemalige Frontend-Entwicklerin bei RJMetrics, die folgende Hypothese aufgestellt:

Meine Hypothese war, dass das Verschieben der Schaltfläche in den weißen Hot-Scroll-Map-Bereich dazu führen würde, dass das Design im Vergleich zur ursprünglichen Preisseite eine höhere Conversion-Rate aufweist. Mehr Leute würden auf den Knopf achten, einfach weil ihre Augen dort länger verweilen.

Die Originalseite sah so aus:

Die von ihr erstellte Variation sah so aus:

Das Ergebnis war eine Steigerung der Conversions um 310 %.

Die zwei wichtigen Erkenntnisse aus diesem Scroll-Map-Test sind:

1. Mit einer Scroll-Map wissen Sie nicht, warum die Leute so weit scrollen, wie sie es sind. Sie und Ihr Team müssen einige Hypothesentests durchführen, um dies herauszufinden.

2. Manchmal muss man nicht unbedingt wissen, warum Leute dort absteigen, wo sie hinkommen. Das Ziel ist nicht immer , die Leute dazu zu bringen, tiefer zu scrollen. In Stephanies Fall brachte das einfache Verschieben der CTA-Schaltfläche in einen Bereich mit höherer Aufmerksamkeit für RJMetrics einen großen Konversionsschub.

Hover-Heatmaps (auch bekannt als Bewegungs-Heatmaps)

Ihre Augen bewegen sich dorthin, wo sich Ihr Mauszeiger bewegt – das ist die allgemeine Annahme, auf der Hover-Heatmaps, auch bekannt als „Bewegungs-Heatmaps“, basieren.

Die Genauigkeit dieser Karten hängt von der Korrelation zwischen Augenbewegungen und Mausbewegungen ab, die der zuvor erwähnten Studie zufolge bei 84-88% liegen kann. Andere Quellen sind jedoch nicht davon überzeugt, dass es so hoch ist.

Im Jahr 2010 veröffentlichte Dr. Anne Aula von Google ihre Ergebnisse zur Genauigkeit von Hover-Heatmaps:

• 6% der Menschen zeigten eine vertikale Korrelation zwischen Mausbewegung und Augenbewegung.
• 19% der Menschen zeigten eine horizontale Korrelation zwischen Mausbewegung und Augenbewegung.
• 10 % der Leute bewegten sich über ein bestimmtes Seitenelement, während sie auf die Bereiche um dieses herum blickten.

Und ein weiteres Experiment von Google und Carnegie Mellon fand eine 64-prozentige Korrelation zwischen Mausbewegungen und Augenbewegungen.

Unnötig zu erwähnen, dass die Forschung zu Bewegungs-Heatmaps allgegenwärtig ist. Aber wie sieht es mit realen Anwendungen aus?

Nun, das ist auch so ziemlich überall.

Hier ist eine Hover-Heatmap, die North Face verwendet hat, um die Checkout-Seite zu optimieren:

Auf der linken Seite scheint Version A ein Banner in der rechten Sidebar zu zeigen, das mehr Aufmerksamkeit bekommt als der CTA-Button (weiß eingekreist) darunter. Variante B berücksichtigt dies und schaltet das Banner mit dem Button (wiederum weiß eingekreist) um.

Das Ergebnis war eine Steigerung der Conversion-Rate um 62 %.

Hier ist eine weitere Hover-Karte, die zu zeigen scheint… Nun… Überzeugen Sie sich selbst:

Es scheint keine klare Aussage aus dieser Karte zu geben. Es gibt viel Schweben. Überall, überallhin, allerorts.

Insgesamt ist das Wichtigste aus der Hover-Heatmap-Forschung und ihren praktischen Anwendungen Folgendes:

Verwenden Sie Hover-Maps, um Ihr Design zu beeinflussen, aber mit den Worten von Rory Gallagher von EyeQuant: „Verallgemeinern Sie nicht zu viel“.

Wenn Ihre Karte wie die von North Face erstellte aussieht, haben Sie möglicherweise eine wertvolle Hypothese für A/B-Tests wie diese:

„Wir haben anhand einer Hover-Heatmap festgestellt, dass der Bereich über dem CTA-Button der Checkout-Seite anscheinend mehr Aufmerksamkeit der Besucher auf sich zieht. Daher glauben wir, dass wir durch das Umschalten des Buttons mit dem Werbebanner darüber die Kassen steigern können.“

Wenn Sie jedoch eine Testhypothese aus der zweiten Heatmap entwickeln, machen Sie sich wahrscheinlich eines Bestätigungsfehlers schuldig – Sie suchen nach einem bestimmten Ergebnis aus einem Test, nur weil es Ihren Glauben an etwas bestätigt. Eine falsch informierte Strecke könnte etwa so aussehen:

„Wir haben anhand der Hover-Heatmap festgestellt, dass die Worte ‚How To‘ mehr Aufmerksamkeit auf sich ziehen als alles andere über dem Fold. Daher glauben wir, dass alle Schlagzeilen von Blog-Posts in Zukunft mit ‚How To‘ beginnen sollten, um die Leser anzuziehen.“

„How to“ ist eine großartige Möglichkeit, eine Überschrift zu beginnen, aber dieser Test zeigt dies nicht an. Gehen Sie Ihre Heatmap-Ergebnisse skeptisch an und testen Sie nur, wenn Sie einen klaren Grund dafür haben.

Verantwortungsvoller Umgang mit Heatmaps

Heatmaps sind wertvoll, um herauszufinden, wie Menschen Ihre Webseite nutzen, aber sie sollten nicht das einzige Werkzeug sein, das Sie dafür verwenden. Alleine zeichnen sie ein unvollständiges Bild Ihrer Nutzer, und wenn Sie sich auf sie als einzigen Indikator für das Verhalten potenzieller Kunden verlassen, kann dies Sie in die Irre führen. Das Team von Optimizely bietet ein Beispiel:

Wenn Sie sich eine Heatmap eines Formulars ansehen, kann dies zeigen, dass Benutzer auf das erste Feld klicken und die nachfolgenden Felder weniger angeklickt werden.

Dies könnte darauf hindeuten, dass Benutzer den Prozess abbrechen, nachdem sie das erste Feld ausgefüllt haben. Was Heatmaps jedoch nicht anzeigen, ist, wenn Benutzer ihre Tastatur anstelle ihrer Maus verwendet haben, um durch Formularfelder zu navigieren.

Aus solchen Gründen erhalten Sie durch die Kombination Ihrer Heatmaps mit Erkenntnissen aus anderen Tools wie Google Analytics oder Instapage Analytics ein umfassenderes Bild davon, wie sich Ihre Interessenten auf Ihrer Post-Click-Landingpage verhalten.

Aber wird dieses „Vollbild“ etwas wert sein? Nicht, wenn man nicht genügend Nutzerdaten sammelt, sagt Peep Laja:

Sie benötigen eine ausreichende Stichprobengröße pro Seite/Bildschirm, bevor Sie Ergebnissen vertrauen können. Ein grober Standard wären 2000-3000 Seitenaufrufe pro Designbildschirm. Wenn die Heatmap auf 34 Benutzern basiert, vertrauen Sie keinem davon.

Am Ende des Tages ist es wichtig, sich daran zu erinnern, dass Heatmaps keine Daten sind; sie organisieren die Daten einfach auf leicht verdauliche Weise. Sie zeigen Klicks, Scrollen und Hover. Was diese Mausbewegungen bedeuten, können Sie selbst bestimmen.

Verknüpfen Sie alle Ihre Anzeigen immer mit personalisierten Post-Click-Landingpages, um Ihren Cost-per-Customer-Akquise zu senken. Beginnen Sie mit der Erstellung Ihrer dedizierten Post-Click-Seiten, indem Sie sich noch heute für eine Instapage Enterprise-Demo anmelden.