Finden Sie mit Heatmaps heraus, was Ihre Besucher auf Ihrer Website tun

Veröffentlicht: 2021-11-04

Menschen sind von Natur aus neugierig. Neugier ist in vielerlei Hinsicht eine der Eigenschaften, die uns am meisten dazu gebracht hat, uns weiterzuentwickeln. Information ist Macht, und Informationen über andere zu haben, ist in vielen verschiedenen Bereichen sehr nützlich, einschließlich der Entwicklung von Webseiten.

Ohne auf die dunkle Seite der Welt des Datenschutzes zu gehen, gibt es viele Möglichkeiten, eine Webseite zu verwalten und Neugier auf ethische Weise zu nutzen, um ihre Leistung zu verbessern und Ihre Besucher dazu zu bringen, Ihre Seiten mehr als zuvor zu genießen.

Heatmaps sind eine Technik, die darauf abzielt, herauszufinden, was Besucher auf einer Webseite tun, und zu sehen, wie sie damit interagieren. Das heißt, Heatmaps ermöglichen es uns, das Verhalten von Besuchern aggregiert und anonym zu analysieren. Durch die Analyse der Bewegung des Cursors auf der Webseite sind Heatmaps eine visuelle Darstellung, die die Hotspots Ihrer Seite in wärmeren Farben zeigt.

Darüber hinaus ermöglichen uns Heatmaps, Verbesserungsideen zu erhalten, die auf unserer Website angewendet werden können. Wir müssen nur die Daten untersuchen, die wir in der Heatmap sehen, um Schlussfolgerungen darüber zu ziehen, was passiert, was die Besucher tun, was im Web schief läuft und wie wir es lösen können.

So erstellen Sie eine Heatmap in WordPress

Heutzutage ist das Erstellen einer Heatmap extrem einfach. In WordPress müssen wir nur ein Plugin verwenden, mit dem wir Heatmaps erstellen können. Tatsächlich sind Heatmaps eine der Funktionen, die von unseren Nelio A/B Testing-Benutzern am meisten nachgefragt werden.

Wir erstellen seit langem Heatmaps, um mögliche Verbesserungen auf unserer Website weiter zu erforschen. Als Beispiel zeige ich Ihnen hier die neueste Heatmap, die wir auf der Hauptseite von Nelio erstellt haben.

Als erstes erstellen Sie eine neue Heatmap. Dazu wählen wir den neuen Test in Nelio A/B Testing aus und wählen die Seite aus, die uns interessiert, wie Sie im folgenden Screenshot sehen können:

Bildschirm zum Erstellen einer Heatmap mit Nelio A/B Testing.
Bildschirm zum Erstellen einer Heatmap mit Nelio A/B Testing.

Dann müssen wir nur noch den Test starten, damit das Plugin Ihre Besucher trackt und die Informationen automatisch aggregiert. Von diesem Moment an wird schrittweise eine neue Heatmap generiert und wir können die Ergebnisse grafisch anzeigen.

Heatmap-Ergebnisse

Sobald wir eine repräsentative Besucherzahl getrackt haben, können wir das Ergebnis der Heatmap im Detail beobachten. Beachten Sie, dass es unterschiedliche Sichtweisen auf diese von unseren Besuchern extrahierten Daten gibt.

Die häufigste Art der Visualisierung ist die Heatmap selbst, die eine Reihe von Punkten in warmen Farben zeigt, die oben auf der analysierten Seite angezeigt werden. Diese Hotspots werden über den Elementen platziert, die die meiste Interaktion erhalten haben.

Auf der anderen Seite haben wir die Scrollmap, die mit wärmeren Farben anzeigt, wie weit die Besucher auf der Seite heruntergekommen sind, indem sie vor dem Verlassen nach unten gescrollt haben.

Schließlich besteht die letzte Darstellung, die wir normalerweise finden können, darin, die auf der Seite getätigten Klicks als Punktwolke oder Konfetti zu sehen.

In der vorherigen Galerie haben Sie die vollständige Heatmap, Scrollmap und Cofetti, die unser Plugin bei der Analyse der Hauptseite unserer Website erstellt hat. Sehen wir uns als Nächstes einige Details der Informationen genauer an, die wir aus all diesen drei Darstellungen extrahieren können.

Heatmap-Details

Die Heatmap zeigt, dass ein Großteil der Aktivität derjenigen, die unsere Homepage besuchen, im ersten Teil der Seite stattfindet. Wir finden viel Interaktion auf den Schaltflächen, die uns zu den spezifischen Seiten jedes unserer Plugins führen, was wir möchten:

Detail des ersten Abschnitts der Heatmap.
Detail des ersten Abschnitts der Heatmap.

Aber wir haben auch festgestellt, dass viele Leute auf das Pfeilzeichen in der ersten Falte klicken, das sie angibt, nach unten zu scrollen. Leider ist dieser Pfeil nur ein Indikator und kein anklickbares Element. Es verwirrt also sicherlich unser Publikum, das immer noch darauf klickt.

Als Lösung könnten wir den Pfeil in eine Schaltfläche umwandeln, die automatisch auf der Seite nach unten scrollt. Auf diese Weise bringen wir die Erwartungen der Benutzer an die Realität.

Detail der Fußzeile in der Heatmap.
Detail der Fußzeile in der Heatmap.

Andererseits ist es kurios zu sehen, wie auch die Fußzeile viel Aufmerksamkeit erhält. Dies ist wichtig, da es darauf hindeutet, dass einige Benutzer erst am Ende der Seite finden, wonach sie suchen. Der heißeste Bereich ist insbesondere der Kontaktlink. Daher wäre es eine gute Testidee, diesen Link in einen prominenteren Bereich der Seite zu verschieben, nur um sicherzustellen, dass niemand die Seite verlässt, ohne das Gesuchte zu finden.

Scrollmap-Details

Die Scrollmap zeigt, dass die meisten unserer Besucher nichts über eine halbe Seite hinaus sehen. Mit diesen Informationen können wir als Hauptschlussfolgerung ziehen, dass der Inhalt von diesem Punkt übersehen wird und daher nicht relevant sein sollte.

Um unsere Inhalte für unsere Zuschauer attraktiver zu machen und sie so vom Abgang abzuhalten, besteht eine Möglichkeit darin, visuellere und dynamischere Abschnitte anzuzeigen. Statische Inhalte fallen zu wenig auf und wir verlieren die Aufmerksamkeit unserer Besucher. Aus diesem Grund kann das Vorschlagen von Änderungen in diesen Abschnitten eine gute Möglichkeit sein, in einem zukünftigen A/B-Test zu testen.

Konfetti-Details

Das Konfetti zeigt uns eine Punktwolke mit allen Klicks, die wir während des Tests erhalten haben. Im Vergleich zu einer normalen Heatmap enthalten Konfettis mehr Informationen zu jedem einzelnen Klick.

Wir sehen, dass die Mehrheit der Besucher, die darauf geklickt haben, zwischen 5 und 10 Sekunden dafür gebraucht haben. Es ist sehr interessant, diese Daten zu kennen, da wir ein ziemlich ungefähres Maß für die Zeit haben, die wir haben, um ihre Aufmerksamkeit zu erlangen.

Je komplexer die Seite und je schwieriger sie zu verstehen scheint, desto mehr Besucher verlieren wir. Diese Informationen können uns helfen, eine viel einfachere und radikalere Version der Seite vorzuschlagen. Wir könnten zum Beispiel weniger Informationen anzeigen und direkt auf den Punkt kommen. Das ist ein weiterer möglicher A/B-Test, den wir als nächstes ausprobieren könnten.

Detail des ersten Abschnitts des Konfettis.
Detail des ersten Abschnitts des Konfettis.

Außerdem können wir sehen, dass es Besucher gibt, die auf Elemente klicken, die nicht anklickbar sind. Ein besonders relevanter Abschnitt ist hier die Liste der Logos von Unternehmen, die unsere Produkte verwenden, oder die Referenzen unserer Kunden:

Detail der verpassten Klicks, die wir im Konfetti sehen können.
Detail von falsch platzierten Klicks, die wir im Konfetti sehen können.

In diesen Abschnitten haben wir keine anklickbaren Elemente, aber sie werden trotzdem angeklickt. Auch dies kann verwirrend sein, und daher ist es wichtig sicherzustellen, dass das Verhalten unserer Website den Erwartungen unserer Besucher entspricht. Um dies zu vermeiden, könnten wir beschließen, das Design dieser Abschnitte zu ändern, um deutlicher zu machen, dass Sie dort nicht klicken müssen. Oder löschen Sie sogar die Abschnitte unter Berücksichtigung der Informationen in der Scrollmap, in denen wir bereits gesehen haben, dass wir in diesem Teil des Webs Menschen verlieren.


Das Wichtigste bei Heatmaps ist es, Ideen für Verbesserungen zu erhalten, indem analysiert wird, wie unsere Besucher mit unserer Website interagieren. Auf diese Weise können wir fehlgeschlagene Verhaltensweisen korrigieren und mögliche Verbesserungen unserer Seite vorschlagen, die wir anschließend mit A/B-Tests testen können.

Ich möchte Sie daran erinnern, dass Sie mit der kostenlosen Version von Nelio A/B Testing Heatmaps auf Ihren WordPress-Seiten so einfach erstellen können, wie ich es hier erklärt habe. Gehen Sie voran und versuchen Sie es. Und teilen Sie uns dann Ihre Erfahrungen mit und welche Informationen Sie durch diese visuelle Darstellung des Verhaltens Ihrer Besucher gewinnen können.

Beitragsbild von Almos Bechtold auf Unsplash.