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, de l'identification de la taille de la cohorte "mode sombre" à l'application d'un thème sombre personnalisé, en passant par 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 pour l'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:

Paramètres du thème sombre d'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
}

Navigateurs pris en charge

• 76
• 79
• 67
• 12.1

Source

Remarque : Cet article ne concerne que la technique d'application d'un thème sombre personnalisé fourni par le développeur. Chrome 96 a lancé une version d'origine en phase de test pour les "thèmes sombres automatiques" sur Android. Le navigateur applique alors un thème sombre généré automatiquement aux sites au thème clair lorsque l'utilisateur a activé les thèmes sombres dans le système d'exploitation, sans que le développeur ait à fournir de styles. Pour en savoir plus sur le mode sombre automatique de Chrome, consultez cet article.

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 par Terra après 14 jours de test:

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 thème clair et ceux qui préfèrent le thème sombre :

Mode d'affichage	Taux de rebond	Pages par session
Préférences pour la luminosité	25,84%	3,96
Préfère le thème sombre	26,10%	3,75

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":

Mode d'affichage	Taux de rebond	Pages par session
Préférences pour la luminosité	13,20%	7,42
Préfère le thème sombre	24,12%	4.68

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 décrite précédemment, à savoir écouter les modifications de configuration de l'utilisateur via la requête multimé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 n'ignore pas l'invite (en cliquant sur le bouton "Ignorer"), le paramètre de l'OS est respecté et un thème sombre personnalisé est appliqué:

Terra affiche une invite demandant à l'utilisateur s'il souhaite naviguer en mode sombre après avoir détecté qu'il préfère le mode sombre sur ses appareils.

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.

Les configurations des thèmes de Terra permettent aux utilisateurs de choisir entre les thèmes "Sombre " et"Clair ", ou de s'appuyer sur les paramètres de l'appareil.

Voici à quoi ressemble le mode Nuit de Terra:

Thème sombre de Terra, "Mode nuit".

Remarque : Pour des raisons de simplicité, nous avons utilisé des captures d'écran sur mobile, mais Terra a appliqué la même stratégie sur les appareils mobiles et les ordinateurs.

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:

Mode d'affichage	Taux de rebond	Pages par session
Préférences pour la luminosité	26,91%	2,47
Préfère le thème sombre	23,91%	5.24

2_X

Plus de pages par session

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

Mode d'affichage	Taux de rebond	Pages par session
Préférences pour la luminosité	27,5 %	3.7
Préfère le thème sombre	10,82%	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 leurs appareils pour modifier 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'investir dans une telle fonctionnalité, Chrome commence à déployer une fonctionnalité de mode sombre automatique.