Durch die Anzeige eines dunklen Designs für Nutzer, die auf ihren Geräten den dunklen Modus bevorzugen, konnte Terra die Absprungrate um 60% senken und die Anzahl der Seitenaufrufe pro Sitzung um 170 % steigern.
Terra, eines der größten Medienunternehmen Brasiliens mit 75 Millionen Nutzern pro Monat, konnte die Ausstiegsrate um 60% senken und die Anzahl der Seitenaufrufe pro Sitzung auf dem Computer für Nutzer, die den dunklen Modus bevorzugen, um 170% steigern. Dazu wurde ein benutzerdefiniertes dunkles Design verwendet.
In diesem Artikel analysieren wir den Prozess von Terra, von der Ermittlung der Größe der Kohorte „Dunkelmodus“ über die Anwendung eines benutzerdefinierten dunklen Designs bis hin zur Messung der Auswirkungen dieser Implementierung auf die wichtigsten KPIs.
60 %
Absprungraten senken
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 „Dunkelmodus“ mit hellem Text auf dunklem Hintergrund, z. B. grau oder schwarz.
Der dunkle Modus hat Vorteile für die Nutzerfreundlichkeit. Einige Nutzer bevorzugen sie aus ästhetischen oder barrierefreien Gründen. Es hat auch andere Vorteile, z. B. die Verlängerung der Akkulaufzeit von Geräten. Nutzer können über eine Einstellung auf ihren Geräten je nach Betriebssystem angeben, dass sie den dunklen Modus 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, eine bessere Nutzererfahrung zu bieten, können Sie die Mediaabfrage 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 dann ein benutzerdefiniertes dunkles Design laden. Beispielsweise können Sie eine dunkle CSS-Datei laden und Werte wie Schrift- 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
}
Nutzerkohorten mit Vorliebe für helle oder dunkle Designs identifizieren
Zum Zeitpunkt der Erstellung dieses Artikels (Dezember 2021) geht aus dem Chrome-Plattformstatus hervor, dass etwa 22% des Webtraffics von Nutzern mit der Einstellung „Dunkelmodus bevorzugen“ stammen.
Dies sind aggregierte Daten. Der tatsächliche Prozentsatz der Nutzer, die eine dunkle Website bevorzugen, kann variieren. Um die Größe dieser Gruppe zu ermitteln, sollten Sie daher eigene Analysen durchführen.
Im 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 gab es bei Terra kein benutzerdefiniertes dunkles Design. Die Ziele dieses Tests waren daher:
- Größe der Gruppe von Nutzern ermitteln, die eine dunklere Version bevorzugen
- Muster erkennen: Verlassen Nutzer, die dunkle Farben bevorzugen, die Website beispielsweise schneller als Nutzer, die helle Farben bevorzugen?
Diese Informationen können Ihnen bei Entscheidungen helfen, z. B. ob ein benutzerdefiniertes dunkles Design erforderlich ist. Das sind die Ergebnisse, die Terra nach 14-tägigen Tests erhalten hat:
Mobilgeräte (Android)
Bei Mobilgeräten (Android) gab es bei den Zahlen für die Absprungrate und die Seiten pro Sitzung keine großen Unterschiede zwischen den Nutzern, die „hell“ bevorzugen, und denen, die „dunkel“ bevorzugen:
Computer (Windows)
Auf dem Computer (Windows) blieb die Gruppe der Nutzer, die „dunkel“ bevorzugte, viel kürzer auf der Website: Sie hatte fast die doppelte Absprungrate und las etwas mehr als die Hälfte der Seiten im Vergleich zu den Nutzern, die „hell“ bevorzugten:
Auf der Grundlage dieser Daten stellte Terra die Hypothese auf, dass Nutzer, die ein dunkles Design bevorzugen, aufgrund der fehlenden Unterstützung eines dunklen Designs auf ihrer Website weniger auf Desktop-Geräten bleiben.
Als nächsten Schritt beschloss Terra, an einer Strategie für ein dunkles Design zu arbeiten, um zu sehen, ob sie die Interaktionen für die Gruppe von Nutzern verbessern konnte, die ein dunkles Design bevorzugen.
Dunkles Design implementieren
Die meisten Websites implementieren ein dunkles Design mithilfe der bereits beschriebenen einfachen Strategie, bei der die Konfigurationsänderungen der Nutzer über die prefers-color-scheme
-Mediaabfrage überwacht und die Stile entsprechend geändert werden.
Terra hat sich entschieden, den Nutzern mehr Kontrolle zu geben: Wenn sie über die Mediaabfrage feststellen, dass die Einstellung „Dunkelmodus bevorzugen“ auf ihren Geräten aktiviert ist, wird ihnen eine Aufforderung angezeigt, ob sie im „Nachtmodus“ weitersurfen möchten. Solange der Nutzer die Aufforderung nicht ablehnt (indem er auf die Schaltfläche „Ignorieren“ klickt), werden die Betriebssystemeinstellungen des Nutzers berücksichtigt und ein benutzerdefiniertes dunkles Design angewendet:
Als Ergänzung zu dieser Strategie bieten sie auf dem Bildschirm „Einstellungen“ zusätzliche Konfigurationsoptionen, über die Nutzer entscheiden können, ob sie ausdrücklich „hell“, „dunkel“ bevorzugen oder sich auf die zugrunde liegenden Geräteeinstellungen verlassen möchten.
So sieht der Nachtmodus von Terra aus:
Auswirkungen des dunklen Designs von Terra messen
Um die Auswirkungen des dunklen Designs zu messen, hat Terra die Gruppe der Nutzer mit der Einstellung „Dunkel bevorzugen“ auf ihren Geräten ausgewählt und die Interaktionsmesswerte verglichen, wenn ein helles oder ein dunkles Design angezeigt wurde. Hier sind die Ergebnisse für Mobilgeräte (Android) und Computer (Windows):
Mobilgeräte (Android)
Die Absprungraten blieben ähnlich, die Anzahl der Seiten und Sitzungen hat sich jedoch 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, wenn ein dunkles Design verwendet wurde: Die Absprungraten sanken von 27,25% auf 10,82% und die Anzahl der Seiten pro Sitzung hat sich fast verdreifacht (von 3,7 auf 9,99).
60 %
Absprungraten senken
170 %
Mehr Seiten pro Sitzung
Anhand dieser Daten konnte Terra die Vorteile eines dunklen Designs für die Nutzer bestätigen und hat beschlossen, es als Hauptfunktion 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 dunkle Designs zu ändern. Diese Technik hat Vorteile für die Nutzerfreundlichkeit und für verschiedene Aspekte der Geräte der Nutzer, z. B. für die Akkulaufzeit.
In diesem Artikel haben wir gesehen, wie sich durch ein benutzerdefiniertes dunkles Design die Interaktionsmesswerte für die Gruppe der Terra-Nutzer verbessert haben, die auf ihren Geräten den bevorzugten dunklen Modus aktiviert haben.
Für Unternehmen, die die Ressourcen haben, ein alternatives dunkles Design zu implementieren, ist dies der empfohlene Ansatz. Für alle, die keine Zeit für eine solche Funktion haben, wird in Chrome der automatische Dunkelmodus eingeführt.