Heatmap, cosa sono e perché servono anche alla SEO

Tempo di lettura : 12 minuti

Si chiamano heatmap o mappe di calore e sono uno strumento rapido ed efficace per capire cosa fanno gli utenti sulle pagine di un sito Web: dove fanno clic, fino a che punto scorrono, cosa guardano o ignorano. Rispetto agli altri tool di analisi, le heatmap possono fornire una panoramica più completa di come si comportano realmente gli utenti e delle zone in cui interagiscono meglio, permettendoci così di avere un quadro dei punti di forza della pagina e, soprattutto, dei punti critici in cui possiamo intervenire con opportune correzioni. Proprio per questo sono un valido supporto anche alla strategia SEO e ci permettono di scoprire quali tipi di contenuti e immagini catturano meglio l’attenzione del pubblico e dove invece le persone incontrano difficoltà di navigazione.

Che cosa sono le heatmap o mappe di calore

A volte chiamate anche heat map (staccato) o mappe termiche in italiano, le heatmap sono una rappresentazione visiva dei dati di navigazione di una pagina web, che attraverso una scala cromatica mostrano immediatamente in che modo gli utenti interagiscono con quella pagina, in quali punti fanno clic e dove invece non cliccano, fino a che punto hanno fatto scorrere una pagina verso il basso o quali sono i risultati dei test di eye-tracking.

Si tratta quindi di uno strumento che consente di visualizzare graficamente le azioni che gli utenti compiono all’interno di pagine web, semplificando la visualizzazione di dati complessi e la loro comprensione a colpo d’occhio: l’idea di fondo è permettere a chi possiede o gestisce un sito di capire il rendimento di una pagina specifica e approcciare rapidamente alle informazioni di set di dati complessi grazie alla rappresentazione dei valori tramite il colore.

In questo senso, la heatmap è proprio una rappresentazione grafica di dati in cui i valori sono rappresentati da colori: di norma, il comportamento degli utenti è misurato su una scala dal rosso al blu, con il colore più caldo che indica il livello più alto di coinvolgimento e il più freddo che indica le aree con i livelli di coinvolgimento più bassi.

Le mappe di calore sono utilizzate in varie forme di analisi, ma sono più comunemente utilizzate per mostrare il comportamento degli utenti su pagine Web o template specifici di pagine Web, perché grazie alla codifica a colori consentono di comprendere subito quali parti di questa pagina ricevono maggiore attenzione, e quindi forniscono informazioni e spunti su come migliorare la struttura o la visibilità del sito.

In effetti, le heatmap possono diventare essenziali per rilevare ciò che funziona o non funziona su un sito o su una specifica pagina di prodotto e per intervenire nell’ottimizzazione della web usability – la facilità di utilizzo e quindi di comprensione e navigazione del sito e delle sue pagine – che a sua volta può consentire di aumentare le conversioni. In termini pratici, sfruttando tecniche come gli A/B test per sperimentare il posizionamento di determinati pulsanti ed elementi sul sito, le mappe di calore consentono di valutare le prestazioni effettive della pagina e di tentare di aumentare il coinvolgimento e la fidelizzazione degli utenti, migliorando la loro esperienza di interazione col sito.

La storia delle heat map: quando nascono e perché

Pur essendo uno strumento molto attuale, la pratica di utilizzo delle mappe termiche ha avuto origine nel 19° secolo, e in particolare nell’ombreggiatura manuale in scala di grigi a partire da una matrice di dati: un primo esempio di heatmap è quindi riscontrabile nel 1873, quando lo statistico francese Toussaint Loua usò un sistema di matrice di ombreggiatura per visualizzare le statistiche sociali nei distretti di Parigi, rappresentando i valori più grandi con piccoli quadrati grigi o neri e i valori più piccoli con quadrati più chiari.

https://www.hotjar.com/_next/image/?url=https%3A%2F%2Fimages.ctfassets.net%2Flh3zuq09vnm2%2F33LtSgOKZMyJNZotF8QfLf%2Fc11caefb80650899acc5f3643e639634%2Fheat-map-example.width-750.jpg&w=3840&q=75

Successivamente, altri studiosi hanno mostrato i risultati di analisi dei cluster permutando le righe e le colonne di una matrice per posizionare valori simili l’uno vicino all’altro in base al clustering, mentre negli anni Settanta Robert Ling ebbe l’intuizione di unire gli alberi a grappolo alle righe e alle colonne della matrice di dati, usando caratteri della stampante sovraccaricati per rappresentare diverse sfumature di grigio, una larghezza di carattere per pixel.

Negli anni Novanta, poi, ci sono stati due momenti importanti per questo strumento: nel 1994 Leland Wilkinson ha sviluppato SYSTAT, il primo programma per computer in grado di produrre mappe di calore dei cluster con grafica a colori ad alta risoluzione, e più o meno nello stesso periodo Cormac Kinney (un software designer) ha registrato il nome “heat map” per descrivere un display 2D raffigurante informazioni sui mercati finanziari, utile per dare agli operatori di borsa un tool visuale per agevolare la lettura dei dati finanziari in tempo reale.

Per la cronaca, nel 2003 la società che ha acquisito l’invenzione di Kinney ha involontariamente lasciato scadere il marchio.

Oggi, le mappe termiche possono essere create a mano, utilizzando fogli di calcolo Excel, o più semplicemente attraverso strumenti di analisi come Hotjar, probabilmente il tool più famoso per questo scopo.

Come funzionano le mappe di calore

Esistono diversi strumenti per capire quale sia l’impatto dei nostri contenuti e della loro organizzazione sugli utenti, e ad esempio Google Analytics è un miniera di dati per comprendere come le persone arrivano sul nostro sito, quante e quali pagine visitino e da quale pagina abbandonano la navigazione, ma non ci permettono di entrare nel dettaglio dell’interazione effettiva.

Il concetto su cui si basa l’applicazione delle heatmap al web è invece il seguente: scroll, movimenti e click del mouse vengono analizzati e, attraverso specifici software, trasformati in concentrazioni di colore che permettono di vedere la densità di utilizzo delle varie sezioni di una pagina.

Le aree con cui l’utente interagisce maggiormente sono quelle marcate con colori caldi, come rosso e arancione, invece verde e blu (o comunque colori generalmente freddi) identificano le zone con meno interazioni: basta quindi davvero solo un colpo d’occhio per capire e vedere quali parti di una pagina ricevono maggiore attenzione e quindi trarre indicazioni su come migliorare la struttura o la visibilità della pagina.

Aggregando il comportamento degli utenti, le mappe di calore facilitano l’analisi dei dati, combinando dati quantitativi e qualitativi, e forniscono un’istantanea di come il target di destinazione interagisca con un singolo sito o pagina di prodotto, su cosa fa clic, scorre o ignora, sulla porzione media “fold” (la parte della pagina che le persone vedono sullo schermo senza scorrere non appena ci atterrano).

In questo modo, le heat map offrono a esperti di marketing, analisti digitali e di dati, UX designer, specialisti di social media e chiunque operi nel digital marketing informazioni approfondite sul comportamento delle persone sul proprio sito, aiutandoli a identificare tendenze, scoprire quali sono i limiti della pagina che bloccano le conversioni e, di conseguenza, quali sono le azioni possibili per aumentare il coinvolgimento e le vendite.

Quali sono i tipi di heatmap

Esistono diversi tipi di mappe termiche, che essenzialmente consentono di visualizzare graficamente le informazioni relative a uno specifico parametro dell’interazione dell’utente. A seconda del tipo di analisi, lavorare con tali mappe consente di ricevere varie informazioni sul comportamento degli utenti e sul tipo di contenuto che attrae e trattiene il pubblico di destinazione e di comprenderne meglio gli interessi e le esigenze del nostro target.

In particolare, le tipologie principali di heatmap sono:

• Mappe che tracciano i clic (clic heatmap), che identificano cromaticamente le aree della pagina in cui utenti fanno clic più frequentemente o fanno tap da mobile – tutte le azioni interattive dell’utente su elementi come link interni, barra di navigazione, loghi, immagini, pulsanti CTA e tutto ciò che sembra essere cliccabile. Queste heatmap mostrano un aggregato dei punti in cui i visitatori fanno clic con il mouse sui dispositivi desktop o toccano con il dito sui dispositivi mobili (e si chiamano quindi anche mappe di calore touch), codificando con i colori gli elementi che sono stati cliccati e toccati di più (rosso, arancione, giallo).

• Mappe che tracciano lo scorrimento (scroll heatmap), che monitorano quanto a fondo gli utenti scrollano la pagina e mostrano le porzioni della pagina in cui i lettori arrivano​​​​ prima di abbandonare la navigazione. Queste heatmap mostrano la percentuale esatta di persone che scorrono verso il basso in qualsiasi punto della pagina; dal punto di vista visivo, più rossa è l’area, più persone la leggono. Le informazioni sono utili per i siti con contenuto testuali o e-commerce, sia in senso positivo (se c’è prevalenza di colori caldo) che in ottica di ottimizzazione (se c’è prevalenza di azzurro e toni freddi, vale la pena considerare di intervenire sui contenuti).

• Mappe di spostamento (move heatmap), che mostrano le zone in cui gli utenti muovono il cursore all’interno della pagina – e possono servire a comprendere come le persone percepiscono i contenuti e cosa li attrae di più, ma anche a scoprire elementi che li distraggono dal focus principale della pagina. Forniscono informazioni controverse e non pienamente affidabili, perché non possiamo sempre correlare direttamente i movimenti del mouse di un visitatore a ciò che sta effettivamente guardando: solo perché il mouse di un utente è rimasto sul titolo per 5 minuti, non significa che la persona stia ancora leggendo il titolo, e più in generale gli utenti non guardano sempre il punto esatto in cui si trova il loro mouse.

• Mappe di calore desktop e mobili (desktop & mobile heatmap), che servono a confrontare le prestazioni di un sito da dispositivi diversi: ad esempio, il contenuto che è prominente su una pagina desktop potrebbe trovarsi molto più in basso su un telefono, e quindi è cruciale vedere se l’interazione differisce e come.

• Mappe di calore con tracciamento oculare (eye-tracking Heat Maps), una visualizzazione avanzata che fornisce informazioni più dettagliate sul comportamento e sull’esperienza utente: condotti in appositi laboratori utilizzando le webcam installate su dispositivi (o fornendo gli utenti di appositi strumenti che tracciano gli sguardi), questo strumento traccia il movimento degli occhi dell’utente quando si trova sul sito e indica anche la durata della visualizzazione. Se le analisi rivelano, ad esempio, che le persone tendono a dare più rilevanza al lato sinistro del sito, è lì che sarà opportuno posizionare un logo, un banner e altre informazioni importanti.

I vantaggi delle heatmap e delle informazioni che mostrano

Al di là delle criticità segnalate, le heatmap (e in particolare quelle dei clic e di scorrimento) offrono una serie di vantaggi, perché raccolgono passivamente dati su come gli utenti interagiscono con gli elementi della pagina di destinazione post-clic, di approfondire questioni relative all’esperienza dell’utente e al percorso del cliente sulla pagina di destinazione post-clic, di basare le valutazioni su dati reali di comportamento degli utenti senza dover più affidamento solo a ipotesi.

Come detto, tutto diventa poi visibile in pochi istanti, a colpo d’occhio e in modo chiaro per qualsiasi tipo di osservatore: di norma, il blu indica le aree con il livello più basso di attività degli utenti in base a vari indicatori, mentre il rosso segnala le “aree calde”, quelle in cui si concentra il più alto livello di interazione dell’utente.

Applicata alla pagina di un sito web, una heatmap mostra quindi come gli utenti reagiscono al contenuto e ai suoi diversi elementi, facendoci quindi comprendere a cosa è più interessato il pubblico, sia in termini di testo che di elementi cliccabili; grazie a questa visualizzazione, ad esempio, potremmo scoprire che i visitatori non stanno facendo clic sul pulsante CTA impostato, ma che cercano di fare clic su un elemento che non è selezionabile.

Approfondendo l’analisi, poi, possiamo valutare l’efficacia effettiva della pagina verificando con quante (e con quali) informazioni interagiscono i visitatori – ovvero, quanta parte della pagina leggono effettivamente, e quindi quali sezioni di contenuto sono interessanti e utili – e che tipo di azione intraprendono le persone (ad esempio, quali sono gli elementi su cui cliccano? Le aree di interesse strategico sono nella parte più visualizzata? C’è qualche elemento che viene ignorato?).

E quindi, le heatmap si caratterizzano nel fornire una guida visiva del comportamento dei visitatori e nel supportare gli analisti a vedere la pagina di destinazione attraverso gli occhi dei visitatori, così da trarre informazioni utili per apportare le modifiche necessarie all’ottimizzazione della pagina stessa per raggiungere gli obiettivi di incremento delle conversioni.

Con questo strumento, i professionisti del marketing possono monitorare il comportamento dell’utente, raccogliere dati da utilizzare per eseguire test A/B, ottimizzare la pagina e aumentare le conversioni e ottenere insights utili per prendere decisioni UX sulle pagine.

I dati delle heatmap aiutano a rispondere ad alcune domande relative al comportamento degli utenti e alla loro esperienza sulla pagina, che servono a raggiungere una comprensione più profonda sull’interazione dei visitatori e a far emergere eventuali aree critiche da cambiare nella pagina perché non funzionano. Tra le domande, ad esempio, ci sono:

• In che modo i visitatori stanno effettivamente utilizzando la pagina di destinazione post-clic?
• Come navigano sulla pagina di destinazione post-clic?
• Cosa attira la loro attenzione e dove tendono a fare clic?
• Quale elemento della pagina stanno ignorando?
• Fanno clic sul pulsante di CTA?
• Quanto è accattivante il copy?
• In quale area della pagina andrebbero posizionati gli elementi cruciali, che i visitatori non devono assolutamente ignorare?

Heatmap e SEO: come usare le mappe termiche per l’ottimizzazione

Quanto già scritto dovrebbe averci fatto comprendere perché le heatmap possono (e spesso sono) usate a supporto di una strategia SEO più ampia e onnicomprensiva: mai come negli ultimi anni appare sempre più chiaro che la SEO riguarda principalmente l’esperienza dell’utente prima ancora che il rispetto di regole per i robot. In effetti, oggi si parla di ottimizzazione dell’esperienza di ricerca più che di ottimizzazione per i motori di ricerca, perché è SEO curare ogni fase della search journey, dalla prima impressione di un sito Web nei risultati di ricerca alla profondità, alla facilità e alla pertinenza delle informazioni che le persone trovano su un sito Web, perché solo capendo le richieste, gli interessi e le caratteristiche del pubblico di destinazione è possibile davvero ottimizzare il sito, ovvero renderlo attraente per le persone, che desiderano rimanere più a lungo sulle pagine e tornare per altre visite.

E quindi, per assicurare che la strategia sia efficace e ben impostata, monitorare il comportamento degli utenti del sito e valutare l’UX che ricevono quando utilizzano le risorse Web diventa fondamentale, e quindi le heatmap forniscono informazioni e dati efficaci per raggiungere questi obiettivi, insieme all’analisi di metriche come frequenza di rimbalzo, tempo sul sito, pagine visualizzate, frequenza di conversazione, che però non raccontano in profondità il vero rapporto della persona con la pagina.

Al contrario, una mappa termica ci consente di avere una finestra sulle pratiche comuni degli utenti su un sito e può aiutarci a determinare una serie di problemi che influiscono sulla strategia SEO, per capire quindi quali interventi correttivi attuare alla ricerca di soluzioni per migliorare l’esperienza utente complessiva e incrementare numero e qualità di visite e conversioni.

Quali aspetti delle pagine analizzare con le mappe termiche

Passando a consigli un po’ più pratici, sono diverse le informazioni utili alla SEO che ci arrivano dall’utilizzo delle heatmap.

Innanzitutto, con questo strumento e con l’analisi visiva possiamo approfondire meglio le effettive abitudini dei visitatori che interagiscono con le nostre pagine, scoprendo quali componenti ricevono maggiore attenzione, quali contenuti si rivelano più interessanti per il target, quali sezioni sono invece ignorate e fatte scorrere senza neppure uno sguardo, quali scelte di menu e filtri ottengono il maggior numero di clic.

Queste informazioni ci devono aiutare nel lavoro di rendere il sito il più semplice possibile da usare e nella ricerca di potenziali ostacoli che potrebbero ridurre l’engagement e i tassi di conversione, come sezioni, pulsanti o testi che possono distrarre l’utente o rendere negativa la sua esperienza.

Un altro aspetto concreto che si può migliorare grazie alle mappe termiche è il layout della pagina, che possiamo modellare su misura delle richieste, delle esigenze e dell’effettivo comportamento degli utenti, rimuovendo le zone di attrito e spostando gli elementi per noi più rilevanti nelle parti dove maggiormente si concentrano gli sguardi e gli interessi dei visitatori.

Scendendo ancora più in profondità, le heatmap ci sono aiutare a determinare il miglior stile del contenuto che presentiamo in pagina, ma anche la sua lunghezza ottimale: il word count resta un mito per la SEO, ma può aver senso scoprire se i lettori sono davvero interessati alla quota di testo che pubblichiamo e per capire il livello di informazioni di cui i visitatori hanno bisogno su una determinata questione. Se usiamo ad esempio una mappa a scorrimento possiamo identificare il punto in cui gli utenti lasciano più frequentemente la pagina Web e cercare di analizzarne i motivi: il contenuto precedente ha risolto il problema e fornito tutte le informazioni (e, quindi, la parte rimanente di testo è puramente “ornativa”)? O, al contrario, le persone non hanno trovato i dettagli a cui erano interessati e quindi magari tornano al motore di ricerca per lanciare altre query? Combinando questi insights con l’analisi del search intent relativo alla pagina di interesse, possiamo sperimentare la pubblicazione di testi di lunghezza diversa per determinare ciò che piace di più al pubblico e costruire una content strategy su misura delle esigenze del nostro pubblico.

Questo ultimo consiglio rientra a pieno nel primo utilizzo pratico delle heatmap, ovvero il supporto ai famosi Test A/B, che servono a valutare la percezione dell’utente e decidere se sia conveniente apportare modifiche alla pagina (e di che tipo): monitorando la reazione di diversi gruppi di utenti agli interventi correttivi proposti sarà possibile prendere la decisione giusta in modo più consapevole e ottimizzare la risorsa nel migliore dei modi.

Infine, con le heatmap possiamo avere uno strumento per migliorare la nostra strategia di link interni e, in parte, anche di linking esterna. Come sappiamo, i collegamenti interni sono essenziali per connettere le pagine del sito e impostare una gerarchia di contenuti sulle pagine più popolari: con le mappe termiche possiamo avere informazioni specifiche su dove gli utenti fanno clic e ottimizzare il posizionamento dei link, indirizzando più traffico alle pagine correlate.

Per quanto riguarda la linking esterna, invece, le heatmap ci aiutano in due modi: ci permettono di scoprire quali collegamenti ottengono il maggior numero di clic e di verificare se gli utenti prestano attenzione al tipo di autorevolezza del dominio linkato.

Ad esempio, alcuni lettori potrebbero seguire un collegamento rivolto a siti web/istituzioni, ma non cliccare su link verso siti meno noti; allo stesso modo, alcune persone potrebbero lasciare la pagina dopo aver incontrato un link in uscita che percepiscono come spam o irrilevante, e quindi cambiare la destinazione, rivolgendo il link a una fonte migliore, potrebbe essere un primo intervento immediato per invertire la rotta, prima di passare alle modifiche del contenuto stesso.

Heatmap per la SEO: le conclusioni

Provando a tessere le fila di questo discorso così lungo, di sicuro le heatmap ci aiutano ad avere indicazioni per migliorare la struttura e l’usabilità del sito, indicatori molto importanti per la user experience e “base” su cui poggiare i contenuti (ben ottimizzati per rispondere al search intent) con l’obiettivo di conquistare le migliori posizioni nei risultati di ricerca e aumentare il traffico organico.

È chiaro, però, che le mappe termiche sono solo uno strumento da usare insieme agli altri all’interno di una più ampia strategia SEO, e non un elemento che, da solo, può cambiare magicamente le sorti del progetto.

Inoltre, ci sono alcuni aspetti legati all’uso e alla comprensione delle heatmap su cui bisogna soffermarsi: innanzitutto, come per altri tipi di strumenti di web analytics, anche alle mappe di calore serve una grande quantità di dati – accurati e, soprattutto, generalizzabili – prima di poter essere affidabili. Analizzare le heatmap sulla base di campione molto ridotto è simile a chiudere un test A/B troppo presto, sulla base di pochissime visite o conversioni; poiché le mappe di calore mostrano le tendenze, è importante disporre di informazioni sufficienti per garantire che eventuali anomalie non influiscano sull’immagine complessiva dello strumento stesso.

È quindi importante essere consapevoli dei limiti delle mappe di calore che, se utilizzate in modo errato, possono essere fuorvianti e incoraggiare gli analisti a fare ipotesi che potrebbero non essere corrette: il primo punto è impostare il giusto approccio, ricordando che le heatmap ci dicono cosa è successo su una pagina, ma non possono dirci perché è successo.

Serve quindi anche una consapevolezza nella lettura dei dati e nell’interpretazione delle aree termiche: ad esempio, le mappe dei clic relative a una pagina con un modulo possono mostrare che gli utenti fanno molti clic sul primo campo e che ci sono meno clic sui campi successivi. A prima vista, ciò potrebbe suggerire che gli utenti stiano abbandonando il processo dopo aver compilato il primo campo, ma in realtà è più probabile che le persone proseguano la compilazione dei campi usando la tastiera anziché il mouse. Le heatmap non offrono questa informazione, che invece è disponibile negli appositi strumenti di analisi dei form, che misurano il tempo trascorso all’interno di ciascun campo, anziché solo i clic.