Come usare le heatmap per migliorare l'UX: i 5 modi per iniziare

Ci sono diversi fattori che influiscono sull'esperienza utente, che vanno dal design della pagina all'usabilità del sito. Capire qual è l'esatta causa del problema con l'UX, è però un'impresa piuttosto ardua.

Le heatmap (che alcuni chiamano anche "mappe di calore") ti permettono di ottenere una rappresentazione grafica delle principali interazioni degli utenti, di raccogliere in tutta semplicità insights concreti e di assicurarti così che il sito offra un'eccellente UX lungo l'intero user journey.

Se ti occupi di UX, di marketing o di sviluppare nuove funzionalità, il tutto allo scopo di migliorare l'esperienza utente, le heatmap possono aiutarti a raccogliere dati per capire come gli utenti interagiscono con il sito web e sfruttare questi insights per migliorare l'UX e le metriche chiave per la tua attività.

Che cos'è una heatmap?

Una heatmap è una rappresentazione grafica di dati che mostra come gli utenti navigano su una pagina, dove cliccano e fino a che punto scorrono. Il suffisso "heat" (calore) deve il suo nome alla scala cromatica che viene usata: il rosso rappresenta le aree più frequentate (calde) della pagina e il blu quelle meno usate (fredde).

Aree di coinvolgimento "calde" e "fredde" rappresentate graficamente in una heatmap di scorrimento (a sinistra) e in una heatmap dei clic (a destra)

Le tipologie di heatmap

Puoi raccogliere dati per le heatmap su qualsiasi pagina del sito web, sia su PC che su dispositivi mobili e visualizzarli usando diverse modalità:

• Le heatmap dei clic mostrano i punti in cui gli utenti fanno clic con il mouse (o, nel caso dei dispositivi mobili, dove fanno tap)

• Le heatmap di scorrimento mostrano il punto fino a dove gli utenti scorrono in una pagina

• Le heatmap di movimento mostrano come gli utenti muovono il cursore del mouse (senza cliccare)

• Le heatmap dei rage click mostrano le aree che causano frustrazione nell'utente

• Le aree di coinvolgimento permettono di avere una visione d'insieme del comportamento degli utenti

• Le heatmap a zone permettono di capire come gli utenti interagiscono con ogni elemento del sito web

Una heatmap a zone di Contentsquare che permette di attribuire le vendite a specifici elementi

I 5 metodi per usare le heatmap per valutare l'UX

Ecco i cinque metodi principali per sfruttare le diverse tipologie di heatmap per raccogliere dati sull'UX, confermare le proprie teorie e individuare le opportunità di ottimizzazione del sito o del prodotto.

1. Dimostra le performance dei migliori design

Le tue pagine web potrebbero sembrare impeccabili già al primo colpo d'occhio, ma le heatmap ti permettono di dimostrare la loro efficacia a clienti e colleghi.

Le heatmap sono facili da capire e ti aiutano spiegare il tuo lavoro a chi non fa il designer, per ottenere l'approvazione necessaria per le proposte di riprogettazione di un sito web oppure per mostrare quanto è efficace un design UX. Questo aspetto è particolarmente utile se vuoi migliorare le performance delle pagine.

Sara Parcero-Leites, Customer Knowledge Manager presso Spotahome, una piattaforma online per l'affitto d'immobili a medio e lungo termine, usa le heatmap per assicurarsi che il suo team sia consapevole delle aree UX da migliorare.

Durante i meeting, che sono organizzati in maniera regolare, Sara fa vedere 3 o 4 heatmap interessanti e insights ricavati da altri tool (come ad esempio gli strumenti di registrazione delle sessioni), per favorire il dibattito e la collaborazione.

Sara ci ha riferito che la maggior parte degli sviluppatori e dei product manager non aveva mai visto in che modo gli utenti interagissero con le funzionalità sviluppate, prima che iniziasse a organizzare questo tipo d'incontri e mostrare rappresentazioni grafiche ricavate dai dati delle heatmap. Adesso non c'è meeting che non si concluda senza informazioni illuminanti e una lunga lista di bug da risolvere.

2. Scopri su quali CTA gli utenti cliccano di più (o di meno)

Le CTA (call to action) sono inviti all'azione per gli utenti, di solito sotto forma di pulsanti e link, e possono essere progettate appositamente per attirare clic e aumentare le iscrizioni o le vendite.

Le heatmap dei clic mostrano su quali CTA gli utenti cliccano più spesso e quali invece vengono ignorate. Potrebbe essere un modo per scoprire che ci sono altri elementi della pagina che distraggono gli utenti e che non gli permettono di notare la CTA a cui ti piacerebbe dare più importanza e individuare opportunità per testare una nuova CTA in un'area che attira più utenti.

Per fare un esempio, Conan Heiselt, UX designer presso Techsmit, un'azienda che si occupa di software, durante la presentazione al suo team di strumenti di experience intelligence, ha scoperto che gli utenti non interagivano con le CTA dei prodotti come previsto: la rivelazione è giunta mentre osservavano una heatmap dei clic.

Conan e il suo team, dopo aver inserito una heatmap dei clic sulla pagina dei servizi, hanno notato che diversi utenti ignoravano i pulsanti di testo delle CTA e preferivano cliccare sulle immagini dei prodotti. Quando è arrivato il momento di riprogettare la pagina, hanno deciso di rendere cliccabile l'intera area. Le prove concrete raccolte da una sola heatmap dei clic hanno permesso al team di fornire agli utenti un'esperienza più intuitiva.

3. Misura fino a che punto gli utenti scorrono sulla pagina

Non tutti gli utenti che navigano sul tuo sito web scorrono fino alla fine di ogni pagina, con la conseguente perdita d'informazioni importanti. Inoltre, i visitatori accedono al sito da dispositivi e browser diversi, quindi non tutti vedono esattamente le stesse informazioni "above the fold" (la parte della pagina web immediatamente visibile senza scorrere).

Questa heatmap di scorrimento mostra la parte visibile media e la maggior parte degli utenti vede solo l'area rappresentata in rosso

I tool che permettono di creare le heatmap di scorrimento ti fanno vedere dove si trova la parte visibile media sui dispositivi mobili e su PC, così da posizionare le informazioni essenziali e le CTA dove vengono viste dalla maggior parte degli utenti. Questo è anche il metodo per scoprire fino a che punto gli utenti scorrono la pagina e spostare gli elementi importanti verso l'alto, per farli vedere a un maggior numero di persone.

Non dimenticare che, da soli, i dati di scorrimento non sono sufficienti: comparali con le heatmap dei clic per ottenere una panoramica e capire a che punto gli utenti perdono interesse nella pagina.

Con Heatmaps di Contentsquare non c'è nessun bisogno di saltare spasmodicamente da una heatmap all'altra: la heatmap a zone ti presenta una rappresentazione grafica semplificata dei dati, combinando quelli relativi ai clic, al movimento del cursore e allo scorrimento in un'unica schermata, per capire perfettamente quali sono i punti della pagina con cui gli utenti interagiscono maggiormente.

Con le heatmap a zone di Contentsquare puoi scoprire quali sono le aree della pagina con maggiore user engagement

4. Individua i clic problematici

A volte gli utenti cliccano su elementi (ad esempio, immagini o titoli) che ritengono essere link. Anche se c'è la possibilità che i clic in questione siano semplici errori, le heatmap raccolgono un numero sufficiente di dati per ignorare eventuali anomalie e mostrarti i pattern più comuni nel pubblico di riferimento.

Osservando la heatmap dei clic, è possibile individuare tutte le volte in cui gli utenti cliccano su punti in cui non c'è niente da cliccare e risolvere tale problema aggiungendo link o apportando modifiche agli elementi non importanti, in modo da renderli meno cliccabili.

Durante questa operazione, potresti anche trovare bug sul sito o errori di progettazione che portano a momenti di frustrazione per gli utenti e li spingono ad abbandonare il sito. Per osservare tale fenomeno, c'è una heatmap ad hoc: la heatmap dei rage click di Contentsquare. Questa ti permette di visualizzare gli elementi che causano attrito, facendoti vedere con i tuoi occhi quali sono i punti in cui gli utenti cliccano ripetutamente in un breve periodo di tempo. Questo è lo strumento perfetto per evitare seccature agli utenti durante la navigazione del sito.

5. Ottimizzazione per dispositivi mobili e PC

Il responsive web design (pagine che si adattano allo schermo dell'utente) è un metodo rapido ed efficiente per fornire contenuti a tutti gli utenti, ma è importante tenere sempre in mente che se su PC il testo appare come un paio di righe, su mobile potrebbe invece richiedere all'utente di scorrere a lungo.

Confrontando le heatmap dei dispositivi mobili e quelle su PC, è possibile individuare eventuali differenze di comportamento degli utenti e verificare se quelli che usano l'applicazione ignorano le CTA o altri elementi importanti. In tal caso, potrebbe essere necessario progettare interfacce diverse per la versione mobile e quella per PC, in modo da renderle intuitive e garantire che l'UX sia efficace su qualunque dispositivo.

Per Materials Market, un sito che mette in contatto fornitori di materiali da costruzione con clienti in tutto il Regno Unito, l'uso delle heatmap per ottimizzare le pagine su più dispositivi ha incrementato in maniera significativa le conversioni.

Le heatmap hanno rivelato come gli utenti di Materials Market che accedevano al sito su dispositivi mobili, non riuscivano a vedere la CTA nella parte visibile della pagina

Andrew Haehn, CEO dell'azienda, grazie all'heatmap di scorrimento ha scoperto che solo un numero ridotto di utenti su dispositivi mobili raggiungeva la CTA principale a fine pagina, quindi il suo team ha cambiato il design del pulsante e lo ha posizionato più in alto nella pagina. Questa semplice modifica ha contribuito a un aumento dell'1,1% nel tasso di conversione, generando oltre 10.000 sterline in più di fatturato annuo.

Come usare le heatmap insieme ad altri strumenti per l'UX

I dati delle heatmap possono avere un impatto significativo e fornire un gran numero di insights anche quando prese singolarmente. Combinandole ad altri strumenti di analytics, feedback e progettazione d'UX, si otterranno però risultati ancora migliori. Esaminiamo insieme quattro esempi:

1. Heatmap + tool tradizionali di analytics

Gli strumenti tradizionali di web analytics (come Google Analytics e Product Analytics di Contentsquare) forniscono un numero importante di dati quantitativi come le visualizzazioni di pagina, le fonti di traffico e la frequenza di rimbalzo, ma non possono spiegare né i motivi per cui tali fenomeni avvengono, né le modalità con cui si verificano.

Combinando le analytics tradizionali con l'analisi delle heatmap, si possono scartare alcune delle teorie proposte e scoprire a cosa sono dovute le fluttuazione nelle metriche. Una pagina con molto traffico, ma con poche conversioni? La situazione perfetta per impostare una heatmap e guardare con i tuoi occhi quali sono i motivi che spingono gli utenti ad abbandonare la pagina.

2. Heatmap + riproduzioni delle sessioni

Una riproduzione di sessione (detta anche registrazione di sessione) è il rendering di una sessione di navigazione dell'utente che consente di osservare le azioni di un singolo utente (anonimizzato) seguendolo attraverso più pagine.

Mentre le heatmap aiutano a visualizzare i dati di tutti gli utenti contemporaneamente, le riproduzioni si riferiscono a un singolo utente. Invece di fare supposizioni osservando i clic e il modo in cui gli utenti scorrono la pagina così come mostrati da una heatmap, puoi provare a guardare le riproduzioni delle sessioni per osservare come i visitatori interagiscono realmente con la pagina.

Per darti un esempio concreto, vediamo come le riproduzioni abbinate alle heatmap hanno aiutato Turum-burum, un'agenzia che si occupa di design di digital UX, a ottenere un incremento del 55% del tasso di conversione per l'online store di Intertop, azienda che si occupa della vendita di calzature.

Le riproduzioni delle sessioni hanno innanzitutto rivelato che i clienti incontravano una certa difficoltà a usare i filtri d'Intertop per trovare i prodotti che gli interessavano: gli utenti consultavano un numero enorme di pagine prima di trovare la loro misura.

A seguito dell'analisi della heatmap dei clic, il team di Turum-burum ha scoperto che, durante la ricerca di un prodotto, molti utenti facevano clic su "visualizza tutti gli articoli", perché non disponevano dei filtri necessari per trovare quello che stavano cercando.

La heatmap dei clic mostra che i clienti d'Intertop cliccano su "visualizza tutti gli articoli" durante la ricerca di un prodotto

Grazie agli insights ricavati dalle riproduzioni delle sessioni e dalle heatmap, Turum-burum ha implementato una funzionalità più intuitiva per filtrare i prodotti, dando priorità a una maggiore chiarezza nelle categorie dei prodotti, che è da considerare un elemento essenziale nell'esperienza di acquisto sui siti ecommerce. Questo miglioramento apportato da Turum-burum ha avuto come risultato un miglioramento dell'UX e un aumento delle vendite per il cliente.

3. Heatmaps + voice of customer

I dati quantitativi (numerici) sono estremamente importanti per prendere decisioni riguardanti l'UX che siano basate sui fatti. Non bisogna però trascurare l'importanza dei dati qualitativi (non numerici).

Scopri insights concreti chiedendo direttamente agli utenti perché hanno lasciato il sito

Dopo aver usato le heatmap per individuare i problemi di design su specifiche pagine del sito, chiedi agli utenti un feedback sull'UX di ciascuna pagina per sapere cosa ritengono che manchi o cosa andrebbe modificato per aiutarli a raggiungere i loro obiettivi.

I feedback sul prodotto non devono essere necessariamente una seccatura per gli utenti: un semplice sondaggio non intrusivo, composto da una sola domanda, può già bastare per cominciare ad apportare miglioramenti all'UX che finora non ti erano venuti in mente.

Conan Heiselt, UX designer presso Techsmith, azienda che si occupa di software, oltre a sfruttare gli insights ricavati dalle heatmap dei clic per migliorare l'UX con un nuovo design per le CTA dei prodotti, ha anche usato i sondaggi per capire più a fondo le esigenze dei clienti.

Con un semplice sondaggio sulla pagina, Conan ha fatto agli utenti che hanno completato determinate interazioni una domanda a risposta aperta: "Cosa ti dà fastidio su questa pagina?". In questo modo, è riuscito a raccogliere un numero sufficiente di risposte per identificare 15 temi generali e iniziare ad agire per rispondere alle esigenze specifiche degli utenti.

Aree di miglioramento per l'UX ricavate dalle risposte ai sondaggi

Se non hai abbastanza tempo per preparare un report di ricerca UX che sia approfondito e concreto come quello di Conan, puoi usare l'intelligenza artificiale Contentsquare di Surveys (Voice of Customer), così da generare automaticamente un report con gli insights e i suggerimenti fondamentali per le fasi successive della ricerca, basandosi sul feedback reale degli utenti.

4. Heatmap + test A/B

I dati delle heatmap e i test A/B vanno di pari passo: i primi possono essere usati per formulare un'ipotesi di test, allo stesso tempo puoi impostare una heatmap per confrontare le variazioni nei test A/B, in modo da raccogliere dati concreti sui motivi per cui una modifica alla pagina ha successo (o meno).

Dati su una heatmap dei clic che mostrano un aumento dell'user engagement dopo aver modificato il design di una pagina

Per esempio, il team di UX design di Bannersnack, azienda che si occupa della progettazione di banner, ha impostato delle heatmap sulle principali landing page per ottenere prove concrete sul modo in cui le persone interagiscono con queste ultime.

Basandosi su tali dati, il team ha creato un design alternativo ed eseguito test A/B sia sulla nuova versione che su quella precedente. Con un solo test, Bannersnack ha visto un aumento del 25% sulle iscrizioni, semplicemente combinando le heatmap con i test A/B.

Come iniziare a usare le heatmap

Puoi creare una heatmap con Contentsquare richiedendo una demo. Ti aiutiamo a impostare la tua prima heatmap, in modo da cominciare subito a raccogliere dati concreti ogni qualvolta un utente visita il tuo sito.

Non importa se vuoi usare le heatmap per confermare le tue teorie, aumentare le conversioni o trovare nuove idee per i test. I preziosi insights forniti da queste variopinte rappresentazioni grafiche ti permetteranno probabilmente di dare la necessaria svolta alla tua strategia per l'UX, così da migliorare significativamente i tuoi risultati.