So verwendest du Move-Heatmaps für Mousetracking, um deine UX und Conversion-Rate zu optimieren

In diesem Leitfaden erfährst du , was Move-Heatmaps sind und warum sie nützlich sind. Finde heraus, wie du Mausbewegungsdaten analysieren kannst, um kundenorientierte Optimierungen vorzunehmen, die die Benutzerfreundlichkeit (UX) und die Conversion verbessern.

Wir behandeln:

1. Was ist eine Move-Heatmap?

2. 4 Wege, um mit Move-Heatmaps die UX und Conversion einer Website zu verbessern

3. Auf welchen Seiten solltest du Mousetracking einsetzen?

4. Move-Heatmaps vs. Click-Heatmaps vs. Scroll-Heatmaps

5. Wie du eine Move-Heatmap auf deiner Website einrichtest

Was ist eine Move-Heatmap?

Eine Move-Heatmap – auch bekannt als Move-Map, Mausbewegungs-Heatmap, Mousetracking-Heatmap oder Attention-Map – verfolgt die allgemeine Bewegung und Platzierung des Mauszeigers von Nutzenden.

Mousetracking-Heatmaps verwenden Farben, um zu zeigen, wie viel Aufmerksamkeit Nutzende verschiedenen Seitenelementen schenken: Je länger ein Mauszeiger an einem bestimmten Punkt verweilt, desto röter wird er.

📝 Hinweis: Einige Move-Heatmaps erfassen auch die Fingeraktivität auf mobilen Geräten, aber das ist im Allgemeinen weniger nützlich, da die meisten mobilen Nutzenden den Bildschirm nur zum Klicken oder Scrollen berühren.

Warum eine Move-Heatmap zum Verfolgen von Mausbewegungen verwenden?

Move-Heatmaps zeigen dir, welche Teile deiner Seite die meiste Aufmerksamkeit auf sich ziehen. Da sie das Mausverhalten von mehreren Nutzenden gleichzeitig überlagern, sind Move-Heatmaps quantitative Darstellungen von Seitenelementen, die aktiv gelesen oder gesehen werden.

Studien zeigen, dass es einen Zusammenhang zwischen Maus- und Augenbewegungen gibt. Das bedeutet, dass sich mit Move-Heatmaps auch gut nachvollziehen lässt, wohin Menschen beim Surfen auf deiner Website schauen.

Im Vergleich zu Eye-Tracking in einem Labor sind Mousetracking-Heatmaps billiger und einfacher zu erstellen, erfassen mehr Nutzende in großem Umfang und messen das Verhalten in der realen Welt.

4 Wege, um mit Move-Heatmaps die UX und Conversion einer Website zu verbessern

In den folgenden Beispielen findest du Ideen, wie du Move-Heatmaps in deinem nächsten UX-Design- oder Conversion-Rate-Optimierungsprojekt nutzen kannst:

1. Finde heraus, wo die Aufmerksamkeit von Nutzenden geweckt wird

Move-Heatmaps zeigen dir, welche Elemente auf einer Seite die meiste Aufmerksamkeit auf sich ziehen – achte einfach auf die roten Hotspots.

Sobald du weißt, was von den Besuchenden gesehen wird, kannst du Optimierungsempfehlungen festlegen und bekommst Ideen, was du als Nächstes untersuchen kannst.

Die University of Baltimore verwendete zum Beispiel Hotjar Heatmaps, um eine Move-Heatmap auf einer Bibliotheks-Homepage zu erstellen. Die Heatmap zeigte, dass sich die meisten Besuchenden der Homepage auf das Suchfeld mit den Registerkarten konzentrierten und kaum mit anderen Seitenelementen interagierten, z. B. mit dem Button „Ask a Librarian“.

Wenn das deine Seite wäre,, könntest du eine der folgenden Maßnahmen ergreifen:

• Mehr Daten mit Session-Aufnahmen sammeln, um genau zu sehen, wie einzelne Besuchende das Suchfeld nutzen.

• Sehen, wo Nutzende wütend klicken und verwirrt werden.

• Eventuell A/B-Tests mit neuen Layouts durchführen (z. B. drei getrennte Suchfelder statt eines mit Registerkarten), und dann Move-Heatmaps für deine A/B-Testvarianten einsetzen, um zu sehen, warum erfolgreiche Varianten gewinnen.

• Eventuell eine On-Site-Umfrage einfügen, um Nutzende zu fragen, ob etwas auf der Seite fehlt.

2. Miss, ob nicht anklickbare Elemente gesehen werden

Bei den meisten Texten und Bildern müssen die Besuchenden nicht klicken, sodass du nur mit Hilfe von Bewegungsdiagrammen feststellen kannst, ob sie gelesen und gesehen werden.

Zum Beispiel haben wir die obige Move-Heatmap in einer früheren Version unseres Heatmap-Leitfadens erstellt. Es zeigte sich, dass viele Besuchende anhielten, um sich ein Bild anzusehen, das Scroll-Heatmaps mit Click-Heatmaps verglich. Diese Erkenntnis veranlasste uns, das Bild bei der Aktualisierung der Seite beizubehalten. Wenn du ähnliche Bilder in diesem Blogbeitrag entdeckst, weißt du jetzt, warum!

3. Erkenne, welche Elemente ignoriert werden

Da Move-Heatmaps die kontinuierliche Mausplatzierung messen, die mit der Augenbewegung korrelieren kann, zeigen sie besser als andere Analysetools, welche Elemente die Nutzenden ignorieren.

Die UX/UI-Agentur Turum-Burum nutzte Hotjar, um eine Move-Heatmap auf den Produktkategorieseiten des Modehändlers Intertop zu erstellen. Die Suchfilter bekamen die ganze Aufmerksamkeit und nicht die Produktlisten, was darauf hindeutete, dass die Nutzenden nicht die gewünschten Ergebnisse finden konnten. Das Team nahm einige Änderungen vor und fügte mehr Produktfilter hinzu, was zu einem Anstieg der Produktklicks und einem zusätzlichen durchschnittlichen Umsatz pro User von 13,3 % führte.

4. Segmentiere deine Move-Heatmaps, um spezifische Erkenntnisse zu gewinnen

Nutzende verhalten sich auf deiner Website unterschiedlich, und einige sind für dein Unternehmen wichtiger als andere. Die Segmentierung deiner Move-Heatmaps hilft dir, dich auf deine wertvollsten Gruppen zu konzentrieren.

Wenn du Hotjar verwendest, kannst du Heatmaps nachträglich filtern: Klicke auf „Filter hinzufügen“, um die Optionen anzuzeigen.

Du kannst diese Funktion u. a. folgendermaßen nutzen:

• Nach Exit-Page filtern, um zu sehen, worauf die Nutzenden vor dem Absprung geachtet haben.

• Nach Ereignis filtern, z. B. das Anklicken eines Buttons „Anmelden“, um zu sehen, worauf die Nutzenden vor der Conversion geachtet haben.

• Nach Referrer oder Identifikator filtern (wie UTM-Parameter), um das Verhalten von bezahltem Traffic zu isolieren und zu untersuchen.

Die CRO-Agentur The Good hat zum Beispiel Hotjar Heatmaps auf der Website des Datenschutzdienstes IDX eingesetzt, um den ROI für den Ad Traffic zu verbessern.

Move-Heatmaps vs. Click-Heatmaps vs. Scroll-Heatmaps

Move-Heatmaps sind nicht die einzige Art von Heatmap, die du nutzen kannst: Click-Heatmaps tracken, wo Nutzende klicken oder tippen, und Scroll-Heatmaps tracken, wie weit Nutzende auf einer Seite nach unten scrollen. Im Gegensatz zu diesen Alternativen messen Move-Heatmaps das Nutzerverhalten kontinuierlich, auch zwischen Seitenaktionen.

Auf diese Weise geben Move-Heatmaps Einblicke, die anderen Heatmaps entgehen. Eine Scroll-Heatmap könnte zum Beispiel zeigen, dass ein hoher Prozentsatz der Nutzenden bis zum Ende der Seite scrollt. Dagegen könnte eine Move-Heatmap zeigen, dass sie die Seitenleiste komplett ignorieren. Ebenso kann eine Click-Heatmap zeigen, dass eine Produktbeschreibung nicht angeklickt wird, aber eine Move-Heatmap könnte aufzeigen, dass die Nutzenden, die sie gelesen haben, danach konvertieren.

Keine Art von Heatmap ist besser oder schlechter. Verwende sie am besten zusammen, um klarere Erkenntnisse zu gewinnen:

• Verwende Click-Heatmaps, um zu sehen, ob Nutzende auf CTA-Buttons, defekte Links oder nicht verlinkte Elemente klicken.

• Verwende Scroll-Heatmaps, um die durchschnittliche Unterteilung zu visualisieren und zu sehen, wie weit die meisten Nutzenden scrollen.

• Verwende Move-Heatmaps, um herauszufinden, welche Bereiche einer Seite die Aufmerksamkeit auf sich ziehen.

Move-Heatmaps vs. Session-Aufnahmen

Eine Session-Aufnahme stellt die Browsing-Sitzung einzelner Nutzender über mehrere Seiten hinweg nach: Damit siehst du die Mausbewegungen, aber immer nur für eine einzelne Person.

Move-Heatmaps hingegen fassen die Mausbewegungen mehrerer Nutzender auf einer einzigen Seite zusammen. Du kannst sie verwenden, um nach allgemeinen Trends zu suchen und dir einen Überblick darüber zu verschaffen, wie verschiedene Elemente die Aufmerksamkeit auf sich ziehen.

Wie du eine Move-Heatmap auf deiner Website einrichtest

Um loszulegen, melde dich für ein kostenloses Hotjar-Konto an und füge unseren Tracking-Code zu deiner Website hinzu. Schalte die Session-Erfassung ein und Hotjar erstellt automatisch Move-Heatmaps für deine Website.

Sobald du etwas Traffic auf deiner Website hattest, klickst du auf das Heatmap-Symbol auf der linken Seite, gibst eine URL ein und klickst auf „Click-Heatmap anzeigen“.

Wähle einen Zeitraum aus, z. B. die letzten 30 Tage, und klicke auf das Move-Heatmap-Symbol, um deine Move-Heatmap zu erstellen. Schon fertig!

Erstelle eine kostenlose Move-Heatmap und steigere noch heute deine Conversions

Move-Heatmaps geben dir einen Überblick darüber, worauf Menschen auf deinen Webseiten und Produktseiten achten (und was sie ignorieren).

Für sich genommen sind sie großartige visuelle Hilfsmittel, um deinem Team und deinen Stakeholdern das Nutzerverhalten zu erklären. Aber sie werden noch viel wertvoller, wenn du sie mit anderen Erkenntnissen aus deinem Analytics-Stack kombinierst: Funnels die dir zeigen, wo dir Conversions entgehen, Session-Aufnahmen um dir zu zeigen, wie die Nutzenden auf deiner gesamten Website surfen, und Umfragen, um Feedback in den eigenen Worten deiner Kund:innen zu erhalten.

Und weißt du was? All das kannst du mit Hotjar machen 😉 .