Heatmap-Analyse: Wie analysiert man eine Heatmap?

Aber wie können erfolgreiche Unternehmen und sogar Start-ups Heatmaps richtig analysieren, um Entscheidungen zu treffen, die ihnen helfen, ihre Unternehmensziele zu erreichen? Die Analyse von Heatmaps ist keine Raketenwissenschaft, und anhand einiger Heatmap-Beispiele kannst du ganz leicht nützliche Einblicke in die Nutzererfahrung bekommen.

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):

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 Contentsquare 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:

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 derAnalyse 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.

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

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. 

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.

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.

Erfolgreiche Produktmanager:innen und Inhaber:innen von Online-Unternehmen vergleichen mithilfe von 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 Untersciede 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).

5. Haben Nutzer Probleme auf verschiedenen Geräten?

Ihre Website oder Produktseite kann je nach Gerät sehr unterschiedlich aussehen. Wichtige Inhalte, die auf einem Desktop sofort sichtbar sind, können auf einem Mobiltelefon weit unter der sichtbaren Fläche landen, wo deutlich weniger Nutzer sie wahrnehmen. Oder das Gegenteil kann der Fall sein: Ihre Seiten wirken auf einem mobilen Gerät sehr kompakt und gut strukturiert, aber auf sehr großen Bildschirmen leer und schlecht organisiert. Vergleichen Sie den Web-Traffic derselben Seite anhand von Scrollmaps für Mobile und Desktop, um zu sehen, ob Nutzer je nach Gerät mehr oder weniger Inhalte konsumieren. Kombinieren Sie Scrollmaps mit Clickmaps, um zu erkennen, ob sich das Klickverhalten verändert oder ob Nutzer auf Desktop und Mobilgeräten unterschiedlich interagieren. Wenn Sie deutliche Unterschiede feststellen, besteht der nächste Schritt darin, UX- oder UI-Verbesserungen vorzunehmen – von schnellen, leicht umsetzbaren Maßnahmen bis hin zur vollständigen Neustrukturierung und Neugestaltung Ihrer Seite(n) für maximale Optimierung.

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

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 Contentsquare ins Spiel: 

Aktiviere in Contentsquare 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.