8 Esempi di Heatmap per la Gestione Prodotto Guidata dai Dati
Probabilmente la singola caratteristica più importante per un buon product manager è la capacità di immedesimarsi negli utenti. Per sviluppare questa competenza, i PM trascorrono ore in interviste con gli utenti e ad analizzare i dati dietro il comportamento degli utenti.
Ma c’è un altro modo per affinare l’intuizione sugli utenti: analizzare come interagiscono con il tuo prodotto tramite le heatmap.
Le heatmap sono solo uno dei tanti strumenti di ricerca utente che aiutano a individuare punti di attrito, intenzioni e opportunità lungo il percorso dell’utente. Fanno anche parte del più ampio ambito della product analytics, aiutandoti ad andare oltre le metriche di vanità per scoprire cosa fanno realmente gli utenti.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Se sei arrivato qui, probabilmente sei già curioso sui vantaggi delle heatmap oppure stai cercando esempi reali per motivare un investimento in queste soluzioni.
In ogni caso, sei nel posto giusto. Analizziamo insieme i diversi tipi di heatmap e come usarle per raggiungere i tuoi obiettivi di prodotto.
#1: Mappe di click e mappe di tap
Cominciamo con le più popolari tra tutte: la mappa dei click (per interfacce desktop) o dei tap (per le interfacce mobile).
Le clickmap sono la rappresentazione visiva di come gli utenti cliccano sugli oggetti della tua interfaccia. In pratica consiste in uno screenshot della tua interfaccia evidenziato con colori differenti.
Se il tuo strumento di Heatmap evidenzia un determinato elemento della tua UI, significa che un utente (o diversi utenti) ci ha cliccato sopra. Il colore, invece, ti mostra il numero di click ricevuto da quello specifico elemento.
Gli strumenti di heatmap solitamente usano colori che vanno dalla scala delle temperature.
Vedrai colori più caldi di questo gradiente nelle aree che ricevono molti click e colori più freddi per le zone che attirano poca attenzione.
Ecco un esempio di visualizzazione dati di una tap map per un’app mobile che ti permette di gestire le tue finanze.
Possiamo vedere che le aree che specificano l’importo speso per ogni transazione sono evidenziate in rosso. Significa che molte persone fanno clic su quelle aree (probabilmente per espandere la transazione e vedere i dettagli).
Il saldo in alto, invece, è evidenziato in verde – il che indica che poche persone ci cliccano sopra.
Come usare una click map
Le mappe di click offrono una grande quantità di insight utili. Ci sono tante cose che puoi scoprire sul comportamento degli utenti semplicemente osservando le zone su cui cliccano di più.
Ad esempio, se gestisci un’app di rifugio per cani con una pagina donazioni che consente agli utenti di supportare economicamente il rifugio, puoi usare una click map per vedere quale opzione di donazione funziona meglio.
Analizzando la tap map qui sopra, possiamo dire che le opzioni $10 e “Altro” sono di gran lunga le più scelte quanto a importo della donazione.
Un insight importante che otteniamo da questa osservazione è che molto probabilmente c’è un importo di donazione non presente nella lista (per esempio $1), e le persone cliccano su “Altro” per poter inserire quell’importo.
Quindi, probabilmente è una buona idea vedere cosa inseriscono gli utenti nella sezione “Altro”, scoprire gli importi più popolari e aggiungerli all’elenco predefinito.
#2: Mappe di scroll
Come suggerisce il nome stesso, questo tipo di heatmap ti consente di analizzare il comportamento di scorrimento degli utenti.
Anche le mappe di scroll sono codificate in base alla scala di temperatura. Tuttavia, invece di evidenziare i punti dove le persone cliccano sull’interfaccia, mettono in risalto intere sezioni della pagina sulla base del numero di persone che ha effettuato lo scroll fino a quel punto e ha visto quella sezione.
Come per gli altri tipi di heatmap, si ottengono evidenziazioni con colori caldi se molte persone effettuano lo scroll e vedono una determinata sezione, e colori freddi quando sono poche le persone che ci arrivano.
Come usare una scroll map
Le mappe di scorrimento sono ottime per ottimizzare la posizione di determinati elementi o sezioni sulla tua pagina e per risolvere eventuali problemi di utilizzo o di coinvolgimento con queste sezioni.
Analizziamo un tipico caso di risoluzione dei problemi esaminando la mappa di scorrimento della pagina prezzi di un servizio SaaS chiamato Nelio.
Immagina di avere problemi di competitività. Per qualche motivo, le persone preferiscono iscriversi ai servizi dei tuoi concorrenti. Quando chiedi loro il motivo, dicono che l’altro strumento aveva una funzionalità di tracciamento multigoal e tu no.
In realtà, il problema è che tu hai questa funzionalità, quindi ora devi capire perché le persone non la trovano.
Osservando la mappa di scorrimento della tua pagina dei prezzi, noti che la stragrande maggioranza degli utenti non scorre affatto la pagina. Poi ti accorgi che la descrizione della funzione di tracciamento multi-obiettivo si trova sotto la piega e nella zona blu. Significa che solo pochi utenti scorrono verso il basso e leggono questa informazione, cosa che può essere comune nella maggior parte dei casi di comportamento utente relativo allo scroll.
Problema identificato! Ora, per risolverlo, puoi pensare di aggiungere le funzionalità nella sezione “Tutti i piani includono” anche come elementi extra nei tuoi elenchi dei piani tariffari – assicurandoti che compaiano sopra la piega in modo che le persone le vedano senza dover scorrere.
#3: Mappe di calore dei movimenti del mouse
Conosciute anche come mappe dei movimenti, queste mappe di calore tracciano la posizione del mouse – permettendoti di visualizzare il comportamento di "movimento" dei tuoi utenti sull’interfaccia.
Nella maggior parte dei casi, utilizzando le mappe di calore dei movimenti del mouse, presumiamo che gli utenti guardino con maggiore probabilità l’elemento su cui il cursore del mouse è posizionato. Pertanto, seguendo i movimenti del mouse, possiamo correlare questi dati con ciò che gli utenti stanno osservando mentre navigano nell’interfaccia.
Visivamente, si tratta di punti evidenziati (utilizzando ancora uno schema di colori a temperatura) nelle parti dell’interfaccia in cui il cursore del mouse dell’utente è stato per più tempo. Oltre a questo, alcuni strumenti di heatmap ti forniscono anche la "traccia" delle zone da cui gli utenti iniziano a muoversi e dove si spostano nell’interfaccia.
Ecco come appaiono queste tracce.
Questa è la mappa di calore del tracciamento del mouse di una delle interfacce forse meglio progettate di sempre – il sito web di Apple (del resto, sono stati i primi UX designer della storia). Queste tracce mostrano che le persone iniziano a esplorare la landing page di MacOS Snow Leopard osservando per prima cosa il felino affascinante, prima di leggere il titolo e continuare con gli altri elementi della pagina.
Come usare una mappa dei movimenti del mouse
Uno dei modi interessanti per usare una mappa dei movimenti è identificare le distrazioni per l’utente.
Ad esempio, se sei incaricato di ottimizzare la pagina dei risultati di ricerca di Amazon (il tuo obiettivo è che gli utenti clicchino su un prodotto trovato da Amazon), potresti osservare la mappa di calore dei movimenti del mouse e vedere che la maggior parte degli utenti guarda prima uno dei banner (ad esempio, un annuncio), prima di procedere all’esame dei risultati di ricerca.
Si tratta di una grande distrazione per gli utenti e può ridurre le possibilità che clicchino sui risultati di ricerca. Dovrai quindi eliminare quel banner oppure renderlo meno visivamente rilevante nell’interfaccia.
#4: Mappe di calore dell’attenzione
Finora abbiamo parlato di tre strumenti di analisi che consentono di analizzare visivamente i tuoi utenti – tramite click, movimenti del mouse e scorrimento della pagina.
Anche se ciascuno di questi strumenti può fornirci preziose informazioni, affidarsi a uno solo di essi può essere fuorviante. Osservare il comportamento degli utenti senza avere il giusto contesto potrebbe non darci una visione abbastanza ampia di ciò che realmente accade.
Perciò, di solito i team di prodotto utilizzano contemporaneamente tutte queste tipologie e combinano le informazioni raccolte prima di analizzarle e trarre le conclusioni. Tuttavia, questa soluzione non è perfetta nemmeno lei, dato che probabilmente sarà necessario impiegare 3 volte più tempo per concludere un’analisi completa.
Fortunatamente, con l’avvento dei modelli di intelligenza artificiale e di algoritmi avanzati, gli strumenti moderni di visualizzazione delle heatmap sono in grado di fondere le informazioni raccolte da click, passaggi del mouse e scroll in una sola mappa di calore.
Questa quarta tipologia è chiamata heatmap dell’attenzione, perché mostra sostanzialmente quali sono le parti dell’interfaccia utente che attirano di più l’attenzione dei tuoi utenti. Visivamente, sembra molto simile a una mappa dei click, con alcuni elementi della UI evidenziati in diversi colori della palette a seconda della quantità di attenzione ricevuta.
#5: Mappe di calore geografiche
Le heatmap esistono da molto prima che si iniziasse ad applicare questa tecnica alle interfacce utente. Uno dei tipi più noti di heatmap tradizionali è la mappa geografica.
In questo caso, si evidenziano determinate aree su una mappa in base al tipo di dato selezionato. Ad esempio, se vuoi analizzare la distribuzione geografica delle località turistiche in Francia, puoi utilizzare questa geo heatmap.
Nella mappa sopra viene mostrato il numero di posti letto alberghieri (principalmente rivolti ai turisti) per chilometro quadrato. Come possiamo vedere, Corsica, Alpi francesi e Costa Azzurra sono i chiari vincitori in questa categoria.
Come utilizzare una heatmap geografica
Analizzare i dati turistici della Francia è interessante, ma queste heatmap possono aiutarmi ad analizzare il mio prodotto digitale? Ti mostro un esempio.
Restando sul tema del turismo (e della Francia), immaginiamo che tu gestisca un servizio online di affitti a breve termine (qualcosa di simile ad Airbnb). Hai un'idea: creare e distribuire materiale promozionale per i festival locali nelle città francesi per incentivare le prenotazioni di hotel tramite il tuo servizio.
La prima domanda che ti verrà in mente è: da quale città/festival dovresti iniziare?
Per trovare una risposta, puoi visualizzare la heatmap geografica con la distribuzione delle case e degli appartamenti in affitto che usano il tuo servizio.
Osservando la mappa, noterai che il tuo servizio è piuttosto popolare nel sud della Francia. Quindi, potresti valutare di iniziare a promuovere i festival della Provenza e della Costa Azzurra.
#6: Mappe dei Rage Click
Questa è una sottocategoria delle click map che filtra e mostra solo i casi in cui gli utenti hanno fatto clic su qualcosa "in preda alla rabbia". Gli strumenti di heatmapping identificano solitamente un rage click (o dead click) quando l’utente continua a cliccare ripetutamente sullo stesso elemento.
Come utilizzare una mappa dei rage click
Le mappe dei rage click sono ottimi strumenti per individuare esperienze utente problematiche. Può trattarsi di un elemento che sembra cliccabile ma non lo è, di un’interfaccia non intuitiva, oppure di un pulsante che non funziona.
Ad esempio, se eseguissimo un’analisi dei rage click su una delle pagine di Iterate, dovremmo sicuramente trovare rage click in almeno due punti: ecco perché:
Hai notato i due elementi di testo evidenziati in blu? Indovina un po': non sono link. Si tratta solo di testo normale colorato di blu. Molti visitatori di Iterate (me compreso) hanno tentato di cliccare su questi elementi pensando che portassero a un'altra pagina.
Naturalmente, non succede nulla dopo averci cliccato, e questo potrebbe portare l’utente a diventare frustrato e iniziare a "rage-clickare".
Dall’analisi della rage click map di questa pagina si deduce che è importante, ad esempio, che il testo non assuma l’aspetto di un collegamento ipertestuale. Puoi magari effettuare un test A/B con colori diversi e verificare se l’ipotesi che il testo blu causi rage click sia vera o falsa.
#7: Heatmap Eye-Tracking
Finora abbiamo utilizzato mappe di hover per capire dove i nostri utenti guardano mentre navigano la nostra pagina web. Supponiamo che gli utenti tengano gli occhi puntati sul cursore la maggior parte del tempo. Quindi il movimento del cursore attraverso l’interfaccia può dirci su cosa si concentrano i loro occhi.
Questo è un metodo comune per analizzare l’attenzione. Tuttavia, i dati delle heatmap così ricavati non sono perfetti, perché gli utenti non guardano sempre dove si trova il cursore.
Se desideri ottenere dati precisi sulla posizione e dati numerici riguardanti ciò che osservano realmente i tuoi utenti, dovresti considerare l’utilizzo di una heatmap eye-tracking.
A differenza delle altre, le heatmap eye-tracking richiedono che gli utenti indossino dispositivi specializzati, in grado di tracciare i movimenti oculari e individuare la posizione degli elementi osservati.
Questo significa che dovrai invitare i tuoi utenti a sessioni di test speciali, far loro indossare questi tracker e iniziare a utilizzare il tuo prodotto. Sebbene sia molto più dispendioso in termini di tempo e costoso, la qualità dei dati che ottieni da esso è di gran lunga superiore a qualsiasi cosa si possa ottenere da altri tipi di heatmap per siti web.
Come utilizzare una heatmap basata sul tracciamento oculare
Considerando il costo di organizzare sessioni di test con il tracciamento oculare, probabilmente finirai per usare questa tecnica solo nelle aree di ottimizzazione UX a maggiore impatto.
Gli studi sul tracciamento oculare sono molto comuni nei prodotti delle grandi aziende tecnologiche, dove anche un miglioramento dell'usabilità dell'1% può tradursi in decine di milioni di ricavi e ROI.
Immagina quanto ARR aggiuntivo potrebbe ottenere Amazon se facesse uno studio con tracciamento oculare e posizionasse i banner dei prodotti in evidenza in modo tale che il tasso di conversione aumenti dell’1%.
#8: [Bonus] Mappe Confetti
Le heatmap confetti sono una sottocategoria delle comuni mappe di click che mostrano i singoli click invece di evidenziare l'area generale dove sono avvenuti.
Il vantaggio nell'analizzare i singoli click sta nella possibilità di filtrarli in base a diversi e complessi punti dati.
Qui, ad esempio, abbiamo raggruppato i click sulla CTA di ricerca in base al giorno della settimana in cui è avvenuto l’evento click.
In base ai dati, possiamo vedere che il martedì riceve il maggior numero di click, mentre chi visita il lunedì risulta il più distratto (molti click sparsi sull’interfaccia).
Come utilizzare una heatmap confetti
Le heatmap confetti sono particolarmente utili quando è necessario analizzare il comportamento degli utenti a un livello granulare. A differenza delle tradizionali heatmap che mostrano dati aggregati, le mappe confetti consentono di filtrare i click individuali in base a parametri come il tipo di dispositivo, la fonte di provenienza o persino l’ora del giorno.
Questo tipo di heatmap è ottimo per individuare pattern che altrimenti passerebbero inosservati. Ad esempio, se il tuo pulsante di checkout riceve più click il venerdì e molti meno il lunedì, i tuoi utenti potrebbero essere compratori impulsivi influenzati dal giorno di paga—mentre il pubblico del lunedì potrebbe ancora riprendersi dal weekend, fissando la tua pagina dei prezzi invece di convertire.
Le mappe confetti possono anche mettere in evidenza distrazioni inattese. Se gli utenti cliccano ovunque sulla pagina invece che dove vorresti, potrebbero essere confusi—o semplicemente stanno cercando disperatamente un segno di vita. Se il menu di navigazione riceve più click della CTA, potrebbe significare che gli utenti sono persi e sperano di trovare una via d'uscita invece di interagire. Puoi utilizzare queste intuizioni per perfezionare la tua customer journey map, soprattutto quando individui quei punti di attrito. Filtrare per segmento utente può aiutarti a vedere quali gruppi faticano di più e dove serve semplificare l’esperienza.
Le heatmap aumentano la tua empatia verso l’utente
Ogni tipo di heatmap che abbiamo esplorato insieme qui è in grado di darti uno sguardo su come i tuoi utenti esplorano e utilizzano i tuoi prodotti. Se lavori in modo snello, le heatmap rappresentano un modo veloce e leggero per condurre ricerche UX prima di investire in test di usabilità più approfonditi. Grazie al loro aiuto, sarai in grado di vedere e percepire le difficoltà che i tuoi utenti incontrano e agire per risolverle.
Combinate con i tool di analisi di prodotto, le heatmap possono offrire una visione più chiara di come gli utenti interagiscono con il tuo prodotto e dove abbandonano. Ad esempio, l’abbinamento delle heatmap con strumenti di session replay ti offre sia il ‘cosa’ che il ‘perché’ dietro il comportamento dell’utente.
Le heatmap sono ottime, ma sono solo uno dei tanti strumenti che puoi usare per accrescere l’empatia e, per scoprire anche gli altri, assicurati di iscriverti alla nostra newsletter.