Cuando Terra mostró un tema oscuro a los usuarios que prefieren el modo oscuro en sus dispositivos, 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 índice 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 de "modo oscuro" hasta la aplicación de un tema oscuro personalizado y, por último, la medición del impacto de esta implementación en sus KPIs principales.
60%
Reducción en los porcentajes de rebote
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 "modo claro", lo que suele significar que se muestra texto negro sobre 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 motivos estéticos o de accesibilidad. Tiene otras ventajas, como preservar la duración de batería en los dispositivos. Los usuarios pueden indicar que prefieren el modo oscuro a través de un parámetro de 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 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 contenido multimedia refleja la elección del usuario en su dispositivo. Luego, puedes cargar un tema oscuro personalizado para quienes prefieran el modo 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 eso:
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
Identifica las cohortes de usuarios que prefieren el tema claro o el oscuro
En el momento de escribir este artículo (diciembre de 2021), Chrome Platform Status determina que aproximadamente el 22% del tráfico web proviene de usuarios con el parámetro de configuración "Preferir modo oscuro".
Estos son datos agregados, por lo que el porcentaje real de usuarios que prefieren el modo oscuro que llegan a un sitio puede variar. Por esa razón, para comprender el tamaño de este grupo, se recomienda 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 comparación con 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 fueron los siguientes:
- Determinar el tamaño del grupo de usuarios que prefieren el modo oscuro
- Identificar patrones: por ejemplo, ¿los usuarios que prefieren el modo oscuro abandonan el sitio más rápido en comparación con los que prefieren el modo claro?
Saber esto puede fundamentar las decisiones, por ejemplo, si es necesario proporcionar un tema oscuro personalizado. Estos son los resultados que obtuvo Terra después de realizar pruebas durante 14 días:
Dispositivos móviles (Android)
En el caso de los dispositivos móviles (Android), las cifras de porcentaje de rebote y de páginas por sesión no mostraron grandes diferencias entre los usuarios que prefieren el tema "claro" en comparación con los que prefieren el tema "oscuro":
Computadora de escritorio (Windows)
En el caso de las computadoras de escritorio (Windows), el grupo de usuarios que prefería el tema "oscuro" permaneció mucho menos tiempo en el sitio: tenían casi el doble del porcentaje de rebote y leían un poco más de la mitad de las páginas que los usuarios que preferían el tema "claro":
En función de estos datos, Terra planteó la hipótesis de que los usuarios que prefieren el modo "oscuro" permanecen menos tiempo en los 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ó anteriormente para 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 eso.
Terra decidió darle más control al usuario: cuando detecta que tiene activado el parámetro de configuración "preferir modo oscuro" en sus dispositivos (a través de la consulta de contenido multimedia), le muestra un mensaje para preguntarle si quiere navegar en "modo nocturno". Siempre que el usuario no rechace la solicitud (haciendo clic en el botón "Ignorar"), se respetará la configuración del SO del usuario y se aplicará un tema oscuro personalizado:
Como complemento de esta estrategia, proporcionan opciones de configuración adicionales en la pantalla "Configuración", en la que el usuario puede decidir si prefiere explícitamente "claro", "oscuro" o si desea usar la configuración subyacente del dispositivo.
Así es como se ve el "Modo nocturno" de Terra:
Cómo medir el impacto del tema oscuro de Terra
Para medir el impacto del tema oscuro, Terra tomó el grupo de usuarios que tienen activada la opción "Preferir tema oscuro" en sus dispositivos y comparó las métricas de participación cuando se mostraba un tema "Claro" en comparación con un tema "Oscuro". Estos son los resultados para dispositivos móviles (Android) y computadoras (Windows):
Dispositivos móviles (Android)
Si bien los porcentajes de rebote se mantuvieron 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 de 27.25% a 10.82% y las páginas por sesión casi se triplicaron (de 3.7 a 9.99).
60%
Reducción en los porcentajes de rebote
170%
Más páginas por sesión
En función de estos datos, Terra pudo confirmar los beneficios que tiene para los usuarios implementar un tema oscuro y decidió seguir manteniéndolo como una 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 demostrado beneficios en la experiencia del usuario y en diferentes aspectos de los dispositivos del usuario, como ahorrar 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 activado el parámetro de configuración de modo oscuro preferido en sus dispositivos.
Para las empresas que tienen los recursos para implementar un tema oscuro alternativo, este es el enfoque recomendado. Para quienes no tienen tiempo para invertir en una función de este tipo, Chrome comenzará a lanzar una función de modo oscuro automático.