Utilizzo delle mappe di calore nella pagina dei prezzi

Iniziamo “The A/B Test of the Month” con un test che non è A/B. Prima di scappare in un altro angolo di Internet, lascia che ti spieghi perché inizieremo con le mappe di calore.

Una delle cause principali del mancato utilizzo regolare del test A/B sul proprio sito Web è il non sapere da dove iniziare: quali modifiche devo provare, dove e perché? Queste sono le domande chiave che ti farai. Se non sai come rispondere, smetterai di testare.

Per ovviare a questo, quello che consiglio è che la prima cosa da fare è scegliere una pagina dal tuo sito web per iniziare. Questa pagina deve essere pertinente ai tuoi obiettivi. Ciò significa che è una pagina in cui ricevi molte visite, oppure è una pagina chiave per la tua attività o attività.

Nell'esempio di oggi, abbiamo scelto di iniziare con le pagine dei prezzi dei nostri plugin premium: Nelio A/B Testing e Nelio Content. Queste pagine sono fondamentali per la nostra attività, dal momento che il reddito della nostra azienda passa attraverso entrambe.

Ora che abbiamo scelto le pagine, per sapere quali modifiche apportare e perché, è meglio iniziare eseguendo un test di heatmap. Lo facciamo perché le mappe di calore ci forniscono dati reali su come i nostri visitatori interagiscono con il nostro sito web.

Quando vediamo davvero come si comportano le nostre pagine con i dati degli utenti reali, è molto più facile ottenere idee per l'esecuzione di test futuri. Questo è il motivo per cui le mappe di calore sono sempre un buon inizio.

Come creare un test di Heatmap in WordPress

Creare un test della mappa di calore per una pagina WordPress è molto semplice. Non ti resta che selezionare la pagina prescelta e iniziare il test.

In Nelio A/B Testing, crea un nuovo test heatmap selezionando questo tipo di test dalla finestra di dialogo che si apre quando fai clic sul pulsante per aggiungere un nuovo test.

Nella schermata di modifica del test, imposti un nome per il test in modo che sia facile identificarlo in seguito. Puoi anche aggiungere una descrizione di ciò che vuoi provare nel test. Ultimo ma non meno importante, è necessario selezionare la pagina su cui si desidera eseguire il test della mappa di calore:

Quando hai tutto pronto (come vedi nello screenshot precedente, è molto semplice), clicca sul pulsante nell'angolo in alto a destra della finestra per avviare il test. Devi solo aspettare che i tuoi visitatori arrivino in modo che Nelio A/B Testing raccolga dati dal loro comportamento sulla pagina ed elabori i risultati.

Risultati della mappa di calore

Nel nostro caso abbiamo eseguito contemporaneamente due test della mappa di calore sul nostro sito Web: uno per la pagina dei prezzi di Nelio A/B Testing e un altro per la pagina dei prezzi di Nelio Content.

Ogni test ha raccolto dati per circa 20 giorni e ha analizzato il comportamento di circa 500 visitatori. Questo è più che sufficiente per poter trarre alcune conclusioni e pensare ai futuri test A/B che potremo eseguire in queste pagine.

Tieni presente che queste pagine non sono quelle con più visite sul nostro sito web. Sono la fase finale del funnel di conversione, quindi il traffico viene perso lungo il percorso. Ma ricorda che li abbiamo scelti per la loro importanza per la nostra attività. Nei test futuri studieremo altre pagine con più traffico, per altri motivi che spiegheremo.

Pagina dei prezzi di Nelio A/B Testing

Partiamo dai risultati ottenuti per la pagina dei prezzi di Nelio A/B Testing. Il test della mappa di calore ci mostra i dati da tre diverse prospettive: mappa di calore, mappa di scorrimento e coriandoli. Incorporare qui le 3 immagini complete è troppo, perché sono piuttosto grandi in termini di altezza in pixel. Per evitare di costringerti a scorrere su e giù fino in fondo, li ho appena collegati qui:

• Heatmap della pagina dei prezzi di Nelio A/B Testing.
• Scrollmap della pagina dei prezzi di Nelio A/B Testing.
• Coriandoli dalla pagina dei prezzi di Nelio A/B Testing.

Diamo ora un'occhiata ai frammenti più rilevanti dei risultati precedenti:

Come puoi vedere nell'immagine precedente, una heatmap è una rappresentazione grafica che mostra l'interazione degli utenti con gli elementi della pagina, in modo aggregato e con una scala di colori dove un colore caldo indica una grande rilevanza.

Nella pagina dei prezzi di Nelio A/B Testing, la prima piega della pagina è dove ci sono più punti caldi. Se lo analizziamo in dettaglio, gli elementi nell'area del piano di base e del piano professionale acquistano maggiore rilevanza rispetto a quelli dell'impresa. Detto questo, forse potremmo riordinare i piani tariffari per mostrare prima il piano aziendale. Nota che siamo abituati a leggere da sinistra a destra, quindi mostrare prima il piano più costoso nella pagina dei prezzi può essere un buon cambiamento da provare in un test A/B.

Un altro elemento che riceve molta interazione da parte dell'utente è il link da scorrere verso il basso per vedere il confronto dettagliato dei piani. Questo è positivo, poiché significa che c'è interesse a vedere maggiori dettagli sui piani.

Quello che non è così buono è che ci sono molte interazioni negli elementi non cliccabili. Lo puoi vedere nei coriandoli, che è la rappresentazione grafica dove puoi vedere tutti i click effettuati dai visitatori:

Nell'intero blocco di piani che puoi vedere nello screenshot precedente, solo i pulsanti che appaiono in ogni piano sono elementi su cui è possibile fare clic. Tieni presente che fare clic su tutto il resto non ha alcun effetto. La nostra attuale interfaccia sta generando confusione.

I visitatori stanno cliccando sui testi e sulle icone delle caratteristiche di ogni piano, che sono elementi non cliccabili. Da qui possiamo capire che cercano di trovare maggiori informazioni a riguardo, ma invece abbiamo queste informazioni più in basso nella pagina.

Un altro test A/B che potremmo provare qui è quello di modificare ciascuna delle caratteristiche dei piani in modo che abbiano un elemento fluttuante che appare quando si passa il mouse sopra il testo e fornisce informazioni più contestuali al visitatore. Potremmo testare questa versione con l'aiuto contestuale rispetto alla versione corrente per vedere quale finisce per generare più acquisti.

I coriandoli ci forniscono anche informazioni aggregate sui visitatori, estratte dai clic che hanno effettuato. Nelio A/B Testing include diversi tipi di filtri per comprendere meglio le diverse caratteristiche dei visitatori, come puoi vedere qui:

Da questi filtri abbiamo estratto i seguenti dati:

• Chrome e Firefox sono di gran lunga i browser più utilizzati dai nostri visitatori. Pertanto, dobbiamo fare in modo che il Web abbia un bell'aspetto, almeno, in questi browser.
• La metà dei visitatori di questa pagina proviene dagli Stati Uniti. Questo corrisponde ai nostri dati di vendita.
• I visitatori ci visitano di più i primi 3 giorni della settimana. Conoscere queste informazioni può essere utile, ad esempio, per fare offerte gli altri giorni in altre aree del web, e quindi attirare traffico nei giorni a basso traffico.
• Quasi il 100% dei visitatori accede alla pagina da un computer desktop o laptop. Abbiamo a malapena visite da dispositivi mobili. Questo è qualcosa da studiare in futuro.
• Windows 10 e Mac OS X sono i sistemi operativi da cui le persone ci visitano. Corrisponde ai dati precedenti, poiché non abbiamo visitatori da sistemi operativi per dispositivi mobili.
• Abbiamo più visitatori durante la giornata lavorativa (il test è stato eseguito nel fuso orario di Chicago). Ha senso, dal momento che il nostro cliente principale è dagli Stati Uniti.
• Le visite vengono effettuate su schermi con larghezza minima superiore a 1500 pixel. Un altro fatto che conferma che le visite provengono da computer desktop o laptop.

Se controlli le versioni complete della mappa di calore e dei coriandoli, vedrai che tutte le altre sezioni della pagina dei prezzi di Nelio A/B Testing sono meno rilevanti. Con questo in mente, controlliamo la seguente mappa di scorrimento:

Se controlli la scrollmap completa puoi vedere che pochissimi visitatori vanno oltre la prima piega della pagina. Questo mi fa pensare che forse dovremmo scegliere una versione molto più breve della pagina dei prezzi di Nelio A/B Testing, condensando le informazioni rilevanti above the fold.

Le sezioni dopo la prima piegatura della pagina contengono molto testo e i visitatori non lo stanno leggendo. Meno del 20% viene a vedere e interagire con la tabella dettagliata confrontando i piani, che trovi in ​​fondo al web. Tutti questi dati sono forniti dalla scrollmap:

Testare con versioni più brevi della pagina che includono più sezioni visive può aiutare a convincere il potenziale acquirente e ottenere una pagina dei prezzi molto più efficace ed efficiente. Questa è un'altra idea di un possibile cambiamento da provare con un test A/B.

Abbiamo già alcune idee che potremmo testare in futuro, quindi è chiaro che le informazioni che ci forniscono le mappe di calore sono molto utili per ottenere idee che possiamo poi applicare nei test A/B.

Pagina dei prezzi di Nelio Content

Come per la pagina dei prezzi di Nelio A/B Testing, qui hai le immagini complete con i risultati della mappa di calore per la pagina dei prezzi di Nelio Content:

• Heatmap della pagina dei prezzi di Nelio Content.
• Scrollmap della pagina dei prezzi di Nelio Content.
• Coriandoli della pagina dei prezzi di Nelio Content.

La pagina dei prezzi di Nelio Content è più semplice e più breve di quella di Nelio A/B Testing. Tra le altre ragioni, questa pagina ha un solo piano, mentre con Nelio A/B Testing avevamo 3 piani diversi.

Se guardi la heatmap completa e la confronti con quella di Nelio A/B Testing vedrai che in questo caso ci sono più punti caldi in altre parti della pagina, oltre alla prima piega.

Nell'immagine precedente vediamo che i pulsanti di azione all'interno della tabella che confronta i piani hanno una rilevanza speciale. Questo è un bene, perché li abbiamo lì per questo motivo. Tuttavia, tieni presente che il piano Starter nella tabella, che non è altro che la versione gratuita di Nelio Content, assume particolare rilevanza.

Qui la domanda è se dovremmo avere un collegamento alla directory dei plugin di WordPress nella nostra pagina dei prezzi in modo che i visitatori possano scaricare o meno la versione gratuita di Nelio Content. Ora ce l'abbiamo, ma la mappa di calore mostra che probabilmente diversi visitatori stanno lasciando la nostra pagina dei prezzi per passare alla versione gratuita.

Questo argomento è controverso e fonte di lunghe discussioni nei nostri incontri. Da un lato, mantenere il link non va bene perché si perde una possibile vendita diretta all'interno della pagina dei prezzi. Ma anche se i visitatori lasciano il nostro sito, è possibile che provare gratuitamente Nelio Content sia una buona cosa. Gli utenti potrebbero amare lo strumento e finire per acquistarlo in seguito, dopo averlo testato. In Nelio ne abbiamo discusso più volte e suppongo che oggi non sarà l'ultima volta che lo facciamo?. Per ora, il collegamento rimane. Cosa ne pensi?

Vediamo anche che il video cattura molta attenzione. Abbiamo creato un video molto interessante e forse potremmo mostrarlo prima nella pagina. Potremmo provare questa modifica con un test A/B perché anche la sezione dopo il primo piegamento non sta ricevendo molta rilevanza.

D'altra parte, vediamo sulla scrollmap che la perdita di visitatori è meno brusca mentre scorriamo la pagina verso il basso. Ciò conferma che una pagina dei prezzi più breve potrebbe funzionare meglio se ciò che vogliamo è che il visitatore veda quanto più contenuto possibile.

Inoltre, unitamente alla precedente heatmap, vediamo che le due sezioni dopo la prima piega, che parlano di caratteristiche specifiche e mostrano le opinioni delle persone, potrebbero aver bisogno di un restyling. Sono sezioni con troppo testo e che non attirano troppa attenzione. Potremmo provare una versione alternativa più visiva e diretta.

Per quanto riguarda la grafica dei coriandoli dei clic, è interessante notare la quantità di clic errati che vengono effettuati nelle aree non cliccabili all'interno della prima piega della pagina:

Anche se la maggior parte di questi clic non può essere evitata (sì, supponiamo che le persone facciano clic su aree laterali, specialmente a destra, durante lo scorrimento), ce ne sono altri che sono il risultato di visitatori confusi. Questo è il caso dei clic sul numero di prezzo mensile che vedi nello screenshot precedente. Quel prezzo non è un elemento cliccabile; devi invece fare clic sul pulsante arancione. Tuttavia, il numero di prezzo annuale mostrato di seguito è un collegamento corretto.

Dobbiamo cercare un altro modo meno confuso per mostrare i due prezzi, con un'interazione uguale per entrambi i casi. Questo è un altro test A/B che potremmo eseguire su questa pagina.

E adesso?

Abbiamo iniziato senza avere la minima idea di quali test A/B avremmo potuto eseguire sul nostro sito web. Abbiamo visto che le mappe di calore ci aiutano a ottenere facilmente idee da testare nei test A/B sulle nostre pagine. Una volta che abbiamo queste idee di test, ciò che dobbiamo fare è dare loro la priorità in base alle nostre esigenze.

Ricorda che le modifiche nella prima piega della pagina sono più veloci da testare poiché più persone le vedranno e quindi otterrai risultati più velocemente. Potresti iniziare a dare la priorità ai test A/B che provano le modifiche in quella parte della pagina.

E la lezione più importante qui è: una volta che inizi a testare, non fermarti. Dopo ogni iterazione del processo di test imparerai qualcosa di nuovo sia dal tuo sito web che dai tuoi visitatori.

Ci vediamo il mese prossimo con un altro tipo di test in cui analizzeremo i risultati reali. Ricordati di lasciarmi un commento con la tua opinione su questo post e tutto ciò che ho spiegato qui. Su quale pagina del tuo sito eseguiresti una mappa di calore?

Immagine in primo piano di Steve Halama su Unsplash.