Jak firma Terra zwiększyła zaangażowanie użytkowników dzięki trybowi ciemnemu

Dzięki wyświetlaniu ciemnego motywu użytkownikom, którzy preferują ciemny tryb na swoich urządzeniach, firma Terra zmniejszyła współczynnik odrzuceń o 60% i zwiększyła liczbę stron przeczytanych w ramach sesji o 170%.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, jedna z największych brazylijskich firm medialnych, która ma 75 mln użytkowników miesięcznie, zmniejszyła współczynnik odrzuceń o 60% i zwiększyła liczbę stron przeczytanych na sesję o 170% na komputerach użytkowników, którzy preferują tryb ciemny. Dokonała tego, udostępniając niestandardową ciemną tematykę.

W tym artykule przeanalizujemy proces Terra od określenia wielkości grupy „tryb ciemny” do zastosowania niestandardowej ciemnej motywy i w końcu pomiaru wpływu tej implementacji na główne wskaźniki wyników.

60_%

Obniżenie współczynnika odrzuceń

170_%

Więcej stron na sesję

Co to jest tryb ciemny?

Dawniej interfejsy urządzeń były wyświetlane w „trybie jasnym”, co zwykle oznaczało wyświetlanie czarnego tekstu na interfejsach świetlnych. Alternatywą jest „tryb ciemny”, w którym tekst jest jasny, a tło ciemne (np. szary lub czarny).

Tryb ciemny wpływa na wrażenia użytkowników. Niektórzy wolą go ze względu na estetykę lub dostępność. Ma też inne zalety, np. pozwala na oszczędzanie energii na urządzeniach. Użytkownicy mogą określić, że wolą tryb ciemny, korzystając z ustawienia na urządzeniu, które zależy od systemu operacyjnego. Na przykład na poniższym zrzucie ekranu widać, jak wygląda opcja konfiguracji Ciemny motyw na urządzeniach z Androidem Q:

Aby zapewnić większą wygodę użytkownikom, którzy wolą „tryb ciemny”, możesz użyć zapytania o multimedia prefers-color-scheme z wartością light lub dark. To zapytanie o multimedia odzwierciedla wybór użytkownika na urządzeniu. Następnie możesz włączyć niestandardowy ciemny motyw dla osób, które wolą ciemny motyw. Na przykład przez załadowanie pliku CSS „ciemny” i zmianę wartości takich jak kolor czcionki i tła. Przykład takiego kodu:

@media (prefers-color-scheme: dark) {
   // apply a dark theme
}

@media (prefers-color-scheme: light) {
  // apply a light theme
}

Identyfikowanie grup użytkowników, którzy preferują jasne lub ciemne motywy

W momencie tworzenia wiadomości (z grudnia 2021 r.) raport Stan platformy Chrome określa, że około 22% ruchu w internecie pochodzi od użytkowników z ustawieniem „preferuj ciemne”.

Są to dane zbiorcze, więc rzeczywisty odsetek użytkowników, którzy preferują ciemny motyw, może się różnić. Dlatego, aby poznać wielkość tej grupy, zalecamy przeprowadzenie pomiarów we własnym zakresie.

Ten kod tworzy wymiar analityczny służący do pomiaru skuteczności użytkowników, którzy wolą używać wymiarów light niż 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');

Firma Terra wdrożyła ten kod w swojej witrynie i porównała zachowanie obu grup na urządzeniach mobilnych (Android) i komputerach (Windows). W tym momencie Terra nie oferowała niestandardowego ciemnego motywu, więc celami tego eksperymentu były:

• Określanie wielkości grupy użytkowników, którzy preferują ciemny motyw.
• rozpoznawanie wzorców: czy np. użytkownicy, którzy wolą ciemny motyw, opuszczają witrynę szybciej niż użytkownicy, którzy wolą motyw jasny?

Dzięki temu możesz podejmować decyzje, na przykład: czy konieczne jest udostępnienie niestandardowego ciemnego motywu. Oto wyniki uzyskane przez Terra po 14 dniach testowania:

Urządzenia mobilne (Android)

W przypadku urządzeń mobilnych (Android) wartości odrzuceń i liczby stron na sesję nie wykazywały dużych różnic między użytkownikami, którzy preferują motyw jasny, a tymi, którzy wolą motyw ciemny:

Komputer (Windows)

W przypadku komputerów (Windows) grupa użytkowników, która preferowała motyw ciemny, spędzała w witrynie znacznie mniej czasu: współczynnik odrzuceń był u nich prawie dwukrotnie wyższy, a użytkownicy czytali nieco ponad połowę stron niż w przypadku użytkowników, którzy preferowali motyw jasny:

Na podstawie tych danych firma Terra założyła, że użytkownicy, którzy wolą ciemny motyw, rzadziej korzystają z komputerów ze względu na brak obsługi ciemnego motywu na stronie.

W następnym kroku Terra postanowiła opracować strategię dotyczącą ciemnego motywu, aby sprawdzić, czy uda się zwiększyć zaangażowanie wśród użytkowników, którzy preferują ciemny motyw.

Wdrażanie ciemnego motywu

Większość witryn implementuje ciemny motyw, stosując opisaną wcześniej prostą strategię polegającą na słuchaniu zmian konfiguracji użytkownika za pomocą zapytania o media prefers-color-scheme i zmianie stylów na ich podstawie.

Firma Terra postanowiła dać użytkownikom większą kontrolę: gdy wykryje, że na ich urządzeniach włączone jest ustawienie „Preferuj ciemny motyw” (za pomocą zapytania o multimedia), wyświetla im prompt z pytaniem, czy chcą korzystać z „trybu nocnego”. Jeśli użytkownik nie odrzuci promptu (klikając przycisk „Ignoruj”), system będzie respektować ustawienia systemu operacyjnego i zastosuje niestandardowy motyw ciemny:

W ramach tej strategii oferują one dodatkowe opcje konfiguracji na ekranie „Ustawienia”, na którym użytkownik może zdecydować, czy woli tryb „jasny”, „ciemny” czy ma korzystać z ustawień urządzenia.

Tryb nocny w Terra wygląda tak:

Mierzę wpływ ciemnego motywu Terra

Aby zmierzyć wpływ ciemnego motywu, Terra porównała dane o zaangażowaniu użytkowników z włączonym ustawieniem „Preferuj ciemny motyw” w przypadku motywu „Jasny” i „Ciemny”. Oto wyniki na urządzeniach mobilnych (Android) i komputerach (Windows):

Urządzenia mobilne (Android)

Chociaż współczynnik odrzuceń pozostał podobny, liczba stron i sesji prawie się podwoiła (z 2,47 na 5,24), gdy użytkownicy mieli dostęp do ciemnego motywu:

2_X

Więcej stron na sesję

Komputer (Windows)

Oba rodzaje danych uległy poprawie po wyświetleniu ciemnego motywu: współczynnik odrzuceń zmniejszył się z 27,25% do 10,82%, a liczba stron na sesję prawie się potroiła (z 3,7 do 9,99).

60_%

Obniżenie współczynnika odrzuceń

170_%

Więcej stron na sesję

Na podstawie tych danych firma Terra mogła potwierdzić korzyści dla użytkowników wynikające z wdrożenia ciemnego motywu i postanowiła zachować go jako podstawową funkcję witryny.

Podsumowanie

Tryb ciemny to ustawienie, które użytkownicy mogą włączyć na swoich urządzeniach, aby zmienić styl ekranów na ciemny motyw. Ta technika przynosi korzyści w zakresie wrażeń użytkowników i różnych aspektów działania urządzeń, np. oszczędzania czasu pracy baterii.

Z tego artykułu dowiesz się, jak udostępnienie niestandardowego ciemnego motywu poprawiło wskaźniki zaangażowania w grupie użytkowników aplikacji Terra, którzy mają włączony preferowany tryb ciemny na swoich urządzeniach.

Jest to zalecane w przypadku firm, które dysponują zasobami umożliwiającymi wdrożenie alternatywnego ciemnego motywu. Dla osób, które nie mają czasu na zainwestowanie w taką funkcję, zaczynamy wdrażać funkcję automatycznego trybu ciemnego.