Dai più stile al tuo modulo di commento in WordPress

Una delle cose più eccitanti che possono accadere quando hai un blog e ci scrivi regolarmente è ricevere commenti dai lettori. Ma affinché ciò avvenga, il contenuto che scrivi deve essere interessante e il modulo per l'invio dei commenti deve essere abbastanza visibile e attraente da consentire al visitatore di compilarlo e inviarlo.

In questo post che fa parte della serie del test del mese cercheremo di mettere in evidenza il form dei commenti del nostro blog dandogli un piccolo restyling per vedere se funziona meglio della versione attuale.

Come sempre, testeremo le modifiche utilizzando la tecnica di test A/B. È il modo migliore per vedere con dati reali dai visitatori del tuo sito web se le modifiche apportate funzionano o meno.

Miglioramento del design del modulo dei commenti di WordPress

Il nostro modulo di commento è piuttosto semplice. Di default WordPress aggiunge un campo per inserire il sito web del visitatore che commenta, ma riteniamo che questo campo non aggiunga alcun valore. Al contrario, l'unica cosa che attira sono i commenti spam dei bot che vogliono a tutti i costi ottenere un link. Per questo motivo l'abbiamo rimosso dalla nostra forma originale.

Nel confronto seguente puoi vedere la versione originale del nostro modulo di commento sul blog e la variante con le modifiche che abbiamo apportato. Ricordarsi di far scorrere la maniglia che compare al centro da un lato all'altro per vedere le due versioni:

Fondamentalmente abbiamo apportato tre modifiche al modulo dei commenti:

1. Abbiamo aggiunto un paio di emoji al titolo per evidenziare l'area dei commenti e incoraggiare i visitatori a scrivere. Ora sembra che li stiamo salutando e incoraggiando a scrivere con l'emoji del saluto e la scrittura a mano. Alla gente piacciono gli emoji. Vedremo se questo aiuta ad avere più commenti.
2. Il testo legale in cui spieghiamo dove vengono memorizzati i commenti durante la compilazione delle informazioni utilizza un carattere più piccolo . Deve esserci per motivi legali, ma non vogliamo dargli così tanta rilevanza.
3. Trasformiamo il pulsante di invio del modulo in un colore arancione che risalta. Come abbiamo visto prima, i colori sono importanti.

Ora che abbiamo il nuovo design pronto, quello che dobbiamo fare è testarlo.

Creazione di un test A/B di stili CSS

Per testare questa modifica del design nel modulo dei commenti del nostro blog in WordPress, la cosa più semplice è utilizzare un test A/B delle regole CSS. La versione A del nostro sito Web è quella con il modulo originale, mentre la versione B conterrà le regole CSS aggiuntive per ottenere le tre modifiche al design del modulo che abbiamo anticipato in precedenza.

Con Nelio A/B Testing creiamo un nuovo A/B test di CSS. L'immagine successiva mostra la schermata di modifica di tale test:

Nominiamo il test ("Modulo dei commenti in evidenza", nel nostro caso) e la variante ("Modulo dei commenti ridisegnato"). Possiamo anche aggiungere una descrizione al test nel campo corrispondente sulla barra laterale destra. Nello screenshot precedente puoi vedere la descrizione che abbiamo aggiunto, che funge da riferimento per qualsiasi utente che vedrà il test in futuro.

Abbiamo anche ridotto l'ambito del test agli URL che contengono https://neliosoftware.com/blog/ , in modo che il test si applichi solo ai post nel nostro blog.

Come azione di conversione abbiamo stabilito il clic sul pulsante di invio del modulo. Ogni volta che un visitatore fa clic su quel pulsante, conteremo una conversione nel test per la variante che il visitatore sta visualizzando.

Prima di finire, dobbiamo andare a modificare la variante B del test. Passiamo il mouse su questa variante e apparirà l'opzione per modificarla. Dopo aver fatto clic su di esso, si apre un editor CSS con un'anteprima, come puoi vedere nella schermata seguente:

Come puoi vedere, nella barra laterale di sinistra abbiamo l'editor CSS in cui puoi scrivere le regole specifiche che apportano le modifiche al design che abbiamo visto prima. Inoltre, sul lato destro puoi navigare nel tuo sito web per visualizzare in anteprima il risultato di queste modifiche. Con solo bisogno di sei semplici regole CSS per riprogettare il nostro modulo di commento.

Al termine, salviamo e torniamo all'editor di test A/B per avviarlo. Ora aspettiamo solo che i visitatori visitino i nostri post. Ogni visitatore vedrà la versione originale del modulo o la versione con la riprogettazione. Questo viene fatto da Nelio A/B Testing da solo, senza che tu debba fare nulla.

Analisi dei risultati del test A/B

Abbiamo eseguito il test per circa sei settimane, analizzando quasi 20.000 visitatori del nostro blog (un bel campione di popolazione). Puoi vedere i risultati completi del test A/B nello screenshot seguente:

Il numero totale di conversioni ricevute dal test non è spettacolare. In quel tempo il nostro blog ha ricevuto 27 commenti (ecco perché ci sono 27 conversioni nei risultati del test).

Ma quello che va notato è che la variante con il restyling del form dei commenti è riuscita a raddoppiare il numero di conversioni della versione originale. Pertanto, è l'opzione vincente del test A/B, con un alto valore di confidenza statistica.

Come vedi, piccole modifiche al design, che possono essere ottenute con poche regole CSS, possono avere un impatto diretto sui risultati del tuo sito web. Abbiamo applicato questa variante sul nostro sito Web aggiungendo le regole CSS aggiuntive nel nostro tema.

Un design più elaborato incoraggia l'interazione

Il design è la chiave per modificare il comportamento dei visitatori del nostro sito web. Ottenere un design che funzioni meglio di quello attuale non deve richiedere molte risorse. Qui abbiamo visto che con alcune semplici regole CSS possiamo apportare modifiche che ci danno risultati rapidamente.

L'applicazione di modifiche al design del nostro sito Web è qualcosa che dovremmo fare con attenzione. Ecco perché abbiamo utilizzato un test A/B. Grazie a questa tecnica, possiamo verificare con dati reali dei nostri visitatori se le modifiche funzionano o meno. Diversamente, non sapremo se abbiamo scelto un corretto percorso di miglioramento o se stiamo andando indietro.

Immagine in primo piano di Jason Leung su Unsplash.