Ao exibir um tema escuro para os usuários que preferem o modo escuro nos dispositivos, a Terra reduziu a taxa de rejeição em 60% e aumentou as páginas lidas por sessão em 170%.
A Terra, uma das maiores empresas de mídia do Brasil, com 75 milhões de usuários mensais, reduziu a taxa de rejeição em 60% e aumentou as páginas lidas por sessão em 170% no computador para usuários que preferem o modo escuro, oferecendo um tema escuro personalizado.
Neste artigo, vamos analisar a jornada da Terra desde a identificação do tamanho da coorte do "modo escuro" até a aplicação de um tema escuro personalizado e, por fim, a medição do impacto dessa implementação nos principais KPIs.
60%
de redução nas taxas de rejeição
170%
Mais páginas por sessão
O que é o modo escuro?
Historicamente, as interfaces do usuário nos dispositivos são exibidas no "modo claro", o que geralmente significa mostrar texto preto sobre as interfaces claras. A alternativa é o "modo escuro", com texto claro em um fundo escuro, como cinza ou preto.
O modo escuro tem benefícios para a experiência do usuário. Algumas pessoas preferem isso por motivos estéticos ou de acessibilidade. Ela tem outras vantagens, como a preservação da duração da bateria nos dispositivos. Os usuários podem definir que preferem o modo escuro por meio de uma configuração nos dispositivos, que depende do sistema operacional. Por exemplo, a captura de tela a seguir mostra como a opção de configuração Tema escuro é exibida em dispositivos com o Android Q:
Para oferecer uma experiência melhor aos usuários que preferem o "modo escuro", use a consulta de mídia prefers-color-scheme, com um valor de light ou dark. Essa consulta de mídia reflete a escolha do usuário no dispositivo. Depois disso, você pode carregar um tema escuro personalizado para quem prefere usar esse modo. Por exemplo, carregando um arquivo CSS "escuro" e alterando valores como cores da fonte e do plano de fundo. O código a seguir mostra um exemplo disso:
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
Como identificar as coortes de usuários "prefere luz" e "escuro"
No momento em que este artigo foi escrito (dezembro de 2021), o Status da plataforma do Chrome determinava que aproximadamente 22% do tráfego da Web era de usuários com a configuração "preferido escuro".
Como esses são dados agregados, a porcentagem real de usuários que acessam o site no modo escuro pode variar. Por esse motivo, para entender o tamanho desse grupo, é aconselhável realizar medições internas.
O código a seguir cria uma dimensão de análise para medir o desempenho dos usuários que preferem light em comparação com 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');
A Terra implementou esse código no site e comparou o comportamento de ambos os grupos em dispositivos móveis (Android) e desktop (Windows). Naquela época, a Terra não oferecia um tema escuro personalizado. Por isso, os objetivos desse experimento eram:
- Determinar o tamanho do grupo de usuários que preferem o modo escuro.
- Identificação de padrões: por exemplo, os usuários que preferem o escuro saem do site mais rapidamente em comparação aos que preferem a iluminação?
Essa informação pode ajudar nas decisões, por exemplo, se for necessário oferecer um tema escuro personalizado. Estes são os resultados que a Terra obteve após 14 dias de teste:
Dispositivos móveis (Android)
No caso de dispositivos móveis (Android), os números da taxa de rejeição e das páginas por sessão não mostraram grandes diferenças entre os usuários que preferem "claro", em comparação com aqueles que preferem "escuro":
Computador (Windows)
No caso do computador (Windows), o grupo de usuários que preferia "escuro" permaneceu muito menos no site: eles tiveram quase o dobro da taxa de rejeição e leram um pouco mais da metade das páginas do que os usuários que preferiram "claro":
Com base nesses dados, a Terra gerou a hipótese de que os usuários que preferem "escuro" ficam menos em dispositivos desktop, devido à falta de suporte a um tema escuro no site.
Como próximo passo, a Terra decidiu trabalhar em uma estratégia de "tema escuro" para ver se poderia melhorar o engajamento do grupo de usuários que preferia o modo escuro.
Como implementar um tema escuro
A maioria dos sites implementa um tema escuro usando a estratégia simples mostrada anteriormente de detectar as mudanças de configuração do usuário pela consulta de mídia prefers-color-scheme e alterar os estilos com base nisso.
A Terra decidiu dar mais controle ao usuário: ao detectar que a configuração "preferir escuro" está ativada nos dispositivos (por meio da consulta de mídia), ela mostra um aviso para perguntar se ele quer navegar no "modo noturno". Contanto que o usuário não negue a solicitação (clicando no botão "Ignorar"), ele vai respeitar a configuração do SO do usuário e aplicar um tema escuro personalizado:
Como complemento dessa estratégia, eles oferecem mais opções de configuração na tela "Configurações". Nela, o usuário pode decidir se prefere "claro", "escuro" ou se prefere confiar nas configurações do dispositivo.
Esta é a aparência do "Modo noturno" do Terra:
Como medir o impacto do tema escuro do Terra
Para medir o impacto do tema escuro, a Terra pegou o grupo de usuários que ativaram a configuração "Preferir escuro" nos dispositivos e comparou as métricas de engajamento ao mostrar um tema "claro" e "escuro". Estes são os resultados para dispositivo móvel (Android) e computador (Windows):
Dispositivos móveis (Android)
Embora as taxas de rejeição tenham permanecido semelhantes, as páginas e sessões quase dobraram (de 2,47 para 5,24) quando os usuários foram expostos a um tema escuro:
2X
Mais páginas por sessão
Computador (Windows)
Ambas as métricas melhoraram com o tema escuro: as taxas de rejeição passaram de 27,25% para 10,82% e as páginas por sessão quase triplicaram (de 3,7 para 9,99).
60%
de redução nas taxas de rejeição
170%
Mais páginas por sessão
Com base nesses dados, a Terra conseguiu confirmar os benefícios da implementação de um tema escuro para os usuários e decidiu continuar mantendo esse tema como um recurso principal do site.
Conclusão
O modo escuro é uma preferência que os usuários podem ativar nos dispositivos para mudar o estilo das telas para temas escuros. Essa técnica relatou benefícios para a experiência do usuário e para diferentes aspectos dos dispositivos, como a economia de bateria.
Neste artigo, vimos como oferecer um tema escuro personalizado melhorou as métricas de engajamento do grupo de usuários da Terra que ativaram o modo escuro nos dispositivos.
Essa é a abordagem recomendada para empresas com recursos para implementar um tema escuro alternativo. Para quem não tem tempo para investir nesse recurso, o Chrome vai lançar o recurso modo escuro automático.