Mostrando un tema scuro agli utenti che preferiscono la modalità Buio sui propri dispositivi, Terra ha ridotto la frequenza di rimbalzo del 60% e aumentato del 170% il numero di pagine lette per sessione.
Terra, una delle più grandi società di media brasiliane con 75 milioni di utenti al mese, ha ridotto la frequenza di rimbalzo del 60% e aumentato del 170% le pagine lette per sessione su computer per gli utenti che preferiscono la modalità Buio fornendo un tema scuro personalizzato.
In questo articolo analizzeremo il percorso di Terra, dall'identificazione della dimensione della coorte "modalità Buio" all'applicazione di un tema scuro personalizzato, fino alla misurazione dell'impatto di questa implementazione sui KPI principali.
60%
Riduzione della frequenza di rimbalzo
Il 170%
Più pagine per sessione
Cos'è la modalità Buio?
Storicamente, le interfacce utente dei dispositivi vengono visualizzate in "modalità Luce", il che di solito significa visualizzare testo nero sopra le interfacce chiare. L'alternativa è la "modalità Buio", con testo chiaro su sfondo scuro, ad esempio grigio o nero.
La modalità Buio presenta dei vantaggi per l'esperienza utente. Alcune persone lo preferiscono per motivi estetici o di accessibilità. Presenta altri vantaggi, come la preservazione della durata della batteria dei dispositivi. Gli utenti possono esprimere la loro preferenza per la modalità Buio tramite un'impostazione sui loro dispositivi, che dipende dal sistema operativo. Ad esempio, il seguente screenshot mostra l'aspetto dell'opzione di configurazione Tema scuro nei dispositivi con Android Q:
Per offrire un'esperienza migliore agli utenti che preferiscono la "modalità Buio", puoi utilizzare la query supporti prefers-color-scheme, con un valore di light o dark. Questa query multimediale riflette la scelta dell'utente sul dispositivo. Puoi quindi caricare un tema scuro personalizzato per quelli che preferiscono il tema scuro. Ad esempio, caricando un file CSS "scuro" e modificando valori come i colori del carattere e dello sfondo. Il seguente codice ne mostra un esempio:
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
Identificare le coorti di utenti "preferisci chiaro" e "scuro"
Al momento della scrittura (dicembre 2021), lo stato della piattaforma Chrome determina che circa il 22% del traffico web proviene da utenti con l'impostazione "preferisci dark".
Si tratta di dati aggregati, quindi la percentuale reale di utenti che preferiscono un sito oscuro che visita un sito può variare. Per questo motivo, per comprendere le dimensioni di questo gruppo è consigliabile eseguire la misurazione interna.
Il seguente codice crea una dimensione di analisi per misurare le prestazioni degli utenti che preferiscono light rispetto a dark:
function getColorScheme() {
let colorScheme = 'Unknown';
if (window.matchMedia) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
colorScheme = 'Dark';
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
colorScheme = 'Light';
}
}
return colorScheme;
}
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date; ga('create', 'UA-ID', 'auto');
ga('set', 'color-scheme-preference', getColorScheme());
ga('send', 'pageview');
Terra ha implementato questo codice nel proprio sito e ha confrontato il comportamento di entrambi i gruppi sui dispositivi mobili (Android) e desktop (Windows). In quel momento Terra non forniva un tema scuro personalizzato, quindi gli obiettivi di questo esperimento erano:
- La determinazione delle dimensioni del gruppo di utenti che preferiscono il tema scuro.
- Identificazione dei modelli: ad esempio, gli utenti che preferiscono il buio escono dal sito più rapidamente rispetto a quelli che preferiscono la luce?
Questo dato può aiutarti a prendere decisioni, ad esempio se è necessario fornire un tema scuro personalizzato. Questi sono i risultati ottenuti da Terra dopo 14 giorni di test:
Dispositivi mobili (Android)
Nel caso dei dispositivi mobili (Android), i valori relativi alla frequenza di rimbalzo e al numero di pagine per sessione non hanno mostrato differenze significative tra gli utenti che preferiscono lo spazio "chiaro" e quelli che preferiscono lo "scuro":
Computer (Windows)
Nel caso dei computer desktop (Windows), il gruppo di utenti che ha preferito lo stile "scuro" è rimasto molto meno sul sito: ha quasi il doppio della frequenza di rimbalzo e ha letto poco più della metà delle pagine rispetto agli utenti che preferivano "leggero":
Sulla base di questi dati, Terra ipotizza che gli utenti che preferiscono lo "scuro" rimangano meno sui computer a causa della mancanza di supporto del tema scuro sul proprio sito.
Come passo successivo, Terra ha deciso di lavorare a una strategia basata sul "tema scuro" per capire se fosse possibile migliorare il coinvolgimento del gruppo di utenti che preferiva il tema scuro.
Implementare un tema scuro
La maggior parte dei siti web implementa un tema scuro utilizzando la semplice strategia mostrata in precedenza di ascoltare le modifiche alla configurazione dell'utente tramite la query multimediale prefers-color-scheme e di modificare gli stili in base a questa.
Terra ha deciso di dare maggiore controllo all'utente: quando rileva che nei suoi dispositivi è attiva l'impostazione "preferisci scuro" (tramite la query sui contenuti multimediali), gli viene chiesto se vuole navigare in "modalità notturna". Se l'utente non nega la richiesta (facendo clic sul pulsante "Ignora"), rispetta l'impostazione del sistema operativo dell'utente e applica un tema scuro personalizzato:
A questa strategia si aggiungono ulteriori opzioni di configurazione nella schermata delle "impostazioni", in cui l'utente può decidere se preferisce esplicitamente "chiaro" o "scuro" oppure se vuole basarsi sulle impostazioni sottostanti del dispositivo.
Ecco come si presenta la "Modalità notturna" di Terra:
Misurare l'impatto del tema scuro di Terra
Per misurare l'impatto del tema scuro, Terra ha preso il gruppo di utenti che hanno attivato l'impostazione "Preferenza Buio" sui loro dispositivi e ha confrontato le metriche sul coinvolgimento quando mostrava un tema "Chiaro" rispetto a uno "Scuro". Ecco i risultati per dispositivi mobili (Android) e computer (Windows):
Dispositivi mobili (Android)
Mentre la frequenza di rimbalzo è rimasta simile, le pagine e le sessioni sono quasi raddoppiate (da 2,47 a 5,24) quando gli utenti sono stati esposti a un tema scuro:
X
Più pagine per sessione
Computer (Windows)
Entrambe le metriche sono migliorate quando si mostra un tema scuro: la frequenza di rimbalzo è passata dal 27,25% al 10,82% e le pagine per sessione sono quasi triplicate (da 3,7 a 9,99).
60%
Riduzione della frequenza di rimbalzo
Il 170%
Più pagine per sessione
Sulla base di questi dati, Terra ha potuto confermare i vantaggi per gli utenti derivanti dall'implementazione di un tema scuro e ha deciso di continuare a mantenerlo come una funzionalità principale del sito.
Conclusione
La modalità Buio è una preferenza che gli utenti possono attivare sui loro dispositivi per cambiare lo stile degli schermi con temi scuri. Questa tecnica ha segnalato i vantaggi derivanti dall'esperienza utente e per diversi aspetti dei dispositivi dell'utente, come il risparmio della durata della batteria.
In questo articolo abbiamo visto in che modo fornire un tema scuro personalizzato ha migliorato le metriche sul coinvolgimento per il gruppo di utenti di Terra che hanno attivato la modalità Buio preferita sui dispositivi.
Per le aziende che dispongono delle risorse per implementare un tema scuro alternativo, questo è l'approccio consigliato. Per coloro che non hanno tempo per investire in una di queste funzionalità, Chrome sta iniziando a implementare una funzionalità della modalità Buio automatica.