Al mostrar un tema oscuro a los usuarios que prefieren el modo oscuro en sus dispositivos, Terra redujo el porcentaje de rebote en un 60% y aumentó las páginas leídas por sesión en un 170%.
Terra, una de las empresas de medios más grandes de Brasil con 75 millones de usuarios mensuales, redujo el porcentaje de rebote en un 60% y aumentó las páginas leídas por sesión en un 170% en computadoras de escritorio para los usuarios que prefieren el modo oscuro, ya que proporcionó un tema oscuro personalizado.
En este artículo, analizaremos el recorrido de Terra desde la identificación del tamaño de la cohorte del “modo oscuro” hasta la aplicación de un tema oscuro personalizado y la medición del impacto de esta implementación en sus KPI principales.
El 60%
de reducción de los porcentajes de rebote
El 170%
Más páginas por sesión
¿Qué es el modo oscuro?
Históricamente, las interfaces de usuario de los dispositivos se muestran en el "modo claro", lo que generalmente significa mostrar texto negro sobre las interfaces claras. La alternativa es el "modo oscuro", con texto claro sobre un fondo oscuro, como gris o negro.
El modo oscuro tiene beneficios para la experiencia del usuario. Algunas personas lo prefieren por cuestiones estéticas o de accesibilidad. Tiene otras ventajas, como preservar la duración de batería de los dispositivos. Los usuarios pueden expresar que prefieren el modo oscuro a través de una configuración en sus dispositivos, que depende del sistema operativo. Por ejemplo, en la siguiente captura de pantalla, se muestra cómo se ve la opción de configuración Tema oscuro en los dispositivos que ejecutan Android Q:
Para ofrecer una mejor experiencia a los usuarios que prefieren el "modo oscuro", puedes usar la consulta de medios prefers-color-scheme, con un valor de light o dark. Esta consulta de medios refleja la elección del usuario en su dispositivo. Luego, puedes cargar un tema oscuro personalizado para los usuarios que prefieran el tema oscuro. Por ejemplo, cargando un archivo CSS “oscuro” y cambiando valores como la fuente y los colores de fondo. En el siguiente código, se muestra un ejemplo de ello:
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
Identificación de las cohortes de usuarios “prefieren claras” y “oscuras”
Al momento de la redacción de este documento (diciembre de 2021), el Estado de la plataforma Chrome determina que aproximadamente el 22% del tráfico web proviene de usuarios con la configuración "preferentemente oscuro".
Estos son datos agregados, por lo que puede variar el porcentaje real de usuarios que prefieren el acceso oscuro a un sitio. Por esa razón, para comprender el tamaño de este grupo, es recomendable ejecutar una medición interna.
El siguiente código crea una dimensión de estadísticas para medir el rendimiento de los usuarios que prefieren light en lugar de 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 implementó este código en su sitio y comparó el comportamiento de ambos grupos en dispositivos móviles (Android) y computadoras de escritorio (Windows). En ese momento, Terra no proporcionaba un tema oscuro personalizado, por lo que los objetivos de este experimento eran los siguientes:
- Determinar el tamaño del grupo de usuarios que prefieren la oscuridad.
- Identificación de patrones: Por ejemplo, ¿los usuarios que prefieren la oscuridad más rápido del sitio en comparación con los que prefieren la luz?
Conocer esto puede informar decisiones, por ejemplo, si es necesario proporcionar un tema oscuro personalizado. Estos son los resultados que obtuvo Terra después de realizar las pruebas durante 14 días:
Dispositivos móviles (Android)
En el caso de los dispositivos móviles (Android), las cifras del porcentaje de rebote y de las páginas por sesión no mostraron grandes diferencias entre los usuarios que prefieren la opción "clara" en comparación con los que prefieren el idioma "oscuro":
Computadora de escritorio (Windows)
En el caso de las computadoras de escritorio (Windows), el grupo de usuarios que prefirieron el estilo "oscuro" se mantuvo mucho menos en el sitio: tenían casi el doble de porcentaje de rebote y leyeron un poco más de la mitad de las páginas en comparación con aquellos usuarios que preferían "claro":
En función de estos datos, Terra propuso que los usuarios que prefieren el modo "oscuro" permanecen menos en dispositivos de escritorio, debido a la falta de compatibilidad con un tema oscuro en su sitio.
Como siguiente paso, Terra decidió trabajar en una estrategia de "tema oscuro" para ver si podía mejorar la participación del grupo de usuarios que preferían el tema oscuro.
Cómo implementar un tema oscuro
La mayoría de los sitios web implementan un tema oscuro con la estrategia simple que se mostró antes de escuchar los cambios de configuración del usuario a través de la consulta de medios prefers-color-scheme y cambiar los estilos en función de ello.
Terra decidió darle más control al usuario: cuando detecta que tiene activado el parámetro de configuración “preferentemente oscuro” en sus dispositivos (mediante la consulta de contenido multimedia), le muestra un mensaje para preguntarle si quiere navegar en el “modo nocturno”. Siempre que el usuario no rechace el mensaje (haciendo clic en el botón “Ignorar”), respetará la configuración del SO del usuario y aplicará un tema oscuro personalizado:
Como complemento de esta estrategia, proporcionan opciones de configuración adicionales en la pantalla de “configuración”, en la que el usuario puede decidir explícitamente si prefiere el valor “claro”, el “oscuro” o la configuración subyacente del dispositivo.
Así se ve el "Modo nocturno" de Terra:
Medición del impacto del tema oscuro de Terra
Para medir el impacto del tema oscuro, Terra tomó el grupo de usuarios que tenían activado el parámetro de configuración "Preferir oscuro" en sus dispositivos y comparó las métricas de participación cuando mostraban un tema "claro" en comparación con un tema "oscuro". Estos son los resultados para dispositivos móviles (Android) y computadoras de escritorio (Windows):
Dispositivos móviles (Android)
Si bien los porcentajes de rebote permanecieron similares, las páginas y las sesiones casi se duplicaron (de 2.47 a 5.24) cuando los usuarios se expusieron a un tema oscuro:
2X
Más páginas por sesión
Computadora de escritorio (Windows)
Ambas métricas mejoraron cuando se mostró un tema oscuro: los porcentajes de rebote pasaron del 27.25% al 10.82% y las páginas por sesión casi se triplicaron (de 3.7 a 9.99).
El 60%
de reducción de los porcentajes de rebote
El 170%
Más páginas por sesión
En función de estos datos, Terra pudo confirmar los beneficios para los usuarios de implementar un tema oscuro y decidió seguir manteniéndolo como función principal del sitio.
Conclusión
El modo oscuro es una preferencia que los usuarios pueden activar en sus dispositivos para cambiar el estilo de las pantallas a temas oscuros. Esta técnica ha informado beneficios a partir de la experiencia del usuario y para diferentes aspectos de sus dispositivos, como el ahorro de batería.
En este artículo, vimos cómo proporcionar un tema oscuro personalizado mejoró las métricas de participación del grupo de usuarios de Terra que tienen activada la configuración preferida del modo oscuro en sus dispositivos.
En el caso de las empresas que cuentan con los recursos para implementar un tema oscuro alternativo, este es el enfoque recomendado. Para quienes no tienen tiempo de invertir en esa función, Chrome comenzará a lanzar una función de modo oscuro automático.