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

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

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 grazie a 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 dei propri dispositivi, che dipende dal sistema operativo. Ad esempio, lo screenshot seguente mostra l'opzione di configurazione Tema scuro sui dispositivi con 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 multimediale riflette la scelta dell'utente sul dispositivo utilizzato. 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
}

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

Al momento della stesura di questo articolo (dicembre 2021), lo stato della piattaforma Chrome determina che circa il 22% del traffico web proviene dagli utenti che hanno selezionato l'impostazione "preferisci dark".

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 forniva un tema scuro personalizzato, quindi gli obiettivi di questo esperimento erano:

• Stabilire la dimensione 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":

Computer desktop (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":

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 il tema scuro utilizzando la semplice strategia mostrata in precedenza, che consisteva nell'ascoltare le modifiche alla configurazione dell'utente tramite la query multimediale di prefers-color-scheme e nel cambiare gli stili in base a ciò.

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 viene chiesto se vuole navigare in "modalità notturna". Finché 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:

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.

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

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):

Dispositivi mobili (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:

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).

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à scura è 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.