Der vollständige Leitfaden für Heatmaps

Dieser Leitfaden enthält eine Einführung in die verschiedenen Arten von Heatmaps sowie Anweisungen zur ihrer Erstellung und Analyse. Du findest hier auch echte Fallstudien und praktische Beispiele, sodass du selbst sehen kannst, wie wertvoll und nützlich Heatmaps sind, wenn es um die Optimierung und Weiterentwicklung deiner Website geht.

Was ist eine Heatmap?

Eine Heatmap (oder „Wärmebild“) ist eine grafische Darstellung von Daten, in der Werte durch Farben wiedergegeben werden. 

Sie sind wichtig, um herauszufinden, was auf einer Website oder Produktseite funktioniert und was nicht. 

Wenn du mit der Positionierung bestimmter Schaltflächen und Elemente auf deiner Website experimentierst, kannst du mithilfe von Heatmaps die Leistung deines Produkts bewerten und die Aktivität und Bindung der Nutzer erhöhen, indem du die Aufgaben priorisierst, die den Kundennutzen steigern.

Heatmaps vereinfachen die Visualisierung komplexer Daten und machen sie auf einen Blick verständlich:

Die Technik, die wir heute als Heatmaps bezeichnen, hat ihren Ursprung vermutlich im 19. Jahrhundert, als manuelle Graustufenschattierungen verwendet wurden, um Datenmuster in Matrizen und Tabellen darzustellen.

Der Begriff „Heatmap“ wurde erstmals Anfang der 1990er Jahre markenrechtlich geschützt, als der Softwareentwickler Cormac Kinney ein Tool zur grafischen Darstellung von Echtzeitinformationen des Finanzmarkts herausbrachte. 

Heutzutage können Heatmaps immer noch manuell mithilfe von Excel-Tabellen oder mit Tools zur Gewinnung von Erkenntnissen über Produkterfahrungen wie Hotjar erstellt werden. 

Was ist eine Website-Heatmap und wie kannst du sie als Informationsquelle für dein Produkt nutzen?

Website- und Produkt-Heatmaps visualisieren die beliebtesten (heißen) und unbeliebtesten (kalten) Elemente des Webseiteninhalts deiner Website mithilfe von Farben auf einer Skala von Rot bis Blau.

Aber wer nutzt Heatmapsund wie funktionieren sie? 

Heatmaps geben Produktteams, Marketingfachkräften, Digital- und Datenanalysten, UX-Designern, Social-Media-Spezialisten – und allen, die irgendetwas online verkaufen – tiefe Einblicke in das Verhalten der Nutzer auf ihrer Website und helfen ihnen dabei herauszufinden, warum Nutzer ihr Produkt nicht annehmen, Call-to-Action-Schaltflächen (CTA) nicht verwenden oder nicht zu Kunden werden. 

Heatmaps aggregieren das Nutzerverhalten und vereinfachen damit Datenanalysen – die Kombination von quantitativen und qualitativen Daten. Sie geben einen Überblick darüber, wie deine Zielgruppe mit einer einzelnen Website oder Produktseite interagiert – worauf die Nutzer klicken, durch welche Inhalte sie scrollen und was sie ignorieren. Dies hilft dir, Trends zu erkennen und dein Produkt und deine Website zu optimieren, um die Nutzeraktivität und den Umsatz zu steigern.

Heatmaps zeigen in der Regel auch den Teil der Seite, den die Besucher auf dem Bildschirm sehen, ohne zu scrollen, sobald sie die Seite öffnen (als „Above the Fold“ bezeichnet).

Vorteile der Verwendung von Heatmaps auf Websites

Heatmaps verdeutlichen Produktmanagern und Website-Besitzern, wie Personen mit ihren Webseiten interagieren. Dadurch erhalten sie Antworten auf wichtige Geschäftsfragen und -ziele, wie z. B. „Warum konvertieren meine Nutzer nicht?“ oder „Wie bringe ich mehr Besucher dazu, aktiv zu werden?“ Mithilfe von Heatmaps kannst du Folgendes über Nutzer herausfinden:  

• Ob sie wichtige Inhalte finden oder übersehen

• Ob sie die wichtigsten Links, Schaltflächen, Opt-Ins und CTAs einer Seite finden und verwenden

• Ob sie durch nicht anklickbare Elemente abgelenkt werden

• Ob sie Probleme auf verschiedenen Geräten haben

Als visuelles Tool helfen dir Heatmaps dabei, fundierte, datenbasierte Entscheidungenfür A/B-Tests sowie die Aktualisierung oder (Neu-)Gestaltung deiner Website zu treffen. Sie sind auch auf breiterer Unternehmensebene nützlich: Mit Heatmaps kannst du Teammitgliedern und Stakeholdern zeigen, was passiert, und leichter ihre Zustimmung einholen, wenn Änderungen erforderlich sind. Schließlich lässt sich nicht abstreiten, was eine Heatmap verdeutlicht.

Mit den kontinuierlichen Heatmaps von Hotjar kannst du Daten filtern und spezielle Heatmaps erstellen, die auf Nutzerattributen basieren – z. B. die Rolle oder der Titel des Nutzers, das Datum, an dem er sein Konto erstellt hat, ob er eine Testversion deines Produkts verwendet und vieles mehr. So kannst du schnell gezielte Einblicke gewinnen. 

Beispielsweise können Produktteams Heatmaps verwenden, um zu testen, wie Nutzer mit einer neuen Funktion interagieren, oder um Fehlerkorrekturen zu priorisieren. UX- und UI-Designer hingegen verwenden Heatmaps, um die Beliebtheit oder Ablehnung eines Seitendesigns zu messen und Änderungen zu implementieren, die den Kunden die Navigation auf ihrer Website erleichtern.

Mit der Hotjar-Funktion Highlights kannst du bestimmte Erkenntnisse einer Heatmap als Favorit markieren und direkt mit anderen Abteilungen oder Personen in deinem Unternehmen teilen, um eine erfolgreiche bereichsübergreifende Zusammenarbeit zu ermöglichen.

Du kannst auch eine „Sammlung“ von Heatmaps erstellen, um bestimmte Elemente hervorzuheben, die dein Unternehmen oder Team priorisieren soll. 

Eine Fachkraft für digitales Marketing könnte zum Beispiel eine Heatmap-Sammlung erstellen, um eine Landing Page zu testen, und dann beschließen, eine CTA-Schaltfläche „above the fold“ zu platzieren, um die Abwanderung zu verringern und die Zahl der Registrierungen für eine Website oder ein Produkt zu erhöhen.

Welche verschiedenen Arten von Heatmaps gibt es?

Heatmap ist eigentlich ein Oberbegriff für verschiedene Heatmapping-Tools: Scroll Maps, Click Maps und Move Maps. Es ist praktisch, den Unterschied zu kennen, da jeder Typ Ihnen hilft, einen etwas anderen Aspekt Ihrer Website und Produktleistung zu untersuchen.

1. Scroll-Maps

Scroll-Maps zeigen Ihnen den genauen Prozentsatz der Besucher, die zu einem beliebigen Punkt auf der Seite nach unten scrollen: je röter der Bereich, desto mehr Besucher haben ihn gesehen.

2. Click Maps

Click Maps zeigen Ihnen, wo Besucher auf Desktop-Geräten mit der Maus klicken und auf mobilen Geräten mit dem Finger tippen (in diesem Fall werden sie als Touch Heatmaps bezeichnet). Die Karte ist farbcodiert, um die Elemente anzuzeigen, die am häufigsten angeklickt und angetippt wurden (rot, orange, gelb).

3. Karten verschieben

Karten verschieben verfolgt, wohin Desktop-Benutzer ihre Maus bewegen, während sie auf der Seite navigieren. Die Hotspots in einer Bewegungskarte zeigen an, wohin die Benutzer ihren Cursor auf einer Seite bewegt haben, und Untersuchungen deuten auf eine Korrelation zwischen dem Ort, an dem die Benutzer suchen, und dem Ort, an dem sich ihre Maus befindet, hin. Das bedeutet, dass eine Bewegungskarte Ihnen einen Hinweis darauf gibt, wohin die Benutzer möglicherweise suchen, während sie Ihre Seite durchlaufen.

4. Desktop & mobile Heatmaps

Desktop- und mobile Heatmaps helfen Ihnen, die Leistung Ihrer Website auf verschiedenen Geräten zu vergleichen. So kann beispielsweise ein Inhalt, der auf einer Desktop-Seite hervorgehoben ist, auf einem Telefon viel weiter unten liegen - und Sie müssen herausfinden, ob und wie sich die Interaktion unterscheidet.

Sind Sie bereit, eine Heatmap zu erstellen und Ihre Website-Erfahrung zu verbessern?

Heatmaps sind einfach zu erstellen und zu verstehen, und sie ermöglichen Ihnen, umsetzbare Erkenntnisse zu gewinnen, die Ihnen helfen, die User Journey und Ihre Produktseiten zu verbessern, um die Bindung an Ihre Website und die Zahl der Anmeldungen zu erhöhen!