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ı.
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:
"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 bir 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
}
"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, 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 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:
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, 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ş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 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 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):
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ı.
%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ü koruma) 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.