Installare uno strumento di heatmap richiede circa dieci minuti. Sfruttare davvero ciò che ti mostra richiede più tempo, perché la maggior parte delle persone non sa cosa sta cercando. Lo scenario tipico: apri la heatmap, passi qualche minuto a guardare i colori, noti che il pulsante riceve molti clic e chiudi la scheda. Non cambia nulla.
Il problema non è la heatmap. Il problema è che una heatmap non si spiega da sola. È uno strumento diagnostico e, come ogni strumento diagnostico, richiede di sapere quali pattern indicano un problema e quali sono comportamento atteso. Un insieme di clic è rumore. Un cluster di clic nel posto sbagliato è un segnale.
Questa guida copre cinque pattern che compaiono sistematicamente nelle heatmap quando qualcosa non va in una pagina. Non cosa sia una heatmap; per quello c'è il glossario. Ma cosa ti sta dicendo e cosa farci.
Una nota rapida sui tipi di heatmap
Prima dei pattern: le heatmap esistono in tre forme e rispondono a domande diverse.
- Le mappe di clic mostrano dove gli utenti cliccano (o toccano su mobile). Rivelano con cosa interagiscono, con cosa provano a interagire e cosa ignorano.
- Le mappe di scroll mostrano fin dove gli utenti scrollano la pagina prima di andarsene. Rivelano se gli utenti raggiungono i tuoi contenuti chiave e i tuoi elementi di conversione.
- Le mappe di movimento tracciano dove gli utenti muovono il mouse (solo desktop). Sono un'indicazione approssimativa di dove va l'attenzione, anche se meno affidabile degli altri due tipi.
La maggior parte dei cinque pattern qui sotto deriva dalle mappe di clic e di scroll. Le mappe di movimento sono utili per l'esplorazione qualitativa, ma non dovrebbero guidare conclusioni da sole.
Pattern 1: il crollo dello scroll prima del tuo CTA
Apri la tua mappa di scroll. Individua la tua call to action principale: il pulsante o il modulo che guida la tua conversione principale. Ora guarda quale percentuale di utenti scrolla abbastanza in basso da vederlo.
Se la profondità di scroll crolla bruscamente tra il 40 e il 60% e il tuo CTA si trova al 70%, gli utenti non lo raggiungono. È uno dei problemi più frequenti e più facili da correggere nell'ottimizzazione della conversione, ed è invisibile senza i dati di scroll.
La causa del crollo conta. Guarda quale contenuto si trova appena prima del punto di abbandono:
- Un lungo blocco di testo denso che perde slancio
- Una sezione che sembra un footer o una conclusione (poco peso visivo, sfondo chiaro, linguaggio da riepilogo)
- Un elemento concorrente che risponde troppo presto alla domanda dell'utente, eliminando il motivo per continuare a scrollare
La soluzione è raramente «spostare il CTA più in alto», anche se a volte è quella giusta. Più spesso si tratta di ristrutturare la sezione appena prima del crollo: paragrafi più corti, una rottura visiva, un indizio direzionale che segnali che c'è ancora qualcosa da vedere.
Un riferimento utile: su una pagina prodotto o una landing page standard, il tuo CTA principale dovrebbe essere visibile ad almeno il 60% dei visitatori. Al di sotto, il crollo dello scroll ti costa conversioni che non vedi nei dati del tuo tasso di conversione, perché gli utenti non hanno mai raggiunto il punto di decisione.
Pattern 2: clic su elementi non cliccabili
Guarda la tua mappa di clic. Individua i cluster. Ora verifica se questi cluster si trovano su elementi interattivi (pulsanti, link, campi di un modulo) o su qualcosa senza interazione: un'immagine prodotto, un titolo, una statistica, un logo, un'icona di funzionalità.
I clic su elementi non interattivi sono un segnale preciso: l'utente si aspettava che succedesse qualcosa e non è successo nulla. Si chiama clic frustrato o rage click, e indica un'aspettativa tradita più che un elemento rotto. L'elemento funziona esattamente come progettato; è il design a essere sbagliato.
Varianti comuni di questo pattern:
- Immagini prodotto che gli utenti provano a ingrandire o zoomare
- Nomi di funzionalità o titoli che gli utenti cliccano aspettandosi un'espansione o una finestra modale
- Statistiche o numeri che sembrano rimandare a una fonte
- Testo sottolineato che è solo stile, non un link
- Card che sembrano completamente cliccabili ma hanno solo un piccolo link «Scopri di più»
La soluzione è rendere l'elemento interattivo (aggiungere lo zoom, aggiungere il link, rendere cliccabile l'intera card) oppure riprogettarlo perché l'aspettativa non si crei. La seconda opzione è spesso migliore. Aggiungere funzionalità per soddisfare un'aspettativa confusa risolve raramente il problema di chiarezza di fondo.
Pattern 3: una zona morta sopra la piega
Questo pattern è l'opposto di ciò che la maggior parte delle persone si aspetta: basso engagement in cima alla pagina, nonostante ogni utente la veda.
Su una mappa di clic appare come clic quasi nulli nella sezione hero, senza interazione con il titolo, il sottotitolo o l'elemento visivo circostante. Su una mappa di scroll appare come utenti che superano rapidamente la parte alta senza fermarsi.
Cosa significa: il tuo contenuto sopra la piega non comunica il proprio valore abbastanza in fretta. Gli utenti scansionano, non leggono. Arrivano con una domanda («è rilevante per me?») e la tua sezione hero non risponde con la chiarezza necessaria a guadagnarsi la loro attenzione.
È diverso da una frequenza di rimbalzo elevata, che ti dice che gli utenti se ne sono andati. Una zona morta con basso rimbalzo significa che gli utenti sono rimasti ma hanno saltato il tuo contenuto più importante. Hanno continuato a scrollare in cerca di qualcosa che rispondesse alla loro domanda, il che significa che il lavoro di conversione avviene più in basso nella pagina, con meno contesto e meno intenzione.
Le cause comuni:
- Un titolo che descrive cosa fai invece di cosa ottiene l'utente
- Un'immagine o un'animazione hero che distoglie lo sguardo dal testo
- Una proposta di valore sepolta sotto una barra di navigazione e un grande elemento visivo
- Un disallineamento tra l'annuncio o il link che ha portato traffico e ciò con cui la pagina si apre
Testa la chiarezza del titolo prima di ogni altra cosa. L'elemento visivo si può correggere dopo. Se gli utenti non si agganciano alle parole, riprogettare il layout attorno alle stesse parole non risolverà il problema.
Pattern 4: il divario tra dispositivi
Non leggere mai una heatmap in forma aggregata se hai un traffico mobile significativo. Una heatmap aggregata su una pagina con il 60% di visitatori da mobile è dominata dal comportamento mobile, e i due pubblici usano una versione fondamentalmente diversa della tua pagina.
Il pattern del divario tra dispositivi compare quando confronti la mappa di scroll o di clic tra i dispositivi e riscontri una divergenza importante: gli utenti desktop scrollano fino al 70%, quelli mobile si fermano al 35%. Gli utenti desktop cliccano il CTA principale, quelli mobile cliccano invece un link di navigazione secondario.
Quando questo divario è ampio, di solito indica un problema di layout specifico di un dispositivo:
- Un'immagine a tutta larghezza su mobile che spinge tutto il contenuto sotto la piega
- Un pulsante CTA dimensionato per il desktop, troppo piccolo da toccare su mobile
- Una sezione a due colonne che si impila in una lista verticale illeggibile sugli schermi piccoli
- Dimensioni del testo comode su desktop che costringono a zoomare su mobile
La correzione richiede di verificare in modo specifico l'esperienza mobile, senza dare per scontato che un layout responsive sia una buona esperienza mobile. Responsive significa che si adatta. Non significa che funzioni.
Segmenta la tua heatmap per dispositivo prima di trarre qualsiasi conclusione sulla pagina. Un aggregato «buono» può mascherare un'esperienza mobile rotta che colpisce la maggioranza dei tuoi visitatori.
Pattern 5: il cluster di distrazione
Questo è il pattern che coglie di sorpresa la maggior parte dei team, perché sembra engagement. Un alto volume di clic su un elemento sembra positivo, finché non verifichi dove vanno quei clic.
Un cluster di distrazione è una concentrazione di clic su un elemento che allontana gli utenti dal tuo flusso di conversione: un link di navigazione su una landing page, un link «scopri di più» a un articolo del blog in mezzo a una pagina prodotto, un logo che riporta gli utenti alla home, un link nel footer che conduce a una sezione senza attinenza.
La versione più chiara: una landing page creata per una campagna specifica, con la navigazione completa del sito ancora visibile. La heatmap mostra la densità di clic più alta sui link di navigazione, non sul CTA. Gli utenti scappano da una porta che hai dimenticato di chiudere.
Cosa cercare: su qualsiasi pagina con una singola azione prevista, individua gli elementi che ricevono più clic e verifica se quei clic servono il tuo obiettivo o ne distolgono. Sulle landing page dedicate, la risposta è quasi sempre rimuovere o nascondere la navigazione. Sulle pagine prodotto e di contenuto, la domanda è se il contenuto concorrente attiri utenti ad alta intenzione o semplici curiosi a bassa intenzione, e se il compromesso valga la pena.
Cosa fare quando individui un pattern
Una heatmap ti dice dove si trova il problema sulla pagina. Non ti dice perché accade. È il compito delle registrazioni di sessione.
Se trovi un crollo dello scroll al 55% e il tuo CTA è al 70%, il passo successivo è filtrare le registrazioni di sessione sugli utenti che hanno smesso di scrollare in quell'intervallo e osservare cosa è successo nei secondi prima che se ne andassero. Hanno letto la sezione e chiuso? Hanno esitato su un elemento? La pagina ha caricato qualcosa in quel momento che li ha interrotti? La heatmap ti dà la coordinata; la registrazione ti dà la storia.
Questa diagnosi in due passi —la heatmap per trovare la posizione e la registrazione per capire il comportamento— è sistematicamente più rapida nell'identificare le cause profonde rispetto a ciascuno dei due strumenti da solo. La stessa logica si applica quando filtri le registrazioni di sessione per sorgente di traffico: il segmento definisce la domanda, la registrazione risponde.
Il limite delle heatmap aggregate
Oltre alla segmentazione per dispositivo, la dimensione più sottoutilizzata dell'analisi delle heatmap è la sorgente di traffico.
Un utente che arriva da una ricerca di brand (qualcuno che ha digitato il nome della tua azienda) porta un livello di intenzione completamente diverso da un utente che arriva da una campagna di retargeting display. Interagiranno in modo diverso con la stessa pagina: profondità di scroll diversa, pattern di clic diversi, tolleranza diversa alla lunghezza del contenuto.
Una heatmap aggregata media insieme questi due pubblici. Se i tuoi visitatori organici ad alta intenzione scrollano fino all'80% e i tuoi visitatori a pagamento a bassa intenzione fino al 30%, la media è del 55%, il che fa sembrare la pagina mediocre quando magari funziona benissimo per il pubblico per cui è stata progettata.
Segmenta le tue heatmap per sorgente di traffico prima di decidere se hai un problema di pagina o un problema di targeting del pubblico. La distinzione cambia completamente la soluzione: uno è un problema di design, l'altro un problema di spesa media.
Trasformare i pattern in test misurabili
Un pattern di heatmap è un'ipotesi, non una diagnosi. «Gli utenti non scrollano fino al CTA» non è una conclusione; lo diventa quando fai una modifica e ne misuri l'effetto.
Prima di apportare modifiche a partire dai pattern di heatmap, fissa una metrica di riferimento da poter monitorare:
- Se correggi un crollo dello scroll: fissa un obiettivo di profondità di scroll sulla percentuale di utenti che raggiungono la sezione del CTA
- Se correggi una zona morta: monitora il tempo sulla pagina o l'engagement della sezione hero come indicatore anticipatore
- Se correggi un cluster di distrazione: monitora specificamente il tasso di clic sul tuo CTA principale, non solo la conversione complessiva
Senza un riferimento, fai una modifica, riapri la heatmap un mese dopo e non hai modo di sapere se ciò che vedi è migliore, peggiore o semplicemente diverso. Un obiettivo misurabile prima della modifica trasforma l'analisi delle heatmap in un vero ciclo di ottimizzazione, invece di una serie di aggiustamenti estetici.
In sintesi
I cinque pattern (crollo dello scroll, clic fantasma, zona morta, divario tra dispositivi, cluster di distrazione) coprono la maggior parte delle osservazioni utili ricavabili da una heatmap. La maggior parte delle pagine con problemi di conversione ne mostra almeno uno con chiarezza. La maggior parte dei team che guardano le proprie heatmap non sa di doverli cercare.
La sequenza che funziona: apri prima la mappa di scroll, trova dove gli utenti si fermano. Apri poi la mappa di clic, trova con cosa interagiscono gli utenti e se quell'interazione serve l'obiettivo. Segmenta per dispositivo. Segmenta per sorgente di traffico. Poi vai a guardare le registrazioni di sessione per i segmenti che mostrano il problema.
I dati ti dicono che qualcosa non va. L'osservazione ti dice perché.
