Se non sai cosa cambiare, prova a cambiare i colori del tuo sito web

Uno dei maggiori problemi quando si tratta di migliorare le prestazioni del tuo sito Web è non sapere quali modifiche apportare. Questo è successo a tutti noi ad un certo punto nel tempo. In questi casi, la cosa giusta da fare è concentrarsi su quelle parti del web che sono più critiche. Con questo intendo le sezioni della tua pagina che ottengono più attenzione o sono più importanti per il tuo modello di business.

Ad esempio, se il tuo obiettivo è che chi visita il tuo sito Web finisca per compilare un modulo, concentrati sul modulo stesso: rendilo più visibile e semplificalo il più possibile in modo che sia facile da compilare e inviare. Come ho detto prima, cerca prima gli elementi che, se modificati, potrebbero avere un impatto maggiore sui tuoi visitatori, in quanto otterrai risultati interessanti più velocemente.

Se ancora non sai cosa cambiare, qualcosa che non delude mai e che è molto facile da provare è applicare le modifiche ai colori della tua pagina web. Senza alcuna intenzione di lasciare da parte i non vedenti, è chiaro che i colori del tuo sito web sono molto importanti. Molto più di quanto tu possa immaginare.

Esistono diversi studi sulla teoria dei colori e sul modo in cui noi umani la percepiamo. Quella che può sembrare solo un'interpretazione di diverse lunghezze d'onda catturate dal nostro sistema visivo (occhi, nervo ottico e cervello), nasconde un enorme background psicologico.

Per questo ti incoraggio a provare a cambiare i colori della tua pagina web (o di alcuni elementi ad alto impatto al suo interno) e studiare come si evolve l'interazione dei tuoi visitatori di fronte a questi cambiamenti. Questo è proprio quello che ti spiegherò oggi con un esempio completo e reale che abbiamo testato su questo sito web.

Definizione del test A/B

Per testare eventuali modifiche sul tuo sito web dovresti utilizzare un test A/B. In questo modo puoi garantire con dati reali e seguendo il metodo scientifico che le modifiche applicate funzionano meglio (o meno) rispetto alla tua versione attuale.

Nell'esempio di oggi, quello che faremo è testare un cambiamento nei colori della prima piega della pagina dei prezzi di Nelio A/B Testing. Questa prima piega ha un grande impatto sulla nostra attività, poiché si occupa di visualizzare la tabella dei prezzi attraverso la quale i nostri visitatori finiscono per diventare clienti al momento dell'acquisto del plug-in.

Nel confronto che segue puoi vedere la versione originale della prima piega (a sinistra) e la versione alternativa (a destra) con i diversi colori di bottoni e margini, e una nuova immagine di sfondo:

Per testare le modifiche, abbiamo utilizzato Nelio A/B Testing come plug-in di riferimento per i test A/B. La prima cosa che faremo è creare un nuovo test A/B delle pagine, che è l'elemento che testeremo.

Lo facciamo perché possiamo cambiare i colori attraverso lo stesso editor di pagine di WordPress. Se non potessimo farlo perché i colori arrivano attraverso un modello di tema o in qualche altro modo meno ortodosso –l'esperienza ci dice che gli stili di colore possono essere definiti in diversi modi in WordPress–, un'altra opzione che funzionerebbe sempre sarebbe quella di usa un test A/B degli stili CSS, dove potremmo applicare i nuovi colori aggiungendo nuove regole di stile CSS nella variante.

Nella schermata di modifica del test A/B, selezioniamo la pagina di base che vogliamo testare (la nostra pagina dei prezzi) e creiamo una nuova variante, che modificheremo in seguito:

Un altro aspetto importante da evidenziare è definire quali metriche vogliamo che lo strumento di test A/B tenga traccia per scoprire in seguito quale delle due versioni ha funzionato meglio. Lo definiamo nella sezione obiettivi e azioni di conversione, come puoi vedere nello screenshot qui sopra.

Nel nostro caso abbiamo definito cinque obiettivi, che ci daranno cinque risultati diversi per lo stesso test A/B. Per prima cosa definiamo l'obiettivo che misura la quantità di clic sui pulsanti di acquisto di uno qualsiasi dei piani che si trovano nella tabella dei prezzi. Quindi abbiamo 3 obiettivi aggiuntivi che misurano i clic per ogni piano individualmente. E infine abbiamo un obiettivo che misura il numero effettivo di acquisti effettuati dopo aver visto ciascuna versione della pagina sottoposta a test.

Infine, modifichiamo la versione alternativa della pagina. Questo ci porta all'editor di pagine di WordPress che stiamo utilizzando (nel nostro caso, l'editor di blocchi), come puoi vedere nella schermata seguente:

Qui non ci resta che cambiare i colori dei pulsanti di azione di ciascuna delle tre colonne e dell'elemento che utilizziamo per creare il margine superiore. E abbiamo anche cambiato l'immagine di sfondo per un'altra che abbiamo caricato nella nostra libreria multimediale di WordPress.

Una volta che la pagina alternativa con le modifiche che vogliamo testare è pronta, è ora di tornare alla schermata di modifica del test A/B e avviarla. Questo dividerà automaticamente in due il traffico verso la nostra pagina dei prezzi. La metà dei nostri visitatori interagirà con la versione originale, l'altra metà vedrà la variante.

In questo modo, possiamo verificare quale versione della pagina funziona meglio rispetto ai cinque obiettivi di conversione. Ora non ci resta che attendere i risultati per darci le informazioni che cerchiamo.

Analisi dei risultati del test

Alla fine, se una variante è migliore dell'altra, lo stesso strumento di test A/B ce lo dirà. Nel test A/B che abbiamo descritto prima, i risultati sono stati chiari. La versione con i nuovi colori è peggiore di quella che già avevamo. Potete vedere il dettaglio dei risultati per ciascuno dei cinque obiettivi definiti nel test nella seguente gallery:

Non solo la variante ha ottenuto meno clic sui pulsanti di azione, ma ha anche comportato un minor numero di vendite (quasi il 22% in meno).

Questo può sembrare sciocco, ma se invece di testare le modifiche con un test A/B le modifichi direttamente sul tuo sito web senza testarle prima, corri il rischio di introdurre modifiche che potrebbero funzionare peggio. Questo avrebbe potuto essere il nostro caso, dal momento che le modifiche che volevamo apportare non hanno funzionato come pensavamo.

Potresti scoprire che cambiare i colori in qualsiasi momento è una buona soluzione, perché ti piacciono di più quelli nuovi. Hai trovato una nuova tavolozza di colori che ritieni sia molto migliore dal punto di vista stilistico e scegli di usarla direttamente. Ma questo è un grosso errore. Il fatto che ti piaccia un colore più di un altro non è importante. L'importante è verificare attentamente se questo è davvero il caso per il tuo pubblico e per i tuoi visitatori. E puoi farlo in un ambiente controllato attraverso un test A/B.

Immagine in primo piano di Jeremy Thomas su Unsplash.