Test suddivisi con fogli di stile CSS

Pubblicato: 2021-07-19

Il modo più rapido per suddividere in modo significativo il test di un sito Web è apportare modifiche in grassetto al foglio di stile a cascata (CSS) all'interno di un esperimento a livello di sito.

Perché i fogli di stile CSS sono importanti

Il file CSS principale di un sito web è un punto di riferimento centrale che controlla gli stili, le posizioni e i comportamenti comuni di tutti gli elementi in ogni singola pagina web.

All'interno del file CSS principale ci sono le impostazioni per tutti i caratteri, i margini, i colori, gli allineamenti e molto altro ancora. È il file più importante nella maggior parte dei siti Web basati su modelli e può cambiare drasticamente l'aspetto di un sito Web con solo una piccola modifica.

Test di suddivisione dell'intero sito da eseguire ogni volta

Ci sono molti elementi comuni in un sito Web che giocano un ruolo importante nella facilità di lettura, utilizzo, navigazione, evidenziazione degli inviti all'azione e visualizzazione di tutte le informazioni chiave del sito Web.

Quando un utente decide se stabilire un contatto o magari effettuare un acquisto su un sito Web, uno qualsiasi dei precedenti potrebbe essere un fattore decisivo per interrompere tale conversione. Di seguito sono riportate alcune considerazioni chiave per gli elementi a livello di sito:

Pulsanti di invito all'azione

Tutte le conversioni online iniziano con un pulsante, un collegamento o un widget di invito all'azione (CTA). La dimensione, il colore, la formulazione e persino la posizione di questi CTA fanno una grande differenza per i tassi di conversione. Alcuni colori dei pulsanti CTA, ad esempio, possono fondersi troppo con lo sfondo o possono inconsciamente impedire all'utente di fare clic su di essi, a seconda di ciò che percepisce come un colore negativo. Anche il testo utilizzato su collegamenti e pulsanti fa la differenza. Ad esempio, cambiando semplicemente il pulsante "INVIA" di un modulo per dire "INVIA" si ottengono risultati migliori poiché "invia" viene percepito come una parola forzata. Puoi leggere di più su questo nella guida definitiva alle CTA qui su VWO.com.

C'è una leggera variazione di verde utilizzata per i pulsanti "Acquista ora". La combinazione 2 ha prodotto l'1,5% in più di prodotti aggiunti al carrello rispetto alla combinazione originale 1 — C'è una leggera variazione di verde utilizzata per i pulsanti "Acquista ora" (evidenziati). La combinazione 2 ha prodotto l'1,5% in più di utenti che aggiungono prodotti al carrello rispetto al controllo originale, la combinazione 4 è stata dell'1,4% peggiore

Dimensione del font

Questo elemento raramente testato svolge un ruolo importante nell'accessibilità per molti utenti. I caratteri sono spesso troppo piccoli per essere letti da alcuni utenti, quindi potrebbero dover utilizzare la funzione di zoom se ne hanno familiarità, ma questo non è sempre possibile, o facile, sui dispositivi mobili. Anche le dimensioni dei caratteri troppo grandi possono essere dannose perché possono rallentare la velocità di lettura, soprattutto nelle versioni ottimizzate per i dispositivi mobili dei siti web. Leggi di più sulla scienza dietro le dimensioni dei caratteri qui su imarc.com.

Tipo di carattere

Anche in questo caso, lo stile del carattere è raramente testato su molti siti Web, sembra essere deciso nella fase iniziale di progettazione dello sviluppo e poi dimenticato su molti siti Web. Diversi stili di carattere hanno diversi livelli di leggibilità. Inoltre, alcuni caratteri sono disponibili solo su determinati dispositivi e alcuni vengono visualizzati davvero male su determinati dispositivi a determinate dimensioni senza Rasterizzazione caratteri. Puoi utilizzare una famiglia di caratteri per utilizzare una serie di caratteri, a partire dal tuo preferito e fino a caratteri più semplici, come Arial, che sono sempre su ogni dispositivo È possibile includere nuovi caratteri in un sito Web tramite JavaScript o un servizio come Font di Google. Puoi scoprire di più in questo post su TypeWolf.com sui primi dieci caratteri web del 2016.

Stile carattere

Anche gli stili di carattere come l'altezza della linea, la sottolineatura, il grassetto, il colore e i margini influiscono sull'accessibilità e la leggibilità. È più probabile che i link vengano cliccati quando sono blu e sottolineati, qualcosa che è stato meticolosamente testato da Google ed eBay nel corso degli anni con Google che ha persino testato i link neri nel 2016. Se i link non si distinguono chiaramente come link sul tuo sito web , quindi dovrebbero essere testati e scoprirai che spesso mostrano un maggiore coinvolgimento dopo essere stati modificati.

Le conversioni sono aumentate dell'1,9% semplicemente cambiando il carattere su questo sito web

Colori di sfondo

Spesso i siti web sono realizzati su uno sfondo bianco, ma se guardi il tuo sito di notizie preferito o la tua piattaforma di social media, spesso è una leggera sfumatura di blu o grigio. I colori di sfondo possono far risaltare alcune aree della pagina web, come un riquadro informativo o un banner di offerte speciali. Inoltre, il colore di sfondo può rafforzare il marchio o il tipo di prodotto mostrato e questa correlazione migliora i tassi di conversione, poiché il contenuto appare più pertinente. Scopri di più sulla psicologia del colore per i siti web in questo articolo su Jimdo.com e scopri come colori come l'arancione significano un buon affare (pensa ad Amazon) e il blu indica neutralità e tecnologia (pensa a Facebook o Twitter).

Riposizionare o nascondere elementi

Il file CSS controlla i margini e il riempimento per tutti gli elementi comuni nelle pagine Web e consente inoltre di rimuovere completamente determinati elementi utilizzando il comando "display:none". Alcuni modi per utilizzarlo sono provare a ridurre lo spazio sprecato verticalmente, rimuovere informazioni non necessarie, alterare la spaziatura tra CTA importanti o sperimentare la rimozione di determinati blocchi di contenuto. A volte meno è meglio sulle pagine web (il principio keep-it-semplice-stupido) ed è buona pratica vedere quanto può essere rimosso da una pagina web migliorando il tasso di conversione.

Il coinvolgimento è migliorato di oltre il 16% quando il contenuto è stato aggiunto a questa pagina — Il coinvolgimento è migliorato di oltre il 16% quando il contenuto è stato incluso nelle pagine delle categorie

Piattaforme per il test diviso dei file CSS a livello di sito

È davvero importante mantenere i modelli su un sito Web coerenti per ogni singolo utente quando passano da una pagina all'altra. Potrebbe essere dannoso (e certamente un pessimo esperimento) se solo una pagina fosse suddivisa in A/B mentre le altre rimanessero le stesse.

È necessario uno speciale software di test diviso per mantenere coerenti le modifiche al file CSS da pagina a pagina per ogni singolo utente, purtroppo gli "Esperimenti sui contenuti" gratuiti di Google Analytics non soddisfano questi tipi di test divisi. Ecco alcuni strumenti che potresti voler utilizzare:

Visual Website Optimizer (VWO) – vwo.com – Abbiamo scoperto che questo è il software di test diviso più semplice da implementare. Gestisce tutti i tipi di test divisi su HTML, CSS o JavaScript e genera anche mappe di calore utente, se necessario. Le strutture dei prezzi possono essere trovate qui
Optimizely – Optimizely.com – Questo gestisce anche tutti i tipi di split test su HTML, CSS o JavaScript e può eseguire alcuni split test molto avanzati, se necessario. Le informazioni sui prezzi possono essere trovate qui

Conclusione

L'impostazione di uno split test CSS a livello di sito è facile ed efficace, ma potresti aver bisogno di 15 minuti di aiuto da uno sviluppatore se non hai familiarità con i CSS.

Una volta che il sito Web ha i caratteri, gli stili e i CTA giusti, puoi concentrarti sulle pagine di destinazione chiave del sito Web e su altri elementi più di nicchia. Ciò aumenta i tassi di conversione e rende il sito Web molto più efficace senza bisogno di traffico aggiuntivo.

Se hai bisogno di aiuto non esitare a contattarci.