En affichant un thème sombre auprès des 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%.
Terra, l'une des plus grandes entreprises multimédias brésiliennes avec 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 les ordinateurs de bureau pour les utilisateurs préférant le mode sombre grâce à 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", 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%
Pages supplémentaires 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 qu'un texte noir s'affiche par-dessus les interfaces lumineuses. L'alternative est le "mode sombre", avec du texte clair sur un arrière-plan sombre (gris ou noir, par exemple).
Le mode sombre présente des avantages en termes d'expérience utilisateur. Certaines personnes le préfèrent pour des raisons esthétiques ou d'accessibilité. Elle présente d'autres avantages, tels que 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 équipés d'Android Q:
Pour offrir une meilleure expérience aux utilisateurs qui préfèrent le mode sombre, vous pouvez utiliser la requête média prefers-color-scheme, avec une valeur de light ou dark. Cette requête média reflète le choix de l'utilisateur sur son appareil. Vous pouvez ensuite charger un thème sombre personnalisé pour ceux qui le préfèrent. Par exemple, en chargeant un fichier CSS "sombre" et en modifiant des valeurs telles que les couleurs de la police et de l'arrière-plan. Le code suivant en illustre 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ère aux tons clairs » et « sombres »
Au moment de la rédaction de ce document (décembre 2021), l'état de la plate-forme Chrome détermine qu'environ 22% du trafic Web provient d'utilisateurs ayant activé le paramètre "Je préfère le mode sombre".
Il s'agit de données globales. Par conséquent, le pourcentage réel d'utilisateurs qui préfèrent le noir et qui accèdent à un site peut varier. C'est pourquoi, pour connaître la taille de ce groupe, il est conseillé d'effectuer des mesures internes.
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 thème sombre.
- Identification des tendances: par exemple, les utilisateurs qui préfèrent l'obscurité quittent-ils le site plus rapidement que ceux qui préfèrent la couleur claire ?
Cela peut éclairer les décisions, par exemple s'il est nécessaire de fournir un thème sombre personnalisé. Voici les résultats Terra obtenus après les tests de 14 jours:
Mobile (Android)
Dans le cas du mobile (Android), les chiffres concernant le taux de rebond et le nombre de pages par session ne montrent pas de grandes différences entre les utilisateurs qui préfèrent "clair" et ceux qui préfèrent "sombre":
Ordinateur de bureau (Windows)
Dans le cas des ordinateurs (Windows), le groupe d'utilisateurs préférant le mode "sombre" est resté beaucoup moins sur le site: ils avaient presque deux fois plus de taux de rebond et ont lu un peu plus de la moitié des pages que les utilisateurs qui préféraient le mode "clair":
Sur la base de ces données, Terra a émis l'hypothèse que les utilisateurs qui préfèrent le mode "sombre" restent moins souvent sur les ordinateurs, car le site n'est pas compatible avec ce thème.
Terraform a ensuite décidé de travailler sur une stratégie basée sur le thème sombre pour voir s'il pouvait améliorer l'engagement du groupe d'utilisateurs préférant le thème sombre.
Implémenter un thème sombre
La plupart des sites Web implémentent un thème sombre en appliquant la stratégie simple décrite 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 fonction de cette stratégie.
Terra a décidé de donner plus de contrôle à l'utilisateur: lorsqu'il détecte que le paramètre "Sombre" est activé sur ses appareils (via la requête média), il lui demande s'il souhaite utiliser le mode Nuit. Tant que l'utilisateur ne refuse pas l'invite (en cliquant sur le bouton "Ignorer"), il respecte les paramètres de son système d'exploitation 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 des paramètres, où l'utilisateur peut décider s'il préfère explicitement "clair" ou "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 pris le groupe d'utilisateurs pour lesquels le paramètre "Préférer le thème sombre" est activé sur leurs appareils et comparé les métriques d'engagement lorsqu'un thème "Clair" était affiché par rapport au thème "DarK". Voici les résultats obtenus pour les mobiles (Android) et les ordinateurs (Windows):
Mobile (Android)
Si les taux de rebond sont restés similaires, le nombre de pages et de sessions a presque doublé (de 2,47 à 5,24) lorsque les utilisateurs étaient exposés à un thème sombre:
x2X
Pages supplémentaires par session
Ordinateur de bureau (Windows)
Les deux métriques se sont améliorées avec l'affichage d'un thème sombre: les taux de rebond sont passés de 27,25% à 10,82 %, et le nombre de pages par session a presque triplé (de 3,7 à 9,99).
60%
Réduction des taux de rebond
170%
Pages supplémentaires par session
Sur la base de ces données, Terra a pu confirmer les avantages de l'implémentation d'un thème sombre pour les utilisateurs et a décidé de continuer à en faire une fonctionnalité essentielle du site.
Conclusion
Le mode sombre est une préférence que les utilisateurs peuvent activer sur leur appareil pour modifier le style des écrans en thèmes sombres. Cette technique a permis de présenter des avantages liés à l'expérience utilisateur et à différents aspects des appareils de l'utilisateur, tels que l'économie de la batterie.
Dans cet article, nous avons vu comment le thème sombre personnalisé permettait d'améliorer les métriques d'engagement pour le groupe d'utilisateurs de Terra qui ont activé le mode sombre souhaité 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é du mode sombre automatique.