Terra, Koyu Mod sayesinde kullanıcı etkileşimini nasıl artırdı?

Terra, cihazlarında koyu modu tercih eden kullanıcılara koyu tema göstererek hemen çıkma oranını% 60 düşürdü ve oturum başına okunan sayfa sayısını %170 artırdı.

Demián Renzulli
Demián Renzulli
Guilherme Moser de Souza
Guilherme Moser de Souza

Aylık 75 milyon kullanıcısı olan Brezilya'nın en büyük medya şirketlerinden biri olan Terra, özel bir koyu tema sunarak koyu modu tercih eden kullanıcılar için masaüstünde hemen çıkma oranını% 60 azalttı ve oturum başına okunan sayfa sayısını% 170 artırdı.

Bu makalede, Terra'nın "karanlık mod " kohortunun boyutunu belirlemesinden özel karanlık tema uygulamaya ve son olarak bu uygulamanın ana TPG'leri üzerindeki etkisini ölçmeye kadar olan yolculuğunu analiz edeceğiz.

    %60

    Hemen çıkma oranlarında azalma

    %170

    Oturum başına daha fazla sayfa

Koyu mod nedir?

Cihazlardaki kullanıcı arayüzleri genellikle "açık modda" gösterilir. Bu, genellikle açık arayüzlerin üzerinde siyah metin gösterilmesi anlamına gelir. Alternatif olarak, gri veya siyah gibi koyu bir arka plan üzerinde açık renkli metinlerin yer aldığı "koyu mod"u da kullanabilirsiniz.

Koyu mod, kullanıcı deneyimi açısından avantajlar sunar. Bazı kullanıcılar estetik veya erişilebilirlik nedeniyle bu seçeneği tercih eder. Bu, cihazlardaki pil ömrünü korumak gibi başka avantajlara da sahiptir. Kullanıcılar, cihazlarındaki bir ayar aracılığıyla koyu modu tercih ettiklerini belirtebilir. Bu ayar işletim sistemine bağlıdır. Örneğin, aşağıdaki ekran görüntüsünde Android Q çalıştıran cihazlarda Koyu Tema yapılandırma seçeneğinin görünümü gösterilmektedir:

Android Q koyu mod ayarları.
Android Q koyu tema ayarları.

"Karanlık modu"nu tercih eden kullanıcılara daha iyi bir deneyim sunmak için light veya dark değerine sahip prefers-color-scheme medya sorgusunu kullanabilirsiniz. Bu medya sorgusu, kullanıcının cihazındaki seçimini yansıtır. Ardından, koyu temaları tercih edenler için özel koyu tema yükleyebilirsiniz. Örneğin, "koyu" bir CSS dosyası yükleyerek ve yazı tipi ile arka plan renkleri gibi değerleri değiştirerek. Aşağıdaki kodda buna örnek gösterilmektedir:

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

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

Tarayıcı desteği

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

Kaynak

"Açık renkleri tercih eden" ve "koyu renkleri tercih eden" kullanıcı kohortlarını belirleme

Chrome Platform Durumu, bu makalenin yazıldığı sırada (Aralık 2021) web trafiğinin yaklaşık% 22'sinin "koyu temayı tercih et" ayarını kullanan kullanıcılardan geldiğini belirlemektedir.

Bu veriler birleştirilmiş olduğundan, siteye gelen ve koyu temayı tercih eden kullanıcıların gerçek yüzdesi değişiklik gösterebilir. Bu nedenle, bu grubun boyutunu anlamak için şirket içi ölçüm yapılması önerilir.

Aşağıdaki kod, lightdark'a tercih eden kullanıcıların performansını ölçmek için bir analiz boyutu oluşturur:

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 bu kodu sitesine uyguladı ve mobil (Android) ile masaüstü (Windows) cihazlardaki her iki grubun davranışını karşılaştırdı. O dönemde Terra özel koyu tema sunmuyordu. Bu nedenle, bu denemenin hedefleri şunlardı:

  • Koyu temayı tercih eden kullanıcı grubunun boyutunu belirleme
  • Kalıpları belirleme: Örneğin, koyu temayı tercih eden kullanıcılar, açık temayı tercih eden kullanıcılara kıyasla siteden daha hızlı mı ayrılıyor?

Bu bilgiyi bilmek, karar vermenize yardımcı olabilir. Örneğin, özel koyu tema sunulması gerekip gerekmediğini öğrenebilirsiniz. Terra, 14 gün boyunca test ettikten sonra aşağıdaki sonuçları elde etti:

Mobil (Android)

Mobil cihazlarda (Android), hemen çıkma oranı ve oturum başına sayfa sayısıyla ilgili sayılar, "açık" renkleri tercih eden kullanıcılar ile "koyu" renkleri tercih eden kullanıcılar arasında büyük farklılıklar göstermedi:

Görüntü Modu Hemen Çıkma Oranı Oturum Başına Sayfa Sayısı
Açık renkleri tercih eder %25,84 3,96
Koyu renk tercih eder %26,10 3,75

Masaüstü (Windows)

Masaüstü (Windows) kullanıcıları arasında "koyu" temayı tercih eden kullanıcı grubu sitede çok daha az kaldı: "Açık" temayı tercih eden kullanıcılara kıyasla hem hemen hemen iki kat daha fazla hemen çıkma oranı elde ettiler hem de sayfaların yarısından biraz fazlasını okudular:

Görüntü Modu Hemen Çıkma Oranı Oturum Başına Sayfa Sayısı
Açık renkleri tercih eder %13,20 7,42
Koyu renk tercih eder %24,12 4,68

Terra, bu verilere dayanarak "koyu"yu tercih eden kullanıcıların, sitelerinde koyu tema desteğinin olmaması nedeniyle masaüstü cihazlarda daha az kaldığını varsaydı.

Terra, sonraki adımda koyu renkleri tercih eden kullanıcı grubunun etkileşimini artırıp artıramayacaklarını görmek için "koyu tema" stratejisi üzerinde çalışmaya karar verdi.

Koyu tema uygulama

Çoğu web sitesi, daha önce gösterilen basit stratejiyi kullanarak koyu tema uygular. Bu stratejide, prefers-color-scheme medya sorgusu aracılığıyla kullanıcının yapılandırma değişikliklerini dinler ve buna göre stilleri değiştirir.

Terra, kullanıcıya daha fazla kontrol vermeye karar verdi: Cihazlarında "koyu modu tercih et" ayarının etkin olduğunu tespit ettiğinde (medya sorgusu aracılığıyla), kullanıcıya "gece modunda" gezinmek isteyip istemediğini soran bir istem gösterir. Kullanıcı istemi reddetmediği sürece ("Yoksay" düğmesini tıklayarak) kullanıcının işletim sistemi ayarını dikkate alır ve özel koyu tema uygular:

Terra'nın açık temasında kullanıcıdan koyu modu kabul etmesini isteyen ekran görüntüsü.
Terra, cihazlarında koyu modu tercih ettiklerini algıladıktan sonra kullanıcıya koyu modda gezinmek isteyip istemediğini soran bir istem gösterir.

Bu stratejinin tamamlayıcısı olarak, "ayarlar" ekranında ek yapılandırma seçenekleri sunarlar. Bu ekranda kullanıcı, "açık", "koyu"yu açıkça tercih edip etmediğine veya temel cihaz ayarlarına bağlı kalmak isteyip istemediğine karar verebilir.

Koyu modu etkinleştirmek ve devre dışı bırakmak için Terra'nın yapılandırma ekranının ekran görüntüleri.
Terra'nın tema yapılandırmaları, kullanıcıların "Koyu" ve "Açık" temalar arasında seçim yapmasına veya cihazın ayarlarını kullanmasına olanak tanır.

Terra'nın "Gece Modu" aşağıdaki gibi görünür:

Terra'nın koyu temasının ekran görüntüsü.
Terra'nın koyu teması olan "Gece Modu".

Terra'nın koyu temasının etkisini ölçme

Terra, koyu temanın etkisini ölçmek için cihazlarında "Koyu temayı tercih et" ayarını etkinleştirmiş kullanıcı grubunu aldı ve "Açık" tema ile "Koyu" tema gösterilirken etkileşim metriklerini karşılaştırdı. Mobil (Android) ve masaüstü (Windows) için sonuçlar aşağıda verilmiştir:

Mobil (Android)

Hemen çıkma oranları benzer kalmasına rağmen, kullanıcılar koyu temayla karşılaştığında sayfa ve oturum sayısı neredeyse iki katına çıktı (2,47'den 5,24'e):

Görüntü Modu Hemen Çıkma Oranı Oturum Başına Sayfa Sayısı
Açık renkleri tercih eder %26,91 2,47
Koyu renk tercih eder %23,91 5.24

    2X

    Oturum başına daha fazla sayfa

Masaüstü (Windows)

Koyu tema gösterildiğinde her iki metrik de iyileşti: Hemen çıkma oranları% 27,25'ten% 10,82'ye, oturum başına sayfa sayısı ise 3,7'den 9,99'a çıkarak neredeyse üç katına çıktı.

Görüntü Modu Hemen Çıkma Oranı Oturum Başına Sayfa Sayısı
Açık renkleri tercih eder %27,5 3,7
Koyu renk tercih eder %10,82 9,99

    %60

    Hemen çıkma oranlarında azalma

    %170

    Oturum başına daha fazla sayfa

Terra, bu verilere dayanarak koyu temanın kullanıcılar için faydalı olduğunu doğrulayabildi ve bu temayı sitenin temel özelliklerinden biri olarak kullanmaya devam etmeye karar verdi.

Sonuç

Koyu mod, kullanıcıların ekranların stilini koyu temalara değiştirmek için cihazlarında etkinleştirebileceği bir tercihtir. Bu teknik, kullanıcı deneyimi ve kullanıcının cihazlarının farklı yönleri (ör. pil ömrünün korunması) açısından fayda sağladığı bildirilmiştir.

Bu makalede, özel koyu tema sunmanın Terra'nın cihazlarında tercih edilen koyu mod ayarının etkin olduğu kullanıcı grubu için etkileşim metriklerini nasıl iyileştirdiğini gördük.

Alternatif bir koyu tema uygulamak için gerekli kaynaklara sahip olan şirketler için bu yaklaşım önerilir. Bu tür bir özelliğe yatırım yapacak zamanı olmayanlar için Chrome, otomatik karanlık mod özelliğini kullanıma sunmaya başlıyor.