So konnte Terra dank des dunklen Modus die Nutzerinteraktion verbessern

Terra präsentierte Nutzern, die den dunklen Modus auf ihren Geräten bevorzugen, ein dunkles Design und konnte so die Absprungrate um 60% und die Anzahl der pro Sitzung gelesenen Seiten um 170 % steigern.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

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 sehen wir uns an, wie Terra die Größe der Kohorte für den „dunklen Modus“ ermittelt, ein benutzerdefiniertes dunkles Design angewendet und schließlich die Auswirkungen dieser Implementierung auf ihre wichtigsten KPIs gemessen hat.

60 _%

Absprungraten senken

170 _%

Mehr Seiten pro Sitzung

Was ist der dunkle Modus?

Bisher wurden Benutzeroberflächen in Geräten im "hellen Modus" angezeigt. Das bedeutet in der Regel, 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 noch weitere Vorteile, beispielsweise die Akkulaufzeit der Geräte. 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 Medienabfrage prefers-color-scheme mit dem Wert light oder dark verwenden. Diese Medienabfrage spiegelt die Auswahl des Nutzers auf seinem Gerät wider. Wenn du möchtest, kannst du 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
}

Identifizieren der Nutzerkohorten mit dem Status „helle“ gegenüber „dunkler“

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, ist es ratsam, eine interne Messung durchzufü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 stellte Terra kein benutzerdefiniertes dunkles Design bereit. Das Ziel dieses Tests war:

• Größe der Gruppe von Nutzern ermitteln, die eine dunklere Version bevorzugen
• Erkennen von Mustern: Verlassen Nutzer, die Dunkelheit bevorzugen, die Website beispielsweise schneller als Nutzer, die helles Licht bevorzugen?

Diese Informationen können Ihnen bei Entscheidungen helfen, z. B. ob ein benutzerdefiniertes dunkles Design erforderlich ist. Dies sind die Ergebnisse, die Terra nach einem 14-tägigen Test 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)

Im Fall von Computern (Windows) blieb die Gruppe der Nutzer, die die Option "Dunkel" bevorzugen, viel weniger auf der Website geblieben: Sie hatte eine fast doppelt so hohe Absprungrate und las etwas mehr als die Hälfte der Seiten als Nutzer, die die Option "hell" bevorzugen.

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 feststellen, dass die Einstellung „Dunkelmodus bevorzugen“ auf ihren Geräten aktiviert ist (über die Media-Abfrage), 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 Wirkung des dunklen Designs zu messen, verglich Terra die Gruppe von Nutzern, bei denen die Einstellung „Dunkles Design bevorzugen“ auf ihren Geräten aktiviert war, und verglich die Interaktionsmesswerte beim Anzeigen eines hellen und eines dunklen Designs. 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:

2_X

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.

Dieser Ansatz wird Unternehmen empfohlen, die die nötigen Ressourcen haben, um ein alternatives dunkles Design zu implementieren. Für alle, die keine Zeit für eine solche Funktion haben, wird in Chrome der automatische Dunkelmodus eingeführt.