Una heatmap è una rappresentazione grafica di dati codificata in maniera cromatica, di solito con una scala di colori che va dal blu (freddo) al rosso (caldo). È possibile creare una heatmap dei dati in un foglio di calcolo come ad esempio Excel o, in alternativa, usando uno strumento gratuito come quello di Contentsquare.
Questo tutorial ti mostra come usare Contentsquare per creare heatmap che ti consentano di capire in che modo gli utenti usano il tuo sito web, dove cliccano e cosa ignorano e quali sono i motivi per cui provano frustrazione, in modo da ottimizzare il sito e incrementare così le conversioni, migliorare l'esperienza utente (UX) e le metriche importanti per la tua attività.
Come usare Contentsquare per creare una heatmap del tuo sito
Per ottenere una heatmap di qualsiasi sito web o pagina di prodotto, è necessario usare un sofisticato strumento di heatmapping come Heatmaps di Contentsquare. La raccolta e il rendering dei dati delle heatmap ti aiuta a capire in che modo gli utenti usano il sito: su cosa cliccano, per quale motivo provano frustrazione e a quale punto sulla pagina perdono interesse.
1. Clicca su Zone Analysis o Heatmaps
Nota: i passaggi indicati qui di seguito potrebbero differire leggermente a seconda del piano Contentsquare che hai scelto. Per ulteriori dettagli, consulta gli articoli "Istruzioni per creare heatmap per il Free plan e il Growth plan" e "Istruzioni per creare heatmap per l'Enterprise plan e il Pro plan".
Se sei utente del Free plan o del Growth plan, vai su "Heatmaps" e clicca su "Nuova heatmap"
Se sei utente Pro o Enterprise, vai su "Zoning Analysis" e clicca su "Seleziona la pagina"
![[Screenshot] Zoning analysis - in-app](http://images.ctfassets.net/gwbpo1m641r7/37fS84ppsSfjsCA6vdBtON/7bc93aa8f45ea17109ed115ca0e8e2c2/-Screenshot-_Zoning_analysis.png?w=3840&q=100&fit=fill&fm=avif)
2. Inserisci gli URL delle pagine
Elenca la pagina o le pagine per cui vorresti creare le heatmap inserendo la lista di URL.
Se sei utente Enterprise e Pro, puoi anche selezionare gruppi di pagine:
![[Screenshot] Zone-based heatmaps - New zoning - single page](http://images.ctfassets.net/gwbpo1m641r7/1MP38uAzJA2x1Gfnd2t4rS/9bc004e6f36b9a04f4d8b5eef8464cbd/-Screenshot-_Zone-based_heatmaps_-_New_zoning_-_single_page.png?w=3840&q=100&fit=fill&fm=avif)
3. Analizza le heatmap
Una volta che Contentsquare ha raccolto abbastanza dati, l'heatmap è pronta per essere visualizzata.
Esistono tre differenti tipologie di heatmap che puoi visualizzare: le heatmap di movimento, le heatmap dei clic e le heatmap di scorrimento. Qui sotto trovi un confronto sull'aspetto di ognuna:
![[Visual] Click Scroll Move Map comparisons](http://images.ctfassets.net/gwbpo1m641r7/2xGiAsoQeOveqJcLq1zDDg/848fcdbf8a52beab8bdb5faead9c1f0c/image6__2_.jpg?w=1920&q=100&fit=fill&fm=avif)
4. Visualizza le aree di coinvolgimento (engagement zone)
Le heatmap a zone sono una rappresentazione grafica condensata dei data point presenti nelle heatmap dei clic, in quelle di movimento e in quelle di scorrimento, presentati con una panoramica d'insieme. Le diverse tonalità evidenziano gli elementi della pagina con cui gli utenti interagiscono in maggior misura.
Hanno accesso a questo tipo di heatmap gli utenti Enterprise e Pro.
Per visualizzare le heatmap a zone, seleziona "Zoning" nel menu a tendina.
![;Visual] Engagement zones heatmap](http://images.ctfassets.net/gwbpo1m641r7/5P1a87vEx2CxN2QVcslVyq/13c81490890a47a338eadf57bf2ea4fd/image3__17_.png?w=3840&q=100&fit=fill&fm=avif)
Le aree di coinvolgimento consentono di individuare facilmente quelle zone della pagina che non ricevono l'attenzione che meritano, in modo da migliorarle.
5. Filtra i dati delle heatmap
Per sfruttare le heatmap al massimo, puoi filtrare i dati delle sessioni per mostrare solo il periodo che ti interessa o una specifica coorte di utenti.
Puoi aggiungere i filtri cliccando su "Aggiungi filtro" Ecco alcune idee sui filtri che puoi impostare:
Filtrare per rage click per visualizzare i punti in cui i visitatori si mettono a cliccare ripetutamente in preda alla frustrazione
Filtrare in base ai nuovi utenti per vedere come questi si comportano durante la loro prima visita al sito
Filtrare per browser o per sistema operativo, se vuoi risolvere specifici problemi tecnici
Puoi mantenere le cose semplici oppure passare a tuo piacimento a dettagli via via più approfonditi. È persino possibile impostare attributi degli utenti per filtrare le heatmap in base a metriche personalizzate, come "utenti iscritti negli ultimi 30 giorni" o "clienti che hanno speso più di 200 €".
3 modi efficaci per usare le heatmap
Il giusto strumento gratuito per le tue heatmap può svelare insights preziosi. Ecco tre metodi per usare le heatmap in modo da migliorare l'user experience e aumentare il tasso di conversione.
Migliora il tuo sito web per renderlo più facile (e più piacevole) da usare
Identifica in maniera rapida quali sono le aree del sito che vanno oltre le aspettative degli utenti e quelle che invece creano momenti di frustrazione. Puoi capire quali sono le testimonianze che attirano la loro attenzione e quali contenuti vengono ignorati. Trasforma i problemi in soluzioni, i successi in strategie.
Ottieni le approvazioni necessarie per il prossimo progetto
La prossima volta che vuoi promuovere un'iniziativa per l'UX, puoi condividere con gli stakeholder e i membri del team gli insights più interessanti delle heatmap. Dai priorità alla roadmap in base a cosa può avere il maggiore impatto sugli utenti, con il supporto d'ipotesi basate sui dati.
Individua e risolvi i bug in tutta semplicità
Filtra le heatmap in base ai rage click o agli errori per trovare elementi non funzionanti o altri problemi, ad esempio i pulsanti che non funzionano come previsto. Vai direttamente dalla tua heatmap alla relativa registrazione Contentsquare per scoprire esattamente cosa è successo e come trovare una soluzione.
Le migliori pagine in cui raccogliere dati per le heatmap
Le heatmap permettono di approfondire le informazioni ricavate da qualsiasi pagina del tuo sito web, ma è comunque consigliabile iniziare con quelle più importanti in termini di traffico, usabilità e obiettivi aziendali.
1. La homepage e le landing page
La homepage e le principali landing page sono i più importanti punti d'ingresso al sito web. Spesso sono queste, infatti, a essere responsabili della prima impressione che gli utenti hanno del sito, oltre a essere le pagine sulla base delle quali i visitatori decidono se continuare a leggere o se abbandonare il sito.
Usa un tool gratuito per le heatmap, così da analizzare queste pagine e determinare la quantità di informazioni che gli utenti vedono e con cui interagiscono, quali elementi vengono cliccati e quali vengono ignorati.
Le heatmap ci hanno mostrato che pochissimi utenti scorrono verso il basso oltre il nostro eroe, quindi quando abbiamo riprogettato le nostre landing page, abbiamo usato queste informazioni per riprogettare solo quella sezione. In questo modo abbiamo ridotto i costi in termini di spese generali di progettazione e ingegnerizzazione, ottenendo al contempo un aumento del 15% del tasso di conversione.
2. Le pagine più efficaci
Le pagine con la migliore performance (ad esempio, la pagina di prodotto più visitata o il post del blog con il maggior numero di commenti) hanno chiaramente elementi che funzionano. Una heatmap che analizzi tali pagine può aiutarti a capire qual è la formula giusta, così da applicare le stesse strategie anche altrove.
3. Le pagine meno efficaci
Le pagine con le performance peggiori sono importanti tanto quanto quelle di successo, ma per il motivo opposto: è molto probabile che abbiano qualcosa che non va. Una heatmap ti aiuta a capire cosa i visitatori (non) vedono e con cosa (non) interagiscono, permettendoti di intervenire.
Abbiamo studiato le heatmap per capire dove gli utenti facevano clic durante il processo di iscrizione a Taskworld. L'intero processo ha rivelato alcune grandi intuizioni. Abbiamo scoperto alcuni problemi che hanno richiesto solo 5 minuti per essere risolti. Questa soluzione rapida ha incrementato la conversione del 40%.
4. Le pagine recenti
Le pagine web più recenti non dispongono di molti dati. Su una pagina di prodotto inserita da poco sul sito web, impostare una heatmap gratuita rappresenta un metodo efficace per ottenere informazioni preliminari, misurare l'andamento della pagina e ottimizzarla man mano che arrivano gli insights sugli utenti.
💡Consiglio dell'esperto: se esegui test A/B per migliorare il tasso di conversione o altre metriche importanti per la tua attività, Heatmaps di Contentsquare ti permette di visualizzare le heatmap delle varianti dei test A/B, in modo da confrontare la vecchia versione con quella nuova e capire immediatamente i motivi per cui una variante funziona meglio, in modo da ottenere spunti per i futuri test.
Inseriamo le heatmap su ognuna delle nostre pagine. Se a seguito di una modifica, il tasso di conversione scende, le heatmap ci aiutano a identificare e risolvere il problema.
Creazione di una heatmap in Excel e con Contentsquare
È possibile creare una heatmap partendo da qualsiasi serie di dati numerici usando i più diffusi tool che lavorano con fogli di calcolo, ad esempio Microsoft Excel, Google Sheets o LibreOffice. Il metodo più rapido per creare una heatmap è quello di selezionare i valori nelle celle pertinenti e applicare a queste la formattazione condizionale.
In Google Sheets, basta cliccare su "Formato" > "Formattazione condizionale", per poi selezionare "Scala di colori" e scegliere la combinazione cromatica che preferisci: nell'esempio qui sotto usiamo la scala di colori "da verde a giallo a rosso". È inoltre possibile, se necessario, personalizzare il punto minimo (per il valore minimo), il punto intermedio e il punto massimo (per il valore massimo).
![[Visual] Excel heatmap vs contentsquare](http://images.ctfassets.net/gwbpo1m641r7/4XXymBh1NjjQjuZq6OpMJH/ef0901e96a9fc5cabff8467e82dea39b/image4__4_.jpg?w=1920&q=100&fit=fill&fm=avif)
Gli stessi dati sui clic visualizzati in Google Sheets (a sinistra) e con un software per creare heatmap (a destra)
Le heatmap di Excel possono essere utili quando si cerca di individuare pattern e trend nei dati numerici, laddove uno strumento per creare heatmap per siti web come Contentsquare permette di approfondire ulteriormente la questione, sovrapponendo l'attività degli utenti a uno screenshot della pagina.
Questo rende più facile capire quali sono le aree in cui gli utenti cliccano e fino a che punto scorrono, senza bisogno di tabelle pivot o finestre di dialogo, dandoti la possibilità di metterti nei panni degli utenti in un modo che le interminabili colonne di numeri non riusciranno mai a fare.
Se poi hai bisogno di scoprire ulteriori insights, è possibile combinare Heatmaps di Contentsquare con altri strumenti di Contentsquare, come Session Replay, Voice of Customer, Experience Analytics, Product Analytics e tanti altri, per ottenere un quadro completo del comportamento degli utenti, capire a fondo i pain point e offrire un'user experience che risponda in maniera proattiva alle loro esigenze.
Con al tuo servizio un tool per heatmap così efficace e utile, puoi dimenticare le sofferenze dovute ai complicatissimi fogli di calcolo.
Crea in pochi minuti la tua prima heatmap
Le heatmap sono facili da consultare e un modo rapido per capire cosa succede sul tuo sito web.
Almeno ora puoi dire che sai come usare Contentsquare per creare una heatmap del tuo sito.
Per di più monitorando e analizzando la heatmap gratuita, puoi risolvere i problemi che fanno da ostacolo alle conversioni, scoprire opportunità per ottimizzare il sito e migliorare l'esperienza utente.