Rage Clicks i Dead Clicks w Clarity: Co oznaczają i jak je naprawić

Użytkownicy Twojej strony klikają raz, dwa razy, trzy razy — i nic się nie dzieje. Albo klikają wściekle w przycisk, który nie odpowiada. Microsoft Clarity automatycznie wykrywa te sytuacje jako "dead clicks" i "rage clicks". W tym artykule pokażę Ci, co dokładnie oznaczają te sygnały, jak je znaleźć w Clarity i — co najważniejsze — jak naprawić problemy, które je powodują.

Czym są sygnały frustracji w Clarity?

Microsoft Clarity monitoruje zachowanie użytkowników i automatycznie klasyfikuje sesje, w których pojawiają się oznaki frustracji. Dwa najważniejsze sygnały to:

• Dead clicks — kliknięcia w elementy, które nie reagują na interakcję
• Rage clicks — szybkie, wielokrotne kliknięcia w ten sam obszar strony

Clarity wykrywa też dwa dodatkowe sygnały: quick backs (szybki powrót do poprzedniej strony) i excessive scrolling (nadmierny scroll). Ale dead clicks i rage clicks to te, które najczęściej wskazują na konkretne, naprawialne problemy w kodzie strony.

Dead clicks: co to jest i dlaczego występują?

Dead click to kliknięcie w element strony, po którym nic się nie dzieje. Użytkownik klika, ale strona nie reaguje — nie otwiera się nowa strona, nie pojawia się popup, nie zmienia się stan elementu.

Clarity wykrywa dead click, gdy kliknięcie nie powoduje żadnej zmiany w DOM (struktura strony) ani nawigacji w ciągu krótkiego okna czasowego po kliknięciu.

Najczęstsze przyczyny dead clicks

Jak znaleźć dead clicks w Clarity?

1. Otwórz dashboard Clarity
2. W sekcji Frustration signals kliknij na Dead clicks
3. Zobaczysz listę stron z największą liczbą dead clicks
4. Kliknij na konkretną stronę, aby zobaczyć nagrania sesji z dead clickami
5. W nagraniu dead clicks są oznaczone czerwonym znacznikiem

Jak naprawić dead clicks — przykłady kodu

Problem: Tekst wygląda jak link, ale nim nie jest.

<!-- ZŁE: tekst stylizowany na link, ale bez tagu a -->
<span class="text-blue underline">Zobacz ofertę</span>

<!-- DOBRE: prawdziwy link -->
<a href="/oferta" class="text-blue underline">Zobacz ofertę</a>

Problem: Nieaktywny przycisk bez wizualnej różnicy.

/* DOBRE: wyraźne style dla disabled */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
}

/* Dodaj tooltip wyjaśniający dlaczego przycisk jest nieaktywny */
button:disabled::after {
  content: "Najpierw wybierz rozmiar";
}

Problem: Niewidoczna warstwa blokuje kliknięcia.

/* Sprawdź czy jakiś element nie zasłania przycisku */
/* Dodaj pointer-events: none do elementów dekoracyjnych */
.decorative-overlay {
  pointer-events: none;
}

Rage clicks: co to jest i dlaczego występują?

Rage click to seria szybkich, wielokrotnych kliknięć w ten sam obszar. Clarity wykrywa je, gdy użytkownik klika 3 lub więcej razy w krótkim odstępie czasu w to samo miejsce. To jednoznaczny sygnał frustracji — coś nie działa tak, jak użytkownik tego oczekuje.

Najczęstsze przyczyny rage clicks

• Wolna odpowiedź serwera — użytkownik klika "Kup teraz", nic się nie dzieje, klika ponownie
• Brak wizualnego feedbacku — przycisk nie zmienia stanu po kliknięciu (brak spinnera, zmiana koloru)
• Błąd JavaScript — handler kliknięcia rzuca wyjątek i nic się nie wykonuje
• Element za mały na mobile — użytkownik nie trafia w przycisk palcem
• Podwójne kliknięcie na single-click element — użytkownik przyzwyczajony do double-click

Jak naprawić rage clicks — przykłady kodu

Problem: Brak feedbacku po kliknięciu przycisku.

// DOBRE: pokaż loading state po kliknięciu
const button = document.querySelector('.btn-submit');
button.addEventListener('click', async () => {
  button.disabled = true;
  button.textContent = 'Wysyłanie...';
  button.classList.add('loading');

  try {
    await submitForm();
    button.textContent = 'Wysłano!';
  } catch (err) {
    button.textContent = 'Spróbuj ponownie';
    button.disabled = false;
  }
});

Problem: Element za mały na urządzeniach mobilnych.

/* Minimalna wielkość elementu klikalnego — 44x44px (wytyczne WCAG) */
.btn, a.nav-link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

/* Na mobile dodaj większy padding */
@media (max-width: 768px) {
  .btn {
    padding: 16px 32px;
    font-size: 16px; /* zapobiega zoomowi na iOS */
  }
}

Problem: Podwójne wysłanie formularza.

// Zapobiegaj wielokrotnemu kliknięciu
let isSubmitting = false;

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  if (isSubmitting) return;

  isSubmitting = true;
  // ... wysyłanie formularza
  isSubmitting = false;
});

Jak priorytetyzować naprawy?

Nie naprawiaj wszystkich dead clicks i rage clicks jednocześnie. Skup się na tych, które mają największy wpływ na konwersję:

1. Sprawdź strony z największą liczbą sygnałów — w Clarity sortuj po kolumnie "Frustration count"
2. Zacznij od stron konwersji — koszyk, checkout, formularz kontaktowy, landing page
3. Obejrzyj 5-10 nagrań z frustracją na danej stronie — szukaj powtarzającego się wzorca
4. Napraw jeden problem na raz i obserwuj zmianę w metrykach po kilku dniach

Monitoring ciągły: nie jednorazowa naprawa

Sygnały frustracji to metryka, którą warto śledzić w czasie. Po naprawie problemu sprawdź po tygodniu, czy liczba dead clicks lub rage clicks na danej stronie spadła. Nowe deploy'e mogą wprowadzać nowe problemy — regularna analiza to klucz.

Ręczne sprawdzanie dashboardu co tydzień jest możliwe, ale łatwo o tym zapomnieć. Automatyczne raporty z trendami sygnałów frustracji oszczędzają czas i zapewniają, że żaden problem nie umknie uwadze.