Hallo! Hotjar gibt es jetzt auch auf DeutschÂ đŸ‡©đŸ‡Ș Jetzt gratis starten.

Lerne / LeitfÀden / Heatmaps-Leitfaden

ZurĂŒck zu LeitfĂ€den

Was ist eine Heatmap-Analyse: Wie analysiert man eine Heatmap?

Die Praxis der Heatmaps geht auf das Jahr 1900 zurĂŒck - sie sind ein bewĂ€hrtes, effektives Tool fĂŒr Erkenntnisse ĂŒber das Produkterlebnis (PX), das Unternehmen dabei hilft, das Verhalten der Nutzer auf Ihrer Website zu visualisieren, um Änderungen vorzunehmen, die das Nutzererlebnis verbessern und das Wachstum fördern.

Hotjar-Tools

Zuletzt aktualisiert

25 Aug 2023

Aber wie können erfolgreiche Unternehmen und sogar Start-ups Heatmaps analysieren, um Entscheidungen zu treffen, die ihnen helfen, die Unternehmensziele zu erreichen? Die Analyse von Heatmaps ist keine Raketenwissenschaft, und es ist sehr einfach, Einblicke in die Nutzererfahrung zu gewinnen, indem man sich ein paar verschiedene Heatmap-Beispiele ansieht.

Richte deine Heatmap noch heute ein

Registriere dich fĂŒr ein kostenloses Hotjar-Konto, fĂŒge den Tracking-Code zu deiner Website hinzu und beginne noch heute mit der Nutzung von Heatmaps.

Was ist eine Heatmap-Analyse?

Die Heatmap-Analyse ist ein Prozess, bei dem die in einer Heatmap erhobene Datenmenge ĂŒberprĂŒft und ausgewertet wird, um so die Interaktion und das Verhalten der User  deines Produkts besser zu verstehen. Diese Datenanalyse ermöglicht ein optimiertes Webdesign mit einer niedrigeren Absprungrate, geringerer Abwanderung, weniger AbbrĂŒchen, mehr Seitenaufrufen und besseren Conversion Rates. Die DurchfĂŒhrung von Usability-Tests (wie A/B-Tests) kann dabei fĂŒr noch effektivere Ergebnisse sorgen.

Eine 5-Fragen-Checkliste fĂŒr eine erfolgreiche Heatmap-Analyse

Mindestens 5 Fragen lassen sich mithilfe einer Heatmap-Analyse beantworten. Wir haben diese in einer praktischen Checkliste zusammengefasst:

  1. Sehen die User wichtige Inhalte?

  2. Klicken die User auf wichtige Seitenelemente (Links, SchaltflÀchen und CTAs)?

  3. Werden die User durch nicht anklickbare Elemente verwirrt? 

  4. Werden die User durch unnötige Inhalte abgelenkt?

  5. Treten bei den Usern Probleme auf verschiedenen GerÀten auf?

1. Sehen die User wichtige Inhalte?

Um herauszufinden, ob die User wichtige Elemente oder Abschnitte auf deiner Produktseite auch tatsĂ€chlich anschauen, wirfst du am besten einen Blick auf  eine Scrollmap – eine Heatmap, die dir anzeigt, wie weit die Leute auf deiner Website nach unten scrollen.

Mit  diesen drei Schritten kannst du  feststellen, ob deine Inhalte dein Produkt tatsĂ€chlich verkaufen und ĂŒberzeugend prĂ€sentieren: 

1ïžâƒŁ Bearbeite Inhalte ober- und unterhalb des „Average Fold“  deiner Website

ÜberprĂŒfe zunĂ€chst, welcher Bereich deiner Website sich “Above the Fold” befindet, d.h. beim Aufrufen der Website fĂŒr die User ohne zu scrollen sichtbar ist. Man nennt diese Grenze auch „Average Fold“ (wörtl. durchschnittlicher Falz):

#„Average Fold“ auf einer Hotjar-Scrollmap
„Average Fold“ auf einer Hotjar-Scrollmap

Wenn du weißt, wo der „Average Fold“ liegt, kannst du ganz einfach feststellen, ob die Userdie wichtigsten Informationen einer Seite auf den ersten Blick sehen, seien es nun Produktangebote, AnkĂŒndigungen fĂŒr Kampagnen usw. 

Wenn du zum Beispiel auf deiner Website sehr ĂŒberzeugende, virale Inhalte hast, diese jedoch unterhalb des “Average Fold” stehen, bekommen Besuchende diese Inhalte nur dann zu Gesicht, wenn der direkt sichtbare Bereich ihre Aufmerksamkeit dermaßen fesselt, dass sie bereit sind, nach unten zu scrollen.

💡Hinweis: Der „Average Fold“ wird bei Scrollmaps von Hotjar automatisch berechnet und fĂŒr Desktop- und MobilgerĂ€te angezeigt.

2ïžâƒŁ Werte aus, wie Besuchende mit den Seitenelementen interagieren

ÜberprĂŒfe als nĂ€chstes die gesamte Scrollmap und betrachte den Prozentsatz der Besuchenden, die bis zu bestimmten Punkt der Seite scrollen (oder eben nicht). Diese Daten sind vor allem fĂŒr lĂ€ngere Seiten nĂŒtzlich, beispielsweise auf einer Landing Page, die viele Informationen enthĂ€lt, die Kund:innen sehen sollen.

3ïžâƒŁ Untersuche, warum Nutzer deine Website verlassen

Achte auf starke FarbverĂ€nderungen in deiner Scroll-Heatmap. Diese weisen darauf hin, dass ein erheblicher Prozentsatz der Besuchenden nicht mehr weiter nach unten gescrollt hat – möglicherweise, weil sie dachten, am Ende der Seite angelangt zu sein, da nicht erkennbar war, dass sich weiter unten noch Inhalte befinden.

Mithilfe von Scrollmaps kannst du feststellen, ob wichtige Informationen von der Mehrheit deiner User ignoriert werden und an eine Stelle auf der Website verschoben werden mĂŒssen, die besser zu sehen ist.

2. Klicken die User auf wichtige Website-lemente (Links, SchaltflÀchen und CTAs)?

WĂ€hrend eine Scrollmap dir zeigt, ob die User bestimmte Inhaltselemente sehen, verdeutlicht eine Clickmap eindrĂŒcklich, ob die User darauf klicken oder nicht:

#Eine Clickmap von Hotjar
Eine Clickmap von Hotjar

Deine Website ist dazu da, dass User ein bestimmtes Ziel erreichen können, z. B. Informationen finden, sich fĂŒr einen Service anmelden oder ein Produkt kaufen. Achte bei der Analyse einer Clickmap daher besonders auf Elemente wie Calls-to-Action (CTAs), SchaltflĂ€chen und Links, die es den Usern ermöglichen, ihr Ziel zu erreichen: Werden diese Elemente angeklickt oder, im Falle einer mobilen Heatmap, angetippt? Wie viel Interaktion findet jeweils statt? Ignorieren die User eine Produktfunktion, die du bekannt machen willst?

Diese Erkenntnisse aus der Produkterfahrung helfen dir,  Änderungen am Design vorzunehmen, die schnelle Erfolge bringen, oder die Notwendigkeit einer eingehenderen User Research zu begrĂŒnden. Entschließt du dich letzten Endes dafĂŒr, die Produktseite zu Ă€ndern, hilft dir die Clickmap dabei, das Nutzerverhalten auf beiden Versionen zu vergleichen und herauszufinden, ob dein neues Design seinen Zweck erfĂŒllt.

Hotjar-Heatmaps bieten dir  unglaubliche PX-Einblicke, um die Psychologie hinter den Klicks, dem Scrollen und allen anderen Mausbewegungen der User zu verstehen.

Mithilfe von Heatmaps konnte ich feststellen, wo die Nutzer die meiste Zeit verbringen, und beurteilen, ob sie dort Zeit verbringen sollten oder nicht.

Piriya Kantong
Leitender Online-Marketing-Analyst, Zenprint, Gogoprint

3. Werden die User durch nicht anklickbare Elemente verwirrt?

Nicht anklickbare Elemente, die aussehen, als ob sie anklickbar wĂ€ren, können zu Verwirrung und Frustration bei den Usern fĂŒhren, da sie vergeblich klicken, anstatt weitergeleitet zu werden. 

#Diese Klick-Heatmap von Hotjar zeigt die Verwirrung der Nutzenden auf der mobilen Version unserer alten Homepage

Diese Hotjar-Clickmap zeigt ein offenbar irritiertes Nutzerverhalten

Im obigen Beispiel scheint es so, als ob jemand auf eines der Testimonial-Logos getippt hĂ€tte, wahrscheinlich in der Erwartung, dass eine Interaktion stattfinden wĂŒrde. Behalte dieses Szenario im Hinterkopf, wenn du auf deinen Clickmaps nach nicht anklickbaren Elementen wie Bildern, Titeln oder Grafikelementen Ausschau hĂ€ltst, die Anzeichen fĂŒr Klick- und TippaktivitĂ€t aufweisen.

Stellst du ein derartiges Nutzerverhalten fest, musst du dich möglicherweise an die IT- oder Entwicklungsabteilung deines Unternehmens wenden oder, bei kleineren Online-Unternehmen, die Hilfe von freiberuflichen Softwareentwickler:innen oder Webdesigner:innen in Anspruch nehmen, um visuelle Änderungen vorzunehmen, sodass sich anklickbare Elemente deutlicher von nicht anklickbaren Elementen unterscheiden, oder um Links einzufĂŒgen, wo die User welche vermuteten.

4. Werden die User durch unnötige Inhalte abgelenkt?

Wenn mehrere Webseiten-Elemente um die Aufmerksamkeit der User buhlen, kann das dazu fĂŒhren, dass die User die wichtigste(n) Aktion(en) aus dem Blick verlieren.

ÜberprĂŒfe deine Movemaps und achte darauf, ob die Mausbewegungen ĂŒber die ganze Seite verteilt sind, anstatt sich auf die Hauptbotschaften und Call-to-Action-SchaltflĂ€chen und -Links zu konzentrieren.

Untersuche auch , ob es auf der Produktseite Bereiche gibt, die keine oder nur geringe Interaktion aufweisen: Möglicherweise musst du deine Inhalte neu anordnen oder sie sogar entfernen/ersetzen.

Mit der Hotjar-Funktion Highlights kannst du eine „Sammlung“ von Heatmaps erstellen, in der du einen bestimmten Ausschnitt der Heatmap hervorhebst und ihn ganz einfach mit Teamkolleg:innen, FĂŒhrungskrĂ€ften und Stakeholdern teilst. Dadurch kannst du einen ĂŒberzeugenden Business Case erstellen und Stakeholder von Änderungen an deiner Website oder Produktseite ĂŒberzeugen.

5. Treten bei den Usern Probleme auf verschiedenen GerÀten auf?

Deine Website oder Produktseite kann fĂŒr Desktop und Mobile ganz unterschiedlich aussehen: Wichtige Inhalte, die auf einem Desktop sofort sichtbar sind, können auf einem Mobiltelefon weit unterhalb des „Average Fold“ landen, wo weniger User sie sehen. Umgekehrt kann es passieren, dass dein Seiteninhalt auf einem MobilgerĂ€t sehr kompakt und gut strukturiert aussieht, auf einem großen Bildschirm jedoch spĂ€rlich und schlecht angeordnet erscheint.

#Vergleich von Hotjar-Heatmaps fĂŒr Desktop und Mobile
Vergleich von Hotjar-Heatmaps fĂŒr Desktop und Mobile

Erfolgreiche Produktmanager:innen und Inhaber:innen von Online-Unternehmen vergleichen mithilfe von Hotjar-Scrollmaps den Web-Traffic fĂŒr die Desktop- und der Mobile-Version einer Seite , um zu sehen, ob die User abhĂ€ngig vom GerĂ€t mehr oder weniger Inhalte konsumieren. Anhand einer Kombination aus Scrollmaps und Clickmaps kannst du  sehen, ob sich das Klickverhalten Ă€ndert und die User auf dem Desktop mehr/weniger/anders interagieren als auf dem MobilgerĂ€t.

Wenn du eklatante Unterschiede feststellst, besteht der  nĂ€chste Schritt darin, UX- oder UI-Verbesserungen vorzunehmen – von der Umsetzung der dringendsten Änderungen bis hin zur vollstĂ€ndigen Umstrukturierung und Neugestaltung deiner Seite(n).

Bonus-Tipp: Nutze Engagement-Zonen, um Daten aus Click-, Scroll- und Move-Heatmaps in einer einzigen Ansicht zu kombinieren

#An example of a heatmap with the Engagement zones overlay
An example of a heatmap with the Engagement zones overlay

Ein Beispiel fĂŒr eine Heatmap mit Engagement-Zonen.

Das Analysieren der Daten einzelner Heatmap-Typen ist zeitaufwendig und erfordert ein Hin- und Herwechseln zwischen den einzelnen Heatmap-Typen (zusÀtzlich zum Wechseln zwischen Desktop- und Mobilansicht).

Hier kommen die Engagement-Zonen von Hotjar ins Spiel: 

Aktiviere in Hotjar das Overlay im Panel rechts neben der Heatmap. Daraufhin erscheint ein Raster. In dieser Ansicht werden die Daten aller drei Heatmap-Typen (Scroll-, Click- und Move-Heatmap) kombiniert, sodass du ganz einfach analysieren kannst, mit welchen Elementen Nutzende interagieren 
 und welche sie ignorieren.

Engagement-Zonen verkĂŒrzen und vereinfachen die Analyse von Heatmaps bedeutend, sodass dir mehr Zeit fĂŒr das bleibt, was eigentlich wichtig ist: dein Layout, deine Inhalte und die Benutzerfreundlichkeit deiner Website zu verbessern.

Pro-Tipp: Eine Heatmap-Analyse wirft in der Folge oft zusĂ€tzliche Fragen auf – beobachtest du zum Beispiel, dass User ihre Maus viel hin- und herbewegen, aber nichts anklicken, wirst du natĂŒrlich herausfinden wollen, warum.

Wir haben da etwas fĂŒr dich: Optimiere deine Heatmap-Einblicke, indem du sie mit Verhaltens- und Feedback-Tools kombinierst, die dir helfen, dem „Warum“ hinter den Aktionen deiner User auf die Schliche zu kommen.

Richte deine Heatmap noch heute ein

Registriere dich fĂŒr ein kostenloses Hotjar-Konto, fĂŒge den Tracking-Code zu deiner Website hinzu und beginne noch heute mit der Nutzung von Heatmaps.

FAQs zur Heatmap-Analyse