So konnte Terra dank des dunklen Modus die Nutzerinteraktion verbessern

Durch die Anzeige eines dunklen Designs für Nutzer, die auf ihren Geräten den Dark Mode bevorzugen, konnte Terra die Absprungrate um 60% senken und die Anzahl der gelesenen Seiten pro Sitzung um 170 % steigern.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, eines der größten Medienunternehmen Brasiliens mit 75 Millionen monatlichen Nutzern, konnte die Absprungrate um 60% senken und die Anzahl der gelesenen Seiten pro Sitzung um 170% steigern, indem es Nutzern, die den Dark Mode bevorzugen, ein benutzerdefiniertes dunkles Design zur Verfügung stellte.

In diesem Artikel analysieren wir, wie Terra die Größe der Kohorte mit dem Dark Mode ermittelt, ein benutzerdefiniertes dunkles Design angewendet und schließlich die Auswirkungen dieser Implementierung auf die wichtigsten KPIs gemessen hat.

60 _%

Niedrigere Absprungraten

170 _%

Mehr Seiten pro Sitzung

Was ist der dunkle Modus?

Benutzeroberflächen auf Geräten werden in der Regel im „Hellmodus“ angezeigt, d. h. schwarzer Text auf hellen Oberflächen. Die Alternative ist der „dunkle Modus“ mit hellem Text auf einem dunklen Hintergrund, z. B. grau oder schwarz.

Der dunkle Modus bietet Vorteile für die Nutzerfreundlichkeit. Manche Nutzer bevorzugen es aus ästhetischen Gründen oder aus Gründen der Barrierefreiheit. Das hat auch andere Vorteile, z. B. eine längere Akkulaufzeit von Geräten. Nutzer können den dunklen Modus über eine Einstellung auf ihren Geräten aktivieren. Diese Einstellung hängt vom Betriebssystem ab. 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 Media-Anfrage prefers-color-scheme mit dem Wert light oder dark verwenden. Diese Media-Anfrage spiegelt die Auswahl des Nutzers auf seinem Gerät wider. Sie können dann ein benutzerdefiniertes dunkles Design für Nutzer laden, die den dunklen Modus bevorzugen. Sie können beispielsweise eine CSS-Datei mit einem dunklen Design laden und Werte wie Schriftart und Hintergrundfarbe ä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 „bevorzugt hell“ und „bevorzugt dunkel“ identifizieren

Zum Zeitpunkt der Erstellung dieses Artikels (Dezember 2021) geht aus dem Chrome Platform Status hervor, dass etwa 22% des Web-Traffics von Nutzern mit der Einstellung „Bevorzuge dunkel“ stammen.

Da es sich um aggregierte Daten handelt, kann der tatsächliche Prozentsatz der Nutzer, die den Dark Mode bevorzugen, variieren. Daher ist es ratsam, interne Analysen durchzuführen, um die Größe dieser Gruppe zu ermitteln.

Mit dem folgenden Code wird eine Analytics-Dimension 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 hat diesen Code auf seiner Website implementiert und das Verhalten der beiden Gruppen auf Mobilgeräten (Android) und Computern (Windows) verglichen. Zu diesem Zeitpunkt bot Terra kein benutzerdefiniertes dunkles Design an. Die Ziele dieses Tests waren daher:

• Die Größe der Gruppe von Nutzern ermitteln, die den dunklen Modus bevorzugen.
• Muster erkennen: Verlassen Nutzer, die den Dark Mode bevorzugen, die Website beispielsweise schneller als Nutzer, die den Light Mode 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 Tagen Testen erhalten hat:

Mobilgeräte (Android)

Bei mobilen Geräten (Android) gab es bei der Absprungrate und den Seiten pro Sitzung keine großen Unterschiede zwischen den Nutzern, die „Hell“ bevorzugen, und denen, die „Dunkel“ bevorzugen:

Computer (Windows)

Bei Desktop-Nutzern (Windows) blieben die Nutzer, die „Dunkel“ bevorzugten, deutlich kürzer auf der Website: Sie hatten fast die doppelte Absprungrate und lasen etwas mehr als die Hälfte der Seiten im Vergleich zu Nutzern, die „Hell“ bevorzugten:

Auf Grundlage dieser Daten stellte Terra die Hypothese auf, dass Nutzer, die das dunkle Design bevorzugen, weniger Zeit auf Desktopgeräten verbringen, da ihre Website kein dunkles Design unterstützt.

Als Nächstes beschloss Terra, an einer Strategie für ein „Dark Theme“ zu arbeiten, um zu sehen, ob sich die Interaktionen für die Nutzergruppe, die das Dark Theme bevorzugt, verbessern lassen.

Dunkles Design implementieren

Die meisten Websites implementieren ein dunkles Design, indem sie die oben gezeigte einfache Strategie verwenden, bei der über die Media-Anfrage prefers-color-scheme auf Konfigurationsänderungen des Nutzers reagiert und die Stile entsprechend geändert werden.

Terra hat sich entschieden, den Nutzern mehr Kontrolle zu geben: Wenn sie erkennen, dass die Einstellung „Dunkel bevorzugen“ auf ihren Geräten aktiviert ist (über die Media-Anfrage), wird eine Aufforderung angezeigt, in der sie gefragt werden, ob sie im Nachtmodus navigieren möchten. Solange der Nutzer die Aufforderung nicht ablehnt (indem er auf die Schaltfläche „Ignorieren“ klickt), wird die Betriebssystemeinstellung des Nutzers berücksichtigt und ein benutzerdefiniertes dunkles Design angewendet:

Als Ergänzung zu dieser Strategie bieten sie zusätzliche Konfigurationsoptionen auf dem Bildschirm „Einstellungen“ an, auf dem der Nutzer entscheiden kann, ob er explizit „Hell“ oder „Dunkel“ bevorzugt oder sich auf die zugrunde liegenden Geräteeinstellungen verlassen möchte.

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 von Nutzern, die auf ihren Geräten die Einstellung „Dunkles Design bevorzugen“ aktiviert haben, mit Nutzern verglichen, denen ein helles Design präsentiert wurde. Hier sind die Ergebnisse für Mobilgeräte (Android) und Computer (Windows):

Mobilgeräte (Android)

Die Absprungraten blieben zwar ähnlich, aber die Anzahl der Seiten und Sitzungen verdoppelte sich fast (von 2,47 auf 5,24), wenn Nutzer ein dunkles Design sahen:

2 _X

Mehr Seiten pro Sitzung

Computer (Windows)

Beide Messwerte haben sich verbessert, als ein dunkles Design angezeigt wurde: Die Absprungraten sanken von 27,25% auf 10,82% und die Seiten pro Sitzung haben sich fast verdreifacht (von 3,7 auf 9,99).

60 _%

Niedrigere Absprungraten

170 _%

Mehr Seiten pro Sitzung

Anhand dieser Daten konnte Terra die Vorteile der Implementierung eines dunklen Designs für die Nutzer bestätigen 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 das Design der Bildschirme in ein dunkles Design zu ändern. Diese Technik hat Berichten zufolge Vorteile für die Nutzerfreundlichkeit und für verschiedene Aspekte der Geräte des Nutzers, z. B. eine längere Akkulaufzeit.

In diesem Artikel haben wir gesehen, wie sich die Engagement-Messwerte für die Nutzer von Terra, die auf ihren Geräten den bevorzugten dunklen Modus aktiviert haben, durch die Bereitstellung eines benutzerdefinierten dunklen Designs verbessert haben.

Für Unternehmen, die die Ressourcen haben, ein alternatives dunkles Design zu implementieren, ist dies der empfohlene Ansatz. Für Nutzer, die nicht die Zeit haben, sich mit einer solchen Funktion zu beschäftigen, führt Chrome den automatischen Dark Mode ein.