UX & Coding

Heatmap: perchè sono importanti e quando servono

"Con le mappe di calore è possibile identificare facilmente problemi di usabilità e migliorare le conversioni; non utilizzarle significa perdere importanti informazioni su come ottimizzare le pagine"

Le Heatmap o mappe di calore sono rappresentazioni grafiche visuali del comportamento dell’utente su una determinata pagina o un gruppo di pagine.

Ogni mappa fornisce un set di dati specifico che permette di capire come vengono percepiti i singoli blocchi della pagina, dove si sofferma l’attenzione dell’utente o quanto vengono utilizzati gli elementi destinati al click o alla conversione.

Il più grande vantaggio di questo strumento sta nella rappresentazione visuale del dato stesso che fornisce immediatamente a colpo d’occhio una panoramica completa su come l’utente utilizza tutti gli elementi che gli vengono messi a disposizione (immagini, link, pulsanti, ecc…).

Tipologie di mappa

Ne esistono principalmente tre modelli:

Mouse Move o Hover Map

Heatmap Move Map
Rappresentazione Move Map, da Crazy Egg

Campiona il movimento del mouse di tutti i visitatori e genera automaticamente una rappresentazione visiva delle aree in cui hanno spostato il cursore: più il colore dell’area è caldo maggiore sarà la concentrazione di movimento registrata.

Mouse Click o Tap Map

Heatmap Click Map
Rappresentazione Click Map, da Crazy Egg

Aiuta a determinare dove i visitatori stanno facendo clic o tap (nel caso di dispositivi mobile) con lo scopo di individuare rapidamente i problemi di una pagina: ad esempio verificare se un pulsante viene correttamente individuato o al contrario un’immagine senza link viene ripetutamente cliccata “a vuoto”.

Può sembrare simile alla precedente ma fornisce dati più precisi sui singoli click incrociando dimensioni come il browser utilizzato, il tipo di sorgente e svariati tipi di informazioni.

Scroll o Attention Map

Heatmap Scroll Ma
Rappresentazione Scroll Map, da Crazy Egg

Fornisce una rappresentazione visiva del tempo trascorso dai visitatori nelle varie aree della pagina e su come scorrono con il mouse. Questo aiuta a capire se ad esempio l’altezza della safe area non è efficace o se più semplicemente la disposizione verticale o gerarchica delle informazioni non rispetta le aspettative dell’utente.

Dove Analytics non arriva (da solo)

Perché usare le Heatmap se ho Analytics? Google Analytics, o qualsiasi altro strumento che raccoglie informazioni sul traffico, è uno straordinario tool per analizzare dati quantitativi; questa tipologia di dato è per la maggior parte destinato a dare informazioni sulla quantità, appunto, rispetto a determinate dimensioni (pagina, città, lingua).

Senza particolari settaggi personalizzati Analytics registrerà informazioni di alto livello sull’utente o sul suo percorso di navigazione; questo non perché Analyicts non è in grado di spingersi oltre ma è semplicemente dovuto al fatto che sarebbe impensabile tracciare preventivamente, con ad esempio eventi o pagine virtuali, tutti i singoli elementi delle pagina.

Pensiamo solo al fatto che in un sito dinamico come un progetto editoriale o un e-commerce le pagine non necessariamente sono tutte identiche e al contrario possono avere elementi molto differenti pur facendo parte dello stesso template.

Le Hetmap aiutano a comprendere come gli utenti utilizzano le pagine senza bisogno di porsi delle domande preventivamente, ma osservando esattamente cosa succede: una volta identificate le problematiche è possibile formulare ipotesi di risoluzione o sofisticare il tracciamento per approfondire l’analisi.

Quali strumenti utilizzare

Esistono decine di servizi online gratuiti o professionali a pagamento: personalmente utilizzo e ho un’esperienza molto lunga con Crazy Egg e con il più recente Hotjar.

Sono strumenti simili ma allo stato attuale, per chi fa analisi avanzata, si completano per alcune mancanze. Hotjar offre un piano Basic gratuito che permette di prendere dimestichezza con lo strumento e che quindi può essere un’ottima scelta per iniziare a sperimentare.

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.