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%.

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 „ciemny motyw” do zastosowania niestandardowego ciemnego motywu i na koniec pomiaru wpływu tej implementacji na główne wskaźniki efektywności.

    60%

    Obniżenie współczynnika odrzuceń

    170%

    Więcej stron na sesję

Co to jest tryb ciemny?

Wcześniej interfejsy urządzeń były wyświetlane w „jasnym trybie”, co oznacza zwykle wyświetlanie czarnego tekstu na jasnym interfejsie. 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 użytkownicy wolą je ze względów estetycznych lub ze względu na ułatwienia dostępu. 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:

Ustawienia trybu ciemnego w Androidzie Q.
Ustawienia ciemnego motywu w Androidzie 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 załadować niestandardowy ciemny motyw dla osób, które wolą ciemny motyw. Możesz to zrobić, na przykład wczytując plik CSS „ciemny” i zmieniając wartości takie 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
}

Obsługa przeglądarek

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 67.
  • Safari: 12.1.

Źródło

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

W momencie pisania tego artykułu (grudzień 2021 r.) Stan platformy Chrome wskazuje, że około 22% ruchu w internecie pochodzi od użytkowników, którzy mają ustawioną opcję „Preferuj ciemny motyw”.

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.

Podany niżej kod tworzy wymiar analityczny, który służy do pomiaru skuteczności użytkowników, którzy preferują light lub 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');

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 celem tego eksperymentu było:

  • 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 trzeba udostępnić niestandardowy ciemny motyw. 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:

Tryb wyświetlania Współczynnik odrzuceń Strony na sesję
Preferuje jasne 25,84% 3,96
Preferuje ciemny 26,10% 3,75

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ż ci, którzy preferowali motyw jasny:

Tryb wyświetlania Współczynnik odrzuceń Strony na sesję
Preferuje jasne 13,20% 7,42
Preferuje ciemny 24,12% 4,68

Na podstawie tych danych Terra wysunęła hipotezę, że użytkownicy, którzy preferują „ciemny motyw”, rzadziej korzystają z komputera, ponieważ na ich stronie nie ma obsługi ciemnego motywu.

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 reagowaniu na zmiany w konfiguracji użytkownika za pomocą zapytania o media prefers-color-scheme i zmienianiu 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 stosować niestandardową ciemną tematykę:

Zrzut ekranu pokazujący jasny motyw w aplikacji Terra, który prosi użytkownika o zaakceptowanie ciemnego motywu.
Gdy aplikacja Terra wykryje, że użytkownik preferuje ciemny motyw na swoich urządzeniach, wyświetla pytanie, czy chce nawigować w ciemnym trybie.

W ramach tej strategii zapewniają dodatkowe opcje konfiguracji na ekranie „Ustawienia”, na którym użytkownik może zdecydować, czy woli tryb „jasny”, „ciemny” czy ma być używane ustawienie urządzenia.

Zrzuty ekranu przedstawiające ekran konfiguracji w aplikacji Terra, na którym można włączyć lub wyłączyć tryb ciemny
Konfiguracje motywów w Terra pozwalają użytkownikom wybierać między motywami „Ciemny” i „Jasny” lub korzystać z ustawień urządzenia.

Tryb nocny w Terra wygląda tak:

Zrzut ekranu pokazujący ciemny motyw w programie Terra.
Ciemny motyw Terra, „Tryb nocny”.

Pomiar wpływu ciemnego motywu w usłudze Terra

Aby zmierzyć wpływ ciemnego motywu, firma Terra wybrała grupę użytkowników, którzy na swoich urządzeniach mieli włączone ustawienie „Preferuj ciemny motyw”, i porównała wskaźniki zaangażowania, gdy wyświetlała motyw „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:

Tryb wyświetlania Współczynnik odrzuceń Strony na sesję
Preferuje jasne 26,91% 2,47
Preferuje ciemny 23,91% 5.24

    2X

    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 potroiła (z 3,7 do 9,99).

Tryb wyświetlania Współczynnik odrzuceń Strony na sesję
Preferuje jasne 27,5% 3,7
Preferuje ciemny 10,82% 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ń, takich jak oszczędzanie energii.

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.

W przypadku firm, które mają zasoby na wdrożenie alternatywnego ciemnego motywu, jest to zalecane podejście. Dla osób, które nie mają czasu na zainwestowanie w taką funkcję, zaczynamy wdrażać automatyczny tryb ciemny.