Rage Click und Dead Click: Wutklicks und tote Klicks

Kurz gesagt

Beide Signale sagen dasselbe: Der Nutzer hat etwas erwartet, und es ist nicht passiert. Der Unterschied liegt in seiner Reaktion. Beim Dead Click klickt er einmal, und nichts passiert. Beim Rage Click drückt er immer wieder auf dieselbe Stelle.

Diese Signale erzeugen Tools für Sitzungsaufzeichnungen. Wenn ich Aufzeichnungen ansehe, schaue ich zuerst auf diese beiden Filter, weil sie die problematischen Momente schnell aus Tausenden Sitzungen heraussuchen.

Das Signal zeigt Ihnen eine Stelle, nicht den Grund. Den Grund finden Sie in der Aufzeichnung, im Code oder in einem Test mit Nutzern.

Was das Tool zählt

Die Definitionen gebe ich aus den Dokumentationen der Tools wieder. Am meisten stütze ich mich auf die Dokumentation von Microsoft Clarity, weil sie die Definitionen ausführlich beschreibt.

Rage Click in Clarity

Laut Clarity-Dokumentation wird ein Seitenaufruf oder eine Sitzung als „rage click“ markiert, wenn ein Nutzer schnell hintereinander mehrmals in einen engen Bereich klickt. Jeder Klick im Cluster zählt zusätzlich als Rage Click.

Laut Dokumentation kann ein Rage Click ein starkes Zeichen für Frust sein, wenn der Nutzer an dieser Stelle ein interaktives Element erwartet.

Dead Click in Clarity

Klickt ein Nutzer auf ein Element und bekommt in angemessener Zeit keine Rückmeldung, wird der Klick als Dead Click markiert. Der visuelle Zustand ändert sich nicht, und es geht auch nicht auf eine andere Seite.

Laut Dokumentation kann ein Dead Click auf kaputte Elemente, Anfragen mit hoher Latenz oder ein irreführendes Design hinweisen. Die FAQ von Clarity nennt auch das typische Beispiel: ein Element, das klickbar aussieht, für das es beim Klick aber keinen Code gibt.

Error Click

Clarity hat noch ein drittes Signal. Folgt auf einen Klick direkt ein JavaScript-Fehler, wird die Sitzung automatisch markiert. In der Klick-Heatmap stehen diese Klicks in einer eigenen Ansicht namens „error clicks“.

Wie die Zahlen gezeigt werden

Laut dem Clarity-Trainingsmodul von Microsoft erscheinen Dead und Rage Clicks im Dashboard als Anteil der Sitzungen. Sie sehen also die Antwort auf die Frage: In wie viel Prozent der Sitzungen gab es mindestens einen Rage Click?

In den Clarity-Dokumenten, die ich gelesen habe, steht keine Zahlenschwelle. Es heißt „schnell hintereinander“ und „angemessene Zeit“, wie viele Klicks oder Millisekunden das sind, steht nicht da.

Contentsquare

Der Blogbeitrag von Contentsquare definiert den Rage Click als wiederholtes Klicken auf einen bestimmten Bereich oder ein Element in kurzer Zeit. Er schreibt, dass das Tool eine Rage-Click-Heatmap und in Aufzeichnungen einen Filter für wiederholte Klicks hat.

Die Hilfe-Seiten von Contentsquare und Hotjar konnte ich für diesen Text nicht öffnen. Deshalb nenne ich ihre Schwellenwerte nicht. Zur Wahl des Tools siehe den Vergleich von Clarity und Hotjar.

Wodurch sie entstehen

Die Clarity-Dokumentation nennt drei mögliche Gründe für Dead Clicks: kaputtes Element, Anfrage mit hoher Latenz und irreführendes Design. Rage Clicks lese ich unter denselben drei Überschriften.

Ein Element sieht klickbar aus, ist es aber nicht

Nutzer klicken nach dem Aussehen eines Elements. Unterstrichener Text, eine Karte mit Schatten, ein Bild mit Lupe in der Ecke fordern zum Klicken auf. Diese visuellen Hinweise heißen Signifier, mehr dazu auf der Seite Affordance und Signifier.

Der Clarity-Blog sagt es klar: Ein Satz oder ein Wort auf der Website kann wie ein Link aussehen. Ich sage es kurz so: Was klickbar aussieht, wird angeklickt.

Langsame Antwort

Der Button funktioniert, aber das Ergebnis kommt spät. Sieht der Nutzer in der Zwischenzeit keine Änderung, glaubt er, der Klick sei nicht angekommen, und drückt erneut.

Nach Jakob Nielsens Grenzen für Antwortzeiten fühlt sich 0,1 Sekunde wie eine sofortige Reaktion an. 1 Sekunde ist die Grenze, bei der der Gedankenfluss nicht abreißt. Bei Vorgängen über 1 Sekunde muss man zeigen, dass das System arbeitet.

Laut Googles web.dev wird die Reaktion auf Klicken, Tippen und Tastendruck mit INP gemessen. Ein INP bis 200 Millisekunden gilt als gut, über 500 Millisekunden als schlecht. Details stehen im Ratgeber zu Core Web Vitals.

Kaputter Button

Der Button funktioniert wirklich nicht. Das kann ein JavaScript-Fehler sein, ein falsch gebundenes Ereignis oder eine Fläche, die unter einer anderen Ebene liegt. Der Clarity-Blog nennt einen nicht funktionierenden CSS-Selektor als Beispiel.

Im selben Beitrag steht ein Befund des Bing-Teams. Bei 4 % der Nutzer, die ins Suchfeld klickten, gab es Klicks, die auf dem Screen nichts veränderten. Das Team verkleinerte die oberen, linken und unteren Abstände des Felds. Laut Beitrag verschwanden diese Klicks danach fast vollständig.

Live-Beispiel: Sitzungsaufzeichnung einer Produktkarte

Die Karte unten ist erfunden. Sie hat drei Elemente, und jedes verhält sich anders. Während Sie klicken, listet die Sitzungsaufzeichnung daneben die Ereignisse auf. Einem Klick, der die Demo-Regel erfüllt, gibt sie ein Abzeichen. Auf dem Handy steht die Aufzeichnung unter der Karte.

Sitzungsaufzeichnung einer Produktkarte

Rage Click (Demo-Regel): 3 oder mehr Klicks auf dasselbe Element innerhalb von 1 Sekunde.

Dead Click (Demo-Regel): wenn sich in der Sekunde nach dem Klick auf dem Screen nichts ändert.

Die Lupe in der Ecke sagt, dass sich das Bild vergrößern lässt.

Handgemachte Keramiktasse

29 €

In den Warenkorb Merken

Im Warenkorb: 0 Artikel.

Ohne JavaScript funktioniert die Aufzeichnung nicht. Die Karte steht dann nur als Beispielbild da.

Eine erfundene Produktkarte. Die Regeln sind für diese Demo geschrieben und nicht die echte Schwelle eines Tools. Das Bild reagiert nicht, In den Warenkorb bleibt 2 Sekunden stumm, Merken funktioniert. Nichts wird gespeichert oder gesendet.

Probieren Sie Folgendes. Klicken Sie einmal auf das Bild: Nach 1 Sekunde kommt das Abzeichen für einen Dead Click. Drücken Sie dreimal schnell auf In den Warenkorb: Es erscheint das Abzeichen für einen Rage Click, und nach 2 Sekunden liegen 3 Artikel im Warenkorb.

Drücken Sie dann auf „Korrigierte Version“ und machen Sie dasselbe. Das Bild vergrößert sich, der Button zeigt sofort „Wird hinzugefügt …“ und nimmt keinen zweiten Klick an. Der Vorgang dauert weiter 2 Sekunden, aber der Nutzer weiß jetzt, worauf er wartet.

Wie man sie in Aufzeichnungen findet

1. Schauen Sie im Dashboard auf den Anteil der Rage und Dead Clicks. Liegt eine Seite deutlich über den anderen, beginnen Sie dort.
2. Stellen Sie die Klick-Heatmap dieser Seite auf die Ansicht für Dead Clicks und Rage Clicks. Wie man eine Heatmap liest, beschreibe ich im Ratgeber zu Heatmaps, hier wiederhole ich es nicht.
3. Wählen Sie das Element mit den meisten Markierungen und sehen Sie sich die Aufzeichnungen an, in denen es angeklickt wurde. Die Klick-Heatmap von Clarity lässt Sie die Aufzeichnungen zu einem gewählten Element öffnen.
4. Sehen Sie sich mobile und Desktop-Aufzeichnungen getrennt an. Ein kleiner Tippbereich kann nur auf dem Handy Dead Clicks erzeugen.
5. Schauen Sie sich Error Clicks eigens an. Hier blickt man zuerst in den Code, weil direkt nach dem Klick ein JavaScript-Fehler aufgetreten ist.

Wie man sie behebt

Die Korrektur hängt vom Grund ab. Jeden Befund ordne ich dieser Tabelle zu.

Grund	So sieht es in der Aufzeichnung aus	Korrektur
Element sieht klickbar aus, ist es aber nicht.	Dead Clicks am selben Element, manchmal Rage Clicks.	Lassen Sie das Element funktionieren oder nehmen Sie ihm das klickbare Aussehen.
Langsame Antwort.	Der erste Klick ist tot, danach Rage Clicks am selben Button.	Reagieren Sie sofort sichtbar auf den Klick und sperren Sie den zweiten Klick, solange der Vorgang läuft.
Kaputter Button.	Dead Click oder Error Click.	Finden und beheben Sie den Fehler, dann zeichnen Sie denselben Ablauf neu auf.

Zwei Wege bei einem Element, das klickbar aussieht

Klicken Nutzer auf ein Bild, wollen sie es wahrscheinlich vergrößern. Dann ist die einfachste Korrektur, die erwartete Aufgabe zu erfüllen.

Hat das Element keine Aufgabe, nehmen Sie ihm das klickbare Aussehen: Unterstreichung, Hand-Cursor, Schatten und Lupen-Icon. Verwenden Sie die Linkfarbe nur für Links.

Sofortige Rückmeldung bei langsamer Antwort

Auch wenn Sie den Vorgang nicht beschleunigen können, nehmen Sie den Klick sofort an. Der Text des Buttons ändert sich oder daneben erscheint ein Indikator. Nach Nielsen fühlt sich eine Reaktion unter 0,1 Sekunden sofort an, halten Sie die erste Reaktion deshalb unter dieser Grenze.

Während der Vorgang läuft, nimmt der Button keinen zweiten Klick an. Wie in der Demo zu sehen, macht ein ungeschützter Warenkorb-Button aus drei Klicks drei Artikel. Zu den Zuständen eines Buttons siehe das Muster CTA-Button.

Test bei einem kaputten Button

Sehen Sie sich die Aufzeichnung mit dem Error Click zusammen mit dem Entwickler an. Browser, Gerät und Schritte nehmen Sie aus der Aufzeichnung. Schauen Sie nach der Korrektur einige Tage lang mit demselben Filter erneut hin.

Nicht jede Markierung ist ein Problem

Die Regel kennt keine Absicht. Der Button Merken in der Demo funktioniert, aber wenn Sie dreimal schnell darauf drücken, bekommt auch er das Abzeichen für einen Rage Click.

In echten Produkten gibt es solche Momente ebenfalls. Mehrfach auf den Button zum Erhöhen der Menge zu drücken oder schnell durch eine Galerie zu klicken, ist normal. Auch der Beitrag von Contentsquare schreibt, dass manche wiederholten Klicks aus Gewohnheit kommen. Manche Nutzer klicken etwa beim Lesen auf die Seite.

Machen Sie den Anteil deshalb nicht allein zum Erfolgsmaß. Sehen Sie bei einem markierten Element ein paar Aufzeichnungen an und bestätigen Sie, dass der Nutzer wirklich hängen geblieben ist.

Meine Notiz

Für mich ist der Dead Click das wertvollere Signal als der Rage Click. Der Rage Click kommt, nachdem der Nutzer die Geduld verloren hat. Der Dead Click zeigt schon beim ersten Versuch, dass Sie eine falsche Erwartung geweckt haben.

Am häufigsten übersehen wird die langsame Antwort. Das Team probiert den Button meist mit schneller Verbindung aus und sieht die Verzögerung nie. Der Nutzer dagegen schaut mit langsamem Mobilnetz zwei Sekunden auf einen leeren Screen.

Wenn Sie mit einem Blick von außen sehen wollen, wo Nutzer in Ihrem Produkt ins Leere klicken, gehe ich mit dem UX Audit Ihr Produkt von Anfang bis Ende durch. Was ich finde, bekommen Sie als Korrekturliste nach Priorität.