Hărți de căldură și faceți clic pe Analytics
1) De ce sunt necesare hărți de căldură
Heatmaps vizualiza comportamentul: în cazul în care utilizatorii fac clic, cum se deplasează cursorul și defilați în jurul. Aceasta este o modalitate rapidă de a detecta conflictul ierarhic, zonele false „clicabile”, bannerele de supraîncălzire, blocurile „moarte” și gâturile înguste ale căii către acțiunea țintă (înregistrare, depunere, lansare de joc, participare la turneu).
Efectul cheie: mai puțină presupunere - mai multe fapte. Deciziile privind plasarea accentelor se fac pe baza interacțiunilor reale.
2) Tipuri de hărți de căldură
1. Faceți clic pe Heatmap - faceți clic pe densitate: arată ce zone iau atenția, unde fac clic pe elemente non-interactive.
2. Mutați Heatmap - traiectorii de cursor: metrică de atenție proxy pe desktop.
3. Scroll Heatmap - adâncimea de derulare și „linia de încrețire”: proporția de utilizatori care au atins fiecare segment al paginii.
4. Atenție/Confetti - hartă de intensitate + sursă/dispozitiv/defalcare A/B
5. Rage Clicks - serie de clicuri rapide la un moment dat: indicator de frustrare.
6. Dead Clicks - clicuri fără consecințe (fără tranziție/eveniment).
7. Clicuri de eroare - clicuri care eșuează (validare, eșecuri de rețea).
3) În cazul în care cardurile de căldură sunt deosebit de utile (scenarii iGaming)
Principal/aterizare: verificarea „eroului” și unicitatea P1-CTA.
Catalog de jocuri: vizibilitatea de căutare/filtre, clicuri pe insigne, zone de card' fals'.
Pagina de joc: Concurs „Joaca acum” vs activități secundare (Demo, Favorite).
Numerar (depozit/retragere): clicuri moarte pe sfaturi, se concentreze pe comisioane/limite.
Turnee/promoții: clicuri pe reguli, cronometre, linii tabelare, premii.
Joc responsabil: atingerea limitelor și rata de eșec.
4) Măsurători și KPI-uri pentru hărți de căldură
Zone CTR = zone/zone impressions.
Defilare Adâncime p50/p90 - adâncime mediană și ridicată.
Time in View - timpul mediu de vizibilitate al segmentului.
Rage Click Rate = sesiuni cu ≥3 clicuri de 1-2 secunde într-o singură zonă/toate sesiunile.
Dead Click Share = clicuri fără consecințe/toate clicurile.
Distanța Mis-Click - distanța medie de la zona de clic la cel mai apropiat element interactiv (pointer to „false affordance”).
Faceţi clic pe Shift After Change - schimbare focalizare după eliberare/opţiune B.
Line-of-Fold Acoperire - proporția de CTA-uri cheie care se încadrează deasupra liniei de încrețire.
Legătură de afaceri: Corelați valorile cu conversiile FMC, TTV, Rata de succes și box office.
5) Configurarea și colectarea datelor: practică
Segmentare după dispozitiv: desktop/mobil separat (mișcările cursorului nu sunt aplicabile pentru mobil).
Felii sursă: organic, plătit, recomandare, „VIP/nou”.
Scenarii/pagini: principal, catalog, joc, box office, promoții.
Eșantionare: 10-30% din trafic este suficient pentru o imagine stabilă, mai mult pentru scenarii rare.
Фрейм событий (data layer): фиксируйте 'click _ target', 'component _ id',' is _ interactive ',' click _ result '(success/fail/none),' ui _ state '(hover/focus/disabled),' variant '(A/B),' segment '(new/returning/VIP).
Blocarea roboților: filtre utilizator-agent + euristică comportamentală (defilare super-viteză, modele inumane).
Generarea zonei: pe baza selectorilor semantici ('data-heatmap =' hero-cta '') - mai stabili decât clasele CSS.
Stări de vizibilitate: luați în considerare capace lipicioase/CTA flotante (în caz contrar distorsiuni).
6) Confidențialitate și conformitate
Nu înregistrăm date cu caracter personal (valori introduse, hărți, documente).
Mascăm câmpuri de formular, chat-uri, portofele.
Optiuni de opt-in/opt-out pentru cookie-uri si urmarire; respectarea normelor DNT și locale.
Anonimizarea IP/ID și restricționarea stocării sesiunii.
Jurnalele de acces: cine urmărește înregistrările de sesiune și de ce.
7) Interpretare: Cum să nu faci o greșeală
Faceți clic ≠ interes. Click-ul poate fi o consecință a confuziei (mort/furie) - rezultatul verificării.
Zona fierbinte a bannerului nu este întotdeauna bună: poate că „mănâncă” atenția P1.
Blocurile reci nu sunt neapărat rele: poate că acest lucru este de referință/conținut SEO P4.
Comparați înainte/după și A/B, nu hărți absolute de căldură.
A se vedea traiectoria: în cazul în care este primul clic, cât de repede ajung la P1 (timp-la-P1).
8) Diagnosticarea problemelor comune
High Rage Click Rate pe cartea de joc → așteptând un clic pe zona în care clicul nu este procesat → extindeți zona de succes, faceți clic pe întreaga carte sau separați vizual zonele non-interactive.
Dead Clicks on icons/insigne → adăugați acțiune sau eliminați stilul „clickable”.
Derulați adâncimea dip la CTA → mutați CTA mai mare, adăugați ancora/blocul lipicios.
Trecerea clicurilor la bannere → reducerea greutății vizuale, limitarea animațiilor și clarificarea priorităților.
CTR scăzut de filtre cu clicuri mari pe căutare → schimba ordinea/luminozitatea filtrelor, da presetări rapide.
9) Integrarea cu A/B și pâlnie
Formulați ipoteze ale formei:- „Dacă măriți zona de hit a cardului de la 160 × 200 la full-card și adăugați accesorii vizuale, atunci Dead Click Share va scădea cu 30%, iar FMC la lansarea jocului va crește cu 8-12%”.
- Pentru fiecare ipoteză, conectați metrica țintă UX (Rage/Dead/Scroll) și metrica de afaceri (FMC, TTV, conversia depozitelor).
- Rulați A/B cu o hartă de căldură obligatorie pe ambele ramuri: rata Click Shift și atenția „scurgeri”.
10) Tabloul de bord al echipei UX
Set widget minim recomandat:- Prezentare generală Heatmap: Ecrane de top, ultimele 7/28 zile, împărțite pe dispozitiv.
- Atenție vs rezultat: clic mare și zone cu rezultat scăzut.
- Rage/Dead Trend: Dinamica de tip pagină.
- Defilare adâncime pâlnie: cheie bloc realizare acţiuni.
- Faceţi clic pe Shift After Release: Înainte/după compararea în zonele cheie.
- VIP vs noi utilizatori: diferențe de model atenție.
11) Detalii tehnice (recomandări de implementare)
Atribute de marcare:- 'data-heatmap-zone =' hero-cta '', 'data-heatmap-zone =' game-card', 'data-heatmap-zone =' casier-primar ''.
- 'ui _ click: {zone, component_id, is_interactive, rezultat, variantă, dispozitiv, pagină, ts}'
- Asociați-vă cu analytics: pass' session _ id'/' user _ bucket 'de la platforma A/B (fără PII).
- Stabilitatea zonei: nu moșteniți etichetele heatmap în nodurile pentru copii pentru a nu „estompa” clicurile.
12) Lista de verificare a auditului pentru cardurile de căldură
1. Ecranele cheie au un singur P1 deasupra liniei de încrețire?
2. Rage Click Rate <pragul țintă (de ex. 1. 5%)?
3. Dead Clicks partajează pe carduri <X% (setați coridorul țintă)?
4. Defilare adâncime p50 ajunge bloc cu oferta/CTA?
5. Există o matrice Click-Rezultat (click → go/event/error/nothing)?
6. Ați luat în considerare diferențele dintre sursele mobile/desktop și cele de trafic?
7. Toate câmpurile şi zonele sensibile sunt mascate?
8. Construit „înainte/după” pentru versiuni recente și A/B?
9. P1 CTR preempted testat pentru bannere fierbinți?
10. Sunt formulate și instituite acțiuni corective cu P1-P3 prioritare?
13) Anti-modele
Evaluați o pagină pe o singură hartă de căldură fără un context de conversie.
Se amestecă datele mobile și desktop.
Trage concluzii cu privire la <200 sesiuni pe ecrane complexe.
Ignora mort/furie, uita-te doar la harta „frumos”.
Suprapuneți harta de căldură pe partea de sus a DOM învechite (după reproiectare, selectorii au migrat).
14) Prioritizarea și proiectarea sarcinilor
Formatul cardului de sarcină:- Problemă: „High Dead Click Share (18%) pe insigne de cărți de joc”.
- Motivul (ipoteza): "Insigna este stilizat ca un buton; nici o acţiune"
- Soluție: „Faceți insigne non-interactive vizual sau legați „filtrul după etichetă” acțiune”.
- Efectul așteptat: „− 50% clicuri moarte, + 5% FMC în lansarea jocului”.
- Criterii de acceptare: praguri de valori măsurate în tabloul de bord.
15) Întrebări frecvente
Am nevoie întotdeauna pentru a porni carduri de căldură? - Da pe piste cheie; în serviciu - prin eșantion.
Se pot muta cărțile de încredere? - Numai ca semnal indirect (numai pentru desktop).
Ce este mai important: clicuri sau defilare? - Depinde de ecran; pentru aterizare, linia de îndoire este importantă, pentru numerar - faceți clic pe rezultate.
16) TL; DR
Hărțile de căldură sunt o radiografie vizuală rapidă a interfeței. Vedeți nu numai „unde este fierbinte”, ci și cum se termină: mort/furie/erori. Segment, link către A/B și măsurători de afaceri, captura acțiuni corective. Principalul lucru este mai puțin zgomot, mai multe semnale pentru a crește conversiile.