Terrasse qui a amélioré l'engagement des utilisateurs grâce au mode sombre

En affichant un thème sombre aux utilisateurs qui préfèrent le mode sombre sur leurs appareils, Terra a réduit le taux de rebond de 60% et augmenté le nombre de pages lues par session de 170%.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, l'une des plus grandes entreprises de médias du Brésil, qui compte 75 millions d'utilisateurs par mois, a réduit son taux de rebond de 60% et augmenté le nombre de pages lues par session de 170% sur ordinateur pour les utilisateurs qui préfèrent le mode sombre en proposant un thème sombre personnalisé.

Dans cet article, nous allons analyser le parcours de Terra, depuis l'identification de la taille de la cohorte "mode sombre", jusqu'à l'application d'un thème sombre personnalisé, et enfin la mesure de l'impact de cette implémentation sur ses principaux KPI.

60 _%

Réduction des taux de rebond

170 _%

Plus de pages par session

Qu'est-ce que le mode sombre ?

Historiquement, les interfaces utilisateur des appareils sont affichées en "mode clair", ce qui signifie généralement que le texte noir est affiché sur des interfaces claires. L'alternative est le "mode sombre", avec du texte clair sur un arrière-plan sombre, comme le gris ou le noir.

Le mode sombre présente des avantages en termes d'expérience utilisateur. Certaines personnes préfèrent cette option pour des raisons esthétiques ou d'accessibilité. Elle présente d'autres avantages, comme la préservation de l'autonomie de la batterie des appareils. Les utilisateurs peuvent indiquer qu'ils préfèrent le mode sombre via un paramètre de leur appareil, qui dépend du système d'exploitation. Par exemple, la capture d'écran suivante montre à quoi ressemble l'option de configuration Thème sombre sur les appareils exécutant Android Q:

Pour offrir une meilleure expérience aux utilisateurs qui préfèrent le mode sombre, vous pouvez utiliser la requête multimédia prefers-color-scheme, avec une valeur de light ou dark. Cette requête multimédia reflète le choix de l'utilisateur sur son appareil. Vous pouvez ensuite charger un thème sombre personnalisé pour ceux qui préfèrent le thème sombre. Par exemple, en chargeant un fichier CSS "sombre" et en modifiant des valeurs telles que la police et les couleurs d'arrière-plan. Le code suivant en est un exemple:

@media (prefers-color-scheme: dark) {
   // apply a dark theme
}

@media (prefers-color-scheme: light) {
  // apply a light theme
}

Identifier les cohortes d'utilisateurs "préfèrent la lumière" et "préfèrent le noir"

Au moment de la rédaction de cet article (décembre 2021), Chrome Platform Status indique qu'environ 22% du trafic Web provient d'utilisateurs qui ont activé le paramètre "Préférer le mode sombre".

Il s'agit de données agrégées. Le pourcentage réel d'utilisateurs qui préfèrent le mode sombre sur un site peut donc varier. C'est pourquoi, pour comprendre la taille de ce groupe, nous vous recommandons d'effectuer des mesures en interne.

Le code suivant crée une dimension d'analyse pour mesurer les performances des utilisateurs qui préfèrent light à 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 a implémenté ce code sur son site et comparé le comportement des deux groupes sur les appareils mobiles (Android) et les ordinateurs (Windows). À ce moment-là, Terra ne proposait pas de thème sombre personnalisé. Les objectifs de ce test étaient donc les suivants:

• Déterminer la taille du groupe d'utilisateurs qui préfèrent le mode sombre.
• Identifier des tendances: par exemple, les utilisateurs qui préfèrent le mode sombre quittent-ils le site plus rapidement que ceux qui préfèrent le mode clair ?

Ces informations peuvent vous aider à prendre des décisions, par exemple si vous devez fournir un thème sombre personnalisé. Voici les résultats obtenus avec Terra après un test de 14 jours:

Mobile (Android)

Pour les appareils mobiles (Android), les chiffres du taux de rebond et des pages par session n'ont pas montré de grandes différences entre les utilisateurs qui préfèrent le mode clair et ceux qui préfèrent le mode sombre :

Bureau (Windows)

Sur ordinateur (Windows), le groupe d'utilisateurs qui a préféré le thème "sombre" est resté beaucoup moins longtemps sur le site: son taux de rebond était presque deux fois plus élevé et il a lu un peu plus de la moitié des pages que celui des utilisateurs qui ont préféré le thème "clair":

Sur la base de ces données, Terra a émis l'hypothèse que les utilisateurs qui préfèrent le thème sombre restent moins longtemps sur les ordinateurs, car leur site ne propose pas de thème sombre.

Terra décide ensuite de travailler sur une stratégie de "thème sombre" pour voir si elle peut améliorer l'engagement du groupe d'utilisateurs qui préfèrent le thème sombre.

Implémenter un thème sombre

La plupart des sites Web implémentent un thème sombre en utilisant la stratégie simple présentée précédemment, qui consiste à écouter les modifications de configuration de l'utilisateur via la requête média prefers-color-scheme et à modifier les styles en conséquence.

Terra a décidé de donner plus de contrôle à l'utilisateur: lorsqu'il détecte que le paramètre "Préférer le mode sombre" est activé sur ses appareils (via la requête multimédia), il lui affiche une invite lui demandant s'il souhaite naviguer en mode "Nuit". Tant que l'utilisateur ne refuse pas l'invite (en cliquant sur le bouton "Ignorer"), il respecte les paramètres de l'OS de l'utilisateur et applique un thème sombre personnalisé:

En complément de cette stratégie, ils fournissent des options de configuration supplémentaires dans l'écran "Paramètres", où l'utilisateur peut choisir s'il préfère explicitement "clair", "sombre" ou s'il souhaite s'appuyer sur les paramètres sous-jacents de l'appareil.

Voici à quoi ressemble le mode Nuit de Terra:

Mesurer l'impact du thème sombre de Terra

Pour mesurer l'impact du thème sombre, Terra a sélectionné le groupe d'utilisateurs dont le paramètre "Préférer le thème sombre" est activé sur leurs appareils, puis a comparé les métriques d'engagement lorsque le thème "Clair" est affiché par rapport au thème "Sombre". Voici les résultats pour mobile (Android) et ordinateur (Windows):

Mobile (Android)

Bien que les taux de rebond soient restés similaires, le nombre de pages et de sessions a presque doublé (de 2,47 à 5,24) lorsque les utilisateurs ont été exposés à un thème sombre:

2_X

Plus de pages par session

Ordinateur de bureau (Windows)

Les deux métriques ont augmenté lorsque le thème sombre a été appliqué: les taux de rebond sont passés de 27,25% à 10,82 %, et le nombre de pages vues par session a presque triplé (de 3,7 à 9,99).

60 _%

Réduction des taux de rebond

170 _%

Plus de pages par session

Sur la base de ces données, Terra a pu confirmer les avantages d'un thème sombre pour les utilisateurs et a décidé de le conserver comme fonctionnalité de base du site.

Conclusion

Le mode sombre est une préférence que les utilisateurs peuvent activer sur leur appareil pour changer le style des écrans en thèmes sombres. Cette technique a été associée à des avantages pour l'expérience utilisateur et pour différents aspects des appareils des utilisateurs, comme l'amélioration de l'autonomie de la batterie.

Dans cet article, nous avons vu comment fournir un thème sombre personnalisé a amélioré les métriques d'engagement pour le groupe d'utilisateurs de Terra dont le mode sombre préféré est activé sur leurs appareils.

Cette approche est recommandée pour les entreprises disposant des ressources nécessaires pour implémenter un autre thème sombre. Pour ceux qui n'ont pas le temps d'y consacrer du temps, Chrome commence à déployer une fonctionnalité du mode sombre automatique.