Cómo Terra mejoró la participación de los usuarios gracias al modo oscuro

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

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, una de las empresas de medios de comunicación más grandes de Brasil, con 75 millones de usuarios mensuales, redujo el porcentaje de rebote en un 60% y aumentó la cantidad de páginas leídas por sesión en un 170% en computadoras para los usuarios que prefieren el modo oscuro gracias a 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 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 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

Al momento de la redacción de este documento (diciembre de 2021), el Estado de la plataforma de Chrome determina que aproximadamente el 22% del tráfico web proviene de usuarios que tienen el parámetro de configuración "Preferir el 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 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 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 la oscuridad abandonan el sitio más rápido en comparación con aquellos que prefieren la luz oscura?

Conocer 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 (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, que consistía en 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 activada la configuración de “preferir oscuro” en sus dispositivos (a través de la búsqueda de medios), muestra un mensaje para preguntarle si desea 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 de configuración, en la que el usuario puede decidir si prefiere explícitamente las opciones "claros" o "oscuros", o bien si desea basarse en la configuración subyacente del dispositivo.

Así se ve el "Modo nocturno" de Terra:

Mide el impacto del tema oscuro de Terra

Para medir el impacto del tema oscuro, Terra llevó al grupo de usuarios que tienen activada la configuración "Preferir oscuro" en sus dispositivos y comparó las métricas de participación cuando se mostraba un tema "claro" frente a 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 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:

2_X

Más páginas por sesión

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

El 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 para los usuarios de 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 informado beneficios de la experiencia del usuario y para diferentes aspectos de los dispositivos del usuario, como el ahorro de duración 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 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.