Terra setzte auf ihren Geräten ein dunkles Design ein, um die Absprungrate um 60% zu senken und die pro Sitzung gelesenen Seiten um 170 % zu erhöhen.
Terra, eines der größten Medienunternehmen Brasiliens mit monatlich 75 Millionen Nutzern, konnte mit einem benutzerdefinierten dunklen Design die Absprungrate um 60% senken und die pro Sitzung gelesenen Seiten auf Computern um 170% auf Computern erhöhen.
In diesem Artikel analysieren wir Terra's Weg von der Ermittlung der Größe der Kohorte über den dunklen Modus über die Anwendung eines benutzerdefinierten dunklen Designs bis hin zur abschließenden Messung der Auswirkungen dieser Implementierung auf die wichtigsten KPIs.
60%
Geringere Absprungraten
170%
Mehr Seiten pro Sitzung
Was ist der dunkle Modus?
Bisher wurden Benutzeroberflächen auf Geräten im hellen Modus angezeigt, was in der Regel bedeutet, dass schwarzer Text auf hellen Oberflächen angezeigt wird. Die Alternative ist der „dunkle Modus“ mit hellem Text auf dunklem Hintergrund, z. B. in Grau oder Schwarz.
Der dunkle Modus bietet Vorteile für die Nutzererfahrung. Manche bevorzugen es aus ästhetischen oder barrierefreien Gründen. Es bietet weitere Vorteile, z. B. eine längere Akkulaufzeit in Geräten. Nutzer können über eine Einstellung auf ihren Geräten angeben, dass sie den dunklen Modus je nach Betriebssystem bevorzugen. Der folgende Screenshot zeigt beispielsweise, wie die Konfigurationsoption Dunkles Design auf Geräten mit Android Q aussieht:
Um Nutzern, die den dunklen Modus bevorzugen, die Verwendung zu erleichtern, können Sie die Medienabfrage prefers-color-scheme mit dem Wert light oder dark verwenden. Diese Medienabfrage spiegelt die Auswahl des Nutzers auf seinem Gerät wider. Für Nutzer, die ein dunkles Design bevorzugen, können Sie ein benutzerdefiniertes dunkles Design laden. Sie können beispielsweise eine „dunkle“ CSS-Datei laden und Werte wie Schriftart und Hintergrundfarben ändern. Der folgende Code zeigt ein Beispiel dafür:
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
Kohorten von „bevorzugt“ gegenüber „dunklen“ Nutzerkohorten identifizieren
Zum Zeitpunkt der Erstellung dieses Dokuments (Dezember 2021) stammte der Status der Chrome-Plattform, dass etwa 22% der Webzugriffe von Nutzern mit der Einstellung „Dunkel bevorzugen“ stammen.
Da es sich um aggregierte Daten handelt, kann der tatsächliche Prozentsatz von Nutzern, die eine Website im Dunkeln bevorzugen, variieren. Um die Größe dieser Gruppe besser zu verstehen, ist es daher empfehlenswert, eine hausinterne Messung durchzuführen.
Mit dem folgenden Code wird eine Analysedimension erstellt, um die Leistung von Nutzern zu messen, die light gegenüber dark bevorzugen:
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 implementierte diesen Code auf ihrer Website und verglich das Verhalten beider Gruppen auf Mobilgeräten (Android) und Computern (Windows). Zu diesem Zeitpunkt hat Terra kein benutzerdefiniertes dunkles Design bereitgestellt. Daher lautete das Ziel dieses Tests:
- Größe der Nutzergruppe bestimmen, die Dunkelheit bevorzugst
- Muster erkennen: Verlassen beispielsweise Nutzende, die Dunkelheit bevorzugen, die Website schneller als diejenigen, die eine helle Bevorzugung bevorzugen?
Das kann fundierte Entscheidungen treffen, z. B. ob ein benutzerdefiniertes dunkles Design erforderlich ist. Dies sind die Ergebnisse, die Terra nach einem 14-tägigen Test erzielt hat:
Mobilgeräte (Android)
Bei Mobilgeräten (Android) zeigten die Zahlen für die Absprungrate und die Seiten pro Sitzung keine großen Unterschiede zwischen Nutzern, die „Hell“ bevorzugen, im Vergleich zu Nutzern, die „dunkel“ bevorzugen:
Computer (Windows)
Bei Desktop-Computern (Windows) blieb die Gruppe von Nutzern, die „dunkel“ bevorzugen, viel seltener auf der Website: Sie hatten fast die Absprungrate doppelt so hoch und lasen etwas mehr als die Hälfte der Seiten als die Nutzer, die „Hell“ bevorzugten:
Basierend auf diesen Daten stellte Terra die Hypothese auf, dass Nutzer, die „dunkel“ bevorzugen, seltener auf Desktop-Geräten bleiben, da ein dunkles Design auf ihrer Website nicht unterstützt wird.
Als Nächstes beschloss Terra, an einer Strategie für das dunkle Design zu arbeiten, um zu sehen, ob die Interaktion für die Nutzergruppe verbessert werden könnte, die dunkles Design bevorzugt.
Dunkles Design implementieren
Auf den meisten Websites wird ein dunkles Design implementiert. Dazu wird die zuvor gezeigte einfache Strategie verwendet, um Konfigurationsänderungen des Nutzers über die prefers-color-scheme-Medienabfrage zu erfassen und den Stil darauf zu ändern.
Terra beschloss, dem Nutzer mehr Kontrolle zu geben: Wenn er über die Medienabfrage feststellt, dass er auf seinem Gerät die Einstellung „Dunkel bevorzuge“ aktiviert hat, fragt er ihn, ob er im „Nachtmodus“ navigieren möchte. Solange der Nutzer die Aufforderung nicht ablehnt (durch Klicken auf die Schaltfläche „Ignorieren“), berücksichtigt er die Einstellung des Betriebssystems und wendet ein benutzerdefiniertes dunkles Design an:
Ergänzend zu dieser Strategie bieten sie zusätzliche Konfigurationsoptionen auf dem Bildschirm „Einstellungen“, über die Nutzer entscheiden können, ob sie explizit „hell“ oder „dunkel“ bevorzugen oder sich auf die zugrunde liegenden Geräteeinstellungen verlassen möchten.
So sieht der „Nachtmodus“ von Terra aus:
Einfluss des dunklen Designs von Terra messen
Um die Auswirkungen des dunklen Designs zu messen, nahm Terra die Gruppe der Nutzer, die auf ihren Geräten die Einstellung „Dunkel vorziehen“ aktiviert hatten, dazu auf, Engagement-Messwerte zu vergleichen, wenn ein „Hell“- oder ein „Dunkles“ Design verwendet wurde. Hier sind die Ergebnisse für Mobilgeräte (Android) und Computer (Windows):
Mobilgeräte (Android)
Während die Absprungraten ähnlich blieben, haben sich die Seiten und Sitzungen fast verdoppelt (von 2,47 auf 5,24), wenn Nutzer ein dunkles Design sahen:
2X
Mehr Seiten pro Sitzung
Computer (Windows)
Beide Messwerte verbesserten sich mit einem dunklen Design: Die Absprungraten stiegen von 27,25% auf 10,82% und die Anzahl der Seiten pro Sitzung fast verdreifacht (von 3,7 auf 9,99).
60%
Geringere Absprungraten
170%
Mehr Seiten pro Sitzung
Anhand dieser Daten konnte Terra die Vorteile für die Nutzer bestätigen, die die Implementierung eines dunklen Designs für die Nutzer mit sich bringt, und hat beschlossen, es weiterhin als Kernfunktion der Website beizubehalten.
Fazit
Der dunkle Modus ist eine Einstellung, die Nutzer auf ihren Geräten aktivieren können, um den Stil der Bildschirme in ein dunkles Design umzuwandeln. Diese Methode hat Vorteile für die Nutzer und für verschiedene Aspekte der Geräte der Nutzer berichtet, z. B. die Verlängerung der Akkulaufzeit.
In diesem Artikel wurde erläutert, wie die Interaktionsmesswerte für die Nutzer von Terra, die auf ihren Geräten den bevorzugten dunklen Modus aktiviert haben, mit einem benutzerdefinierten dunklen Design verbessert wurden.
Für Unternehmen, die über die Ressourcen zur Implementierung eines alternativen dunklen Designs verfügen, ist dies der empfohlene Ansatz. Für alle, die keine Zeit haben, in eine solche Funktion zu investieren, führt Chrome einen automatischen dunklen Modus ein.