Lerne / Leitfäden / Heatmaps-Leitfaden
Wie Sie Ihre Website mit Heatmaps verbessern und die Nutzererfahrung steigern können
Heatmaps tauchen an verschiedenen Stellen auf, von Wetterberichten über das Spielverhalten von Wimbledon-Assen bis hin zu Website-Analysen. Sie helfen uns, komplexe Daten auf einen Blick zu verstehen und fundierte Entscheidungen zu treffen.
In diesem Blog konzentrieren wir uns auf die Webanalyse und untersuchen, wie Heatmaps das Design der Website und die Benutzerfreundlichkeit (UX) verbessern und so zu mehr Umsatz und Konversionen führen.
Mit einem Tool zur Analyse des Nutzerverhaltens wie Hotjar kannst du Heatmaps erstellen und wertvolle Erkenntnisse darüber gewinnen, worauf die Besuchenden ihre Aufmerksamkeit richten, was sie fesselt und wo sie stecken bleiben.
Schauen wir uns das genauer an.
Richten Sie Ihre Heatmap noch heute ein
Melden Sie sich für ein kostenloses Hotjar-Konto an, fügen Sie den Tracking-Code hinzu und beginnen Sie, Heatmaps zu verwenden, um Ihre Website oder Ihr Produkt zu verbessern.
Heatmaps sind ein leistungsstarkes Tool zur Analyse und Visualisierung von Daten. Sie beruhen auf einer farbkodierten Darstellung von Werten von rot (hohe Werte) bis blau (niedrige Werte) und machen es dir einfach, die beliebtesten (warmen) und unbeliebtesten (kalten) Bereiche deiner Webseiten auszumachen.
Die Verwendung einer Heatmap ermöglicht es dir, zu verstehen, wie Menschen mit deiner Website interagieren. Heatmaps erfassen:
Klicks
Scrolls
Mausbewegungen
Liegen dir die Benutzerinteraktionen und Daten zum Nutzerverhalten als visuelle Darstellung vor, erfolgt eine Heatmap-Analyse.. Daraus lassen sich Erkenntnisse gewinnen, die als Grundlage für UX-bezogene Änderungen, Entscheidungen oder Strategien dienen können. Eine Heatmap zu erstellen kann sich für dich also tatsächlich ziemlich lohnen:
Testen und wiederholen: A/B-Tests, Aktualisierung oder (Neu-)Gestaltung deiner Website auf der Grundlage harter Fakten und Zahlen
Identifizieren von Fehlern und Blockern: gründliche Untersuchung und Behebung eines Problems, wie z. B. einer verringerten Conversion Rate
Sofortige Zustimmung: Überzeuge Teammitglieder und Stakeholder mit visuellen Beweisen für eine bessere Priorisierung
💡Pro-Tipp: Füge die Heatmaps von Hotjar zu deinenm Werkzeugkasten hinzu, und schließe die Lücke, die traditionelle Website-Analyse-Tools wie Google Analytics (GA) hinterlassen. Quantitative Daten sind in ihrer Aussagekraft beschränkt, sie können dir zwar sagen, dass deine User die Kassenseite erreichen und diese ohne Kauf wieder verlassen, jedoch geben sie dir keine Auskunft darüber, was falsch läuft und warum sich User so verhalten, wie sie sich verhalten. Hier wirken Heatmaps wahre Wunder.
Wie du Heatmaps verwendest, um deine Website zu verbessern und die Conversion Rate zu erhöhen
Klingt simpel, ist aber so: Du kannst dein Online-Business in ungeahnte Höhen katapultieren, indem du Heatmaps in dein Arsenal an Analyse-Tools aufnimmst. Im Folgenden findest du einige praktische, sofort umsetzbare Tipps, wie du deine Website-UX verbessern kannst.
Gib herkömmlichen Website-Analysen einen Kontext
Falls du neu hier bist, fragst du dich vielleicht, ob Hotjar als Ersatz für herkömmliche Analysetools wie Google Analytics gedacht ist. An dieser Stelle sei deshalb festgehalten: Das ist definitiv nicht der Fall!
Google Analytics (GA) ist nicht nur absoluter Publikumsliebling, sondern auch Branchenführer. Viele User, wie z. B. E-Commerce-Marken und Produktteams, verwenden GA, um wertvolle Einblicke in das Geschehen auf ihren Websites zu erhalten, wie z. B.:
Welche Seiten sind am beliebtesten?
Wie lange bleiben die Besuchenden auf den Produktseiten?
Wo treten Abbrüche auf?
Aber Google Analytics ist spezialisiert – es ist nicht so konzipiert, dass es alles für jeden macht. Es kann u. a. nicht das Verhalten hinter der Nutzung aufzeigen. Das ist eine Aufgabe, für die du Hotjar mit an Bord holen solltest
Mit Hotjar-Heatmaps kannst du den GA-Zahlen auf den Grund gehen und Folgendes herausfinden:
Warum ist unsere Conversion Rate gesunken?
Sehen die User wichtige Inhalte auf dieser Top-Seite?
Warum bleiben die Leute hängen?
Wusstest du schon?
Hotjar lässt sich nahtlos in Google Analytics integrieren und macht es einfacher als je zuvor, das spezifische Nutzerverhalten hinter den Datenanalysen zu entdecken und sofort die richtigen Korrekturen zu priorisieren. Finde mit GA heraus, was passiert, und verstehe mit Hotjar, warum es passiert – eine Kombination aus dem UX-Himmel!
Sobald du die zu optimierenden Bereiche deiner Website identifiziert hast, kannst du die Erkenntnisse aus deinen Heatmaps nutzen, um auf deren Grundlage Änderungen vorzunehmen. Nehmen wir zum Beispiel an, die User haben Probleme, eine bestimmte Schaltfläche oder einen Link zu finden. Dann könntest du dieses Element an eine auffälligere Stelle auf der Website verschieben oder es durch kräftige Farben oder andere Designelemente hervorheben.
Das Beste daran:Website-Heatmap-Einsichten zu sammeln ist definitiv keine Raketenwissenschaft. Hol dir eine Tasse Kaffee und investiere 20 Minuten, einige Heatmaps zu betrachten - du wirst dich wundern, was du darin alles entdecken kannst. Später kannst du deine Erkenntnisse in einem Sprint zeigen und das jeweilige Problem mit deinem Team in Rekordzeit lösen.
Nutze für jedes Analyseziel den richtigen Heatmap-Typ
Du willst dich ganz in deine User hineinversetzen? Dann schau dir die verschiedenen Arten von Heatmaps an und erfahre, wie dir jede von ihnen dabei helfen kann, das Nutzererlebnis besser zu verstehen.
Denken Sie daran: Die Nutzer besuchen Ihre Website nicht und sehen sie als diese oder jene Seite. Sie erleben es als eine Reise.
Klickkarten
Eine Klickkarte zeigt an, wo Nutzer auf Desktop-Geräten mit der Maus klicken oder auf mobilen Geräten mit dem Finger tippen. Die Karte zeigt die am häufigsten angeklickten Webseitenelemente in wärmeren Farbtönen an, d. h. rot, orange und gelb.
Sie möchten wissen, ob Schlüsselelemente wie primäre Calls-to-Action (CTA), Links und Schaltflächen wie vorgesehen angeklickt oder angetippt werden. Sie können Fragen beantworten wie:
Wie viel Interaktion erhalten sie?
Ignorieren die Nutzer eine Produktfunktion, die Sie populär machen wollen?
Funktionieren Links so, wie sie sollen?
Diese durch Click Maps unterstützte Untersuchung ermöglicht Ihnen:
Überwachen Sie die Effektivität der wichtigsten CTAs
Ermitteln Sie Bereiche mit möglichen Navigationsproblemen
Identifizieren und entfernen Sie Elemente/Bereiche, die Reibungsverluste verursachen
Darüber hinaus können Sie Designänderungen vornehmen, um Kunden und Ihren Teams schnelle Erfolge zu liefern, oder visuelle Einblicke nutzen, um die Notwendigkeit eingehender Nutzerforschung zu rechtfertigen.
Scroll Maps
Wenn Sie sehen möchten, wie weit Nutzer auf bestimmten Seiten nach unten scrollen, sind Scroll Maps Ihr bester Freund. Mit dieser Art von Website-Heatmap können Sie das Scrollverhalten Ihrer Besucher visualisieren.
In der Regel wechselt die farbcodierte Scrollkarte allmählich vom wärmsten zum kältesten Punkt. Sie stellen den Prozentsatz der Nutzer dar, die zu den einzelnen Bereichen Ihrer Seite gescrollt haben, wobei die oberen Bereiche die "heißesten" sind.
Diese Eigenschaft der Scroll-Maps macht sie zu einem der besten Analysetools, die Sie einsetzen können, wenn Sie conversion rate optimization (CRO) durchführen.
Sehen die User wichtige Inhalte?
CRO ist eine weit verbreitete Praxis zur Optimierung von Webseiteninhalten und -elementen. Am meisten von CRO profitieren Digital Marketer, E-Commerce-Expert:innen und Produktteams. Und Hotjar, insbesondere unsere Heatmaps, führt die Liste der beliebtesten CRO-Tools an (überzeuge dich selbst davon in unseren Heatmap-Fallstudien, inklusive Feedback unserer Kund:innen).
Anhand von Scrollmaps kannst du herausfinden, ob dein Inhalt wirklich zu Conversions führt, also zu den Aktionen, die du von den Usern erwartest, wie z. B. das Herunterladen eines E-Books, das Anklicken eines Links zur Produktseite und den Abschluss eines Kaufs.
Diese Schritte erleichtern dir den Einstieg:
Achte auf den Average Fold („durchschnittlicher Falz“, auch „Above the Fold“ genannt) deiner Website – den Bereich, den die User beim Öffnen der Seite sehen, ohne zu scrollen. Du solltest unbedingt ermitteln, wo der Average Fold auf einer Seite liegt, damit du weißt, ob Besuchende wertvolle Informationen wie Produktangebote und Ankündigungen im Rahmen von Kampagnen auch direkt sehen.
Schau dir die gesamte Heatmap ab, um den Prozentsatz der Besuchenden zu sehen, die es bis zu bestimmten Seitenabschnitten schaffen (oder eben nicht). Diese Daten sind vor allem bei längeren Seiten mit vielen Informationen, die die Besuchenden sehen sollen, äußerst nützlich.
Achte auf starke Änderungen im Farbverlauf, da diese bedeuten, dass eine beträchtliche Anzahl von Usern an dieser Stelle nicht mehr weitergescrollt hat. Untersuche ausgehend von dieser Beobachtung, ob diese Personen möglicherweise dachten, sie hätten das Ende der Seite erreicht.
Die Analyse der Scrollmap kann außerdem ergeben, dass die von den Usern benötigten Informationen nicht sofort sichtbar sind. Vielleicht musst du wichtige Inhalte nach oben verschieben oder deutlich machen, dass es weiter unten auf der Seite noch mehr Inhalte zu entdecken gibt. Und wer weiß? Allein diese Erkenntnis könnte deine Umsätze in die Höhe schnellen lassen.
Movemaps
Statt Klicks erfassen Movemaps Mausbewegungen von Desktop-Usern. Vor allem die Hotspots zeigen an, wo sie sich aufhalten. Forschungen haben ergeben, dass es einen Zusammenhang zwischen der Position des Cursors und der Blickrichtung der User gibt. Deshalb können dich Movemaps auf Bereiche mit hoher Aufmerksamkeit sowie Bereiche mit geringer Interaktion hinweisen.
Mithilfe von Movemaps überprüfst du, ob die Mausbewegungen sich auf die zentralen Botschaften, CTA-Schaltflächen und Links konzentrieren oder stattdessen über die gesamte Seite verteilt sind. Möglicherweise buhlen mehrere Seitenelemente um die Aufmerksamkeit der Besuchenden. Falls dem so ist, solltestt du die Elemente neu anordnen oder Slogans entwerfen, die die Aufmerksamkeit der Benutzenden auf konversionsrelevante Elemente und Inhalte lenken.
Behalte bei der Analyse des Nutzerverhaltens auf deinen wichtigsten Seiten das große Ganze im Blick
Führe deine benutzerzentrierte Analyse Schritt für Schritt durch, indem du dir die Heatmaps bestimmter Seiten ansiehst Dazu gehören:
Homepage
Landing Pages
Top-Seiten
Leistungsschwache Seiten
Neue Seiten
Schauen wir uns ein paar weitere Heatmap-Beispiele und Szenarien basierend auf einigen der oben genannten Gruppierungen an:
Die Homepage
Du weißt bereits, dass Conversions negativ beeinflusst werden können, wenn Besuchende deine Website wieder verlassen, ohne sich den unteren Bereich anzusehen. Aber was, wenn du deine wichtigen Inhalte Above the Fold platziert hast und trotzdem nichts passiert?
Wir haben diese Erfahrung vor einigen Jahren selbst gemacht, nachdem wir ein Video Above the Fold auf unserer Homepage platziert hatten. Bei der Betrachtung einer Clickmap stellten wir fest:Die Leute klickten nicht auf das Video. Tatsächlich landeten nur drei von insgesamt 7.000 aufgezeichneten Klicks auf dem Video 😬
Die visuellen Daten gaben einen Hinweis darauf, was auf unserer Website verbessert werden musste. Um das Problem zu beheben, beschlossen wir, A/B-Tests auf einer Reihe von Homepages – viele davon ohne Video Above the Fold – zu erstellen und durchzuführen..
Landing Pages
Nehmen wir an, Marke X veröffentlicht ein Lead-Capture-Formular, eine eigenständige Landing Page, die dazu dient, Lead-Informationen von potenziellen Kund:innen zu sammeln. Seitdem haben sie nur sehr wenige Conversions (Anmeldungen) generiert.
Mithilfe einer Movemap finden sie heraus, dass der Bereich, in dem das Formular platziert ist, wenig bis gar keine Nutzeraktivität aufweist. Diese Erkenntnis veranlasst sie, die Landing Page neu zu gestalten, die Anzahl der Formularfelder zu reduzieren und diese zu vergrößern, ein Bild auf der linken Seite hinzuzufügen und die Hauptbotschaft besser lesbar zu machen. Problem gelöst!
Leistungsschwache Seiten
Heatmaps zeigen auch, ob auf Seiten, die eigentlich gut laufen sollten (z. B. die Preisseite) das Gegenteil passiert.. Wenn du feststellst, dass die Besuchenden nach einer längeren Verweildauer auf dieser Seite zur Seite mit den Fallstudien wechseln, solltest du dir überlegen, wie du ihnen bei ihrer Entscheidung helfen könntest. Das Hinzufügen von Kundenreferenzen auf der Preisseite wäre der logische nächste Schritt zur Steigerung der Conversion Rate.
Betrachte Probleme auf verschiedenen Geräten
Erstelle Heatmaps für Desktop und Mobile, um zu vergleichen, wie weit User auf verschiedenen Geräten scrollen. Auf diese Weise können E-Commerce-, Marketing- oder Produktteams:
feststellen, ob die Userr je nach Gerät mehr oder weniger Inhalte konsumieren
Scrollmaps mit Clickmaps kombinieren, um das Klickverhalten der User sowie die Interaktion mit der Seite auf Desktop und Mobilgeräten zu vergleichen
Änderungen vorschlagen, die gezielt in Angriff genommen werden müssen
Im Sinne einer funktionsübergreifenden Zusammenarbeit kannst du dann gemeinsam mit deinem UX-Designer(-Team) kleine Änderungen mit großer Wirkung vornehmen oder Seiten komplett umstrukturieren und neu gestalten.
Ergänze deine Analyse um andere Verhaltensanalyse-Tools in Hotjar
Heatmaps sind nur ein Tool, um zu verstehen, wie User mit deiner Website interagieren. Wir haben bereits die Power-Combo Hotjar und Google Analytics erwähnt. Um ein vollständiges Bild des Nutzerverhaltens zu erhalten, solltest du auch andere quantitative und qualitative Datenquellen in Betracht ziehen, z. B. Website-Analysen anderer Anbieter und Nutzer-Feedback.
💡Pro-Tipp: Sitzungsaufzeichnungen (auch Visitor Recordings oder Session Replays) sind die Wiedergabe von Benutzersitzungen, die dir helfen, mehr Klarheit in die aus einer Heatmap gewonnenen Erkenntnisse, zu bringen. Anstatt Vermutungen zum Klick-, Tipp- und/oder Scrollverhalten auf einer Heatmap anzustellen, , solltest du dir einige Sitzungsaufzeichnungen ansehen, um zu sehen, wie deine User tatsächlich mit derWebsite interagieren.
Möchten Sie wissen, wie Sie Heatmaps und Highlights kombinieren können? Sehen Sie sich dieses Video an:
So kombinieren Sie Heatmaps und Highlights
Visualisieren Sie das Nutzerverhalten mit Heatmaps
Heatmaps bieten eine visuelle Darstellung von aggregierten Daten zum Besucherverhalten. Sie ergänzen außerdem verschiedene Analysetools, einschließlich traditioneller Tools wie Google Analytics und kundenorientierter Tools wie Hotjar's Recordings und Feedback.
Verschwenden Sie keine Zeit und beginnen Sie mit der Optimierung von Heatmaps, indem Sie die praktischen Tipps und Tricks in diesem Artikel befolgen. Und wenn Sie jetzt eine Klick-, Scroll- oder Bewegungskarte erstellen und starten möchten, dann sind Sie bei Hotjar genau richtig.
Richten Sie Ihre Heatmap noch heute ein
Melden Sie sich für ein kostenloses Hotjar-Konto an, fügen Sie den Tracking-Code hinzu und beginnen Sie, Heatmaps zu verwenden, um Ihre Website oder Ihr Produkt zu verbessern.
