Mappe di Calore del Mouse: 8 Modi in Cui Possono Migliorare il Tuo Prodotto
Scopri Cosa Fanno Davvero gli Utenti, Non Solo Cosa Dicono: Sondaggi e analytics raccontano solo una parte della storia. Le mappe di calore del mouse rivelano dove gli utenti esitano, si bloccano o interagiscono di più—aiutandoti a prendere decisioni basate sui dati con sicurezza.
Dai Priorità alle Correzioni e alle Funzionalità che Contano Davvero: Invece di indovinare cosa fare dopo, le mappe di calore evidenziano dove gli utenti trascorrono tempo (o si frustrano), offrendoti una direzione chiara su cosa richiede attenzione per primo.
Scopri Perché Gli Utenti Abbandonano—E Correggilo: Non tutti gli abbandoni sono uguali. Le mappe di calore mostrano se gli utenti mancano CTA fondamentali, hanno difficoltà con i campi dei moduli o si confondono—così puoi rimuovere gli ostacoli prima che lascino il tuo prodotto.
Trova Attriti Nascosti nel Tuo Funnel di Attivazione: Gli utenti cliccano dove non dovrebbero? Rimangono bloccati in passaggi chiave? Le mappe di calore evidenziano i colli di bottiglia, permettendoti di ottimizzare il percorso e aumentare le conversioni.
Probabilmente la parte più interessante e gratificante del lavoro di un product manager è imparare a conoscere il modo in cui gli utenti pensano e agiscono quando utilizzano i loro prodotti.
Per fare ciò, di solito conduciamo interviste agli utenti, eseguiamo sondaggi e analizziamo i nostri dati. Tuttavia, c’è anche un altro strumento prezioso nell’arsenale di un PM che può aiutarti ad entrare in empatia con i tuoi utenti: le heatmap dei movimenti del mouse!
Oggi voglio esaminare insieme a voi i casi d’uso pratici delle heatmap del mouse e gli utilizzi efficaci per migliorare il vostro prodotto.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Cosa sono le heatmap dei movimenti del mouse e come funzionano?
Una heatmap del mouse (nota anche come attenzione heatmap) è uno strumento di analisi dei prodotti che visualizza il modo in cui gli utenti interagiscono con la tua interfaccia tramite i movimenti del mouse. Crea una sovrapposizione visiva—tipicamente usando gradienti di colore—su uno screenshot della tua interfaccia utente per mostrare dove gli utenti passano sopra con il mouse, si muovono e cliccano più frequentemente.
Questo può aiutarti a identificare quali elementi attirano l’attenzione, dove gli utenti potrebbero esitare oppure cosa viene completamente ignorato. Le heatmap del mouse sono particolarmente utili se utilizzate insieme ad altri tipi di heatmap, come le heatmap di scorrimento, che catturano fin dove gli utenti scorrono la pagina.
Utilizzati insieme, questi strumenti offrono una visione più completa del coinvolgimento degli utenti: cosa vedono, cosa saltano e dove fluisce naturalmente la loro attenzione.
Varie tipologie di heatmap sono comunemente utilizzate da product manager e UX designer per ottenere insight sul comportamento degli utenti, tra cui scroll map, click map, mappe dell’attenzione degli utenti, heatmap per il tracciamento oculare e molti altri esempi di heatmap. Ogni tipo può offrire insight specifici per migliorare la retention degli utenti e il coinvolgimento, tuttavia oggi voglio approfondire un particolare tipo: la heatmap del mouse.
Una heatmap del mouse è ciò che si definisce un “aggregato” poiché include dati combinati da diversi tipi distinti di interazioni degli utenti: comportamento nei clic, comportamento nello scrolling e comportamento nei movimenti del mouse.
Le heatmap del mouse sono relativamente nuove nel mondo della visual product analytics perché unire i dati provenienti da questi tre diversi tipi di comportamenti in una sola visualizzazione è un compito difficile da realizzare, ed è stato l’avvento dei modelli di AI che ha permesso agli strumenti di analisi di farlo.
Casi d’uso reali di ottimizzazione del tuo prodotto con il mouse tracking
Avendo compreso in generale cosa sono queste heatmap, immergiamoci in alcuni casi reali in cui puoi fare qualcosa di davvero utile per il tuo prodotto osservando e analizzando le heatmap del mouse.
Come i product manager utilizzano le heatmap del mouse
Anche se analizzare le interazioni degli utenti può sembrare più adatto ai bisogni dei UX designer, i product manager possono utilizzare le heatmap del mouse per risolvere anche la loro serie di problemi. Ecco alcuni dei modi in cui ho usato questo strumento per migliorare i miei prodotti.
#1: Individuare i punti di strozzatura nel funnel di attivazione
Dalla mia esperienza nell’affrontare le sfide di attivazione, l’ottimizzazione del funnel è una delle responsabilità più complesse ma ad alto impatto di un product manager. Anche un modesto aumento del 10% nell’attivazione può creare un effetto a cascata all’interno del funnel, aumentando significativamente la conversione da Free a Paid.
Tuttavia, l’attivazione non è solo una questione di numeri: è un rompicapo che richiede profondi insight comportamentali, sperimentazione iterativa e la volontà di mettere in discussione le proprie ipotesi su come gli utenti interagiscono con il prodotto. La chiave non è solo spingere più utenti attraverso il funnel, ma capire davvero perché si interrompono nel percorso.
Per farlo, un product manager utilizzerà praticamente tutti gli strumenti a disposizione, inclusi analytics, sondaggi, ecc. Anche le heatmap del mouse fanno parte di questi strumenti. Ecco uno dei tanti modi in cui questi strumenti possono aiutare a migliorare l’attivazione.
Immagina di lavorare in Atlassian e di aver fissato come obiettivo trimestrale il miglioramento del tasso di configurazione di Jira Cloud.
Osservando il funnel di attivazione utilizzando il tuo strumento di analisi, scopri che c’è un notevole calo allo step in cui gli utenti digitano il nome della loro istanza Jira e creano il loro sito Atlassian.
Per capire cosa sia successo, potresti aprire il tuo tool di heatmap e osservare la heatmap del mouse. Quello che vedi è che gli utenti trascorrono molto tempo sulla pagina, cliccando attivamente sul campo del nome del sito e sul campo “Get Started In Jira”.
Questo non è un comportamento normale, poiché l’obiettivo è che le persone clicchino su ciascun campo una sola volta e che spendano non più di 10-15 secondi su questa pagina. Avvii un’indagine e chiedi al tuo team QA di verificare cosa sta succedendo.
Quello che il tuo team scopre è che, per un certo gruppo di utenti, il validatore del nome del sito (che controlla se il nome esiste già) restituisce un errore indipendentemente da cosa si digiti.
Il motivo è che un Google Recaptcha invisibile pensa che questi utenti siano bot. Così, per risolvere il problema, parli con il tuo team di sicurezza, scopri che la soglia di sicurezza del recaptcha è più alta di quanto necessario e la abbassi.
Di conseguenza, sblocchi i tuoi utenti, permettendo loro di creare il loro sito e migliorando notevolmente il tasso di attivazione.
#2: Aiutare con la Prioritizzazione delle Funzionalità
Quando si tratta di dare priorità alle funzionalità, il fattore singolo più importante che consideri è l’impatto che tale funzionalità ha sui tuoi utenti. Misuri questo impatto in base ai dati, alla tua conoscenza dei bisogni degli utenti (tramite sondaggi e interviste), al tuo intuito e al modo in cui gli utenti interagiscono con la tua interfaccia.
È qui che le heatmap del mouse tornano utili.
Tornando al nostro esempio di Jira. Supponiamo che tu voglia migliorare il modo in cui le persone organizzano il backlog e ci siano più di 20 idee di funzionalità a riguardo. Per dar loro priorità sulla base delle necessità degli utenti, esamini la heatmap della pagina del backlog. Dopo il controllo, noti che c’è molta attività nella sezione dei filtri rapidi.
Quindi, vai sul tuo strumento di analytics ed estrai un grafico di distribuzione dei filtri rapidi che i tuoi utenti applicano più frequentemente. Osservando questi dati, scopri che circa il 50% di tutti gli utenti Jira crea un filtro rapido che mostra le attività con "Stato Da Fare".
Un ottimo modo per migliorare l’esperienza dei tuoi utenti sarebbe, in questo caso, aggiungere un pulsante filtro dedicato agli stati. Supponiamo che questa idea fosse già nella tua lista di miglioramenti: allora puoi sfruttare questo insight per darle una priorità più alta e spostarla in cima al backlog del tuo team.
#3: Ottimizzazione del Tasso di Conversione
In termini di complessità, l’ottimizzazione del tasso di conversione (CR) può facilmente competere con i funnel di attivazione. Ho passato mesi ad analizzare il CR e metriche simili dei miei prodotti, aggiungendo funzionalità per migliorarlo, rendendomi conto che non funzionano, aggiungendo qualcos’altro e ripetendo questo ciclo finché non costruisco qualcosa che effettivamente aumenta il tasso di conversione.
Proprio come per l’attivazione, le heatmap del mouse sono uno strumento efficace per analizzare le sfide di conversione dei tuoi prodotti.
Nella maggior parte dei casi, il principale vantaggio di questo strumento è identificare i casi in cui le persone cliccano sulle CTA sbagliate e ignorano quelle che portano alla conversione. Lascia che te lo mostri sulla pagina prodotto di un negozio di attrezzature per cucine professionali.
Immagina di analizzare la heatmap di questa pagina web. Molto probabilmente, noterai che un certo numero di persone clicca sul pulsante “Chat Now” sopra la call to action principale (visualizza prodotto). Capisco, l’azienda l’ha aggiunto per convincere gli utenti che i loro prodotti sono i più economici sul mercato.
Tuttavia, il problema qui è che cliccare su “Chat Now” interrompe il percorso dell’utente che sta valutando e acquistando il prodotto, riducendo in modo significativo il tasso di conversione.
Il mio consiglio in questo caso sarebbe di spostare questo messaggio e CTA in una parte meno visibile della pagina così da non interrompere il percorso utente.
#5: A/B Testing per Validare le Funzionalità
Un’altra applicazione utile delle heatmap del mouse è la validazione delle funzionalità tramite A/B test. In questo contesto, le heatmap forniscono una preziosa fonte di dati perché mostrano visivamente i miglioramenti (o meno) nel modo in cui gli utenti interagiscono con la tua funzionalità.
Quello che fai in questi casi è condurre un A/B test con la funzionalità attiva per una variante A e disattiva per la variante B. Ti assicuri poi che il tuo strumento di heatmapping tracci le interazioni degli utenti su entrambe le varianti, così da poter fare un confronto affiancato della heatmap del mouse di ciascuna.
Osservandole, puoi facilmente individuare i cambiamenti nel comportamento degli utenti e vedere se la tua nuova funzionalità ha avuto l’impatto sperato.
Un esempio potrebbe essere l’aggiunta di un pulsante “Scarica tutto” sulla pagina file browser del tuo prodotto di cloud storage. Se le persone iniziano a interagire attivamente con quel pulsante anziché scaricare manualmente ogni singolo file nel loro spazio, allora la nuova funzionalità sarà un successo.
Come Usano le Heatmap del Mouse gli UX Designer
Le heatmap sono uno strumento fantastico per analizzare le interazioni degli utenti. Per questo motivo, le considero indispensabili nell’arsenale di ogni designer UX. Di seguito trovi alcuni modi in cui il mio team UX ha utilizzato le heatmap del mouse per migliorare i loro progetti.
#6: Migliorare il Tasso di Completamento dei Moduli
Indipendentemente dal tipo di prodotto che offri, avrai quasi sicuramente almeno un modulo nel tuo funnel di attivazione o monetizzazione. Inoltre, secondo la mia esperienza, è molto probabile che perderai utenti/conversioni proprio nello step del funnel in cui viene richiesto di compilare questo modulo.
La ragione principale per cui li perdi è spesso un'esperienza utente poco soddisfacente che li lascia annoiati o frustrati. Per capire se questo accade con il tuo modulo e risolvere il problema, i designer di prodotto eseguono test di usabilità e osservano da vicino il comportamento degli utenti. Il problema di questi test, però, è che richiedono molto tempo e risorse.
L’analisi dei moduli tramite heatmap del mouse, invece, può identificare una parte significativa dei problemi di usabilità a una frazione del costo.
Ad esempio, se noti un alto tasso di abbandono del modulo di registrazione in fase di checkout e osservi la heatmap, potresti scoprire che c’è molta attività del mouse nei primi campi, ma poi l’attività cala di colpo nel campo “numero di telefono”.
Questo potrebbe indicare che le persone non sono a loro agio nel condividere il proprio numero di telefono e che dovresti considerare un modo alternativo per identificarle.
#7: Risolvere i Problemi di Navigazione
A volte la diminuzione nella scoperta e nell’utilizzo delle tue funzionalità o delle sezioni del tuo sito web è dovuta al fatto che gli utenti non riescono a trovarle sulla tua piattaforma.
Se sei un negozio eCommerce che ha appena iniziato a vendere scarpe sportive professionali (ad esempio, per la lotta, basket, ecc.), ovviamente aggiungerai una nuova sezione sotto la tua navigazione esistente e penserai di aver concluso.
Tuttavia, immagina che il traffico verso la sezione scarpe sportive sia molto inferiore alle tue aspettative. Dopo aver esaminato la heatmap del mouse, potresti vedere che pochissime persone passano con il mouse su quella sezione sportiva nella tua navigazione.
Da un lato, questo potrebbe essere dovuto a scarso interesse nei confronti delle scarpe sportive. Dall’altro, le persone potrebbero non aver notato la nuova voce perché l’elenco dei tipi di scarpe nel menu di navigazione è piuttosto lungo.
Sebbene abbia molto senso mantenere le tue sezioni organizzate, quando aggiungi qualcosa di nuovo dovresti posizionarlo in modo evidente (almeno inizialmente). Quindi, un designer UX potrebbe valutare di mettere questa nuova sezione direttamente nella barra di navigazione principale. In alternativa, potrebbe lasciarla nella posizione attuale ma aggiungere un tag “novità” per attirare più attenzione.
#8: Migliorare la Leggibilità
Questo caso è particolarmente rilevante per i blog o altre risorse con contenuti lunghi. Talvolta il modo in cui hai progettato il testo può penalizzare la leggibilità — portando gli utenti ad abbandonare l’articolo.
Proprio come nei precedenti casi d’uso, questo è qualcosa che puoi diagnosticare con le heatmap del mouse. Ad esempio, se osservando la heatmap noti che le persone tengono il cursore sopra ogni riga del testo, è possibile che la sezione di testo sia troppo larga perché riescano a seguire le righe solo con lo sguardo (e quindi usano invece il mouse come guida per non perdere la riga).
Software di Heatmap da Prendere in Considerazione
Ora che abbiamo coperto casi d’uso pratici delle heatmap del mouse, vorrei parlarti anche dei diversi software di analisi heatmap che offrono questo strumento e mostrarti le differenze nel loro approccio.
Hotjar
Hotjar non offre una vera e propria heatmap del mouse. Piuttosto, suddivide le informazioni che si trovano in una tipica heatmap del mouse in diversi tipi di mappe. Nello specifico, ci sono mappe dei clic del mouse, mappe di scorrimento, heatmap dei movimenti del mouse e heatmap dei rage click. Ecco come appare la sua mappa dei movimenti.
Sebbene avere mappe separate possa sembrare scomodo a prima vista, queste sono molto migliori nel fornire dati più dettagliati per ciascun tipo di interazione (ad esempio, lo scroll).
Inoltre, offrono anche funzionalità aggiuntive, come il conteggio in tempo reale dei visitatori sul sito web, la riproduzione delle sessioni, la rappresentazione visiva delle zone di coinvolgimento nel layout della pagina, ecc.
Crazy Egg
Con Crazy Egg, ottieni una heatmap che include set di dati sia dai clic degli utenti sia dai movimenti del mouse. Grazie ai loro algoritmi proprietari, possono combinare questi due diversi tipi di interazioni in una sola mappa che mostra le aree generali di interesse per i tuoi utenti.
Rispetto a Hotjar, si ha una granularità leggermente inferiore. Tuttavia, questo tipo di heatmap combinata è molto utile quando il tuo obiettivo è avere una panoramica di come gli utenti interagiscono con la tua UX invece che identificare le esatte posizioni dei clic, la profondità di scroll, ecc.
Proprio come Hotjar, anche con Crazy Egg hai a disposizione le registrazioni delle sessioni e altre capacità di analisi.
Mouseflow
Come Hotjar, Mouseflow ti fornisce 6 diversi tipi di heatmap per il tracciamento del mouse, invece di una sola mappa combinata. Ottieni le tipologie classiche, incluse quelle per clic, hover e scroll.
Inoltre, Mouseflow offre anche un tipo speciale di heatmap che raramente trovi su queste piattaforme: la heatmap geografica.
Invece di visualizzare le interazioni degli utenti sulla tua UX, questa heatmap mostrerà la mappa del mondo e metterà in evidenza le parti del mondo da cui ricevi il maggior numero di utenti (e interazioni).
Da aggiungere assolutamente a interviste con utenti e test di usabilità
Ritengo che le interviste agli utenti siano l’attività di gran lunga più preziosa che svolgono i product manager. Ma, proprio come i test di usabilità, sono piuttosto dispendiose in termini di tempo.
Quindi, considera l’utilizzo delle heatmap dei movimenti del mouse come una fantastica (ed economica) alternativa per ottenere risposte ad alcune delle domande più semplici che hai sui tuoi clienti, riservando invece il tempo prezioso delle interviste alle questioni più complesse.
Cerchi altri modi per migliorare i tuoi prodotti? Aggiorna competenze e conoscenze in questa affascinante professione iscrivendoti alla nostra newsletter. Resterai aggiornato sui più recenti argomenti di product management con i nostri contenuti educativi di alto livello e le nostre liste di software.