Tutto ciò che devi sapere prima di utilizzare una mappa termica della pagina di destinazione

Il software di Cormac Kinney è iniziato come uno strumento per aiutare i trader di Wall Street a giocare con il mercato azionario. Trasformava i dati finanziari in "mosaici luminosi di quadrati rossi e blu", chiamati "mappe di calore", che segnalavano ai trader quando acquistare o vendere utilizzando il colore.

Più di due decenni dopo, non sono solo i trader a trarre vantaggio dalle mappe di calore e dalle informazioni che forniscono. Anche i marketer (e ora i clienti di Instapage) li usano. E così facendo, stanno imparando esattamente come si comportano i potenziali clienti sulle loro pagine web.

Cos'è una mappa termica?

Una mappa termica è una visualizzazione dei dati che mostra come i visitatori interagiscono con una pagina web utilizzando un sistema codificato a colori. Dai un'occhiata, ad esempio, alla mappa termica forse più nota di tutti i tempi (almeno dai marketer digitali), che mostra che le persone leggono in uno schema a forma di F sul web:

Le parti rosse e gialle della mappa indicano un'area altamente vista. Il blu è dove i visitatori hanno guardato di meno.

Questi dati particolari sono stati raccolti dal Nielsen Norman Group da uno studio di eye-tracking del 2006 che ha monitorato lo sguardo dei visitatori mentre incontravano il testo su una pagina web. Ma test come questi non sono quelli che probabilmente vedrai circolare sul web.

Mappe di calore con tracciamento oculare e mappe di calore con tracciamento del mouse

Le mappe di calore degli esperimenti di tracciamento oculare sono le più accurate, ma sono anche le più costose e scomode da produrre. Studi come quello di Nielsen Norman sopra di solito si svolgono in un ambiente controllato (laboratorio, interno) con un team di ricerca o hardware costoso che osserva gli occhi dei visitatori mentre interagiscono con la tua pagina web. Questi possono costare fino a diverse migliaia di dollari per l'esecuzione.

Poiché assumere un intero team di ricercatori è fuori discussione per la maggior parte delle aziende, molti si rivolgono invece al software di tracciamento del mouse. A differenza del monitoraggio dei movimenti oculari effettivi, il software di tracciamento del mouse monitora il movimento del mouse dei visitatori , come clic, scorrimento e passaggio del mouse .

Poiché questo metodo non richiede un ambiente di laboratorio formale o una grossa fetta del budget di un'azienda, è molto più facilmente accessibile. Oggi è possibile installare un software di tracciamento del mouse e iniziare a monitorare immediatamente il comportamento dei visitatori - e alcune ricerche mostrano, quasi con la stessa precisione degli studi formali di tracciamento degli occhi.

La mappa termica a sinistra è stata prodotta da uno studio formale di tracciamento oculare, mentre quella a destra è stata generata con il tracciamento del mouse. Secondo ClickTale, gli esperimenti in cui entrambe le tecniche sono state somministrate contemporaneamente hanno mostrato che c'è una correlazione dell'84-88% tra i loro risultati.

Fondamentalmente, in alcuni casi, dove le persone muovono il mouse e dove guardano tendono a coincidere (ne parleremo più avanti).

I diversi tipi di mappe termiche di tracciamento del mouse disponibili

Quando le persone fanno riferimento a una "mappa di calore", si riferiscono a una visualizzazione che mostra il comportamento dell'utente. Ma il comportamento dell'utente non è sempre lo stesso. Alcune mappe di calore mostrano come le persone scorrono, mentre altri tipi possono identificare dove le persone passano il mouse su uno schermo. I tipi principali di mappe termiche di tracciamento del mouse sono i seguenti:

Fare clic sulle mappe di calore

Le mappe dei clic mostrano dove un visitatore ha cliccato sulla tua pagina web. Sono particolarmente utili per scoprire link popolari o aree che i visitatori potrebbero pensare siano link ma non lo sono.

Prendi questa mappa in particolare, ad esempio, che ha scoperto che gli elementi più cliccati su una pagina erano foto del prodotto:

Il fondatore di Brothers Leather Supply Company, Adam Kail, spiega come questa mappa abbia cambiato l'attenzione dell'azienda quando si è trattato di progettare la pagina del prodotto:

Le mappe di calore hanno rafforzato la nostra esigenza di immagini straordinarie su tutte le pagine dei nostri prodotti. Prima ci servivamo della copia giusta, ma ora passiamo del tempo a ottenere le immagini giuste. Ogni immagine mostra un uso o un'angolazione diversa per le nostre borse... I futuri clienti vogliono sapere come appare la borsa con un laptop all'interno quando è piena quando qualcuno la indossa.

In definitiva, questo è l'obiettivo dell'analisi della mappa di calore: scoprire il comportamento dei visitatori nella vita reale che è possibile utilizzare per ottimizzare l'esperienza dell'utente. Per illustrare, diamo un'occhiata a un'altra mappa dei clic che proviene da una pagina di destinazione post clic di un telefono cellulare:

Delineato in rosso, noterai che il telefono più cliccato è molto al di sotto della piega, situato sotto diversi modelli meno popolari. Quindi, come puoi utilizzare questa mappa per migliorare l'esperienza dell'utente?

Sostituisci uno dei modelli meno popolari above the fold con quello delineato in rosso. In questo modo, le persone non devono cacciare per trovarlo.

Forse la mappa termica più rilevante per il design della pagina di destinazione post clic proviene da un caso di studio di VWO su un cliente, Pair (ora Couple).

Ecco la home page originale dell'app:

Ed ecco come appariva la mappa di calore dei clic di quella homepage:

Hai notato cosa ha fatto il marketer della crescita di Pair, Lim Cheng Soon, in questa mappa di calore? Lui dice:

Ho scoperto che troppe persone fanno clic sulla barra di navigazione in alto invece di fare clic sul pulsante di conversione (collegamento ad AppStore e Google Play). Quindi ho inventato una teoria secondo cui avere troppe "distrazioni" attorno al pulsante di conversione non era una buona idea.

Quindi faccio un paio di test A/B basati sulla teoria della rimozione delle "distrazioni" attorno al pulsante di conversione.

I risultati?

• Nascondere il testo "download gratuito" sopra il pulsante ha aumentato il tasso di conversione del 10%.
• Nascondere il menu di navigazione ha aumentato il tasso di conversione del 12%

La teoria delle "troppe distrazioni" di Soon non è affatto inventata. Come hanno dimostrato molti altri test, i collegamenti di navigazione possono ridurre drasticamente il tasso di conversione. Nella tua pagina di destinazione post clic, è meglio escluderli dal tuo design.

Le mappe dei clic come quelle sopra sono particolarmente preziose perché un clic segnala l'intento: l'azione è più probabilmente intenzionale che casuale. Quando qualcuno fa clic, lo fa perché vuole saperne di più su un particolare elemento o sul contenuto a cui corrisponde (un pulsante CTA, link "chi siamo", ecc.).

Scorri mappe di calore

"Non finirai questo articolo" era il titolo di un pezzo pubblicato da Slate nel 2013. In esso, l'autore Farhad Manjoo ha rivelato i risultati di un'analisi della mappa di calore congiunta tra Chartbeat e la rivista online, che ha mostrato che pochissime persone leggono tutto la strada attraverso gli articoli.

Anche se un impressionante 86,2% di coinvolgimento è avvenuto below the fold, solo il 25% delle persone ha passato il pixel numero 1600 (la maggior parte degli articoli Slate sono lunghi circa 2.000 pixel). Intuizioni come queste sono ciò che le mappe di scorrimento sono utili per scoprire, in particolare su pagine più lunghe.

In termini di pagina di destinazione post clic, è più probabile che sia una pagina di vendita. Questi documenti di marketing persuasivi, sapientemente redatti, possono raggiungere proporzioni gigantesche. Questo, ad esempio, è lungo più di 5.000 parole (clicca qui per la pagina intera):

Una mappa a scorrimento su una pagina come questa può dire ai suoi creatori dove le persone stanno cadendo nel processo di lettura. Con questi dati, i creatori possono ipotizzare i motivi del calo: copia poco brillante, pubblicità fastidiose o persino un cambiamento nel colore di sfondo, afferma Peep Laja:

Se hai linee forti o cambiamenti di colore (ad es. lo sfondo bianco diventa arancione), questi sono chiamati "fini logici" - spesso le persone pensano che ciò che segue non sia più collegato a ciò che è venuto prima.

Da lì, gli ottimizzatori possono testare potenziali modi per convincere le persone a leggere l'intera pagina, cosa che un esperimento di Nielsen Norman Group mostra è certamente possibile:

È raro ma possibile.

Tieni presente che la mappa sopra è dei movimenti oculari, non esclusivamente della profondità di scorrimento. Ciò significa che è più dettagliato di quello che vedrai su una mappa a scorrimento, che mostrerà solo fino a che punto i tuoi visitatori sono progrediti lungo la pagina. Ecco un esempio tratto da un test eseguito sul sito Web di RJMetrics:

Le aree più viste in questa pagina web, per colore, sono:

• bianco
• rosso
• Giallo
• Verde
• Blu

Sappiamo cosa stai pensando: come potrebbe essere visualizzata la parte superiore di una pagina meno del centro?

Bene, la ricerca di Chartbeat mostra che molte persone tendono a iniziare a scorrere prima ancora che una pagina venga caricata, il che significa che perderanno la parte superiore.

La loro ricerca mostra anche che il coinvolgimento raggiunge i picchi appena sotto la piega per molte pagine:

E questo potrebbe spiegare perché l'area vicino alla piega è rossa, mentre gran parte dell'area sopra è gialla.

Da questa mappa, Stephanie Liu, ex sviluppatore front-end di RJMetrics, ha avanzato la seguente ipotesi:

La mia ipotesi era che lo spostamento del pulsante nell'area della mappa di scorrimento bianca avrebbe causato un tasso di conversione più elevato del design rispetto alla pagina dei prezzi originale. Più persone presteranno attenzione al pulsante semplicemente perché i loro occhi rimarrebbero lì più a lungo.

La pagina originale era così:

La variazione che ha creato assomigliava a questa:

Il risultato è stato un aumento del 310% delle conversioni.

I due importanti risultati di questo test della mappa di scorrimento sono:

1. Con una mappa a scorrimento, non saprai perché le persone stanno scorrendo così lontano. Tu e il tuo team dovrete fare alcuni test di ipotesi per capirlo.

2. A volte non hai necessariamente bisogno di sapere perché le persone lasciano dove lo fanno. L'obiettivo non è sempre quello di convincere le persone a scorrere più a fondo. Nel caso di Stephanie, il semplice spostamento del pulsante CTA in un'area più visibile ha portato a un grande aumento della conversione per RJMetrics.

Mappe di calore al passaggio del mouse (dette anche mappe di calore del movimento)

I tuoi occhi si muovono dove si muove il cursore del mouse: questo è il presupposto generale su cui si basano le mappe di calore al passaggio del mouse, note anche come mappe di calore di "movimento".

L'accuratezza di queste mappe si basa sulla correlazione tra il movimento degli occhi e il movimento del mouse, che lo studio a cui si è fatto riferimento in precedenza mostra che può essere intorno all'84-88%. Altre fonti, tuttavia, non sono convinte che sia così alto.

Nel 2010, la dott.ssa Anne Aula di Google ha pubblicato le sue scoperte sull'accuratezza delle mappe di calore al passaggio del mouse:

• Il 6% delle persone ha mostrato una correlazione verticale tra il movimento del mouse e il movimento degli occhi.
• Il 19% delle persone ha mostrato una correlazione orizzontale tra il movimento del mouse e il movimento degli occhi.
• Il 10% delle persone si è soffermato su un particolare elemento della pagina mentre guardava le aree circostanti.

E ancora un altro esperimento di Google e Carnegie Mellon ha trovato una correlazione del 64% tra il movimento del mouse e il movimento degli occhi.

Inutile dire che la ricerca sulle mappe di calore del movimento è ovunque. Ma per quanto riguarda le applicazioni nella vita reale?

Beh, è ​​anche un po' dappertutto.

Ecco una mappa di calore al passaggio del mouse North Face utilizzata per ottimizzare la sua pagina di pagamento:

A sinistra, la versione A sembra mostrare che un banner nella barra laterale destra sta ricevendo più attenzione rispetto al pulsante CTA (cerchiato in bianco) sotto di esso. La versione B ne tiene conto e cambia il banner con il pulsante (di nuovo, cerchiato in bianco).

Il risultato è stato un aumento del 62% del tasso di conversione.

Ecco un'altra mappa al passaggio del mouse che sembra mostrare... beh... guarda tu stesso:

Non sembra esserci una chiara conclusione da questa mappa. C'è un sacco di librarsi. Da tutte le parti.

Nel complesso, la cosa più importante da trarre dalla ricerca sulla mappa di calore al passaggio del mouse e dalle sue applicazioni pratiche è questa:

Usa le mappe al passaggio del mouse per informare il tuo design, ma nelle parole di Rory Gallagher di EyeQuant, "non generalizzare eccessivamente".

Se la tua mappa assomiglia a quella prodotta da North Face, potresti avere una valida ipotesi per il test A/B, come questa:

"Abbiamo notato da una mappa di calore al passaggio del mouse che l'area sopra il pulsante CTA della pagina di pagamento sembra attirare più attenzione dei visitatori. Pertanto, riteniamo che cambiando il pulsante con il banner promozionale sopra di esso, possiamo aumentare i pagamenti.

Se sviluppi un'ipotesi di test dalla seconda mappa di calore, tuttavia, sei probabilmente colpevole di bias di conferma: cerchi un risultato particolare da un test semplicemente perché conferma la tua fede in qualcosa. Un tratto disinformato potrebbe assomigliare a questo:

“Abbiamo notato dalla mappa di calore al passaggio del mouse che le parole 'How To' sembrano attirare più attenzione di qualsiasi altra cosa above the fold. Pertanto, riteniamo che in futuro tutti i titoli dei post sui blog dovrebbero iniziare con "How To" per attirare i lettori".

"Come" è un ottimo modo per iniziare un titolo, ma questo test non lo indica. Avvicinati ai risultati della mappa di calore con una mentalità scettica e prova solo quando hai una chiara ragione per farlo.

Utilizzo responsabile delle mappe di calore

Le mappe di calore sono preziose per scoprire come le persone usano la tua pagina web, ma non dovrebbero essere l'unico strumento che usi per farlo. Da soli, dipingono un'immagine incompleta dei tuoi utenti e fare affidamento su di loro come unico indicatore del comportamento dei potenziali clienti ha il potenziale per fuorviarti. Il team di Optimizely offre un esempio:

Quando si esamina una mappa termica di un modulo, è possibile che gli utenti stiano facendo clic sul primo campo e che ci siano meno clic sui campi successivi.

Ciò potrebbe suggerire che gli utenti stanno abbandonando il processo dopo aver compilato il primo campo. Ciò che le mappe di calore non mostrano, tuttavia, è se gli utenti hanno utilizzato la tastiera per scorrere i campi del modulo, anziché il mouse.

Per ragioni come quella, combinare le tue mappe di calore con le informazioni di altri strumenti come Google Analytics o Instapage Analytics formerà un'immagine più completa di come si comportano i tuoi potenziali clienti sulla tua pagina di destinazione post-clic.

Ma quella "immagine più completa" varrà qualcosa? No, se non raccogli abbastanza dati utente, dice Peep Laja:

Hai bisogno di una dimensione del campione sufficiente per pagina/schermata prima di poterti fidare di qualsiasi risultato. Un campo da baseball approssimativo sarebbe 2000-3000 pagine visualizzate per schermata di progettazione. Se la mappa di calore si basa su 34 utenti, non fidarti di nessuno di essi.

Alla fine della giornata, è importante ricordare che le mappe di calore non sono dati; organizzano semplicemente i dati in modo facilmente digeribile. Mostrano clic, scorrimenti e passaggi del mouse. Sta a te determinare cosa significano quei movimenti del mouse.

Collega sempre tutti i tuoi annunci a pagine di destinazione post clic personalizzate per ridurre il costo per acquisizione del cliente. Inizia a creare le tue pagine post clic dedicate registrandoti oggi stesso per una demo di Instapage Enterprise.