Grazie per aver seguito Google I/O. Guarda i contenuti on demand.

Questa pagina è stata tradotta dall'API Cloud Translation.

In che modo Terra ha migliorato il coinvolgimento degli utenti grazie alla modalità Buio

Mostrando un tema scuro agli utenti che preferiscono la modalità oscura sui propri dispositivi, Terra ha ridotto la frequenza di rimbalzo del 60% e aumentato le pagine lette per sessione del 170%.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, una delle più grandi società di media del Brasile con 75 milioni di utenti mensili, ha ridotto il tasso di rimbalzo del 60% e aumentato le pagine lette per sessione del 170% su computer per gli utenti che preferiscono la modalità oscura, offrendo un tema scuro personalizzato.

In questo articolo analizzeremo il percorso di Terra dall'identificazione delle dimensioni della coorte "modalità oscura" all'applicazione di un tema scuro personalizzato e infine alla misurazione dell'impatto di questa implementazione sui KPI principali.

60_%

Riduzione delle frequenze di rimbalzo

170_%

Più pagine per sessione

Che cos'è la modalità Buio?

In passato, le interfacce utente dei dispositivi venivano visualizzate in "modalità chiara", il che di solito significava visualizzare il testo nero sopra interfacce chiare. L'alternativa è la "modalità Buio", con testo chiaro su sfondo scuro, ad esempio grigio o nero.

La modalità Buio offre vantaggi per l'esperienza utente. Alcune persone lo preferiscono per motivi estetici o di accessibilità. Offre altri vantaggi, ad esempio preserva la durata della batteria dei dispositivi. Gli utenti possono indicare la preferenza per la modalità Buio tramite un'impostazione nei propri dispositivi, che dipende dal sistema operativo. Ad esempio, lo screenshot seguente mostra l'opzione di configurazione Tema scuro sui dispositivi con Android Q:

Impostazioni della modalità Buio di Android Q. — Impostazioni del tema scuro di Android Q.

Per offrire un'esperienza migliore agli utenti che preferiscono la "modalità oscura", puoi utilizzare la query media prefers-color-scheme, con un valore pari a light o dark. Questa query sui contenuti multimediali riflette la scelta dell'utente sul suo dispositivo. Puoi quindi caricare un tema scuro personalizzato per chi preferisce questo tipo di tema. Ad esempio, caricando un file CSS "scuro" e modificando valori come i colori di caratteri e 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
}

Supporto dei browser

Origine

Identificazione delle coorti di utenti che preferiscono la modalità "chiara" rispetto a quella "scura"

Al momento della stesura di questo articolo (dicembre 2021), Chrome Platform Status indica che circa il 22% del traffico web proviene da utenti con l'impostazione "Preferisci scuro".

Si tratta di dati aggregati, pertanto la percentuale reale di utenti che preferiscono il tema scuro che visitano 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 il rendimento 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 su dispositivi mobili (Android) e computer (Windows). In quel momento Terra non offriva un tema scuro personalizzato, quindi gli obiettivi di questo esperimento erano:

Determinare le dimensioni del gruppo di utenti che preferiscono il tema scuro.
Identificazione di schemi: ad esempio, gli utenti che preferiscono il tema scuro abbandonano il sito più rapidamente rispetto a quelli che preferiscono il tema chiaro?

Questa informazione può essere utile per prendere decisioni, ad esempio se è necessario fornire un tema scuro personalizzato. Questi sono i risultati ottenuti da Terra dopo i test di 14 giorni:

Dispositivo mobile (Android)

Nel caso dei dispositivi mobili (Android), i numeri relativi al tasso di rimbalzo e alle pagine per sessione non hanno mostrato grandi differenze tra gli utenti che preferiscono la modalità "chiara" rispetto a quelli che preferiscono la modalità "scura":

Modalità di visualizzazione	Frequenza di rimbalzo	Pagine per sessione
Preferisce la modalità Luce	25,84%	3,96
Preferisce scuro	26,10%	3,75

Computer (Windows)

Nel caso dei computer (Windows), il gruppo di utenti che ha preferito il tema "scuro" è rimasto molto meno sul sito: ha registrato quasi il doppio del tasso di abbandono e ha letto poco più della metà delle pagine rispetto agli utenti che hanno preferito il tema "chiaro":

Modalità di visualizzazione	Frequenza di rimbalzo	Pagine per sessione
Preferisce la modalità Luce	13,20%	7,42
Preferisce scuro	24,12%	4,68

In base a questi dati, Terra ha ipotizzato che gli utenti che preferiscono il tema "scuro" rimangano meno sui dispositivi desktop, a causa della mancanza del supporto di un tema scuro nel sito.

Come passaggio successivo, Terra ha deciso di adottare una strategia di "tema scuro" per verificare se poteva migliorare il coinvolgimento del gruppo di utenti che preferiva il tema scuro.

Implementazione di 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 sui media prefers-color-scheme e di modificare gli stili in base a queste.

Terra ha deciso di dare più controllo all'utente: quando rileva che l'impostazione "Preferisci sfondo scuro" è attivata sui suoi dispositivi (tramite la query sui media), gli mostra una richiesta per chiedergli se vuole navigare in "modalità notturna". Se l'utente non rifiuta la richiesta (facendo clic sul pulsante "Ignora"), vengono rispettate le impostazioni del sistema operativo dell'utente e viene applicato un tema scuro personalizzato:

Screenshot del tema chiaro di Terra che chiede all'utente di accettare la modalità Buio. — Terra mostra all'utente un messaggio che chiede se vuole navigare in modalità buio dopo aver rilevato che preferisce questa modalità sui suoi dispositivi.

A complemento di questa strategia, vengono fornite opzioni di configurazione aggiuntive nella schermata "Impostazioni", in cui l'utente può decidere se preferisce esplicitamente "chiaro", "scuro" o se vuole fare affidamento sulle impostazioni di base del dispositivo.

Screenshot della schermata di configurazione di Terra per attivare e disattivare la modalità Buio. — Le configurazioni dei temi di Terra consentono agli utenti di scegliere tra i temi "Buio" e "Chiaro" o di fare affidamento sulle impostazioni del dispositivo.

Ecco che aspetto ha la "modalità notturna" di Terra:

Screenshot del tema scuro di Terra. — Il tema scuro di Terra, "Modalità notturna".

Misurazione dell'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 "Preferisco il tema scuro" sui propri dispositivi e ha confrontato le metriche sul coinvolgimento quando viene mostrato un tema "Chiaro" rispetto a un tema "Scuro". Ecco i risultati per dispositivi mobili (Android) e computer (Windows):

Dispositivo mobile (Android)

Sebbene le frequenze di rimbalzo siano rimaste simili, le pagine e le sessioni sono quasi raddoppiate (da 2,47 a 5,24) quando gli utenti sono stati esposti a un tema scuro:

Modalità di visualizzazione	Frequenza di rimbalzo	Pagine per sessione
Preferisce la modalità Luce	26,91%	2,47
Preferisce scuro	23,91%	5.24

2_X

Più pagine per sessione

Computer (Windows)

Entrambe le metriche sono migliorate quando è stato mostrato un tema scuro: i tassi di rimbalzo sono passati dal 27,25% al 10,82% e le pagine per sessione sono quasi triplicate (da 3,7 a 9,99).

Modalità di visualizzazione	Frequenza di rimbalzo	Pagine per sessione
Preferisce la modalità Luce	27,5%	3.7
Preferisce scuro	10,82%	9,99

60_%

Riduzione delle frequenze di rimbalzo

170_%

Più pagine per sessione

In base a questi dati, Terra ha potuto confermare i vantaggi per gli utenti dell'implementazione di un tema scuro e ha deciso di continuare a mantenerlo come funzionalità di base del sito.

Conclusione

La modalità Buio è una preferenza che gli utenti possono attivare sui propri dispositivi per cambiare lo stile delle schermate in temi scuri. Questa tecnica ha mostrato vantaggi per l'esperienza utente e per diversi aspetti dei dispositivi dell'utente, ad esempio il risparmio della batteria.

In questo articolo abbiamo visto in che modo la fornitura di un tema scuro personalizzato ha migliorato le metriche sul coinvolgimento per il gruppo di utenti di Terra che hanno attivato l'impostazione della modalità Buio preferita sui propri dispositivi.

Per le aziende che dispongono delle risorse per implementare un tema scuro alternativo, questo è l'approccio consigliato. Per chi non ha tempo di investire in una funzionalità del genere, Chrome sta iniziando a implementare una modalità Buio automatica.