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

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Brezilya'nın aylık 75 milyon kullanıcısı olan en büyük medya şirketlerinden biri olan Terra, özel bir koyu tema sağlayarak hemen çıkma oranını% 60 azalttı ve koyu modu tercih eden kullanıcılar için masaüstünde 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:

"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. Daha sonra, koyu renk tercih edenler için özel bir koyu tema yükleyebilirsiniz. Örneğin, "koyu" bir CSS dosyası yükleyip yazı tipi ve arka plan renkleri gibi değerleri değiştirebilirsiniz. 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
}

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

Bu makalenin yazıldığı sırada (Aralık 2021), Chrome Platform Durumu, 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 büyüklüğünü anlamak için şirket içi ölçüm yapmanız önerilir.

Aşağıdaki kod, light'ü dark'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 cihazlar (Android) söz konusu olduğunda, hemen çıkma oranı ve oturum başına sayfa sayıları, "hafif" modunu tercih eden kullanıcılarla "koyu" seçeneğini tercih edenler arasında büyük bir fark göstermemiştir:

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 daha fazlasını okudular:

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, bir sonraki adımda koyu temayı tercih eden kullanıcı grubu için etkileşimi artırıp artıramayacağını görmek amacıyla "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şiklikleri dinlenir ve buna göre stiller değiştirilir.

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 bir koyu tema uygular:

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.

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

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 kalırken, kullanıcılar koyu bir temayla karşılaştığında sayfa ve oturum sayısı neredeyse iki katına çıktı (2,47'den 5,24'e).

2_X

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 neredeyse üç katına (3,7'den 9,99'a) çıktı.

_%60

Hemen çıkma oranlarında azalma

_%170

Oturum başına daha fazla sayfa

Terra, bu veriler ışığında koyu temanın kullanıcılar için ne kadar faydalı olacağını teyit edebildi ve bu özelliği sitenin temel bir özelliği 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 tekniğin, kullanıcı deneyimi ve kullanıcının cihazlarının farklı yönleri (ör. pil ömrünün korunması) açısından faydaları olduğu 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 uygulayacak kaynaklara sahip şirketler için önerilen yaklaşım budur. 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.