Verwenden von Heatmaps auf der Preisseite

Beginnen wir „Der A/B-Test des Monats“ mit einem Test, der nicht A/B ist. Bevor Sie in eine andere Ecke des Internets abhauen, lassen Sie mich Ihnen erklären, warum wir mit Heatmaps beginnen werden.

Einer der Hauptgründe dafür, dass Sie A/B-Tests nicht regelmäßig auf Ihrer Website verwenden, ist, dass Sie nicht wissen, wo Sie anfangen sollen: Welche Änderungen probiere ich aus, wo und warum? Das sind die zentralen Fragen, die Sie sich stellen werden. Wenn Sie nicht wissen, wie Sie sie beantworten sollen, geben Sie das Testen auf.

Um dies zu überwinden, empfehle ich, dass Sie als erstes eine Seite Ihrer Website auswählen, um zu beginnen. Diese Seite muss für Ihre Ziele relevant sein. Dies bedeutet, dass es sich um eine Seite handelt, auf der Sie viele Besuche erhalten, oder dass es sich um eine Schlüsselseite für Ihre Aktivität oder Ihr Unternehmen handelt.

Im heutigen Beispiel haben wir uns entschieden, mit den Preisseiten unserer Premium-Plugins zu beginnen: Nelio A/B Testing und Nelio Content. Diese Seiten sind für unser Geschäft von entscheidender Bedeutung, da die Einnahmen unseres Unternehmens über beide erzielt werden.

Nachdem wir nun die Seiten ausgewählt haben, ist es besser, mit einem Heatmap-Test zu beginnen, um zu wissen, welche Änderungen vorgenommen werden müssen und warum. Wir tun dies, weil Heatmaps uns echte Daten darüber liefern, wie unsere Besucher mit unserer Website interagieren.

Wenn wir wirklich sehen, wie unsere Seiten mit echten Benutzerdaten abschneiden, ist es viel einfacher, Ideen für zukünftige Tests zu bekommen. Aus diesem Grund sind Heatmaps immer ein guter Anfang.

So erstellen Sie einen Heatmap-Test in WordPress

Das Erstellen eines Heatmap-Tests für eine WordPress-Seite ist sehr einfach. Sie müssen nur die gewählte Seite auswählen und den Test starten.

Erstellen Sie in Nelio A/B Testing einen neuen Heatmap-Test, indem Sie diesen Testtyp aus dem Dialog auswählen, der sich öffnet, wenn Sie auf die Schaltfläche zum Hinzufügen eines neuen Tests klicken.

Auf dem Testbearbeitungsbildschirm geben Sie Ihrem Test einen Namen, damit er später leicht zu identifizieren ist. Sie können auch eine Beschreibung dessen hinzufügen, was Sie im Test ausprobieren möchten. Zu guter Letzt müssen Sie die Seite auswählen, auf der Sie den Heatmap-Test durchführen möchten:

Wenn Sie alles bereit haben (wie Sie im vorherigen Screenshot sehen, ist es sehr einfach), klicken Sie auf die Schaltfläche in der oberen rechten Ecke des Fensters, um den Test zu starten. Sie müssen nur darauf warten, dass Ihre Besucher kommen, damit Nelio A/B Testing Daten über ihr Verhalten auf der Seite sammelt und die Ergebnisse verarbeitet.

Heatmap-Ergebnisse

In unserem Fall liefen gleichzeitig zwei Heatmap-Tests auf unserer Website: einer für die Preisseite von Nelio A/B Testing und ein weiterer für die Preisseite von Nelio Content.

Jeder Test hat etwa 20 Tage lang Daten gesammelt und das Verhalten von etwa 500 Besuchern analysiert. Dies ist mehr als genug, um bestimmte Schlussfolgerungen ziehen und über zukünftige A/B-Tests nachdenken zu können, die wir auf diesen Seiten durchführen können.

Beachten Sie, dass diese Seiten nicht diejenigen mit den meisten Besuchen auf unserer Website sind. Sie sind die letzte Stufe des Conversion-Trichters, daher geht auf dem Weg Traffic verloren. Aber denken Sie daran, dass wir sie aufgrund ihrer Bedeutung für unser Geschäft ausgewählt haben. In zukünftigen Tests werden wir andere Seiten mit mehr Verkehr untersuchen, aus anderen Gründen, die wir erläutern werden.

Preisseite von Nelio A/B Testing

Beginnen wir mit den Ergebnissen, die für die Preisseite von Nelio A/B Testing erzielt wurden. Der Heatmap-Test zeigt uns die Daten aus drei verschiedenen Perspektiven: Heatmap, Scrollmap und Konfetti. Hier die 3 Vollbilder einzubetten ist zu viel, da sie in der Höhe in Pixeln recht groß sind. Um euch nicht zu zwingen, ganz nach oben und unten zu scrollen, habe ich sie einfach hier verlinkt:

• Heatmap der Preisseite von Nelio A/B Testing.
• Scrollmap der Preisseite von Nelio A/B Testing.
• Konfetti von der Preisseite von Nelio A/B Testing.

Schauen wir uns nun die relevantesten Fragmente der vorherigen Ergebnisse an:

Wie Sie im vorherigen Bild sehen können, ist eine Heatmap eine grafische Darstellung, die die Interaktion der Benutzer mit den Elementen der Seite auf aggregierte Weise und mit einer Farbskala zeigt, bei der eine warme Farbe eine große Relevanz anzeigt.

Auf der Preisseite von Nelio A/B Testing befinden sich im ersten Falz der Seite weitere Hotspots. Analysiert man es im Detail, bekommen die Elemente im Bereich der Grundplanung und der Berufsplanung eine größere Relevanz als die des Unternehmens. In Anbetracht dessen könnten wir vielleicht die Preispläne neu anordnen, um zuerst den Unternehmensplan anzuzeigen. Beachten Sie, dass wir es gewohnt sind, von links nach rechts zu lesen. Daher kann es eine gute Abwechslung sein, den teuersten Plan zuerst auf der Preisseite anzuzeigen, um ihn in einem A/B-Test auszuprobieren.

Ein weiteres Element, das viele Benutzerinteraktionen erhält, ist der Link zum Herunterscrollen, um den detaillierten Vergleich der Pläne anzuzeigen. Das ist gut, denn es bedeutet, dass Interesse besteht, mehr Details über die Pläne zu sehen.

Was nicht so gut ist, ist, dass es viele Interaktionen in nicht klickbaren Elementen gibt. Sie können es im Konfetti sehen, das ist die grafische Darstellung, in der Sie alle Klicks der Besucher sehen können:

In dem gesamten Planblock, den Sie im vorherigen Screenshot sehen können, sind nur die Schaltflächen, die in jedem Plan erscheinen, Elemente, die angeklickt werden können. Denken Sie daran, dass das Klicken auf alles andere keine Wirkung hat. Unsere aktuelle Benutzeroberfläche sorgt für Verwirrung.

Besucher klicken auf die Texte und Symbole der Funktionen jedes Plans, die nicht anklickbare Elemente sind. Von hier aus können wir verstehen, dass sie versuchen, mehr Informationen darüber zu finden, aber stattdessen haben wir diese Informationen weiter unten auf der Seite.

Ein weiterer A/B-Test, den wir hier versuchen könnten, besteht darin, jede der Funktionen der Pläne so zu ändern, dass sie ein schwebendes Element haben, das erscheint, wenn man mit der Maus über den Text fährt, und dem Besucher mehr kontextbezogene Informationen liefert. Wir könnten diese Version mit Kontexthilfe gegen die aktuelle Version testen, um zu sehen, welche am Ende mehr Käufe generiert.

Das Konfetti gibt uns auch aggregierte Informationen über die Besucher, die aus den Klicks extrahiert werden, die sie gemacht haben. Nelio A/B Testing umfasst mehrere Arten von Filtern, um die verschiedenen Eigenschaften von Besuchern besser zu verstehen, wie Sie hier sehen können:

Aus diesen Filtern haben wir die folgenden Daten extrahiert:

• Chrome und Firefox sind bei weitem die von unseren Besuchern am häufigsten verwendeten Browser. Daher müssen wir dafür sorgen, dass das Web zumindest in diesen Browsern gut aussieht.
• Die Hälfte der Besucher dieser Seite kommt aus den Vereinigten Staaten. Dies entspricht unseren Verkaufsdaten.
• Besucher besuchen uns häufiger die ersten 3 Tage der Woche. Die Kenntnis dieser Informationen kann beispielsweise nützlich sein, um an anderen Tagen Angebote in anderen Bereichen des Webs zu machen und so an Tagen mit wenig Verkehr Traffic anzuziehen.
• Fast 100 % der Besucher greifen von einem Desktop-Computer oder einem Laptop auf die Seite zu. Wir haben kaum Besuche von mobilen Geräten. Dies ist etwas, das man in Zukunft studieren sollte.
• Windows 10 und Mac OS X sind die Betriebssysteme, von denen die Leute uns besuchen. Es stimmt mit den vorherigen Daten überein, da wir keine Besucher von Betriebssystemen für mobile Geräte haben.
• Wir haben mehr Besucher während des Arbeitstages (der Test wurde in der Zeitzone von Chicago durchgeführt). Das macht Sinn, da unser Hauptkunde aus den USA kommt.
• Besuche erfolgen auf Bildschirmen mit einer Mindestbreite von mehr als 1500 Pixel. Eine weitere Tatsache, die bestätigt, dass die Besuche von Desktop-Computern oder Laptops stammen.

Wenn Sie sich die Vollversionen der Heatmap und Konfetti ansehen, werden Sie feststellen, dass alle anderen Abschnitte der Preisseite von Nelio A/B Testing weniger relevant sind. Lassen Sie uns in diesem Sinne die folgende Scrollmap überprüfen:

Wenn Sie die vollständige Scrollmap überprüfen, können Sie sehen, dass nur sehr wenige Besucher über die erste Falte der Seite hinausgehen. Das lässt mich denken, dass wir vielleicht eine viel kürzere Version der Preisseite von Nelio A/B Testing verwenden sollten, die die relevanten Informationen über der Falte verdichtet.

Abschnitte nach dem ersten Falz der Seite enthalten viel Text und die Besucher lesen ihn nicht. Weniger als 20 % kommen, um die detaillierte Tabelle zum Vergleich der Pläne zu sehen und mit ihr zu interagieren, die Sie unten im Internet finden können. All diese Daten werden von der Scrollmap bereitgestellt:

Das Testen mit kürzeren Versionen der Seite mit mehr visuellen Abschnitten kann dazu beitragen, den potenziellen Käufer zu überzeugen und eine viel effektivere und effizientere Preisseite zu erhalten. Dies ist eine weitere Idee für eine mögliche Änderung, die Sie mit einem A/B-Test ausprobieren können.

Wir haben bereits einige Ideen, die wir in Zukunft testen könnten, daher ist klar, dass die Informationen, die uns Heatmaps liefern, sehr nützlich sind, um Ideen zu bekommen, die wir dann in A/B-Tests anwenden können.

Preisseite für Nelio-Inhalte

Wie bei der Preisseite von Nelio A/B Testing haben Sie hier die vollständigen Bilder mit den Heatmap-Ergebnissen für die Preisseite von Nelio Content:

• Heatmap der Preisseite von Nelio Content.
• Scrollmap der Preisseite von Nelio Content.
• Konfetti der Preisseite von Nelio Content.

Die Preisseite von Nelio Content ist einfacher und kürzer als die für Nelio A/B Testing. Unter anderem hat diese Seite nur einen Plan, während wir mit Nelio A/B Testing 3 verschiedene Pläne hatten.

Wenn Sie sich die vollständige Heatmap ansehen und sie mit der von Nelio A/B Testing vergleichen, werden Sie feststellen, dass es in diesem Fall neben dem ersten Falz weitere Hotspots in anderen Teilen der Seite gibt.

In der vorherigen Abbildung sehen wir, dass die Aktionsschaltflächen in der Tabelle, die Pläne vergleicht, besondere Relevanz erhalten. Das ist gut, denn aus diesem Grund haben wir sie dort. Beachten Sie jedoch, dass der Starter -Plan in der Tabelle, der nichts anderes als die kostenlose Version von Nelio Content ist, eine besondere Relevanz hat.

Hier stellt sich die Frage, ob wir auf unserer Preisseite einen Link zum WordPress-Plugin-Verzeichnis haben sollten, damit Besucher die kostenlose Version von Nelio Content herunterladen können oder nicht. Jetzt haben wir es, aber die Heatmap zeigt, dass wahrscheinlich mehrere Besucher unsere Preisseite verlassen, um sich für die kostenlose Version zu entscheiden.

Dieses Thema ist umstritten und die Quelle langer Diskussionen in unseren Sitzungen. Einerseits ist es nicht gut, den Link beizubehalten, da Sie einen möglichen Direktverkauf innerhalb der Preisseite verlieren. Aber auch wenn Besucher unsere Website verlassen, kann es durchaus sinnvoll sein, Nelio Content kostenlos auszuprobieren. Benutzer mögen das Tool lieben und kaufen es später, nachdem sie es getestet haben. Bei Nelio haben wir das mehrmals besprochen und ich nehme an, das wird heute nicht das letzte Mal sein? Der Link bleibt vorerst bestehen. Was denkst du darüber?

Wir sehen auch, dass das Video viel Aufmerksamkeit erregt. Wir haben ein sehr cooles Video erstellt, und vielleicht könnten wir es früher auf der Seite zeigen. Wir könnten diese Änderung mit einem A/B-Test versuchen, da der Abschnitt nach dem ersten Fold auch nicht so viel Relevanz erhält.

Andererseits sehen wir auf der Scrollmap, dass der Besucherverlust weniger abrupt ist, wenn wir die Seite nach unten scrollen. Dies bestätigt, dass eine kürzere Preisseite möglicherweise besser funktioniert, wenn wir möchten, dass der Besucher so viel Inhalt wie möglich sieht.

Darüber hinaus sehen wir in Kombination mit der vorherigen Heatmap, dass die beiden Abschnitte nach der ersten Falte, die über bestimmte Funktionen sprechen und Meinungen von Personen zeigen, möglicherweise neu gestaltet werden müssen. Es sind Abschnitte mit zu viel Text, die nicht zu viel Aufmerksamkeit erregen. Wir könnten eine visuellere und direktere alternative Version ausprobieren.

In Bezug auf die Grafik des Klick-Konfetti ist es interessant zu sehen, wie viele Fehlklicks in nicht klickbaren Bereichen innerhalb des First Fold der Seite getätigt werden:

Auch wenn die meisten dieser Klicks unvermeidlich sind (ja, gehen Sie davon aus, dass die Leute auf Seitenbereiche klicken, insbesondere auf die rechte Seite, wenn Sie scrollen), gibt es andere, die das Ergebnis verwirrter Besucher sind. Dies ist der Fall bei den Klicks auf die monatliche Preiszahl, die Sie im vorherigen Screenshot sehen. Dieser Preis ist kein anklickbares Element; Sie müssen stattdessen auf die orangefarbene Schaltfläche klicken. Die unten gezeigte jährliche Preiszahl ist jedoch ein richtiger Link.

Wir müssen nach einer anderen, weniger verwirrenden Möglichkeit suchen, die beiden Preise darzustellen, mit einer gleichen Wechselwirkung für beide Fälle. Dies ist ein weiterer A/B-Test, den wir auf dieser Seite durchführen könnten.

Und was jetzt?

Wir begannen, ohne eine Vorstellung davon zu haben, welche A/B-Tests wir auf unserer Website durchführen könnten. Wir haben gesehen, dass Heatmaps uns dabei helfen, Ideen zu finden, die wir leicht in A/B-Tests auf unseren Seiten testen können. Sobald wir diese Testideen haben, müssen wir sie entsprechend unseren Bedürfnissen priorisieren.

Denken Sie daran, dass die Änderungen im ersten Falz der Seite schneller zu testen sind, da sie von mehr Personen gesehen werden und Sie somit schneller Ergebnisse erhalten. Sie könnten damit beginnen, die A/B-Tests zu priorisieren, die versuchen, Änderungen in diesem Teil der Seite vorzunehmen.

Und die wichtigste Lektion hier ist: Sobald Sie mit dem Testen beginnen, hören Sie nicht auf. Nach jeder Iteration des Testprozesses werden Sie sowohl von Ihrer Website als auch von Ihren Besuchern etwas Neues lernen.

Wir sehen uns nächsten Monat mit einer anderen Art von Test, bei dem wir echte Ergebnisse analysieren werden. Denken Sie daran, mir einen Kommentar mit Ihrer Meinung zu diesem Beitrag und allem, was ich hier erklärt habe, zu hinterlassen. Auf welcher Seite Ihrer Website würden Sie eine Heatmap ausführen?

Vorgestelltes Bild von Steve Halama auf Unsplash.