Mapy ciepła i kliknij Analytics
1) Dlaczego potrzebne są mapy ciepła
Mapy grzewcze wizualizują zachowanie: gdzie użytkownicy klikają, jak poruszają kursorem i przewijają się. Jest to szybki sposób, aby wykryć konflikt hierarchiczny, fałszywe strefy „klikalne”, przegrzanie banery, „martwe” bloki i wąskie szyje ścieżki do akcji docelowej (rejestracja, depozyt, start gry, udział w turnieju).
Kluczowy efekt: mniej zgadywania - więcej faktów. Decyzje o umieszczeniu akcentów podejmowane są na podstawie rzeczywistych interakcji.
2) Typy map ciepłowniczych
1. Kliknij opcję Heatmap - kliknij gęstość: pokazuje, które strefy zwracają uwagę, gdzie klikają na elementy nie-interaktywne.
2. Przesuń Heatmap - kursor trajektorie: proxy attention metric na pulpicie.
3. Przewiń Heatmap - głębokość przewijania i „linia zagięć”: odsetek użytkowników, którzy dotarli do każdego segmentu strony.
4. Uwaga/Confetti - mapa intensywności + źródło/urządzenie/podział przypadku A/B
5. Rage Clicks - seria szybkich kliknięć w jednym punkcie: wskaźnik frustracji.
6. Martwe kliknięcia - kliknięcia bez konsekwencji (brak przejścia/zdarzenia).
7. Kliknięcia błędów - kliknięcia, które nie powiodą się (walidacja, awarie sieci).
3) Gdzie karty ciepła są szczególnie przydatne (scenariusze iGaming)
Główne/lądowanie: sprawdzenie „bohatera” i wyjątkowości P1-CTA.
Katalog gier: widoczność wyszukiwania/filtrów, kliknięcia na odznaki, „fałszywe” strefy kart.
Strona gry: Konkurencja „Zagraj teraz” vs Działania wtórne (Demo, Ulubione).
Gotówka (depozyt/wypłata): martwe kliknięcia na wskazówki, skupienie się na prowizjach/limitach.
Turnieje/promocje: kliknięcia na zasady, timery, linie tabelaryczne, nagrody.
Odpowiedzialna gra: osiągnięcie limitów i wskaźnik awarii.
4) Wskaźniki i KPI do map ciepła
Strefy CTR = kliknięcia strefy/wrażenia strefy.
Głębokość przewijania p50/p90 - mediana i wysoka głębokość.
Czas w widoku - średni czas widoczności segmentu.
Rage Click Rate = sesje z ≥ 3 kliknięciami 1-2 sekund w jednym obszarze/wszystkie sesje.
Martwe kliknięcie Udostępnij = kliknięcia bez konsekwencji/wszystkie kliknięcia.
Mis-Click Odległość - średnia odległość od strefy kliknięcia do najbliższego elementu interaktywnego (wskaźnik do „fałszywej affordance”).
Kliknij przycisk Shift After Change - shift focus after release/option B.
Zasięg linii fałdu - odsetek kluczowych CTA spadających ponad linię zagięcia.
Link biznesowy: Koreluj metryki z FMC, TTV, Wskaźnik sukcesu i konwersje box office.
5) Tworzenie i gromadzenie danych: praktyka
Segmentacja według urządzenia: pulpit/telefon osobno (ruchy kursora nie mają zastosowania do telefonów komórkowych).
Plaster źródłowy: organiczny, płatny, skierowanie, „VIP/nowy”.
Scenariusze/strony: główny, katalog, gra, box office, promocje.
Pobieranie próbek: 10-30% ruchu wystarczy dla stabilnego obrazu, więcej dla rzadkich scenariuszy.
Мреса собтий (warstwa danych): миксиребта 'click _ target', 'component _ id',' is _ interactive ',' click _ result '(success/fail/none),' ui _ state '(hover/focus/disabled),' variant '(A/B),', segment "(nowy/powracający/VIP).
Boty blokujące: filtry użytkownika-agenta + heurystyka behawioralna (przewijanie super prędkości, nieludzkie wzory).
Generowanie strefy: w oparciu o selektory semantyczne ('data-heatmap =' hero-cta ') - bardziej stabilne niż klasy CSS.
Stany widoczności: należy rozważyć lepkie czapki/pływające WWiI (w przeciwnym razie zniekształcenia).
6) Prywatność i zgodność
Nie rejestrujemy danych osobowych (wartości wpisane, mapy, dokumenty).
Maskujemy pola, czaty, portfele.
Opcje opcji opt-in/opt-out dla plików cookie i śledzenia; poszanowanie DNT i lokalnych przepisów.
Anonimizacja IP/ID i ograniczenie przechowywania sesji.
Logi dostępu: kto ogląda nagrania sesji i dlaczego.
7) Interpretacja: Jak nie popełnić błędu
Kliknij zainteresowanie. Kliknięcie może być konsekwencją dezorientacji (martwy/wściekły) - sprawdź wynik.
Gorąca strefa banera nie zawsze jest dobra: być może „zjada” uwagę P1.
Zimne bloki niekoniecznie są złe: być może jest to odniesienie/zawartość SEO P4.
Porównaj przed/po i A/B, a nie absolutne mapy ciepła.
Zobacz trajektorię: gdzie jest pierwsze kliknięcie, jak szybko dostają się do P1 (time-to-P1).
8) Diagnozowanie wspólnych problemów
Wysoka wściekłość Kliknij Szybkość na karcie gry → Czekając na kliknięcie na obszarze, w którym kliknięcie nie jest przetwarzane → Rozszerzyć obszar trafienia, sprawić, aby cała karta kliknęła lub wizualnie oddzielone nie-interaktywne obszary.
Martwe kliknięcia na ikony/odznaki → dodać akcję lub usunąć „klikalny” styl.
Przewiń głębokość dip do CTA → przenieść CTA wyższy, dodać kotwicę/lepki blok.
Przesuwanie kliknięć na banery → zmniejszenie wagi wizualnej, ograniczenie animacji i wyjaśnienie priorytetów.
Niski CTR filtrów z wysokimi kliknięciami na wyszukiwanie → zmienić kolejność/jasność filtrów, dać szybkie ustawienia wstępne.
9) Integracja z A/B i lejkiem
Sformułować hipotezy formy:- „Jeśli zwiększysz obszar trafienia karty z 160 × 200 do pełnej karty i dodasz wizualny affordance, wtedy Dead Click Share zmniejszy się o 30%, a FMC w uruchomieniu gry wzrośnie o 8-12%”.
- Dla każdej hipotezy należy połączyć docelowe mierniki UX (Rage/Dead/Scroll) i metryki biznesowe (FMC, TTV, konwersja depozytów).
- Uruchom A/B z obowiązkową mapą ciepła na obu gałęziach: szybkość Kliknij Shift i uwaga „przecieki”.
10) Deska rozdzielcza UX Team
Zalecany minimalny zestaw widgetów:- Heatmap Przegląd: Najlepsze ekrany, ostatnie 7/28 dni, podzielone przez urządzenie.
- Uwaga vs Wynik: Wysokie kliknięcie i niskie strefy rezultatu.
- Rage/Dead Trend: Dynamics by Page Type.
- Przewiń głębokość lejka: Kluczowe blokowe akcje osiągnięcia.
- Kliknij przycisk Shift After Release: Przed/po porównaniu w strefach kluczowych.
- VIP vs Nowi użytkownicy: Różnice wzoru uwagi.
11) Szczegóły techniczne (zalecenia wykonawcze)
Atrybuty znaczników:- 'data-heatmap-zone =' hero-cta ',' data-heatmap-zone = 'game-card', 'data-heatmap-zone =' cashier-primary ''.
- 'ui _ click: {zone, component_id, is_interactive, result, variant, device, page, ts}'
- Associate with analytics: pass' session _ id'/' user _ bucket 'z platformy A/B (bez PII).
- Stabilność strefy: nie dziedziczyć etykiet mapy grzewczej w węzłach dziecięcych, aby nie „rozmyć” kliknięć.
12) Lista kontrolna dla kart ciepła
1. Czy ekrany kluczy mają pojedynczy P1 nad linią zagięcia?
2. Rage Click Rate <docelowy próg (np. 1. 5%)?
3. Udział Dead Clicks na kartach <X% (ustawić korytarz docelowy)?
4. Zwój Głębokość p50 dociera do bloku z ofertą/CTA?
5. Czy istnieje matryca Click-Result (kliknij → go/event/error/nothing)?
6. Czy brałeś pod uwagę różnice między źródłami telefonów komórkowych/stacjonarnych a źródłami ruchu?
7. Czy wszystkie pola i obszary wrażliwe są zamaskowane?
8. Zbudowany „przed/po” dla ostatnich wydań i A/B?
9. P1 preempted CTR testowane na gorące banery?
10. Czy działania naprawcze są formułowane i wprowadzane z P1-P3 priorytetowymi?
13) Anty-wzory
Oceń stronę na jednej mapie ciepła bez kontekstu konwersji.
Wymieszaj dane mobilne i pulpit.
Wyciągnij wnioski z <200 sesji na złożonych ekranach.
Ignoruj martwe/wściekłe, spójrz tylko na „piękną” mapę.
Pokryć mapę ciepła na szczycie przestarzałego DOM (po przeprojektowaniu, selektory migrowane).
14) Ustalanie priorytetów i projektowanie zadań
Format karty zadań:- Problem: „High Dead Click Share (18%) na odznakach karty gry”.
- Powód (hipoteza): "Odznaka jest stylizowana jako przycisk; brak działania"
- Rozwiązanie: „Sprawić, że odznaki nie będą interaktywne wizualnie lub związać „filtr według etykiety” działanie”.
- Spodziewany efekt: „− 50% martwych kliknięć, + 5% FMC w uruchomieniu gry”.
- Kryteria odbioru: progi mierzone w desce rozdzielczej.
15) Częste pytania
Czy zawsze muszę włączać karty ciepła? - Tak na torach kluczowych; w serwisie - według próbki.
Czy można ufać ruchom kart? - Tylko jako sygnał pośredni (tylko pulpit).
Co jest ważniejsze: kliknięcia lub przewijanie? - Zależy od ekranu; do lądowania linia zakrętu jest ważna, dla gotówki - kliknij wyniki.
16) TL; DR
Mapy ciepła to szybki rentgen wizualny interfejsu. Zobacz nie tylko „gdzie jest gorąco”, ale także jak to się kończy: martwe/wściekłe/błędy. Segment, link do A/B i mierników biznesowych, przechwytywanie działań naprawczych. Najważniejsze jest mniejszy szum, więcej sygnałów do zwiększenia konwersji.