La verità sui migliori colori dei pulsanti di invito all'azione per il tuo sito web

Molto è stato detto su Internet sui colori che funzionano meglio su una pagina web. Troverai migliaia di articoli a riguardo. Da quello in cui un utente chiede quale colore è meglio e riceve risposte contraddittorie (che sorpresa, eh?), al noto articolo che spiega i test che Google ha fatto con tante sfumature di blu per i suoi link.

La realtà dietro tutto questo è che nessuno può garantire che un colore specifico funzionerà meglio o peggio su un sito Web senza provarlo. Se ti dicono il contrario, ti stanno mentendo. E sono sicuro che non ti piace essere mentito.

Nemmeno io, quindi quando stavo leggendo questo articolo di Yahoo! Small Business dove dicono che i colori migliori da usare sui pulsanti sono rosso, verde e arancione o giallo, la prima cosa che ho pensato è che dovrei provarlo sul nostro sito web.

Se hai seguito la serie di articoli che ho scritto mensilmente sui test A/B, sicuramente sai già che una delle pagine più importanti del nostro sito Web è la pagina di destinazione di Nelio Content, insieme alla sua pagina dei prezzi. In entrambe le pagine, i pulsanti di invito all'azione che abbiamo sono arancioni.

Il rosso o il verde funzioneranno meglio rispetto al colore arancione che già utilizziamo sul nostro sito Web per i pulsanti di invito all'azione? Questa è la domanda che mi sono posto e alla quale risponderò qui con i dati reali dei nostri visitatori. Opinione non soggettiva. Dati reali.

Andiamo!

Creazione di un test A/B di CSS

Il modo più semplice per cambiare il colore dei pulsanti in una pagina è aggiungere alcune regole CSS aggiuntive per applicare il nuovo colore. Metti una nuova regola del background-color sul pulsante con il colore che desideri e il gioco è fatto. Vai tranquillo.

Con Nelio A/B Testing hai la possibilità di creare un test A/B di stili CSS per testare diverse varianti di regole CSS aggiuntive. Devi solo creare un nuovo test e selezionare l'opzione CSS nel selettore del tipo di test:

Questo ti porterà all'editor di test, dove la prima cosa che devi fare è creare le varianti. Tieni presente che in questo tipo di test, la prima variante è quella che mostra la pagina con il suo aspetto attuale, senza CSS extra.

Quindi crei una variante per, nel nostro caso, ciascuno dei colori aggiuntivi che testeremo: uno per il verde e uno per il rosso. La prima variante è già arancione, quindi con questa abbiamo tutto pronto.

Per ogni variante aggiuntiva puoi andare a modificarla per aggiungere le regole CSS aggiuntive che cambiano il colore dei pulsanti. Le regole CSS di cui avrai bisogno dipenderanno dal tema che utilizzi nel tuo WordPress. Nell'editor CSS fornito da Nelio A/B Testing, puoi vedere in tempo reale come le nuove regole CSS cambiano l'aspetto grafico del tuo sito. Questo ti aiuterà a verificare se lo stai facendo bene.

Ecco come appaiono i pulsanti di azione dall'editor di stile CSS di ciascuna variante del test A/B che stiamo configurando. Come detto, per prima cosa hai la versione originale, con i pulsanti arancioni. Le altre due varianti includono il CSS per trasformare i pulsanti rispettivamente in verde e rosso:

Una volta che abbiamo le varianti pronte, è il momento di definire gli obiettivi di conversione che vogliamo misurare. In questo caso, come puoi vedere nello screenshot dell'editor di test, abbiamo due obiettivi.

Il primo obiettivo misurerà i clic sui pulsanti di azione, mentre nel secondo misuriamo anche quei clic, ma solo quelli che si verificano nella pagina dei prezzi di Nelio Content.

Infine, tieni presente che i test A/B dei CSS influiranno su tutte le pagine del tuo sito web. Per limitare questo comportamento in Nelio A/B Testing, nella barra laterale destra dell'editor di test A/B hai la possibilità di limitare l'ambito del test. L'ho fatto in modo che influisca solo sulla pagina principale di Nelio Content e sulla pagina dei prezzi.

Abbiamo tutto pronto per iniziare il test. Una volta fatto, Nelio A/B Testing si occupa di suddividere per te il traffico che visita queste due pagine e di mostrare le diverse varianti di colore, oltre a monitorare le conversioni (clic sui pulsanti).

Ricorda, devi solo aspettare che i tuoi visitatori accedano a quelle pagine per iniziare a vedere i risultati.

Analizzare i risultati

Abbiamo eseguito il test A/B dei colori dei pulsanti sul nostro sito Web per un mese e mezzo sul sito Web spagnolo e quasi un mese sul sito Web inglese. Nella versione inglese l'abbiamo interrotto prima perché abbiamo ottenuto risultati statisticamente significativi più velocemente con un alto valore di confidenza.

Ma iniziamo con i risultati del test sul nostro web in spagnolo:

Come puoi vedere nello screenshot qui sopra, per l'obiettivo di misurare i clic su entrambe le pagine, sembra che le varianti verde e rossa dei pulsanti abbiano prestazioni leggermente migliori rispetto alla versione arancione originale. Tuttavia, le statistiche ci dicono che il miglioramento non è sostanziale e, quindi, non possiamo dire che questi colori siano migliori dell'arancione.

Per il secondo obiettivo, che misurava solo i clic sulla pagina dei prezzi di Nelio Content, vediamo che non c'è nemmeno un chiaro colore vincente. Possiamo anche osservare come il verde qui abbia prestazioni peggiori dell'arancione. Anche se non possiamo trarre conclusioni forti con i dati che Nelio A/B Testing ha raccolto dai nostri visitatori:

Andiamo ora a vedere i risultati del test nella versione inglese della pagina. Qui, nel primo obiettivo, che misurava i clic su una delle due pagine di Nelio Content, vediamo che sia il verde che il rosso sono colori che producono una migliore percentuale di clic.

Inoltre qui possiamo affermare che il colore verde è il colore vincente del test. I risultati sono statisticamente significativi con un grado di confidenza superiore al 99%. Il verde è il colore migliore che possiamo utilizzare sul nostro sito Web in inglese per i pulsanti delle pagine di Nelio Content.

Se osserviamo solo i clic sulla pagina dei prezzi di Nelio Content (secondo obiettivo del test), vediamo che i risultati sono coerenti con quelli del primo obiettivo del test:

Dopo aver visto questo, possiamo dire che il verde è il colore che ha funzionato meglio per il nostro pubblico in inglese sulle pagine di Nelio Content. Tuttavia, per il nostro pubblico spagnolo, non siamo riusciti a trovare un colore che funzioni meglio di quello che già avevamo.

Conclusioni

Qui ho mostrato i risultati di un test A/B con dati reali dei visitatori che hanno navigato attraverso due delle pagine più rilevanti del nostro sito. E sei stato in grado di verificare che ciò che funziona meglio per un pubblico specifico non deve funzionare al meglio per un pubblico diverso.

I pulsanti verdi funzionano meglio per i nostri visitatori di lingua inglese. Ma ciò non significa che sia lo stesso per gli altri visitatori. Per questo motivo, solo nella versione inglese di queste pagine abbiamo cambiato in verde il colore dei pulsanti di azione delle pagine dei Contenuti di Nelio. Quelli in spagnolo rimangono arancioni.

Sarei sciocco se ti dicessi che devi usare il colore verde sulla tua pagina. Nessuno dovrebbe dirtelo. Non io, non nessuno. Non ho idea se il verde funzionerà per te.

Per questo, prima di prestare attenzione ai tanti guru che troverete su Internet, fatevi voi stessi la prova. Creare il test A/B è molto semplice. Ed è l'unico modo per scoprire cosa funziona (o meno) meglio sul tuo sito web. Con il tuo pubblico reale.

Immagine in primo piano di Robert Katzki su Unsplash.