Heatmap dei clic: come usarle per ottimizzare il sito web (e i buoni motivi per farlo)

È impossibile usare un sito web senza cliccare da qualche parte o fare tap, su un dispositivo mobile. I clic e i tap aiutano a navigare tra le pagine e a trovare i prodotti, i servizi o le informazioni che si stanno cercando.

TU, web designer, marketer o gestore d'azienda, sai esattamente quali sono i punti su cui i tuoi clienti cliccano o fanno tap? E sai come sfruttare tali informazioni per migliorare il sito e creare un'esperienza più piacevole?

Ecco a cosa servono le heatmap dei clic.

In questo breve articolo, puoi scoprire come monitorare quali sono i punti in cui gli utenti cliccano, quali sono i vantaggi e i limiti delle heatmap dei clic, come usarle per ottimizzare l'UX e in che modo impostare le heatmap dei clic sul tuo sito web o sulla pagina di un prodotto in un paio di minuti.

Che cos'è una heatmap dei clic?

Una heatmap dei clic è un tipo di heatmap di un sito web che mostra dove gli utenti fanno clic con il cursore del mouse su PC o dove fanno tap sullo schermo di un dispositivo mobile. Le heatmap dei clic aiutano i gestori e i titolari di siti web a monitorare l'user engagement sulla pagina, ad esempio attraverso il monitoraggio dei clic su pulsanti, link e immagini sull'intero sito, per ottimizzare le pagine e le CTA e ottenere un aumento delle conversioni.

Un esempio di heatmap su una pagina "Chi siamo"

Gli user experience designer e marketer usano le heatmap dei clic per monitorare l'attività degli utenti e identificare le opportunità per aumentare le conversioni, risolvere i bug sul sito web e migliorare il design del sito web con l'ausilio di test iterativi.

La "click popularity" (la popolarità dei clic) viene rappresentata su una scala cromatica che va dal rosso al blu (dove i punti più popolari sono "caldi" e rappresentati in rosso), insieme ai dati quantitativi sul numero dei clic e sulla percentuale di clic effettuati degli utenti sui singoli elementi della pagina web.

Heatmap dei clic e heatmap in generale

Due diversi tipi di heatmap a confronto

"Heatmap" è un termine generico che descrive diverse tipologie d'analisi visiva dei siti web. Le heatmap dei clic sono uno specifico tipo di heatmap (così come lo sono le heatmap di scorrimento e le heatmap di movimento) in cui le aree in rosso o "calde" mostrano gli elementi della pagina su cui si è cliccato più spesso, mentre quelle blu o "fredde" mostrano quelle che hanno ricevuto meno clic. Un'area priva di colore, invece, non è mai stata cliccata.

💡 Forse non tutti sanno che... è possibile visualizzare i dati sui clic, i movimenti del cursore e lo scorrimento in un'unica rappresentazione grafica grazie alle heatmap a zone di Contentsquare.

La suddivisione in zone consente di capire in un colpo d'occhio quali sono le aree della pagina con cui gli utenti interagiscono più frequentemente

Heatmap dei clic e heatmap dei rage click

Esempio di heatmap dei rage click

Le heatmap dei rage click sono un tipo specifico di heatmap dei clic che mostra esattamente quali sono i punti di una pagina in cui gli utenti si sono messi a fare "rage clicking" e cioè a cliccare su qualcosa ripetutamente, in preda alla frustrazione. Questo comportamento indica problemi di usabilità (error click), bug o elementi non funzionanti (dead click). Sono uno strumento particolarmente utile per identificare i punti di attrito che si potrebbero evitare e le opportunità per migliorare l'UX e quindi aumentare le conversioni.

Perché usare le heatmap dei clic del sito web?

Ecco cosa puoi ottenere con una heatmap dei clic:

• Vedere dove i visitatori del sito web cliccano o fanno tap

• Identificare le CTA con prestazioni insufficienti e che vengono ignorate

• Individuare potenziali bug e pain point del prodotto

• Rappresentare graficamente i dati sull'engagement degli utenti

• Individuare quali varianti degli elementi della pagina ottengono il numero maggiore di clic quando si effettua un test A/B

Le heatmap dei clic sono uno strumento fondamentale per il monitoraggio dei clic che aiuta a trovare gli elementi con cui gli utenti interagiscono (o meno) sulle pagine del sito per identificare pattern nel comportamento degli utenti.

In questo modo, puoi vedere quali sono le CTA e gli elementi inaspettati su cui gli utenti cliccano, che a loro volta ti offrono un solido punto di partenza per apportare modifiche al prodotto e migliorare così l'UX e il CRO (ottimizzazione del tasso di conversione). Ecco qualche breve esempio:

Esempi di heatmap dei clic di Contentsquare su diversi dispositivi

La heatmap qui in alto era stata inserita su una vecchia versione della homepage di Hotjar, che includeva un video che situato sopra la parte visibile media della pagina. In realtà, come è evidente sia dalla heatmap dei clic su mobile che da quella su PC, non sono stati molti a guardare il video: l'engagement complessivo è dello 0,04%, il che significa che su 7000 persone, approssimativamente tre (!) hanno cliccato sul pulsante di riproduzione.

Se il video avesse incluso informazioni non presenti altrove e importanti per conoscere il prodotto, Hotjar avrebbe sicuramente incontrato serie difficoltà: questa heatmap dei clic ha segnalato che c'era un problema che andava risolto al più presto.

Le heatmap dei clic possono essere usate anche come un ausilio visivo per comunicare agli stakeholder e ai clienti i problemi del sito web e del prodotto e le ottimizzazioni da eseguire, il che è particolarmente utile se ci si rivolge a un pubblico non esperto oppure quando bisogna ottenere l'approvazione per l'UX da parte del resto del team o del proprio manager.

Le heatmap dei clic sono inoltre strumenti di reporting delle performance in quanto permettono di aggiungere una componente visiva al resoconto che si fa, attraverso rappresentazioni grafiche.

Come usare le heatmap di clic sul sito web

Puoi usare le heatmap dei clic su qualsiasi tipo di sito web: ecommerce, pagine di product listing, blog, landing page e su tanti altri ancora.

Ecco come configurare e attivare Heatmaps di Contentsquare:

Prima fase: aggiungere il codice di monitoraggio di Contentsquare al sito web

Una volta effettuata l'iscrizione a Contentsquare riceverai un codice di monitoraggio univoco.

È possibile installare il codice di monitoraggio di Contentsquare con diversi metodi, tra cui con Google Tag Manager o tramite HTML personalizzato.

Segui le nostre istruzioni dettagliate (qui) per assicurarti che il codice di monitoraggio funzioni come previsto (non preoccuparti, non è difficile).

Seconda fase: inserire gli URL delle pagine

I passaggi successivi variano a seconda del piano Contentsquare che stai usando:

• 👉Istruzioni per le heatmap per il Free Plan e il Growth Plan

• 👉Istruzioni per le heatmap per l'Enterprise Plan e il Pro Plan

Le risorse di cui forniamo il link qui sopra offrono istruzioni dettagliate per guidarti durante tutta la procedura, ma qui sotto trovi comunque un breve riepilogo dei passaggi da eseguire.

Per gli utenti Enterprise e Pro, andare su "Zoning Analysis" e cliccare su "Seleziona la pagina"

Inserisci gli URL delle pagine per le quali vorresti generare le heatmap.

Clicca su 'Applica.'

Terza fase: esaminare le heatmap dei clic

Contentsquare inizia a generare heatmap man mano che il codice di monitoraggio raccoglie dati.

È possibile visualizzare le heatmap dei clic accedendo alla pagina per cui si desidera visualizzare la heatmap dei clic e selezionare "Heatmaps" e "Click map" dai menu a tendina.

Se necessario, selezionare i diversi elementi per i filtri, come il dispositivo, l'intervallo di tempo e gli utenti.

Ecco un esempio di heatmap dei clic su mobile:

Scopri "i motivi per cui gli utenti cliccano" combinando le heatmap con altri strumenti di product experience

Le heatmap dei clic sono ideali per mostrare su cosa gli utenti cliccano o dove fanno tap, ma è solo un lato della medaglia: bisogna comunque capire perché gli utenti cliccano (oppure perché non lo fanno, in questo caso con una priorità ancora maggiore).

A tal fine, è possibile combinare le informazioni quantitative della heatmap dei clic con le informazioni qualitative ricavate dal feedback degli utenti, dai sondaggi e dalle registrazioni delle sessioni. Grazie a Contentsquare, è possibile impostare rapidamente registrazioni di sessioni, widget di feedback e sondaggi da affiancare alle heatmap sul sito web o sulla pagina di prodotto e ottenere così tutti gli insights sull'esperienza del prodotto (PX) che ti servono a ottimizzare e migliorare l'UX.

Crea una heatmap dei clic gratuita e aumenta subito le conversioni

Le mappe dei clic sono un metodo semplice e veloce per capire cosa fanno davvero gli utenti sul tuo sito. Sono uno strumento fondamentale per l'analisi dell'esperienza di prodotto nel tech stack di marketer, UX designer e per l'ottimizzazione del tasso di conversione, oltre a essere particolarmente utili se si gestisce un'attività online e si vuole capire il comportamento dei clienti: cosa li motiva, cosa li interessa, con cosa interagiscono sul sito e cosa ignorano.

Domande frequenti sulle heatmap dei clic