Heatmaps: le mappe di calore per migliorare la web usability

2 ago 21
heatmaps-web-site

Se pensi che il mondo della web analysis sia solo un’infinita sequenza di dati, percentuali e grafici da studiare, confrontare e interpretare ti sbagli.

O meglio, una grossa parte del processo analitico consiste nello spulciare numeri e statistiche, ma ci sono anche tool che ci permettono di approfondire le performance del nostro sito attraverso rappresentazioni grafiche colorate e di più facile intuizione, come le heatmaps.

Se bazzichi già nei meandri della web analytics e ti interessano tutte quelle attività legate al mondo della Conversion Rate Optimization avrai sentito parlare di queste mappe di calore, e di come siano un output grafico molto utile per comprendere il comportamento degli utenti in un’interfaccia web.

Quello che forse ancora non sai è che ce ne sono di diversi tipi…ed è qui che ti verranno in aiuto i prossimi paragrafi di quest’articolo.

Introduzione alle Heatmaps, queste (s)conosciute

Un’heatmap (o anche heat map) è per l’appunto una rappresentazione grafica del modo in cui si muove un utente all’interno di un sito web e ci serve a identificare quali sono le aree appunto “più calde”, ovvero più visitate o cliccate, di una pagina.

L’heatmap è uno strumento utile quanto molto semplice da capire: più il colore di un’area si avvicina al rosso, più significa che quel punto è stato visto o cliccato. Se invece tende al blu o in certi casi addirittura al grigio, significa che invece che quell’elemento o quell’area non sono stati di interesse per l’utente.

Se noti finora ho sempre parlato di vedere o cliccare un’area per determinare l’intensità cromatica dell’heatmap. Questo perché esistono diversi metodi di analisi che utiilzzano questa rappresentazione grafica per rendere l’analisi più rapida ed intuitiva.

Generalmente infatti, esistono quattro tipologie differenti di mappa di calore, riferenti all’analisi del movimento del mouse oppure all’attenzione visiva. I 4 tipi di heatmap che possiamo trovare sono:

  • Click maps
  • Hover maps
  • Scroll maps
  • Eye tracking heatmaps

Click maps

Probabilmente le più note, quelle che probabilmente avrai riscontrato anche tu maggiormente negli articoli di settore. Le click o tap heatmaps (il nome varia in base al device utilizzato: click per i dispositivi desktop, tap per i tablet e gli smartphone) indicano le aree dove l’utente ha cliccato (o tappato) maggiormente.

Ci permettono di capire in maniera molto semplice e veloce se chi naviga il nostro sito web sta effettivamente cliccando dove vogliamo noi, se i link vengono utilizzati oppure, al contrario, se magari vengono percepiti cliccabili elementi che non lo sono, inducendo l’utente a compiere azioni a vuoto.

Ci danno perciò tutta una serie di insight utili per migliorare la visibilità e la comprensibilità dei pulsanti ed anche per effettuare modifiche di microcopy per poter rendere più stimolante il click.

Hover maps

Le Hover maps, a differenza delle precedenti, rappresentano il movimento del mouse sull’interfaccia web anziché al click. Vengono infatti segnalate con i colori più accesi tutte quelle aree su cui il mouse si è mosso per più tempo.

Grazie a questa particolare web heatmap si può ricavare un’idea generale dei punti di maggiore interesse per l’utente durante la navigazione e di conseguenza ricollocare i diversi elementi in un ordine gerarchico per chi naviga.

Un’ottima alternativa alla Eye tracking heatmap (che vedremo fra poco istanti) da questo punto di vista, qualora non si disponessero gli strumenti adatti.

hover map - mappa di calore

Scroll maps

Non meno importanti delle precedenti, sono le mappe che rilevano lo scroll delle pagine web. Qui oggetto dell’analisi non è più il singolo elemento dell’interfaccia web, ma l’intera viewport che, anche in questo caso, viene evidenziata con toni più o meno accesi in base alla percentuale di utente che hanno visto quella specificata schermata.

La scroll map ci permette infatti di capire la profondità di scroll di una pagina, ovvero quanto gli utenti in media sono scesi nella pagina prima di passare ad un’altra sezione del sito web.

Capendo fino a che punto la pagina è stata visualizzata ci permette di ripensare al ricollocamento dei diversi elementi nella pagina, spostando i punti che vogliamo mettere più in evidenza nelle zone calde. Oppure ci consente di riflettere in quali aree della pagina sia più indicato inserire stimoli allo scroll.

Il linea generale, la rappresentazione a scrool map prevede che la parte più in alto della pagina (la First Viewport) sia evidenziata in rosso, mentre il colore si fa via via più freddo man mano che ci si avvicina al footer (difficilmente ci troveremo una scroll heatmap con parti calde ad inizio e fine pagina, più naturale è invece che vi sia una progressione lineare da colori caldi a toni spenti).

scroll map - heatmap

Eye Tracking Heatmaps

Non sono solo gli strumenti di mouse tracking a fornirci un output ad heatmap, ma anche quelli di eye tracking, ovvero di tracciamento del movimento oculare. Le heatmaps derivanti da un analisi tramite eye tracker ci possono offrire un visione accurata e precisa su ciò che effettivamente viene visto nella navigazione web.

A differenza delle hover heatmaps, qui riusciamo a capire con esattezza dove si è posizionato l’occhio dell’utente, se ha letto o meno un testo oppure se si è soffermato maggiormente a vedere un’immagine piuttosto di un’altra. Quindi oltre al posizionamento degli elementi ci consentono di valutare il peso nel flusso di navigazioni dei diversi stimoli utilizzati, che siano cliccabili o meno, come ad esempio testi o immagini.

Un insight decisamente rilevante per migliorare l’usabilità dell’interfaccia e per plasmarla secondo le esigenze di chi la naviga, ma che ad oggi richiede un investimento maggiore rispetto ad un’analisi di mouseflow, vista la particolarità dello strumento e l’ancor limitato numero di player nel mercato.

eye-tracking-heatmaps

L’unione fa la forza…anche nelle heatmaps

Immagino che ora vi siano chiari i diversi tipi di mappe di calore che potrete ritrovare durante le vostre analisi, no? E come avrete capito, non ce n’è una che valga più dell’altra, perché ognuna prende in considerazione dati differenti del processo di navigazione, ma tutti indispensabili per poter avere una visione completa ed esaustiva di come si muovono gli utenti nel vostro sito web.

L’analisi delle heatmap è uno step imprescindibile durante una strategia di Conversion Rate Optimization (CRO) o di web restyling, che si va a interporre tra lo studio dei dati analytics (analisi quantitativa) e l’utilizzo dei questionari (che vi consigliamo di implementare nella vostra analisi. Software come Hotjar ad esempio, oltre all’analisi del movimento del mouse, prevedono anche una sezione dedicata ai Survey, di semplice implementazione all’interno del proprio sito web o della propria landing page) oppure dei test di usabilità (analisi qualitativa).

Capire dove gli utenti hanno cliccato, cosa hanno visto, quanto in profondità in una pagina hanno navigato ci consente di formulare ipotesi solide su ciò che funziona e ciò che invece può essere modificato. Ipotesi da testare poi nell’ultima fase della nostra strategia CRO, ovvero i test AB.

Ti sei già iscritto alla nostra newsletter?

ti consiglio di rimanere sempre aggiornato sulle nuove pubblicazioni del nostro blog iscrivendoti a NeuroMagazine, la nostra newsletter mensile.

Alla prossima!

Cosa possiamo fare per te?

ARTICOLI RECENTI


TAGS

usabilità user experience web design