Dengan menampilkan tema gelap kepada pengguna yang lebih memilih mode gelap di perangkat mereka, Terra mengurangi rasio pantulan sebesar 60% dan meningkatkan jumlah halaman yang dibaca per sesi sebesar 170%.
Terra, salah satu perusahaan media terbesar di Brasil dengan 75 juta pengguna bulanan, berhasil mengurangi rasio pantulan sebesar 60% dan meningkatkan jumlah halaman yang dibaca per sesi sebesar 170% di desktop untuk pengguna yang lebih memilih mode gelap dengan menyediakan tema gelap kustom.
Dalam artikel ini, kita akan menganalisis perjalanan Terra mulai dari mengidentifikasi ukuran kelompok "mode gelap", hingga menerapkan tema gelap kustom, dan terakhir mengukur dampak penerapan ini terhadap KPI utama mereka.
60%
Penurunan Rasio Pantulan
170%
Lebih banyak halaman per sesi
Apa itu mode gelap?
Secara historis, antarmuka pengguna di perangkat ditampilkan dalam "mode terang", yang biasanya berarti menampilkan teks hitam di atas antarmuka terang. Alternatifnya adalah "mode gelap", dengan teks terang dengan latar belakang gelap, seperti abu-abu atau hitam.
Mode Gelap memiliki manfaat untuk pengalaman pengguna. Beberapa orang lebih menyukai {i>wireframe<i} karena alasan estetika atau aksesibilitas. Hal ini memiliki keuntungan lainnya, seperti menghemat masa pakai baterai dalam perangkat. Pengguna dapat menyatakan bahwa mereka lebih memilih mode gelap melalui setelan di perangkat mereka, yang bergantung pada sistem operasi. Misalnya, screenshot berikut menunjukkan tampilan opsi konfigurasi Tema Gelap di perangkat yang menjalankan Android Q:
Untuk menawarkan pengalaman yang lebih baik kepada pengguna yang lebih memilih "mode gelap", Anda dapat menggunakan kueri media prefers-color-scheme, dengan nilai light atau dark. Kueri media ini mencerminkan pilihan pengguna pada perangkat mereka. Kemudian, Anda dapat memuat tema gelap kustom untuk pengguna yang lebih menyukai gelap. Misalnya, dengan memuat file CSS "gelap", dan mengubah nilai seperti warna font dan latar belakang. Kode berikut menunjukkan contohnya:
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
Mengidentifikasi kelompok pengguna "lebih suka terang" vs "gelap"
Pada saat penulisan (Desember 2021), Status Platform Chrome menentukan bahwa sekitar 22% traffic web berasal dari pengguna dengan setelan "lebih suka gelap".
Ini adalah data gabungan, sehingga persentase sebenarnya dari pengguna yang lebih memilih warna gelap yang membuka situs dapat bervariasi. Oleh karena itu, untuk memahami ukuran kelompok ini disarankan untuk menjalankan pengukuran internal.
Kode berikut membuat dimensi analisis untuk mengukur performa pengguna yang memilih light vs. 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 menerapkan kode ini di situsnya dan membandingkan perilaku kedua grup di perangkat seluler (Android) dan desktop (Windows). Pada saat itu, Terra tidak menyediakan tema gelap kustom, sehingga sasaran eksperimen ini adalah:
- Menentukan ukuran kelompok pengguna yang lebih menyukai warna gelap.
- Mengidentifikasi pola: misalnya, apakah pengguna yang lebih memilih warna gelap meninggalkan situs lebih cepat dibandingkan dengan pengguna yang lebih memilih terang?
Mengetahui hal ini dapat mendasari keputusan, misalnya: apakah perlu menyediakan tema gelap kustom. Berikut adalah hasil yang diperoleh Terra setelah pengujian selama 14 hari:
Seluler (Android)
Pada kasus seluler (Android), jumlah untuk rasio pantulan dan halaman per sesi tidak menunjukkan perbedaan besar antara pengguna yang lebih memilih "terang", dibandingkan dengan mereka yang lebih memilih "gelap":
Desktop (Windows)
Dalam kasus desktop (Windows), kelompok pengguna yang lebih memilih "gelap" tidak terlalu banyak berada di situs: mereka memiliki hampir dua kali rasio pantulan dan membaca lebih dari setengah halaman dibandingkan pengguna yang lebih memilih "terang":
Berdasarkan data ini, Terra berhipotesis bahwa pengguna yang lebih memilih "gelap" tidak terlalu aktif di perangkat desktop, karena kurangnya dukungan untuk tema gelap di situs mereka.
Sebagai langkah selanjutnya, Terra memutuskan untuk mengerjakan strategi "tema gelap" guna melihat apakah mereka dapat meningkatkan interaksi untuk kelompok pengguna yang lebih memilih warna gelap.
Mengimplementasikan tema gelap
Sebagian besar situs menerapkan tema gelap dengan menggunakan strategi sederhana yang ditunjukkan sebelumnya dari memproses perubahan konfigurasi pengguna melalui kueri media prefers-color-scheme dan mengubah gaya berdasarkan hal tersebut.
Terra memutuskan untuk memberikan kontrol lebih kepada pengguna: saat mereka mendeteksi bahwa setelan "lebih suka gelap" diaktifkan di perangkat (melalui kueri media), dia akan menampilkan perintah untuk menanyakan apakah mereka ingin bernavigasi dalam "mode malam". Selama pengguna tidak menolak permintaan (dengan mengklik tombol "Abaikan"), pengguna mengikuti setelan OS pengguna, dan menerapkan tema gelap kustom:
Sebagai pelengkap strategi ini, mereka memberikan opsi konfigurasi tambahan di layar "setelan", tempat pengguna dapat memutuskan apakah mereka secara eksplisit lebih memilih "terang", "gelap", atau ingin mengandalkan setelan perangkat yang mendasarinya.
Seperti inilah tampilan "Mode Malam" Terra:
Mengukur dampak tema gelap Terra
Untuk mengukur dampak tema gelap, Terra mengambil grup pengguna yang mengaktifkan setelan "Pilihan Gelap" di perangkat mereka dan membandingkan metrik engagement saat menampilkan tema "Terang" vs. "DarK". Berikut ini hasil untuk seluler (Android) dan desktop (Windows):
Seluler (Android)
Meskipun rasio pantulan tetap serupa, halaman dan sesi meningkat hampir dua kali lipat (dari 2,47 menjadi 5,24) saat pengguna terekspos ke tema gelap:
2X
Lebih banyak halaman per sesi
Desktop (Windows)
Kedua metrik meningkat saat menampilkan tema gelap: rasio pantulan meningkat dari 27,25% menjadi 10,82% dan halaman per sesi meningkat hampir tiga kali lipat (dari 3,7 menjadi 9,99).
60%
Penurunan Rasio Pantulan
170%
Lebih banyak halaman per sesi
Berdasarkan data ini, Terra dapat mengonfirmasi manfaat penerapan tema gelap bagi pengguna, dan telah memutuskan untuk terus mempertahankannya sebagai fitur inti situs.
Kesimpulan
Mode Gelap adalah preferensi yang dapat diaktifkan pengguna di perangkat mereka untuk mengubah gaya layar menjadi tema gelap. Teknik ini telah melaporkan manfaat dari pengalaman pengguna dan untuk berbagai aspek perangkat pengguna, seperti menghemat masa pakai baterai.
Dalam artikel ini, kita melihat bagaimana pemberian tema gelap kustom dapat meningkatkan metrik engagement untuk grup pengguna Terra yang mengaktifkan setelan mode gelap pilihan di perangkat mereka.
Bagi perusahaan yang memiliki resource untuk menerapkan tema gelap alternatif, ini adalah pendekatan yang direkomendasikan. Bagi pengguna yang tidak memiliki waktu untuk berinvestasi dalam fitur tersebut, Chrome mulai meluncurkan fitur Mode Gelap Otomatis.