Testare diversi stili nei pulsanti di pagamento

Oggi vi porto un altro A/B test che stiamo facendo da qualche mese. Come sempre all'interno di questa serie di articoli mensili, andremo a vedere nel dettaglio l'ipotesi di miglioramento che abbiamo fatto, la sua applicazione attraverso la creazione di variazioni di una pagina del nostro sito web, ei risultati che abbiamo ottenuto.

Tempo fa stavamo studiando il colore dei pulsanti di azione nella pagina principale di Nelio Content. Grazie a un test A/B degli stili CSS, siamo stati in grado di vedere come il colore verde funziona meglio per i nostri visitatori di lingua inglese su quella pagina.

Non possiamo presumere che questo sarà il caso per qualsiasi pagina. Ecco perché oggi testeremo il colore e le dimensioni dei pulsanti di checkout dalla tabella dei prezzi che appare nella pagina di acquisto di Nelio A/B Testing.

Definizione del test A/B

La nostra ipotesi di miglioramento è che cambiando il colore e la dimensione dei pulsanti di checkout nella tabella dei prezzi di Nelio A/B Testing otterremo più clic su questi pulsanti e, di conseguenza, avremo più vendite.

La versione originale della tabella dei prezzi di Nelio A/B Testing mostra i tre piani che vendiamo, ciascuno con il suo prezzo, i dettagli e un pulsante per iscriversi al servizio. Puoi vederlo nel seguente screenshot:

I pulsanti sono di un colore grigio che risalta poco, fatta eccezione per il piano professionale, che presenta un pulsante blu scuro per dare più risalto a questo piano rispetto agli altri due.

La prima cosa che verificheremo è se cambiare il colore di questi pulsanti per renderli più sorprendenti è meglio o meno. Per questo, la versione alternativa che abbiamo proposto include un cambio di stili CSS con nuovi colori, come puoi vedere di seguito:

Abbiamo mantenuto il piano professionale evidenziato, ma ora gli altri piani sono blu scuro e questo piano intermedio ha un colore arancione più prominente. Secondo gli studi sulla psicologia del colore, l'arancione è una buona scelta per i pulsanti di azione, quindi abbiamo deciso di scegliere questa arancione che hai visto nell'immagine precedente per il piano professionale.

Poiché la nostra ipotesi affermava che la dimensione dei pulsanti dovesse incidere anche sulle loro prestazioni, abbiamo mantenuto le modifiche ai colori proposte nella variazione precedente per crearne una nuova in cui sono state aumentate le dimensioni dei pulsanti. Puoi vedere questa modifica nello screenshot seguente:

Pertanto, abbiamo tre diverse versioni degli stili CSS della tabella dei prezzi di Nelio A/B Testing:

• L'originale, senza modifiche agli stili.
• Una prima variante con colori più prominenti sui pulsanti.
• Una seconda variante con colori prominenti e una dimensione del bottone più grande.

Con tutto questo lavoro svolto, possiamo tradurlo in un test A/B degli stili CSS. Per questo, Nelio A/B Testing ti consente di creare un test A/B di diversi stili CSS con cui puoi facilmente testare i cambiamenti di stile in WordPress.

Creiamo il nuovo test CSS A/B e le tre alternative al suo interno. In effetti, gli screenshot che hai visto prima delle variazioni sono screenshot dell'editor di stile CSS che Nelio A/B Testing include per creare le alternative.

Come puoi vedere nello screenshot qui sopra, abbiamo limitato l'ambito del test alla pagina dei prezzi di Nelio A/B Testing, oltre al fatto che abbiamo definito cinque obiettivi da misurare all'interno del test:

• Clic sui pulsanti di qualsiasi piano.
• Clic sui pulsanti del piano di base.
• Clicca sui pulsanti del piano professionale.
• Clicca sui pulsanti del piano aziendale.
• Importo degli acquisti.

Con tutto questo creato, qualcosa che non richiederà più di 10 minuti, iniziamo il test e aspettiamo che arrivino i risultati. Ora tocca a Nelio A/B Testing fare il lavoro. Il nostro plugin ha il compito di suddividere il traffico in entrata tra le diverse varianti e di contare le conversioni in ogni obiettivo definito nel test A/B.

Analisi dei risultati del test A/B

Questo test A/B viene eseguito per tre mesi sul nostro sito web. I risultati possono essere visti di seguito. Analizzeremo ogni obiettivo in dettaglio per comprendere le conclusioni che abbiamo tratto da questo test.

Il primo obiettivo era misurare i clic effettuati su uno qualsiasi dei pulsanti dei piani nella tabella dei prezzi. In questo caso, i risultati mostrano che la variante con i colori modificati ottiene il 17,2% di clic in più. D'altra parte, la variante che ha cambiato colori e dimensioni è peggiore del 15% rispetto alla versione originale della pagina.

Tuttavia, nessuno di questi numeri ha raggiunto un livello di confidenza statistica sufficiente per identificare chiaramente una versione vincente per questo obiettivo.

Il secondo gol contato clicca solo sui pulsanti del piano base. In questo caso, i risultati sono simili all'obiettivo precedente. Abbiamo la versione con colori cambiati come la migliore delle tre e la versione con colori e taglie come la peggiore.

Allo stesso modo, le statistiche non sono in grado di identificare la versione con i nuovi colori come un chiaro vincitore con sufficiente sicurezza.

Il caso del terzo obiettivo, in cui misuriamo i clic nel piano professionale, è un po' diverso. Come prima, è migliore la versione con i colori e peggio è la versione che combina colori e taglie. Tuttavia, ora le statistiche ci dicono che chiaramente la versione vincente ha abbastanza fiducia.

Possiamo dire che utilizzando colori più prominenti otteniamo un numero maggiore di clic. Il pulsante arancione funziona meglio del pulsante blu che avevamo prima.

Nel caso di clic nel piano aziendale, qui si torna allo stesso stato dei primi due obiettivi. Ma qui le differenze tra la variante originale e la variante con i colori cambiati sono trascurabili. La versione che sembra molto peggiore è quella che include cambiamenti di colore e dimensioni.

Tutta questa roba da clic va bene. Ma se diamo solo un'occhiata ai risultati precedenti, avremo una visione parziale della realtà.

Per questo motivo ho aggiunto l'ultimo obiettivo in cui misuriamo il numero di acquisti raggiunti da ciascuna variante. Puoi ottenere una variante che ottiene più clic, ma se non è in grado di ottenere anche più vendite, sceglierai un falso vincitore.

Nei risultati seguenti vediamo che questo è esattamente ciò che accade. La versione con i nuovi colori ottiene il 24,5% di vendite in meno, mentre la versione che combina colori e taglie vende il 16,6% in meno rispetto alla versione attuale della nostra pagina (quella senza modifiche).

Con questi risultati quello che dobbiamo vedere è che il funnel di conversione è complesso e, anche se spesso lo dividiamo in fasi e contiamo le microconversioni, non dobbiamo perdere di vista il quadro intero.

Il vantaggio della creazione di test A/B multi-obiettivo è che possiamo avere tutte le prospettive che vogliamo per avere un quadro completo delle prestazioni del nostro sito Web. Solo così potremo avere la sicurezza di scegliere un vincitore con la massima tranquillità guardando i dati dei risultati del test A/B.

Immagine in primo piano di Grooveland Designs su Unsplash.