Heatmaps 101: Der Held, den jeder UX-Designer braucht

Worum geht es bei Heatmaps?

Heatmaps sind Werkzeuge zur Datenerfassung und -visualisierung, die du nutzen kannst, um zu verstehen, wie deine Zielgruppe mit deinem Produkt oder deiner Website interagiert.

Heatmaps sind zweidimensionale Diagramme, die bestimmte Bereiche mithilfe bestimmter Farben hervorheben, um nützliche Informationen zu vermitteln. Zum Beispiel hat die Stadt Helsinki kürzlich eine Echtzeitkarte veröffentlicht, die anzeigt, welche Stadtteile am stärksten bevölkert sind.

So sieht beispielsweise die Clickmap der Karriereseite von Hotjar aus.

Wenn wir uns die Klick-Heatmap hier genauer anschauen, sehen wir Folgendes:

• Ein rotes „heißes“ Areal in der Nähe des Haupt-CTAs – „Offene Stellen anzeigen“.
• Etwas „warmes“ (gelbes) Aktivitätsgebiet um den rechten Pfeil-Button, mit dem das hervorgehobene Bild auf der Seite gewechselt wird.
• Ein wenig Aktivität (blau) auch auf dem linken Pfeil.

Der Rest des Bildschirms weist keine Hervorhebungen auf, was uns zeigt, dass es dort „kalt“ ist und niemand auf diese Bereiche geklickt hat.

Die „heiße“ Hervorhebung am Haupt-CTA hingegen zeigt uns, dass viele Nutzer (wahrscheinlich die meisten, wenn man nach der „Hitze“ geht) darauf klicken. Dann gibt es die warmen Bereiche um die Pfeil-Buttons, die uns verraten, dass ein kleiner Teil der Nutzer auch durch die hervorgehobenen Bilder navigiert.

Wie nutzt man Heatmaps dieser Art? A/B-Tests mit Ihren CTAs!

Nun, es gibt eine Vielzahl von Anwendungsfällen für Klickkarten. Sie können sie zum Beispiel nutzen, um die Wirksamkeit Ihrer CTA-Platzierung, Texte usw. zu verstehen. Ich und meine Produktdesigner jedoch lieben es, Heatmaps aus einem anderen Grund zu nutzen – zum A/B-Testen unserer CTAs und weiterer Designelemente.

Lassen Sie mich diesen Anwendungsfall mit einem Beispiel illustrieren. Stellen Sie sich vor, Sie leiten die ChatGPT-Webanwendung und haben das Problem, dass Nutzer keine neuen Unterhaltungen anlegen und mit der KI nur in einer einzigen Chat-Instanz sprechen.

Nachdem Sie sich die Heatmap angesehen haben, sehen Sie, dass der Button „Neuer Chat“ oben in Ihrer Seitenleiste kalt ist (nichts hervorgehoben).

Sie nehmen schnell an, dass dies an der Farbe des CTAs liegt, die mit dem Hintergrund der Seitenleiste identisch ist. Also führen Sie ein A/B-Experiment durch, bei dem Sie in Variante A die Hintergrundfarbe auf grün ändern und in Variante B „wie gehabt“ lassen.

Nachdem eine bestimmte Anzahl an Nutzern mit beiden Varianten interagiert hat, können Sie sich die Klick-Heatmap jeder Variante ansehen und einen Seitenvergleich machen, um zu sehen, bei welchem der Button „Neuer Chat“ heißer ist.

Sie wählen dann auf Basis Ihrer Heatmap-Analyse die Variante aus, bei der der CTA mehr Klicks erhalten hat.

2. Scrollmaps

Das Aufzeichnen von Nutzerklicks ist großartig, aber es erzählt nicht immer die ganze Geschichte.

Wenn zum Beispiel Ihre Klickkarte zeigt, dass Sie einen unterdurchschnittlich performenden Button am unteren Rand Ihres Bildschirms haben, heißt das nicht zwangsläufig, dass etwas mit Ihrem CTA-Text, der Farbe oder anderen Faktoren nicht stimmt. Möglicherweise ist Ihr CTA ganz gut, doch die Nutzer scrollen einfach nicht herunter und sehen ihn nicht.

Hier kommen Scrollmaps (auch Scroll-Heatmaps genannt) ins Spiel. Anders als der vorherige Typ, der Nutzerklicks auf Ihrer UI hervorhebt, zeigen Scrollmaps, wie viel Zeit Nutzer in jedem Abschnitt Ihrer Oberfläche verbringen und wie sie scrollen.

Je nach Zeit, die in einem Abschnitt verbracht wird, wird die Seite in Rot (viel Zeit verbracht), Orange/Gelb (mäßig Zeit verbracht) und Grün/Blau (wenig Zeit verbracht) hervorgehoben.

Lassen Sie mich dies mit einem weiteren Hotjar-Beispiel zeigen.

Das oben gezeigte Bild ist eine der älteren Versionen der „Über uns“-Seite von Hotjar. Wenn wir uns die Scroll-Heatmap-Daten dieser Seite anschauen, können wir daraus schließen:

• Alle Ihre Nutzer haben den oberen Teil der Seite gesehen (rot hervorgehoben). Natürlich, oder?
• Dann sehen wir, dass etwa 75 % ein Stück nach unten gescrollt haben, um sich die Logos der Unternehmen, die Hotjar verwenden (der Logobereich ist gelb), anzusehen.
• Schließlich ist der untere Teil der Seite grün, was bedeutet, dass nur ein Teil Ihrer Nutzer so weit gescrollt hat. Die Linie direkt über dem Glassdoor-Logo zeigt uns, dass nur 57 % der Nutzer bis zu diesem Punkt gescrollt haben.

Dies war ein klassischer Fall mit rot am oberen Rand, gelb in der Mitte und grün am unteren Seitenende. Im echten Leben sieht man jedoch auch Scrollmaps, bei denen ein bestimmter Bereich weiter unten auf der Seite sehr gut performt (z. B. Ihr Preisbereich), während die Nutzer die Inhalte darüber und darunter ignorieren.

Wie Produktdesigner Scrollmaps nutzen: Inhaltsoptimierung

Wie Klickkarten sind Scrollmaps vielseitige Werkzeuge, die Sie aus verschiedenen Gründen verwenden können. Der häufigste Anwendungsfall ist jedoch die Optimierung der Platzierung Ihrer Inhalte.

Wie ich schon erwähnt habe, performen beispielsweise die Preisbereiche Ihrer Webseite sehr gut. Das bedeutet, dass Nutzer Ihre Inhalte schnell überfliegen, dann auf den Preisbereich aufmerksam werden, anhalten, ihn lesen und anschließend weiter scrollen.

Dieses Verhaltensmuster ermöglicht es uns, den Preisbereich strategisch in der Mitte oder am unteren Rand unserer Seite zu platzieren. Wir tun dies, um sicherzustellen, dass die Nutzer durch die ganze Seite scrollen (und einige der wichtigen Botschaften sehen, die wir für sie haben), bevor sie die Infos zu unseren Preisplänen finden.

Unsere Strategie hier ist ähnlich wie die von Supermärkten bei der Platzierung von Milch- und Backwaren. Beides sind Dinge, die man in der Regel recht häufig kauft. Deshalb platzieren sie diese Produkte auf der jeweils gegenüberliegenden Seite des Gebäudes – so müssen Sie durch den gesamten Supermarkt laufen, um sie zu erreichen.

Die Logik dahinter ist, dass Sie auf dem Weg zur Milchabteilung wahrscheinlich andere Produkte in den Gängen bemerken und diese ebenfalls kaufen.

3. Mausbewegungs-Maps

Scrollmaps geben Ihnen einen Überblick darüber, welche Bereiche Ihre Nutzer ansehen. Klickmaps dagegen sind etwas detaillierter, da sie aufzeigen, auf welches konkrete Element ein Nutzer geklickt hat.

Allerdings gibt es einen Bedarf für etwas „Mittleres“, das verrät, wie Menschen innerhalb eines bestimmten Seitenabschnitts durch die Informationen und UI-Elemente navigieren.

Hier kommen Mausbewegungs-Maps ins Spiel. Wie der Name schon sagt, verfolgt diese Art von Heatmap die Bewegungen des Mauszeigers über Ihre Oberfläche.

Wie andere Heatmaps werden die Bereiche der Oberfläche in einer Farbskala (von Blau bis Rot) hervorgehoben. Blau bedeutet geringe Mausbewegung über diesem Bereich (und Rot bedeutet viel Bewegung).

Sehen wir uns an, wie das in einem Blogartikel aussieht.

Die Map zeigt uns, dass ein kleiner Teil der Nutzer mit der Maus über dem Titel und der ersten Überschrift des Artikels verweilt. Die Mehrheit hält den Mauszeiger jedoch im Suchbereich oben rechts.

Wie Produktdesigner Mausbewegungs-Maps nutzen: Aufmerksamkeit für bestimmte Elemente verfolgen

Oft gibt es in der Nutzeroberfläche Bereiche, die nicht anklickbar sind, aber dennoch sehr wichtig sind, das heißt, wir müssen sicherstellen, dass unsere Nutzer sie gesehen haben.

Ein Beispiel hierfür wäre unsere Funktionsauflistung auf der Preisseite. Wir möchten vielleicht verstehen, welche Funktionen für die Nutzer am meisten Aufmerksamkeit erhalten, wenn sie unsere Preistabelle betrachten.

Hierzu können wir uns das menschliche Verhalten zunutze machen, dass Menschen mit der Maus oft über das fahren, was sie gerade lesen oder scannen. Anhand einer Mausbewegungs-Map können wir ablesen, welche Funktionen auf unserer Preisseite am intensivsten betrachtet werden.

4. Rage-Click-Maps

Es gibt gewöhnliche Klicks, und es gibt Rage-Klicks.

Das ist der Fall, wenn Fehler im UX dazu führen, dass Nutzer frustriert werden und wiederholt aggressiv auf ein UI-Element klicken, weil:

• Sie denken, es sei anklickbar, ist es aber nicht.
• Es ist anklickbar, aber Ihre Anwendung reagiert nach dem Klick nicht.

Der Hauptgrund für den ersten Fall ist das Design von UI-Elementen, die aussehen wie Buttons oder Links, es aber nicht sind.

Im zweiten Fall kann Folgendes vorliegen:

• Ein Bug/Absturz, der verhindert, dass Ihr Produkt die dem Button zugeordnete Aktion ausführen kann.
• Alles funktioniert, aber es fehlt an UX-Feedback. Selbst wenn der Nutzer die gewünschte Aktion erfolgreich mit Hilfe Ihres Buttons durchgeführt hat, haben Sie ihn nicht darüber informiert.
• Ihr Produkt arbeitet an der gewünschten Aktion, ist aber langsam. Entweder macht das die Nutzer wütend, oder Sie haben sie nicht darauf hingewiesen, dass die Ausführung läuft.

Gewöhnliche Klickmaps registrieren auch Rage-Klicks (es sind schließlich alles Klicks), aber Sie können die Rage-Klicks nicht von den normalen Klicks unterscheiden. Dadurch ziehen Sie eventuell falsche Schlussfolgerungen aus Ihren Daten.

Wenn beispielsweise ein Button nicht funktioniert und Leute Rage-Klicks darauf ausführen, sagt Ihnen die normale Klickmap, dass diese Funktion intensiv genutzt wird – aber tatsächlich ist das Gegenteil der Fall.

Optisch sehen Rage-Click-Maps genauso aus wie die normalen Klickmaps. Der einzige Unterschied: Viele rote Flecken auf der gewöhnlichen Klickmap sind ein gutes Zeichen – auf der Rage-Click-Map hingegen sind sie ein schlechtes.

Wie Produktdesigner Movement-Maps nutzen: Schlechte UX identifizieren

Es gibt kein Produkt mit perfekter UX. Sie werden immer auf schlechte Elemente oder Erlebnisse stoßen (auch wenn Sie denken, dass alles in Ordnung ist).

Rage-Click-Maps helfen dabei, verschiedene dieser schlechten Erfahrungen sichtbar zu machen, zum Beispiel schlechtes UX-Feedback, schlecht gestaltete Elemente und weiteres.

Heatmaps sind die besten Freunde von UX-Designern

Nach den Erfahrungen von mir und meinem Product-Design-Team gehören Website-Heatmaps zu den nützlichsten Werkzeugen, um Usability-Tests durchzuführen und das Nutzerverhalten zu analysieren.

Mit ihrer Hilfe erhalten Sie quantitative Einblicke (einschließlich Informationen darüber, wie sie Ihre Website auf Desktop- und Mobilgeräten nutzen) in die Effektivität Ihres Webdesigns.

Anschließend können Sie diese Erkenntnisse analysieren und Lücken in Ihrem Design und Ihrer Funktionalität identifizieren, die Sie schließen müssen, um sicherzustellen, dass Ihr Produkt, Ihre Website, Ihre E-Commerce-Plattform oder Ihre Landing Page benutzerfreundlich ist.

Vergessen Sie nicht, unseren Newsletter zu abonnieren, um weitere Ressourcen und Leitfäden zum Produktmanagement sowie die neuesten Podcasts, Interviews und weitere Einblicke von Branchenführern und Experten zu erhalten.

Um die Anzahl der Menschen in bestimmten Vierteln zu visualisieren, haben sie eine Heatmap der Stadt erstellt.

Je mehr Menschen sich in einem bestimmten Teil der Stadt aufhalten, desto „heißer“ wird dieser auf der Karte hervorgehoben. Wenn nichts markiert ist, dann ist das betreffende Viertel nicht überfüllt.

Als Visualisierungstools sind Heatmaps sehr vielseitig. Neben der Visualisierung von „Hotspots“ auf einer physischen Karte (wie im oben genannten Beispiel aus Helsinki oder bei Wetterkarten im Fernsehen), kannst du sie auch über deine Benutzeroberfläche legen.

In diesem Fall kannst du die Bereiche deiner Oberfläche hervorheben, in denen die Nutzer am häufigsten interagieren. Kombiniert mit Sitzungsaufzeichnungen erhältst du einen tiefen Einblick in die User Journey und die UX-Forschung, was dir ermöglicht:

• Wertvolle Einblicke zu gewinnen, wie Nutzer mit deiner Website oder App interagieren.
• Zu verstehen, wie du die Aufmerksamkeit deiner Nutzer besser auf dich lenken kannst.
• Neue Möglichkeiten zur Optimierung deiner UX zu identifizieren und deine wichtigsten Kennzahlen zu verbessern (z. B. Conversion-Rate, Klickrate auf deine Call-to-Action Buttons, usw.).

Heatmaps sind also ein großartiges Werkzeug sowohl für UX-Designer:innen als auch für Produktmanager:innen, um das Nutzerverhalten zu analysieren und Produkte gezielt zu verbessern.

Beliebte Heatmap-Tools

Schauen wir uns nun an, wie du eine Heatmap für dein Produkt erstellen kannst. Das Internet bietet eine Fülle an Analyse-Tools, die Nutzerinteraktionen auf deinem UI-Design erfassen und jene Seitenelemente hervorheben, die die meiste Aufmerksamkeit erhalten.

Zu den bekanntesten zählen Hotjar, Mouseflow, Fullstory, Crazy Egg und andere.

Ich möchte an dieser Stelle jedoch nicht zu sehr ins Detail gehen, da wir dafür eine eigene kuratierte Liste von Heatmap-Tools zusammengestellt haben, die du dir stattdessen anschauen kannst.

4 wichtige Heatmap-Typen für Produktdesigner:innen

Was wir als „Heatmap“ bezeichnen, ist nicht nur eine einzige Art visueller Information, um deine UX zu analysieren. Vielmehr ist „Heatmap“ ein Sammelbegriff für verschiedene visuelle Instrumente, die nach demselben Grundprinzip arbeiten – bestimmte Bereiche deiner UX durch unterschiedliche Farben hervorzuheben.

Ich möchte jetzt nicht alle verschiedenen Arten von Heatmaps durchgehen, da viele davon für Produkt- und UX-Designer:innen schlichtweg irrelevant sind. Stattdessen werfen wir einen Blick auf vier Typen, die mein Designteam als besonders nützlich empfindet.

1. Klick-Heatmaps

Klick-Heatmaps sind vermutlich das Erste, woran du bei dem Thema Heatmaps denkst. Sie sind der am weitesten verbreitete Typ und in fast allen Heatmap- und Analytics-Tools verfügbar (außer in Google Analytics und ereignisbasierten Tools).

Eine Klick-Heatmap (auch Clickmap genannt) zeigt dir, worauf deine Nutzer:innen in deiner Oberfläche (z. B. auf der Startseite deiner Website) geklickt haben. Sie visualisiert die Klickaktivität deiner Zielgruppe, indem sie die entsprechenden Bereiche hervorhebt und durch farbliche Kodierung anzeigt, welche Teile deines UX „heiß“ oder „kalt“ sind.

So sieht beispielsweise die Clickmap der Karriereseite von Hotjar aus.

Wenn wir uns die Klick-Heatmap hier genauer anschauen, sehen wir Folgendes:

• Ein rotes „heißes“ Areal in der Nähe des Haupt-CTAs – „Offene Stellen anzeigen“.
• Etwas „warmes“ (gelbes) Aktivitätsgebiet um den rechten Pfeil-Button, mit dem das hervorgehobene Bild auf der Seite gewechselt wird.
• Ein wenig Aktivität (blau) auch auf dem linken Pfeil.

Der Rest des Bildschirms weist keine Hervorhebungen auf, was uns zeigt, dass es dort „kalt“ ist und niemand auf diese Bereiche geklickt hat.

Die „heiße“ Hervorhebung am Haupt-CTA hingegen zeigt uns, dass viele Nutzer (wahrscheinlich die meisten, wenn man nach der „Hitze“ geht) darauf klicken. Dann gibt es die warmen Bereiche um die Pfeil-Buttons, die uns verraten, dass ein kleiner Teil der Nutzer auch durch die hervorgehobenen Bilder navigiert.

Wie nutzt man Heatmaps dieser Art? A/B-Tests mit Ihren CTAs!

Nun, es gibt eine Vielzahl von Anwendungsfällen für Klickkarten. Sie können sie zum Beispiel nutzen, um die Wirksamkeit Ihrer CTA-Platzierung, Texte usw. zu verstehen. Ich und meine Produktdesigner jedoch lieben es, Heatmaps aus einem anderen Grund zu nutzen – zum A/B-Testen unserer CTAs und weiterer Designelemente.

Lassen Sie mich diesen Anwendungsfall mit einem Beispiel illustrieren. Stellen Sie sich vor, Sie leiten die ChatGPT-Webanwendung und haben das Problem, dass Nutzer keine neuen Unterhaltungen anlegen und mit der KI nur in einer einzigen Chat-Instanz sprechen.

Nachdem Sie sich die Heatmap angesehen haben, sehen Sie, dass der Button „Neuer Chat“ oben in Ihrer Seitenleiste kalt ist (nichts hervorgehoben).

Sie nehmen schnell an, dass dies an der Farbe des CTAs liegt, die mit dem Hintergrund der Seitenleiste identisch ist. Also führen Sie ein A/B-Experiment durch, bei dem Sie in Variante A die Hintergrundfarbe auf grün ändern und in Variante B „wie gehabt“ lassen.

Nachdem eine bestimmte Anzahl an Nutzern mit beiden Varianten interagiert hat, können Sie sich die Klick-Heatmap jeder Variante ansehen und einen Seitenvergleich machen, um zu sehen, bei welchem der Button „Neuer Chat“ heißer ist.

Sie wählen dann auf Basis Ihrer Heatmap-Analyse die Variante aus, bei der der CTA mehr Klicks erhalten hat.

2. Scrollmaps

Das Aufzeichnen von Nutzerklicks ist großartig, aber es erzählt nicht immer die ganze Geschichte.

Wenn zum Beispiel Ihre Klickkarte zeigt, dass Sie einen unterdurchschnittlich performenden Button am unteren Rand Ihres Bildschirms haben, heißt das nicht zwangsläufig, dass etwas mit Ihrem CTA-Text, der Farbe oder anderen Faktoren nicht stimmt. Möglicherweise ist Ihr CTA ganz gut, doch die Nutzer scrollen einfach nicht herunter und sehen ihn nicht.

Hier kommen Scrollmaps (auch Scroll-Heatmaps genannt) ins Spiel. Anders als der vorherige Typ, der Nutzerklicks auf Ihrer UI hervorhebt, zeigen Scrollmaps, wie viel Zeit Nutzer in jedem Abschnitt Ihrer Oberfläche verbringen und wie sie scrollen.

Je nach Zeit, die in einem Abschnitt verbracht wird, wird die Seite in Rot (viel Zeit verbracht), Orange/Gelb (mäßig Zeit verbracht) und Grün/Blau (wenig Zeit verbracht) hervorgehoben.

Lassen Sie mich dies mit einem weiteren Hotjar-Beispiel zeigen.

Das oben gezeigte Bild ist eine der älteren Versionen der „Über uns“-Seite von Hotjar. Wenn wir uns die Scroll-Heatmap-Daten dieser Seite anschauen, können wir daraus schließen:

• Alle Ihre Nutzer haben den oberen Teil der Seite gesehen (rot hervorgehoben). Natürlich, oder?
• Dann sehen wir, dass etwa 75 % ein Stück nach unten gescrollt haben, um sich die Logos der Unternehmen, die Hotjar verwenden (der Logobereich ist gelb), anzusehen.
• Schließlich ist der untere Teil der Seite grün, was bedeutet, dass nur ein Teil Ihrer Nutzer so weit gescrollt hat. Die Linie direkt über dem Glassdoor-Logo zeigt uns, dass nur 57 % der Nutzer bis zu diesem Punkt gescrollt haben.

Dies war ein klassischer Fall mit rot am oberen Rand, gelb in der Mitte und grün am unteren Seitenende. Im echten Leben sieht man jedoch auch Scrollmaps, bei denen ein bestimmter Bereich weiter unten auf der Seite sehr gut performt (z. B. Ihr Preisbereich), während die Nutzer die Inhalte darüber und darunter ignorieren.

Wie Produktdesigner Scrollmaps nutzen: Inhaltsoptimierung

Wie Klickkarten sind Scrollmaps vielseitige Werkzeuge, die Sie aus verschiedenen Gründen verwenden können. Der häufigste Anwendungsfall ist jedoch die Optimierung der Platzierung Ihrer Inhalte.

Wie ich schon erwähnt habe, performen beispielsweise die Preisbereiche Ihrer Webseite sehr gut. Das bedeutet, dass Nutzer Ihre Inhalte schnell überfliegen, dann auf den Preisbereich aufmerksam werden, anhalten, ihn lesen und anschließend weiter scrollen.

Dieses Verhaltensmuster ermöglicht es uns, den Preisbereich strategisch in der Mitte oder am unteren Rand unserer Seite zu platzieren. Wir tun dies, um sicherzustellen, dass die Nutzer durch die ganze Seite scrollen (und einige der wichtigen Botschaften sehen, die wir für sie haben), bevor sie die Infos zu unseren Preisplänen finden.

Unsere Strategie hier ist ähnlich wie die von Supermärkten bei der Platzierung von Milch- und Backwaren. Beides sind Dinge, die man in der Regel recht häufig kauft. Deshalb platzieren sie diese Produkte auf der jeweils gegenüberliegenden Seite des Gebäudes – so müssen Sie durch den gesamten Supermarkt laufen, um sie zu erreichen.

Die Logik dahinter ist, dass Sie auf dem Weg zur Milchabteilung wahrscheinlich andere Produkte in den Gängen bemerken und diese ebenfalls kaufen.

3. Mausbewegungs-Maps

Scrollmaps geben Ihnen einen Überblick darüber, welche Bereiche Ihre Nutzer ansehen. Klickmaps dagegen sind etwas detaillierter, da sie aufzeigen, auf welches konkrete Element ein Nutzer geklickt hat.

Allerdings gibt es einen Bedarf für etwas „Mittleres“, das verrät, wie Menschen innerhalb eines bestimmten Seitenabschnitts durch die Informationen und UI-Elemente navigieren.

Hier kommen Mausbewegungs-Maps ins Spiel. Wie der Name schon sagt, verfolgt diese Art von Heatmap die Bewegungen des Mauszeigers über Ihre Oberfläche.

Wie andere Heatmaps werden die Bereiche der Oberfläche in einer Farbskala (von Blau bis Rot) hervorgehoben. Blau bedeutet geringe Mausbewegung über diesem Bereich (und Rot bedeutet viel Bewegung).

Sehen wir uns an, wie das in einem Blogartikel aussieht.

Die Map zeigt uns, dass ein kleiner Teil der Nutzer mit der Maus über dem Titel und der ersten Überschrift des Artikels verweilt. Die Mehrheit hält den Mauszeiger jedoch im Suchbereich oben rechts.

Wie Produktdesigner Mausbewegungs-Maps nutzen: Aufmerksamkeit für bestimmte Elemente verfolgen

Oft gibt es in der Nutzeroberfläche Bereiche, die nicht anklickbar sind, aber dennoch sehr wichtig sind, das heißt, wir müssen sicherstellen, dass unsere Nutzer sie gesehen haben.

Ein Beispiel hierfür wäre unsere Funktionsauflistung auf der Preisseite. Wir möchten vielleicht verstehen, welche Funktionen für die Nutzer am meisten Aufmerksamkeit erhalten, wenn sie unsere Preistabelle betrachten.

Hierzu können wir uns das menschliche Verhalten zunutze machen, dass Menschen mit der Maus oft über das fahren, was sie gerade lesen oder scannen. Anhand einer Mausbewegungs-Map können wir ablesen, welche Funktionen auf unserer Preisseite am intensivsten betrachtet werden.

4. Rage-Click-Maps

Es gibt gewöhnliche Klicks, und es gibt Rage-Klicks.

Das ist der Fall, wenn Fehler im UX dazu führen, dass Nutzer frustriert werden und wiederholt aggressiv auf ein UI-Element klicken, weil:

• Sie denken, es sei anklickbar, ist es aber nicht.
• Es ist anklickbar, aber Ihre Anwendung reagiert nach dem Klick nicht.

Der Hauptgrund für den ersten Fall ist das Design von UI-Elementen, die aussehen wie Buttons oder Links, es aber nicht sind.

Im zweiten Fall kann Folgendes vorliegen:

• Ein Bug/Absturz, der verhindert, dass Ihr Produkt die dem Button zugeordnete Aktion ausführen kann.
• Alles funktioniert, aber es fehlt an UX-Feedback. Selbst wenn der Nutzer die gewünschte Aktion erfolgreich mit Hilfe Ihres Buttons durchgeführt hat, haben Sie ihn nicht darüber informiert.
• Ihr Produkt arbeitet an der gewünschten Aktion, ist aber langsam. Entweder macht das die Nutzer wütend, oder Sie haben sie nicht darauf hingewiesen, dass die Ausführung läuft.

Gewöhnliche Klickmaps registrieren auch Rage-Klicks (es sind schließlich alles Klicks), aber Sie können die Rage-Klicks nicht von den normalen Klicks unterscheiden. Dadurch ziehen Sie eventuell falsche Schlussfolgerungen aus Ihren Daten.

Wenn beispielsweise ein Button nicht funktioniert und Leute Rage-Klicks darauf ausführen, sagt Ihnen die normale Klickmap, dass diese Funktion intensiv genutzt wird – aber tatsächlich ist das Gegenteil der Fall.

Optisch sehen Rage-Click-Maps genauso aus wie die normalen Klickmaps. Der einzige Unterschied: Viele rote Flecken auf der gewöhnlichen Klickmap sind ein gutes Zeichen – auf der Rage-Click-Map hingegen sind sie ein schlechtes.

Wie Produktdesigner Movement-Maps nutzen: Schlechte UX identifizieren

Es gibt kein Produkt mit perfekter UX. Sie werden immer auf schlechte Elemente oder Erlebnisse stoßen (auch wenn Sie denken, dass alles in Ordnung ist).

Rage-Click-Maps helfen dabei, verschiedene dieser schlechten Erfahrungen sichtbar zu machen, zum Beispiel schlechtes UX-Feedback, schlecht gestaltete Elemente und weiteres.

Heatmaps sind die besten Freunde von UX-Designern

Nach den Erfahrungen von mir und meinem Product-Design-Team gehören Website-Heatmaps zu den nützlichsten Werkzeugen, um Usability-Tests durchzuführen und das Nutzerverhalten zu analysieren.

Mit ihrer Hilfe erhalten Sie quantitative Einblicke (einschließlich Informationen darüber, wie sie Ihre Website auf Desktop- und Mobilgeräten nutzen) in die Effektivität Ihres Webdesigns.

Anschließend können Sie diese Erkenntnisse analysieren und Lücken in Ihrem Design und Ihrer Funktionalität identifizieren, die Sie schließen müssen, um sicherzustellen, dass Ihr Produkt, Ihre Website, Ihre E-Commerce-Plattform oder Ihre Landing Page benutzerfreundlich ist.

Vergessen Sie nicht, unseren Newsletter zu abonnieren, um weitere Ressourcen und Leitfäden zum Produktmanagement sowie die neuesten Podcasts, Interviews und weitere Einblicke von Branchenführern und Experten zu erhalten.