Cara Terra meningkatkan interaksi pengguna berkat Mode Gelap

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

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, salah satu perusahaan media terbesar di Brasil dengan 75 juta pengguna bulanan, 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 kohor "mode gelap", hingga menerapkan tema gelap kustom, dan akhirnya mengukur dampak penerapan ini terhadap KPI utamanya.

60_%

Penurunan Rasio Pantulan

170_%

Lebih banyak halaman per sesi

Apa yang dimaksud dengan 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 pada latar belakang gelap, seperti abu-abu atau hitam.

Mode Gelap memiliki manfaat untuk pengalaman pengguna. Beberapa orang lebih menyukainya karena alasan estetika atau aksesibilitas. Fitur ini memiliki keuntungan lain, seperti menghemat masa pakai baterai di 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 di perangkat mereka. Kemudian, Anda dapat memuat tema gelap kustom untuk pengguna yang lebih menyukai tema 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 pengguna yang lebih memilih tema gelap yang membuka situs dapat bervariasi. Oleh karena itu, untuk memahami ukuran grup ini, sebaiknya jalankan pengukuran internal.

Kode berikut membuat dimensi analisis, untuk mengukur performa pengguna yang lebih 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 grup pengguna yang lebih memilih tema gelap.
• Mengidentifikasi pola: misalnya, apakah pengguna yang lebih memilih tema gelap meninggalkan situs lebih cepat dibandingkan dengan pengguna yang lebih memilih tema terang?

Mengetahui hal ini dapat memberikan informasi untuk membuat keputusan, misalnya: apakah perlu menyediakan tema gelap kustom. Berikut adalah hasil yang diperoleh Terra setelah melakukan pengujian selama 14 hari:

Seluler (Android)

Untuk perangkat seluler (Android), angka rasio pantulan dan halaman per sesi tidak menunjukkan perbedaan besar antara pengguna yang memilih "terang", dibandingkan dengan pengguna yang memilih "gelap":

Desktop (Windows)

Untuk desktop (Windows), grup pengguna yang lebih memilih "gelap" menghabiskan waktu jauh lebih sedikit di situs: mereka memiliki rasio pantulan hampir dua kali lipat dan membaca sedikit lebih dari setengah halaman dibandingkan pengguna yang lebih memilih "terang":

Berdasarkan data ini, Terra berhipotesis bahwa pengguna yang lebih memilih "gelap" lebih jarang menggunakan perangkat desktop, karena kurangnya dukungan tema gelap di situs mereka.

Sebagai langkah berikutnya, Terra memutuskan untuk mengerjakan strategi "tema gelap" untuk melihat apakah mereka dapat meningkatkan engagement bagi grup pengguna yang lebih menyukai tema gelap.

Mengimplementasikan tema gelap

Sebagian besar situs menerapkan tema gelap dengan menggunakan strategi sederhana yang ditunjukkan sebelumnya, yaitu memproses perubahan konfigurasi pengguna melalui kueri media prefers-color-scheme dan mengubah gaya berdasarkan hal tersebut.

Terra memutuskan untuk memberikan lebih banyak kontrol kepada pengguna: saat mereka mendeteksi bahwa setelan "pilih gelap" diaktifkan di perangkat mereka (melalui kueri media), mereka akan menampilkan perintah untuk menanyakan apakah mereka ingin menavigasi dalam "mode malam". Selama pengguna tidak menolak perintah (dengan mengklik tombol "Abaikan"), mereka akan mengikuti setelan OS pengguna, dan menerapkan tema gelap kustom:

Sebagai pelengkap strategi ini, mereka menyediakan 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.

Berikut tampilan "Mode Malam" Terra:

Mengukur dampak tema gelap Terra

Untuk mengukur dampak tema gelap, Terra mengambil grup pengguna yang mengaktifkan setelan "Pilih Gelap" di perangkat mereka dan membandingkan metrik engagement saat menampilkan tema "Terang" vs. "Gelap". Berikut adalah hasil untuk perangkat seluler (Android) dan desktop (Windows):

Seluler (Android)

Meskipun rasio pantulan tetap serupa, halaman dan sesi hampir dua kali lipat (dari 2,47 menjadi 5,24) saat pengguna melihat tema gelap:

2_X

Lebih banyak halaman per sesi

Desktop (Windows)

Kedua metrik tersebut meningkat saat menampilkan tema gelap: rasio pantulan turun dari 27,25% menjadi 10,82% dan halaman per sesi 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 bagi pengguna dari penerapan tema gelap, 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 telah melihat bagaimana menyediakan tema gelap kustom meningkatkan metrik engagement untuk grup pengguna Terra yang mengaktifkan setelan mode gelap pilihan di perangkat mereka.

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