Wyświetlając ciemny motyw użytkownikom, którzy wolą korzystać z trybu ciemnego na swoich urządzeniach, firma Terra zmniejszyła współczynnik odrzuceń o 60% i zwiększyła liczbę przeczytanych stron podczas jednej sesji o 170%.
Terra, jedna z największych brazylijskich firm medialnych, z 75 milionami użytkowników miesięcznie, obniżyła współczynnik odrzuceń o 60% i zwiększyła o 170% liczbę przeczytanych stron na sesję na komputerach w przypadku użytkowników, którzy preferują tryb ciemny.
W tym artykule przeanalizujemy, jak Terra pokonała drogę, od określenia rozmiaru kohorty „tryb ciemny”, przez zastosowanie niestandardowego ciemnego motywu, a na koniec zmierzenie wpływu tej implementacji na jej główne wskaźniki KPI.
60%
Obniżenie współczynników odrzuceń
170%
Więcej stron na sesję
Co to jest tryb ciemny?
Wcześniej interfejsy na urządzeniach były wyświetlane w „trybie jasnym”, co zwykle oznaczało wyświetlanie czarnego tekstu na jasnym interfejsie. Alternatywą jest „tryb ciemny” z jasnym tekstem na ciemnym tle, np. szarym lub czarnym.
Tryb ciemny ma korzyści związane z wygodą użytkowników. Niektórzy wolą go ze względu na estetykę lub ułatwienia dostępu. Ma też inne zalety, np. dłuższy czas pracy na baterii w urządzeniach. Użytkownicy mogą wyrazić, że wolą tryb ciemny, za pomocą odpowiedniego ustawienia na swoich urządzeniach, które zależy od systemu operacyjnego. Na przykład zrzut ekranu poniżej pokazuje, jak opcja konfiguracji ciemnego motywu wygląda na urządzeniach z Androidem Q:
Aby zapewnić większy komfort 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 jego urządzeniu. Następnie możesz załadować niestandardowy ciemny motyw dla tych, którzy wolą ciemny motyw. Przykładem może być wczytanie pliku CSS „dark” i zmiana wartości takich jak czcionka i kolor tła. Oto przykład:
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
Identyfikowanie kohort użytkowników typu „preferuje grupy jasne” i „ciemne”
W chwili wprowadzenia tej zmiany (z grudnia 2021 r.) dane Stan platformy Chrome wskazują, że około 22% ruchu internetowego pochodzi od użytkowników z ustawieniem „preferuj ciemny”.
Są to dane zbiorcze, więc rzeczywisty odsetek użytkowników, którzy wolą wizyty w witrynie w ciemności, może się różnić. Z tego względu, aby poznać wielkość tej grupy, najlepiej przeprowadzić pomiary własne.
Poniższy kod umożliwia utworzenie wymiaru Analytics służącego do pomiaru skuteczności użytkowników, którzy preferują light i 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 zaimplementowała ten kod w swojej witrynie i porównała zachowanie obu grup na urządzeniach mobilnych (z Androidem) i na komputerach (z systemem Windows). W tym momencie Terra nie oferowała niestandardowego ciemnego motywu, więc cele eksperymentu to:
- Określam wielkość grupy użytkowników, którzy wolą ciemność.
- Identyfikowanie wzorców: np. czy użytkownicy, którzy wolą ciemność, opuszczają witrynę szybciej niż tacy, którzy wolą światło?
Wiedza o tym może pomóc w podjęciu decyzji, np. o zastosowaniu niestandardowego ciemnego motywu. Oto wyniki uzyskane przez Terra po 14-dniowym teście:
Urządzenia mobilne (Android)
W przypadku urządzeń mobilnych (Android) wartości współczynnika odrzuceń i liczby stron na sesję nie ukazywały dużych różnic między użytkownikami, którzy preferują „lekkie” w porównaniu z użytkownikami, którzy wolą „ciemny”:
Komputer (Windows)
W przypadku komputerów (Windows) grupa użytkowników, którzy woleli „ciemną”, spędzała dużo mniej czasu w witrynie: mieli niemal dwukrotnie wyższy współczynnik odrzuceń i przeczytali trochę ponad połowę stron niż użytkownicy, którzy woleli „ciemną” wersję strony:
Na podstawie tych danych Terra postawiła na hipotezę, że użytkownicy, którzy wolą korzystać z ciemnego motywu, rzadziej korzystają z komputerów z powodu braku obsługi ciemnego motywu w witrynie.
Następnie Terra postanowiła opracować strategię „ciemnego motywu”, aby sprawdzić, czy mogłaby zwiększyć zaangażowanie w grupie użytkowników, którzy preferują ciemny motyw.
Wdrażanie ciemnego motywu
Większość witryn stosuje ciemny motyw, wykorzystując prostą strategię, o której wiemy, że przysłuchiwała się zmianom konfiguracji użytkownika za pomocą zapytania o media prefers-color-scheme i na tej podstawie dostosowywała style.
Terra postanowiła dać użytkownikowi większą kontrolę: gdy wykryje, że ma na swoich urządzeniach włączone ustawienie „preferuj tryb ciemny”, wyświetla pytanie o to, czy chce korzystać z nawigacji w trybie nocnym. Dopóki użytkownik nie odrzuci prośby (przez kliknięcie przycisku „Ignoruj”), będzie przestrzegać ustawienia systemu operacyjnego użytkownika i stosuje niestandardowy ciemny motyw:
Uzupełnia tę strategię udostępnia dodatkowe opcje konfiguracji na ekranie ustawień, na których użytkownik może zdecydować, czy woli używać „jasnego”, „ciemnego” koloru, czy też wolisz polegać na ustawieniach urządzenia.
Tak wygląda tryb nocny w aplikacji Terra:
Pomiar wpływu ciemnego motywu Terra
Aby zmierzyć wpływ ciemnego motywu, firma Terra wybrała grupę użytkowników, którzy mają na swoich urządzeniach włączone ustawienie „Preferuj ciemny”, i porównał wskaźniki zaangażowania, porównując motyw „Jasny” i „Ciemny”. Oto wyniki dla urządzeń mobilnych (Android) i komputerów (Windows):
Urządzenia mobilne (Android)
Chociaż współczynniki odrzuceń pozostały na podobnym poziomie, liczba stron i sesji prawie się podwoiła (z 2,47 do 5,24), gdy użytkownicy zobaczyli ciemny motyw:
2X
Więcej stron na sesję
Komputer (Windows)
Oba wskaźniki poprawiły się w przypadku ciemnego motywu: współczynnik odrzuceń spadł z 27,25% do 10,82%, a liczba stron na sesję niemal trzykrotnie (z 3,7 do 9,99).
60%
Obniżenie współczynników odrzuceń
170%
Więcej stron na sesję
Na podstawie tych danych firma Terra mogła ustalić, jakie korzyści może przynieść użytkownikom wdrożenie ciemnego motywu, i postanowiła, że będzie go nadal traktować 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 ciemne motywy. Ta metoda pokazała korzyści płynące z wrażenia użytkownika i różnych aspektów działania urządzenia, np. oszczędzania baterii.
Z tego artykułu dowiesz się, jak zastosowanie niestandardowego ciemnego motywu poprawiło wskaźniki zaangażowania w grupie użytkowników Terra, którzy mają na swoich urządzeniach włączony preferowany tryb ciemny.
Jest to zalecane w przypadku firm, które dysponują zasobami umożliwiającymi wdrożenie alternatywnego ciemnego motywu. Dla użytkowników, którzy nie mają czasu na inwestowanie w taką funkcję, Chrome zaczyna wprowadzać funkcję automatycznego trybu ciemnego.