Heatmaps 101: L’eroe di cui ogni designer UX ha bisogno
Le heatmap e le registrazioni delle sessioni sono diventate uno degli argomenti più discussi nella comunità del design. Mentre alcuni professionisti mettono in dubbio il rispetto della privacy, altri ritengono che il funzionamento delle heatmap sia perfettamente sicuro e tuteli la privacy e i dati degli utenti.
C’è però una cosa su cui tutti concordano: il valore che tu (UX designer) ottieni dall’utilizzo di uno strumento di heatmapping.
Oggi vorrei che esplorassimo insieme questo argomento e capire come puoi usare le heatmap per migliorare il modo in cui costruisci le esperienze utente.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Di Cosa Si Tratta Quando Parliamo di Heatmap?
Le heatmap sono strumenti di tracciamento e visualizzazione dei dati che puoi utilizzare per capire come il tuo pubblico di riferimento interagisce con il tuo prodotto o sito web.
Le heatmap sono grafici bidimensionali che evidenziano determinate parti di un’area con determinati colori per trasmettere informazioni utili. Ad esempio, il comune di Helsinki ha recentemente lanciato una mappa in tempo reale che mostra quali parti della città sono più affollate.
Per visualizzare il numero di persone in determinati quartieri, hanno creato una heatmap della città.
Più persone ci sono in una determinata zona della città, più “calda” viene evidenziata sulla mappa. Se non c’è nessuna evidenziazione, significa che il quartiere in questione non è affollato.
Come strumenti di visualizzazione, le heatmap sono piuttosto versatili. Quindi, oltre a visualizzare i “punti caldi” su una mappa reale (come nel caso di Helsinki o le mappe meteo che vediamo in TV), puoi anche sovrapporle alla tua interfaccia utente.
In questo caso, puoi evidenziare le parti della tua interfaccia con il maggior numero di interazioni degli utenti. Puoi poi abbinarle alle registrazioni delle sessioni per un’analisi dettagliata del customer journey e della UX che ti aiuterà a:
- Ottenere preziose informazioni su come gli utenti interagiscono con il tuo sito web o la tua app mobile.
- Capire cosa puoi fare per attirare meglio l’attenzione dei tuoi utenti.
- Individuare nuove opportunità per ottimizzare la UX e migliorare i tuoi indicatori chiave (aumentare il tasso di conversione, il CTR sui pulsanti di call-to-action, ecc.).
Quindi, le heatmap sono uno strumento utilissimo sia per i designer UX che per i product manager per studiare come gli utenti interagiscono e per migliorare i loro prodotti.
Strumenti di Heatmap Popolari
Vediamo ora come puoi creare una heatmap per il tuo prodotto. Sul web abbondano gli strumenti di analytics in grado di tracciare le interazioni degli utenti sulla tua interfaccia e mettere in evidenza gli elementi di pagina che hanno maggiore attenzione.
I più conosciuti includono Hotjar, Mouseflow, Fullstory, Crazy Egg e altri ancora.
Ma non voglio entrare troppo nel dettaglio, perché abbiamo già preparato una lista curata di strumenti di heatmap che puoi consultare.
4 Tipi Chiave di Heatmap per i Designer di Prodotto
Quello che chiamiamo “heatmap” non è un singolo tipo di visualizzazione che usi per analizzare la UX. In realtà, “heatmap” è un termine ombrello per diversi strumenti visuali che si basano sullo stesso principio generale: evidenziare determinate aree della UX con colori diversi.
Non voglio che passiamo in rassegna tutti i vari tipi di heatmap, dato che molti sono praticamente inutili per product e UX designer. Invece, vediamo quattro tipi che il mio team di design ha trovato più utili.
1. Click Map
I click map sono probabilmente ciò che ti viene in mente subito quando pensi alle heatmap. Sono il tipo di heatmap più diffuso e lo troverai praticamente in tutti gli strumenti di heatmapping e analytics (tranne che in Google Analytics e alcuni strumenti basati su eventi).
Un clickmap (o click heatmap) ti mostra su cosa hanno cliccato gli utenti nella tua interfaccia (ad esempio sulla homepage del sito). Visualizzano l’attività di clic del pubblico evidenziando le aree interessate con una codifica a colori per indicare quali parti della UX sono “calde” o “fredde”.
Ecco come appare il clickmap della pagina carriera di Hotjar.
Analizzando il clickmap qui sopra, possiamo vedere quanto segue:
- Un'area "calda" rossa vicino alla principale CTA - "Visualizza offerte di lavoro aperte".
- Un po' di attività "tiepida" (gialla) attorno al pulsante con la freccia a destra che cambia l'immagine in evidenza sulla pagina.
- Un po' di attività (blu) anche sulla freccia a sinistra.
Il resto dello schermo non ha alcuna evidenziazione, il che ci dice che è "freddo" e nessuno ha cliccato in quelle aree.
L’evidenziatura "calda" sulla principale CTA, invece, ci fa capire che molti utenti (probabilmente la maggior parte, a giudicare dall’"intensità") ci stanno cliccando sopra. Poi ci sono le aree tiepide attorno ai pulsanti freccia, che ci indicano che una piccola parte di utenti sta anche navigando tra le immagini in evidenza.
Come usare le heatmap di questo tipo? Test A/B delle tue CTA!
Ebbene, ci sono molteplici casi d’uso per le mappe dei clic. Puoi usarle, ad esempio, per capire l’efficacia della posizione della tua CTA, del testo, ecc. Io e i miei Product Designer, però, adoriamo usare le heatmap per un motivo diverso: fare test A/B sulle CTA e altri elementi di design.
Lasciami illustrare questo caso d’uso con un esempio. Immagina di essere responsabile dell’applicazione web di ChatGPT e di avere un problema con gli utenti che non creano nuove chat, continuando a parlare con l’AI nella stessa istanza di chat.
Guardando la heatmap, vedi che il pulsante "Nuova chat" in cima alla barra laterale è freddo (nessuna evidenziazione).
Assumi rapidamente che il motivo sia il colore della CTA, che è lo stesso dello sfondo della barra laterale. Decidi quindi di eseguire un test A/B, dove nella variante A cambi il colore di sfondo in verde e nella variante B lo lasci invariato.
Dopo che un certo numero di utenti ha interagito con entrambe le varianti, puoi aprire la heatmap dei clic di ciascuna e fare un confronto diretto per vedere quale versione mostra un pulsante "Nuova chat" più "caldo".
A quel punto scegli la variante in cui la CTA ha ottenuto più clic in base all’analisi della heatmap.
2. Scroll mappe
Mappare i clic degli utenti è utile, ma non sempre basta per raccontare tutta la storia.
Per esempio, se la tua click map mostra che hai un pulsante poco performante da qualche parte in fondo allo schermo, non significa necessariamente che ci sia un problema con il testo, il colore o altri fattori legati alla CTA. Forse, invece, la tua CTA è anche valida, ma le persone semplicemente non scorrono la pagina per vederla.
È qui che entrano in gioco le scroll mappe (o scroll heatmap). A differenza del tipo precedente, che evidenzia i clic degli utenti sulla tua UI, le scroll mappe mostrano il tempo che gli utenti trascorrono in ogni sezione della tua UI e il loro comportamento di scorrimento.
A seconda del tempo trascorso su ciascuna sezione, la pagina sarà evidenziata in rosso (molto tempo speso), arancione/giallo (tempo moderato), e verde/blu (poco tempo).
Lascia che ti mostri un altro esempio di Hotjar.
L'immagine che vediamo sopra rappresenta una delle vecchie versioni della pagina "chi siamo" di Hotjar. Guardando i dati della scroll heatmap di questa pagina, possiamo concludere che:
- Tutti gli utenti hanno visto la parte superiore della pagina (evidenziata in rosso). Ovviamente, vero?
- Poi vediamo che circa il 75% di loro ha scrollato un po’ verso il basso per vedere i loghi delle aziende che usano Hotjar (la sezione dei loghi è gialla).
- Infine, il fondo della pagina è verde, cioè solo una parte degli utenti è arrivata fino lì scorrendo. La linea appena sopra il logo Glassdoor ci dice che solo il 57% degli utenti ha scrollato fino a quel punto.
Questo era un caso classico dove la parte superiore è rossa, la parte centrale è gialla e il fondo verde. Nella realtà, tuttavia, puoi vedere scroll map in cui una sezione specifica nelle parti inferiori dello schermo ha ottime prestazioni (ad esempio, la sezione dei piani tariffari) mentre gli utenti ignorano i contenuti sopra e sotto.
Come i product designer usano le scroll mappe: ottimizzazione dei contenuti
Come le click mappe, anche le scroll mappe sono strumenti versatili e puoi usarle per diversi motivi. Tuttavia, l’utilizzo più diffuso è ottimizzare la posizione dei contenuti.
Come ho già detto, ad esempio, le sezioni dei prezzi ottengono ottimi risultati nella tua pagina web. Significa che le persone scorrono velocemente i contenuti, poi notano la sezione prezzi, si fermano, la leggono e continuano lo scroll.
Questo comportamento ci consente di posizionare strategicamente la sezione dei prezzi a metà o in fondo alla pagina. Lo facciamo per assicurarci che le persone scorrano tutta la pagina (e si accorgano di alcuni messaggi importanti che abbiamo per loro), prima di trovare le informazioni sui nostri piani tariffari.
La nostra strategia qui è simile a quella dei supermercati quando posizionano prodotti lattiero-caseari e da forno. Entrambi sono articoli che si acquistano piuttosto frequentemente. Così, li collocano ai lati opposti dell'edificio, costringendoti a percorrere tutto il supermercato per raggiungerli.
La logica è che molto probabilmente noterai altri prodotti sugli scaffali e li acquisterai mentre ti dirigi verso il reparto latticini.
3. Mappe di Movimento
Le mappe di scorrimento ti danno una panoramica ad alto livello delle sezioni che i tuoi utenti stanno guardando. Le mappe di clic, invece, sono più dettagliate e ti dicono su quale elemento esatto l’utente ha cliccato.
C’è però bisogno di qualcosa di “intermedio” che ti permetta di sapere come le persone navigano tra le informazioni e gli elementi dell’interfaccia utente all’interno di una sezione specifica della tua pagina.
Ed è qui che puoi sfruttare le mappe di movimento. Come suggerisce il nome, questo tipo di heatmap tiene traccia dei movimenti del cursore del mouse attraverso la tua interfaccia.
Come per le altre mappe, le aree dell’interfaccia vengono evidenziate con una gamma di colori (dal blu al rosso), dove il blu indica poco movimento del mouse in quella zona (e il rosso molto movimento).
Vediamo come appare in un articolo del blog.
La mappa qui ci mostra che una piccola parte di utenti passa il mouse sul titolo e sul primo header dell’articolo. La maggioranza, però, tiene il cursore vicino all’area di ricerca nell’angolo in alto a destra.
Come i Product Designer Usano le Mappe di Movimento: Tracciare l'Attenzione su Certi Elementi
È piuttosto comune che alcune parti della nostra UI non siano cliccabili, ma siano comunque molto importanti, e vogliamo assicurarci che i nostri utenti le abbiano viste.
Un esempio può essere la nostra lista di funzionalità sulla pagina dei prezzi. Potremmo voler capire a quali funzionalità gli utenti hanno prestato più attenzione quando hanno esaminato la nostra tabella dei prezzi.
Per questo possiamo sfruttare l'abitudine umana di passare il mouse sopra ciò che stiamo leggendo/scorrendo in quel momento e creare una mappa dei movimenti del mouse che ci dirà quali funzionalità vengono osservate di più dagli utenti nella nostra pagina dei prezzi.
4. Mappe di Rage Click
Ci sono clic ordinari, e poi ci sono i rage click.
Questo accade quando le carenze della tua UX portano gli utenti a innervosirsi e a cliccare in modo frenetico e ripetuto su uno degli elementi della tua UI perché:
- Pensano che sia qualcosa di cliccabile, ma non lo è.
- È cliccabile, ma il tuo prodotto non fa nulla dopo che l’utente ci ha cliccato sopra.
La ragione principale dietro il primo caso è la progettazione di elementi UI che non sono bottoni o link ma sembrano tali.
Per quanto riguarda il secondo caso, potresti ritrovarti davanti a:
- Un bug/crash che ha impedito al tuo prodotto di eseguire l’azione che quel bottone avrebbe dovuto effettuare.
- Tutto funziona correttamente, ma manca un feedback UX. Quindi anche se l’utente ha ottenuto ciò che voleva grazie al tuo bottone, non glielo hai segnalato.
- Il tuo prodotto sta lavorando per eseguire l’azione richiesta dall’utente, ma è lento. Gli utenti si innervosiscono o non hai fatto sapere loro che il lavoro è in corso.
Mentre le mappe dei clic ordinari rileveranno anche i rage click (in fondo sono sempre dei clic), non potrai distinguere i rage click dai tuoi normali clic. Finirai per trarre conclusioni errate dai tuoi dati.
Ad esempio, se il tuo bottone non funziona e la gente ci fa rage click sopra, la mappa dei clic ordinari ti farà pensare che quella funzione venga usata attivamente, mentre la realtà è l’esatto opposto.
Visivamente, le mappe di rage click sono identiche a quelle dei clic ordinari. L’unica differenza è che avere tante aree rosse nella mappa dei clic ordinari è positivo, mentre sulla mappa dei rage click è una cattiva notizia.
Come i Product Designer Usano le Mappe di Movimento: Individuare una Cattiva UX
Non esiste un prodotto con una UX perfetta. Ci sono sempre elementi o esperienze pessime (anche se pensi di no).
Le mappe di rage click sono ottime per aiutarti a identificare diversi tipi di queste esperienze negative, incluso un cattivo feedback UX, un design errato degli elementi e altro ancora.
Le Heatmap Sono le Migliori Amiche dei Designer UX
In base alla mia esperienza e a quella del mio team di product design, le heatmap di un sito sono fra gli strumenti più utili per eseguire test di usabilità e studiare i comportamenti degli utenti.
Con il loro aiuto, puoi ottenere informazioni quantitative (incluso come vengono utilizzate su dispositivi desktop e mobili) sull'efficacia del tuo design web.
Successivamente puoi analizzare queste informazioni e individuare le lacune nel tuo design e nella funzionalità che devi colmare, per assicurarti che il tuo prodotto, sito web, piattaforma e-commerce o landing page sia facile da usare.
Non dimenticare di iscriverti alla nostra newsletter per altre risorse e guide sulla gestione di prodotti, oltre a podcast, interviste e altri approfondimenti dagli esperti e leader del settore.
