Heat Map: Guida alle Mappe di Calore

Heat Map - Mappa di Calore

Le heat map (o “mappe di calore“) mostrano cosa stanno facendo gli utenti sul tuo sito. Tengono traccia dei movimenti del mouse, dei click e dello scroll, e sono quindi un ottimo strumento per capire cosa modificare sulle pagine del tuo sito web per ottimizzarne le conversioni.

I dettagli ce li spiega molto bene Alex Birkett, in un articolo dal titolo What Are Heat Maps Good For (Besides Looking Cool)? (che trovi tradotto qui sotto).

Cosa è una Heat Map?

Una heat map, o “mappa di calore”, è una rappresentazione visiva dei dati. L’ideatore fu Cormac Kinney, che verso la metà degli anni ’90 sviluppò l’idea per cercare di dare agli operatori di borsa uno strumento visuale in grado di raggruppare una grossa mole di dati finanziari (sia quelli statistici che quelli in tempo reale).

Le heatmap si dividono in 3 principali categorie:

  1. Hover map (mappe di calore che tracciano i movimenti del mouse)
  2. Click map (mappe di calore che tracciano i click)
  3. Scroll map (mappe di calore che tracciano lo scroll della pagina)

Per ogni tipologia di mappa di calore, è sempre bene raccogliere un buon numero di dati prima di iniziare a trarre delle conclusioni: una buona regola è partire da almeno 2.000-3.000 pagine per ogni dimensione di schermo e per ogni dispositivo.

Ma vediamo anche quali tipi di heatmap esistono, per trovare quelle più adatte ai nostri scopi.

Hover Map

Mostrano le aree della pagina in cui le persone si muovono con il mouse. L’idea è quella che l’occhio segue la freccina del mouse, e quindi queste mappe mostrerebbero dove gli utenti guardano.

Hover Map

In realtà le cose stanno diversamente. Nel 2010 Anne Aula, Senior User Experience Researcher di Google, ha presentato uno studio nel quale si evidenziava che:

  • solo nel 6% dei casi c’è stata una correlazione verticale fra movimento del mouse e movimento oculare
  • solo nel 19% dei casi c’è stata una correlazione orizzontale fra movimento del mouse e movimento oculare
  • nel 10% dei casi l’utente si posizionava col mouse sopra un link, ma continuava poi a guardare altre cose all’interno della pagina

Anche Guy Redwood (di Simple Usability) la pensa allo stesso modo:

Abbiamo fatto studi di eye tracking per oltre 5 anni e posso affermare onestamente che, da una prospettiva di ricerca di user experience, non vi è alcuna correlazione fra movimenti oculari e movimenti del mouse – a parte quando si guarda dove si sta per cliccare.
Se ci fosse una correlazione potremmo immediatamente smettere di spendere soldi per attrezzature di eye tracking, e usare solo i nostri dati dei movimenti del mouse dei siti web e delle sessioni di usabilità.

Ecco perché Peep Laja chiama queste mappe “strumento di oculometria dei poveri.”

Click Map

Queste heatmap mostrano i dati aggregati dei click. Il blu significa meno click, il rosso più click e la maggior concentrazione di click sono le macchie bianche e gialle.

Click Map

Queste mappe sono molto utili dal punto di vista “comunicativo”. Possono dirci cosa ottimizzare e cosa funziona. Per esempio: hai sulla pagina una foto che prende un sacco di click, ma non è linkata a nulla? Forse sarebbe il caso di metterci un link verso qualche risorsa utile. 😉

Anche Google Analytics integra nativamente una funzione di questo tipo, chiamata “Analisi dati In-Page“: la trovi sotto la voce “Comportamento” nel menu di sinistra.

Scroll Map

Si tratta di mappe che mostrano quanto e come le persone scorrono una pagina web. Sono interessanti proprio perché mostrano quanto in basso un utente può arrivare a scrollare col mouse.

Scroll Map

Puoi usare queste heatmap per ogni tipologia di pagina, ma sono particolarmente utili quando progetti landing page molto lunghe, e vuoi capire se l’utente arriverà a leggerle fino alla fine (o almeno fino al punto dove hai inserito la tua call to action).

Considera che, generalmente, più una pagina è lunga, meno verrà letta fino in fondo. Ecco perché dovresti sempre mettere i contenuti che ti interessano nella parte più alta (above the fold), in bella evidenza.

Le scroll map possono anche aiutarti ad ottimizzare il tuo design: se noti grosse variazioni di colore sulla mappa, significa che l’utente non vede un collegamento fra il contenuto che c’è prima e quello che c’è dopo (il cosiddetto logical end).

Se la landing page è molto lunga, pensa a come ritoccare il layout della pagina nei punti in cui l’attività di scorrimento si arresta (in molti casi può essere utile un A/B test per capire se e come accorciarla).

Replay della Sessione dell’Utente

Molti servizi che generano heatmap permettono anche di registrare in video le sessioni di navigazione degli utenti all’interno del tuo sito.

Per esempio, puoi vedere come compilano i moduli presenti sulle tue pagine, quanto velocemente leggono, in che modo scrollano la pagina.

E’ importantissimo guardare questi video per capire quali colli di bottiglia e quali problemi incontra il lettore, dove si arena, in quale punto si arrende e abbandona la pagina: ricorda che stai registrando le sessioni di utenti reali, e quindi le informazioni che raccogli sono di enorme valore.

Conclusione

Riassumendo, le heatmap possono esserti utili in almeno 5 modi:

  • Per aiutarti a capire come le persone si muovono sul tuo sito.
  • Per mostrarti dove cliccano.
  • Per capire come disporre i vari elementi della pagina (anche in base al browser e al dispositivo utilizzato dall’utente).
  • Per progettare pagine lunghe che riescano a mantenere alta l’attenzione dei lettori.
  • Per registrare in video le intere sessioni di navigazione degli utenti.

Se vuoi iniziare ad utilizzare le mappe di calore, ti consiglio di registrarti a servizi come Crazy Egg, ClickTale, Hotjar o Yandex Metrica: ti basterà integrare un semplice script sulla pagina, per iniziare ad ottenere i primi preziosissimi dati!

Condividi su facebook
Facebook
Condividi su google
Google+
Condividi su twitter
Twitter
Condividi su linkedin
LinkedIn
Condividi su pinterest
Pinterest

11 Comments

  • Sono strumenti interessanti e intriganti… ma credo funzionino solo coi vecchi desktop col mouse. Mobile e tablet, mon hanno piu il cursore del mouse e dunque non si possono fare analisi del genere (a parte per i click).

  • Lorenzo mi spiace deluderti. Su smartphone e tablet si possono tracciare tutti e tre i movimenti in egual modo e misura del desktop.

  • Articolo interessantissimo. Conoscevo questi sistemi, ma, non non li ho mai utilizzati.
    Sai se esiste qualche servizio gratuito per poterli testare sul proprio sito?

  • Crazy Egg dovrebbe avere la prova gratuita per 30 giorni, per ClickTale puoi richiedere una demo (c’è un bottone in home page) e anche Hotjar offre 15 giorni della versione PRO “for free”: tutti questi sono servizi a canone mensile. Altrimenti puoi acquistare per pochi dollari userTrack, che rimane tuo e lo installi dove vuoi.

  • Ottimo articolo. Mi avevano parlato durante un corso delle Heat Map ma si trattava solo di un accenno e non ero a conoscenza di un plugin wp utile in questo senso. Grazie Davide!

  • Ottimo articolo. Di recente ho provato TUTTI i servizi di questo tipo per il mio nascente blog, compreso quelli citati da Davide. A chi è interessato al servizio di replay consiglio Hotjar, il cui piano gratuito comprende anche gli altri servizi di heat mapping ed è ottimo per approcciare il mondo di questi strumenti potentissimi.

    Condivido con voi una riflessione sulla privacy con un esempio concreto. Un visitatore compila un form con i suoi dati personali e poi clicca su un banner per incontri fra single. Io vedo tutto col servizio di replay.

  • Grazie Davide per l’articolo!
    Ero a conoscenza delle “heat map” ma non dell’esistenza delle “scroll map”!
    Nella situazione attuale, dove il mobile è fortissimo sviluppo, una risorsa del genere è INDISPENSABILE

  • Mi unisco al coro degli entusiasti. Ottimo articolo che mi permetterà di valutare bene quale modifica fare sulle landing page per ottimizzarle al massimo.

  • Ciao e complimenti per l’articolo.
    Sai se è possibile avere una heatmap con le sue 3 categorie, direttamente all’interno di una mail fatta con Mailchimp in modo da tracciare quali sono i movimenti che compie un utente all’interno di una mail?
    Grazie

  • Non credo che MailChimp possa tracciare i movimenti, ma puoi tracciare quale dei click che hai messo nell’email prende più link (con la funzione Click Tracking: https://mailchimp.com/help/enable-and-view-click-tracking/).

    Un trucco per simulare una heatmap potrebbe essere quello di inserire una Image Map nella email, con diversi link associati ad ognuna delle immagini che compongono la mappa, e quindi tracciare i click sulle diverse immagini (vedi https://mailchimp.com/help/add-an-image-map-to-a-campaign/ ).

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Max Valle

Max Valle

Da oltre 20 anni, fornisco consulenze per aziende e professionisti, che vogliono sviluppare il loro business, 
aumentando i clienti, utilizzando le ultime tecnologie e nel pieno rispetto delle normative vigenti in materia.

Seguimi sui social

Iscriviti alla Newsletter

Main sponsor

Scroll to Top

Utilizziamo i cookie per personalizzare contenuti ed annunci, per fornire funzionalità dei social media e per analizzare il nostro traffico. Condividiamo inoltre informazioni sul modo in cui utilizza il nostro sito con i nostri partner che si occupano di analisi dei dati web, pubblicità e social media, i quali potrebbero combinarle con altre informazioni che ha fornito loro o che hanno raccolto dal suo utilizzo dei loro servizi. Acconsenta ai nostri cookie se continua ad utilizzare il nostro sito web. Per maggiori informazioni visualizza la Privacy & Cookie policy