8 Esempi di Heatmap per una Gestione Prodotto Guidata dai Dati
Probabilmente la singola caratteristica più importante di un buon product manager è la capacità di immedesimarsi negli utenti. Per sviluppare questa abilità, i PM dedicano ore a interviste con gli utenti e ad analizzare i dati sul loro comportamento.
Ma c’è un altro modo per affinare la propria intuizione sugli utenti: analizzando come interagiscono con il tuo prodotto attraverso le heatmap.
Le heatmap sono solo uno dei tanti strumenti di ricerca sugli utenti che aiutano a individuare attriti, intenzioni e opportunità lungo il percorso dell’utente. Fanno anche parte del più ampio universo delle analisi di prodotto, aiutandoti ad andare oltre le metriche di vanità e a vedere cosa fanno davvero gli utenti.
Vuoi di più da The CPO Club?
Iscriviti gratuitamente per completare la lettura di questo articolo:
Have an account? Log In
Se sei arrivato qui, probabilmente sei già curioso dei vantaggi delle heatmap—o stai cercando esempi reali per giustificare l’investimento.
In ogni caso sei nel posto giusto. Vediamo insieme i diversi tipi di heatmap e come puoi usarle per raggiungere i tuoi obiettivi di prodotto.
#1: Click Map e Tap Map
Iniziamo dalla più popolare: la mappa dei click (per le UI desktop) o dei tap (per le UI mobile).
Le clickmap sono la rappresentazione visiva del modo in cui gli utenti cliccano sugli elementi della tua interfaccia. È semplicemente uno screenshot della tua UI con parti evidenziate in colori differenti.
Se lo strumento di Heatmap evidenzia un certo elemento nella tua interfaccia, significa che un utente (o molti) ci ha cliccato sopra. Il colore, invece, ti mostra quante volte quello specifico elemento è stato cliccato.
Gli strumenti di heatmap di solito utilizzano colori presi dalla scala delle temperature.
Vedrai colori più caldi di questa gradazione nelle aree che ricevono molti click e colori più freddi nelle aree poco considerate dagli utenti.
Ecco come appare la 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 la somma spesa per ogni transazione sono evidenziate in rosso. Questo significa che molte persone ci cliccano sopra (probabilmente per espandere la transazione e vedere i dettagli).
Il saldo del conto in alto, invece, è evidenziato in verde—il che indica che poche persone ci cliccano sopra.
Come Si Usa Una Click Map
Le click map sono molto ricche di spunti azionabili. Puoi imparare moltissimo sul comportamento degli utenti osservando le aree su cui cliccano.
Ad esempio, se gestisci un’app per un canile che ha una pagina per le donazioni, dove gli utenti possono supportare il rifugio economicamente, puoi usare la click map per vedere quale opzione di donazione funziona meglio.
Analizzando la tap map sopra, possiamo affermare che le opzioni $10 e “Altro” sono di gran lunga le più popolari quando si sceglie l’importo della donazione.
Un’informazione importante che otteniamo è che probabilmente esiste un importo di donazione non presente nell’elenco (ad esempio $1) e le persone cliccano su “Altro” per inserirlo manualmente.
Quindi, probabilmente conviene vedere cosa inseriscono le persone nella sezione “Altro”, trovare quelli più frequenti e aggiungerli alla lista delle opzioni.
#2: Scroll Map
Come suggerisce il nome, questo tipo di heatmap ti permette di analizzare il comportamento di scrolling degli utenti.
Le scroll map sono anch’esse codificate a colori secondo la scala delle temperature. Invece di evidenziare i punti in cui le persone cliccano, però, evidenziano intere sezioni della pagina in base al numero di utenti che sono arrivati a quel punto scorrendo, vedendo quindi quella sezione.
Proprio come per le altre heatmap, avrai colori caldi nelle aree viste da molti utenti e colori freddi dove lo scroll si ferma prima.
Come Si Usa Una Scroll Map
Le mappe di scorrimento sono ottime per ottimizzare la posizione di determinati elementi o sezioni sulla tua pagina e per risolvere problemi di utilizzo/coinvolgimento relativi a queste sezioni.
Esaminiamo un tipico caso di risoluzione dei problemi analizzando la mappa di scorrimento della pagina dei 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 perché, rispondono che l'altro strumento offriva una funzione di monitoraggio multi-obiettivo e tu no.
In realtà, il problema è che questa funzione ce l’hai anche tu, quindi ora devi capire perché le persone non la notano.
Guardando la mappa di scorrimento della tua pagina dei prezzi, noti che la grande maggioranza dei tuoi utenti non scorre la pagina. Poi scopri che la descrizione della funzione di monitoraggio multi-obiettivo si trova sotto la linea di galleggiamento e nella zona blu. Questo significa che solo pochi dei tuoi utenti scorrono fino a leggerla, come spesso avviene con le analisi del comportamento utente tramite scorrimento.
Problema individuato! Ora, per risolverlo, puoi considerare di aggiungere le funzionalità della sezione “Tutti i piani includono” come elementi extra nelle tue liste di piani tariffari - assicurandoti che appaiano sopra la linea di galleggiamento e siano subito visibili senza bisogno di scorrere.
#3: Mappe di Calore Hover
Note anche come move map, questo tipo di mappa di calore traccia la posizione del mouse - permettendoti di visualizzare il comportamento di “movimento” degli utenti sull’interfaccia.
Nella maggior parte dei casi, usando mappe di calore hover, si assume che gli utenti guardino probabilmente l’elemento su cui si trova il loro cursore. Quindi, monitorando il movimento del mouse, lo associamo a ciò che gli utenti osservano mentre navigano nell’interfaccia.
Dal punto di vista visivo, consiste in punti evidenziati (ancora una volta, secondo una scala cromatica a temperatura) sulle parti della UI in cui il cursore del mouse dell’utente è rimasto più a lungo. Inoltre, alcuni strumenti di heatmap ti mostreranno anche la “traccia” generale di dove gli utenti tipicamente iniziano e come si muovono attraverso l’interfaccia.
Ecco come appaiono queste tracce.
Questa è la mappa di calore del tracciamento del mouse di quella che probabilmente è una delle migliori interfacce UX al mondo: il sito web di Apple (in fondo, sono stati i primi designer UX della storia). Queste tracce mostrano che le persone iniziano ad esplorare la landing page di MacOS Snow Leopard esaminando prima il felino affascinante, poi leggendo il titolo, e successivamente procedendo con gli altri elementi della pagina.
Come utilizzare una Hover Map
Uno degli utilizzi interessanti di una mappa di movimento è l'identificazione delle distrazioni per l’utente.
Ad esempio, se sei responsabile dell’ottimizzazione della pagina dei risultati di ricerca su Amazon (il tuo obiettivo è che gli utenti clicchino su un prodotto trovato da Amazon), potresti guardare la mappa di calore hover e vedere che la maggior parte degli utenti va a guardare prima uno dei banner (ad esempio un annuncio), prima di concentrarsi sui risultati della ricerca.
Questa è una grande distrazione per i tuoi utenti e può ridurre le probabilità che clicchino sui risultati della ricerca. Quindi, potresti decidere di rimuovere quel banner, oppure renderlo meno visibile all’interno dell’interfaccia.
#4: Mappe di Calore dell’Attenzione
Finora abbiamo parlato di tre strumenti di analisi che permettono un’analisi visiva degli utenti - attraverso click, movimenti del mouse e scorrimento della pagina.
Anche se ognuno di questi strumenti può fornirci informazioni preziose, fare affidamento su uno solo potrebbe portarci fuori strada. Osservare il comportamento degli utenti in isolamento, senza un contesto adeguato, potrebbe non offrirci una visione sufficientemente ampia di ciò che accade davvero.
Per questo, i team di prodotto solitamente utilizzano contemporaneamente tutti questi tipi e combinano le informazioni raccolte da tutte e tre prima di analizzarle e trarne conclusioni. Tuttavia, questa soluzione non è perfetta, perché molto probabilmente dovrai impiegare 3 volte più tempo per svolgere l’analisi completa.
Fortunatamente, grazie all’avvento dei modelli di intelligenza artificiale e degli algoritmi avanzati, gli strumenti di visualizzazione delle mappe di calore più avanzati possono combinare le informazioni raccolte da click degli utenti, passaggi del mouse e scorrimento in un’unica mappa di calore.
Questo quarto tipo si chiama mappa di calore dell’attenzione perché mostra essenzialmente quali parti della UI ricevono più attenzione dagli utenti. Visivamente, è molto simile a una click map, con certi elementi dell’interfaccia evidenziati da diversi colori della palette cromatica della temperatura in base al livello di attenzione ricevuto.
#5: Mappe di Calore Geografiche
Le heatmap esistono da molto prima che le persone iniziassero ad applicare questa tecnica alle interfacce utente. Uno dei tipi tradizionali di heatmap più noti è stato il geo heatmap.
In questo caso, si evidenziano alcune parti 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 questo geo heatmap.
Nella mappa qui sopra, viene mostrato il numero di posti letto in hotel (principalmente rivolti ai turisti) per chilometro quadrato. Come possiamo vedere, la Corsica, le Alpi francesi e la Costa Azzurra sono chiaramente le vincitrici in questa categoria.
Come usare una heatmap geografica
Analizzare i set di dati turistici della Francia è interessante, ma queste heatmap possono aiutarmi ad analizzare il mio prodotto digitale? Lascia che ti mostri un esempio.
Restiamo sul tema del turismo (e della Francia) e immaginiamo che tu gestisca un servizio online di affitto a breve termine (qualcosa di simile ad Airbnb). Hai l'idea di realizzare e distribuire materiale promozionale per i festival locali nelle città francesi per far prenotare più persone gli hotel tramite il tuo servizio.
La prima domanda che ti verrà in mente è: da quale città/festival dovresti iniziare?
Per ottenere una risposta, puoi creare una mappa geografica che mostri la distribuzione delle case e degli appartamenti in affitto che utilizzano il tuo servizio.
Osservando la mappa, noterai che il tuo servizio è piuttosto popolare nel sud della Francia. Quindi, forse dovresti iniziare con la promozione dei festival della Provenza e della Costa Azzurra.
#6: Mappe dei Rage Click
Questa è una sottocategoria delle mappe di click che filtra e mostra solo i casi in cui i tuoi utenti hanno cliccato su qualcosa in preda alla frustrazione. Gli strumenti di heatmapping solitamente identificano un click come "rage click" (o dead click) quando l'utente continua a cliccare sullo stesso elemento più volte di seguito.
Come usare una mappa dei rage click
Le mappe dei rage click sono ottimi strumenti per individuare esperienze utente problematiche. Potrebbe essere qualcosa che sembra cliccabile e invece non lo è, non è intuitivo oppure semplicemente un pulsante non funzionante.
Ad esempio, se effettuassimo un'analisi dei rage click su una delle pagine di Iterate, sicuramente dovremmo rilevare rage click almeno in due punti – ecco perché:
Hai notato i due elementi di testo evidenziati in blu? Indovina un po', quelli non sono link. Sono semplicemente testi colorati di blu. Molti visitatori di Iterate (me compreso) hanno cercato di cliccare su questi elementi aspettandosi che portassero ad un'altra pagina.
Ovviamente, dopo averci cliccato sopra, non succederà nulla e questo può portare l'utente a frustrarsi e iniziare a "cliccare in preda alla furia".
La lezione da trarre dall'analisi della mappa dei rage click di questa pagina è assicurarsi, ad esempio, che il testo non assuma l'aspetto di un link. Puoi magari eseguire un test A/B con diversi colori per vedere se la tua ipotesi che il testo blu causi rage click è vera o falsa.
#7: Heatmap di eye-tracking
Finora abbiamo utilizzato le mappe hover per capire dove i nostri utenti stavano guardando quando navigavano la nostra pagina web. Facciamo un'ipotesi: gli occhi degli utenti guardano il cursore per la maggior parte del tempo. Pertanto, il movimento del cursore sull'interfaccia ti aiuta a comprendere cosa sta attirando l'attenzione visiva degli utenti.
Questo è un metodo comune per analizzare l'attenzione. Tuttavia, i dati forniti da queste heatmap non sono perfetti, perché non sempre l'utente guarda effettivamente il cursore.
Se vuoi avere dati precisi sulla posizione e sui numeri relativi a ciò che i tuoi utenti stanno guardando, dovresti invece considerare l'uso di una heatmap di eye-tracking.
A differenza degli altri metodi, le heatmap di eye-tracking richiedono che gli utenti indossino attrezzature specializzate in grado di tracciare i loro movimenti oculari e identificare la posizione degli elementi che stanno osservando.
Questo significa che dovrai invitare i tuoi utenti a sessioni di test speciali, far loro indossare questi tracciatori e iniziare a usare il tuo prodotto. Anche se è molto più dispendioso in termini di tempo e costoso, la qualità dei dati che otterrai da queste sessioni è di gran lunga superiore a qualsiasi altra che potresti ottenere da altri tipi di heatmap per siti web.
Come usare una heatmap eye-tracking
Considerando il costo dell’organizzazione di sessioni di test eye-tracking, probabilmente utilizzerai questa tecnologia solo nelle aree strategiche di ottimizzazione UX ad alto impatto.
Gli studi eye-tracking sono molto comuni per i prodotti delle grandi aziende tecnologiche, dove anche un miglioramento dell’1% nell’usabilità può tradursi in decine di milioni di entrate aggiuntive e ROI.
Immagina quanto ARR aggiuntivo potrebbe ottenere Amazon se eseguisse uno studio eye-tracking e posizionasse i banner dei prodotti in evidenza in modo da aumentare il tasso di conversione dell’1%.
#8: [Bonus] Confetti Map
Le confetti heatmap sono una sottocategoria delle normali mappe di click che mostrano i singoli clic invece di evidenziare semplicemente l’area più cliccata dagli utenti.
La bellezza dell’analisi dei clic singoli sta nella possibilità di filtrarli in base a diversi dati complessi.
Qui, ad esempio, abbiamo raggruppato i clic sul pulsante CTA di ricerca in base al giorno della settimana in cui è avvenuto il clic.
Dai dati risulta che il martedì si ottiene il maggior numero di clic, mentre le persone che visitano il lunedì sono le più distratte (tanti clic sparsi su tutta l’interfaccia).
Come usare una confetti heatmap
Le confetti heatmap sono particolarmente utili quando hai bisogno di analizzare il comportamento degli utenti a un livello molto dettagliato. A differenza delle tradizionali heatmap che mostrano dati aggregati, le confetti map permettono di filtrare i singoli clic in base a parametri come il tipo di dispositivo, la fonte di provenienza o persino l’orario della giornata.
Questo tipo di heatmap è ideale per individuare pattern che altrimenti passerebbero inosservati. Ad esempio, se il tuo pulsante di checkout riceve più clic il venerdì e molti meno il lunedì, potresti avere utenti che fanno acquisti d’impulso dopo lo stipendio, mentre il pubblico del lunedì sta ancora riprendendosi dal weekend e rimane a fissare la pagina dei prezzi invece di completare la conversione.
Le confetti map possono anche mettere in luce distrazioni inaspettate. Se gli utenti fanno clic ovunque sulla pagina anziché nei punti desiderati, potrebbero essere confusi — o semplicemente stanno disperatamente cercando un segnale di vita. Se il menu di navigazione riceve più clic della CTA, può significare che gli utenti sono persi e sperano di uscire invece che coinvolgersi. Puoi usare i risultati delle heatmap per perfezionare la tua mappa del percorso utente, specialmente quando cerchi punti di attrito. Filtrando per segmento utente, puoi scoprire quali gruppi hanno più difficoltà e dove serve rendere più fluida l’esperienza.
Le heatmap aumentano l’empatia verso l’utente
Ogni tipo di heatmap che abbiamo scoperto insieme qui ti può dare uno sguardo su come gli utenti esplorano e utilizzano i tuoi prodotti. Se lavori con risorse limitate, le heatmap offrono un modo veloce e leggero per condurre ricerca UX prima di investire in test di usabilità più approfonditi. Con il loro aiuto, sarai in grado di vedere e percepire le difficoltà che i tuoi utenti stanno sperimentando e potrai agire per risolverle.
Combinando le heatmap con i tool di product analytics, puoi ottenere un quadro più chiaro di come gli utenti interagiscono con il tuo prodotto e dove abbandonano. Per esempio, affiancare le heatmap ai tool di session replay ti dà sia il ‘cosa’ che il ‘perché’ dietro i comportamenti degli utenti.
Le heatmap sono utilissime, ma rappresentano solo uno degli strumenti che puoi usare per sviluppare empatia: se vuoi scoprire anche tutti gli altri, assicurati di iscriverti alla nostra newsletter.