Cosa sono le heatmap, a cosa servono e perché sono fondamentali per l’UX?

Postato in data 27 Giugno 2022 da Riccardo Esposito

Le heatmap, o mappe di calore, sono dei tracciamenti eseguiti da alcuni software professionali che servono a individuare il comportamento del pubblico su una pagina web. E puoi ben immaginare qual è il valore di questo risultato. Se già sai come si muove la persona media su un sito web puoi organizzare tutto quello che serve.

Cosa sono le heatmap, a cosa servono e perché sono fondamentali per l'UX?

Soprattutto per soddisfare le esigenze dell’utente e le necessità dell’internauta espresse dai dati. Perché è proprio questo il punto chiave: quando utilizziamo le mappe di calore per individuare i punti essenziali da migliorare lo facciamo tenendo presente dei dati difficili da ottenere diversamente. Chi ti dice esattamente cosa fa il pubblico su una pagina web? Solo le heatmap, per questo dobbiamo imparare a conoscerle meglio.

Cosa sono le heatmap, una definizione

Le mappe di calore (traduzione di heatmap) sono delle rappresentazioni grafiche di un fenomeno che può essere compreso attraverso la differenza tra due o più colori differenti.

Questo tipo di output grafico non riguarda solo il mondo del digital e web marketing ma un gran numero di attività che hanno bisogno di un lavoro specifico in termini di data storytelling. Per quando riguarda il mondo del web, possiamo sottolineare che esistono tre tipi di mappe di calore. Spesso i software per creare heatmap riuniscono in un’unica utility queste funzioni che sono comunque essenziali per un risultato completo.

  • Mouse Tracking: tracciano il mouse, vengono utilizzate per visualizzare dove l’utente del sito posiziona il cursore. Perde di importanza nel momento in cui le visite sono da mobile.
  • Click monitoring: individuano dove le persone cliccano su una pagina web. Ma non solo i link ipertestuali, i risultati riguardano qualsiasi azione svolta anche su elementi grafici e testuali.
  • Scroll Tracking: le mappe termiche di tracciamento dello scorrimento vengono utilizzate per rappresentare il comportamento degli utenti del sito web rispetto alla lunghezza.

Molto utile anche il lavoro svolto dai software di eye-tracking. Ovvero il tracciamento degli occhi spesso accompagnato da webcam. Le mappe di calore misurano la posizione degli occhi degli utenti del sito e raccolgono dati che permettono di capire qual è l’attenzione dell’utente, come si sposta e su cosa si concentra.

Da leggere: come testare la velocità di un sito web

A cosa serve la mappa di calore

Ti ho appena dato una definizione generica di heatmap. Ma perché i SEO, gli esperti di CRO e di web performance voglio sempre parlare di questi output? Semplice, così sai cosa non funziona e devi migliorare.

Nel mondo del web marketing le heatmap sono quei lavori di definizione del comportamento umano sulle pagine ottenuto dal tracciamento e dall’analisi dati collegato al lavoro svolto dai diversi tool per elaborare le mappe termiche. Tutto questo serve a migliorare l’user experience individuando gli elementi di sofferenza e i colli di bottiglia per l’utente. Magari anche i punti i cui si concentrano abbandoni, incomprensioni o rage click.

Come si legge una heatmap?

Avrai sicuramente visto una mappa termica di una pagina web composta dal classico andamento dei colori che si spostano dal caldo al freddo. Quindi dal blu scuro fino al giallo, all’arancione e infine al rosso. Significato di tutto ciò? Come si interpreta una heatmap per utilizzarla al meglio? Ci sono due punti chiave da sapere:

  • Nelle zone calde si concentrano le azioni.
  • In quelle fredde non ci sono attività.

Quindi, quando vedi che l’area diventa rossa vuol dire che si ritrovano le principali attività degli utenti come i click o i tap da mobile. Ad esempio, se hai messo una call to action in una determinata area della pagina ma le heatmap restituiscono solo colori freddi vuol dire che hai sbagliato qualcosa. Chiaro, poi devi essere tu a capire.

esempio di heatmap

Le mappe termiche ti restituiscono solo dei dati empirici, reali ma muti. Poi tu devi comprendere e trovare la risposta. Che però può arrivare anche grazie a un altro elemento che di solito viaggia in simbiosi con la heatmap: la mappatura dello scrolling. Ovvero come si muovono i grandi numeri in termini di scorrimento della pagina.

Da leggere: UX mobile per e-commerce

Quali sono i migliori heatmap software

Sappiamo cosa significa heat map, a cosa serve e perché è così preziosa nel mondo dell’user experience. ma come si crea una mappa di calore? Semplice, esistono delle utility che tracciano il comportamento del pubblico su una pagina web, raccolgono i dati e infine restituiscono il risultato grafico. Quali sono i nomi da ricordare?

Crazyegg

Uno dei migliori tool per creare mappe mentali presenti sullo scenario internazionale. Grazie a Crazyegg, un tool professionale, è facile capire come si muove l’interesse del pubblico sulle pagine web perché oltre alle classiche heat map, sempre precise e puntuali, puoi creare test A/B e analisi del traffico dettagliate.

Hotjar

Un tool perfetto per fare un lavoro completo di heatmap, compreso tutto quello che riguarda il recording delle visite. Ovvero, con Hotjar hai la possibilità di registrare le sessioni degli utenti per capire meglio come si comportano da mobile e desktop. Hai sia una versione free che una a pagamento. Interessante, vero?

Clarity

Una vera sorpresa: con Microsoft Clarity puoi realizzare mappe di calore per il tuo sito web con un software open source e in piena regola con il GDPR. Ma c’è un punto che farà gola a tutti, si tratta di un software per creare heatmap gratis. In questo modo puoi registrare tutti i tuoi dati e analizzare senza limiti.

Clarity

Ovviamente questa è solo una selezione dei possibili tool e strumenti per creare heatmap. Il mio consiglio è questo: se vuoi ottimizzare il tuo portale non ragionare in termini di risparmio. Se hai bisogno di determinate funzioni scegli il tool adatto e concentrati sull’analisi e i risultati che può darti la tua heatmap migliore.

Latest posts by Riccardo Esposito (see all)
Clicca per votare questo articolo!
[Voti totali: 0 Media: 0]

Discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *