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

Cihazlarında koyu modu tercih eden kullanıcılara koyu bir tema gösteren Terra, hemen çıkma oranını% 60 azaltırken 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

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 koyu modu tercih eden kullanıcılar için hemen çıkma oranını% 60 azalttı ve masaüstünde oturum başına okunan sayfa sayısını% 170 artırdı.

Bu makalede, Terra'nın "koyu mod " grubunun boyutunu belirlemekten özel bir koyu tema uygulamaya ve son olarak bu uygulamanın ana TPG'leri üzerindeki etkisini ölçmeye uzanan yolculuğunu analiz edeceğiz.

    %60

    Hemen Çıkma Oranlarındaki Düşüş

    %170

    Oturum başına daha fazla sayfa

Koyu mod nedir?

Eskiden cihazlarda kullanılan kullanıcı arayüzleri "açık mod"da, yani genellikle hafif arayüzlerin üzerinde siyah metin gösterilerek görüntülenmektedir. Bunun alternatifi ise "koyu mod"dur ve bu mod, gri veya siyah gibi koyu bir arka plan üzerinde açık renk metinle yazılmıştır.

Koyu Mod'un kullanıcı deneyimi açısından avantajları vardır. Bazı kullanıcılar estetik veya erişilebilirlik nedeniyle bunu tercih eder. Cihazlardaki pil ömrünü koruma gibi başka avantajları da vardır. Kullanıcılar, işletim sistemine göre değişen cihazlarındaki bir ayar aracılığıyla koyu modu tercih ettiklerini ifade edebilir. Ö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 nasıl göründüğü gösterilmektedir:

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

"Koyu modu" tercih eden kullanıcılara daha iyi bir deneyim sunmak için light veya dark değeriyle prefers-color-scheme medya sorgusunu kullanabilirsiniz. Bu medya sorgusu, kullanıcının cihazında yaptığı seçimi yansıtır. Ardından, koyu temayı tercih edenler için özel koyu tema yükleyebilirsiniz. Örneğin, "dark" (koyu) bir CSS dosyası yükleyip yazı tipi ile arka plan renkleri gibi değerleri değiştirerek bu işlemi gerçekleştirebilirsiniz. Aşağıdaki kod, bununla ilgili bir örnek gösterir:

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

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

Tarayıcı Desteği

  • 76
  • 79
  • 67
  • 12.1

Kaynak

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

Bu yazının yazıldığı tarihte (Aralık 2021), Chrome Platform Durumu, web trafiğinin yaklaşık% 22'sinin "koyu rengi tercih et" ayarına sahip kullanıcılardan geldiğini belirtmektedir.

Bunlar birleştirilmiş verilerdir, bu nedenle bir siteye gelen 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 kurum içi ölçüm yapmanız önerilir.

Aşağıdaki kod, light ve dark seçeneğini 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, sitesinde bu kodu uyguladı ve her iki grubun mobil (Android) ve masaüstü (Windows) cihazlardaki davranışlarını karşılaştırdı. O anda Terra'nın özel bir koyu tema sağlamıyor olması nedeniyle bu denemenin hedefleri şuydu:

  • Koyu temayı tercih eden kullanıcı grubunun boyutunu belirleme.
  • Kalıpları belirleme: Örneğin, karanlık modu tercih eden kullanıcılar, ışığı tercih edenlere kıyasla siteden daha hızlı ayrılıyor mu?

Bunu bilmek, bilinçli kararlar almanıza yardımcı olabilir (örneğin, özel bir koyu tema sağlamanın gerekli olup olmadığı). Terra'nın 14 günlük testten sonra elde ettiği sonuçlar şöyle:

Mobil (Android)

Mobil cihazlarda (Android) hemen çıkma oranı ve oturum başına sayfa sayıları, "açık" modu tercih eden kullanıcılar ile "koyu" seçeneğini tercih edenler arasında büyük farklılıklar göstermemiştir:

Görüntü Modu Hemen Çıkma Oranı Oturum Başına Sayfa Sayısı
Açık renkli %25,84 avro
Koyu Renk Tercih Ediliyor %26,10 3,75

Masaüstü (Windows)

Masaüstünde (Windows) "koyu renk"i tercih eden kullanıcı grubu sitede çok daha az kaldı: "hafif" modu tercih eden kullanıcılara göre hemen çıkma oranının iki katı ve sayfaların yarısından biraz daha fazlasını okudular:

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

Terra bu verilere dayanarak, "koyu" renk tonunu tercih eden kullanıcıların, sitelerinde koyu tema desteği olmaması nedeniyle masaüstü cihazlarda daha az kaldığı varsayımında bulundu.

Terra bir sonraki adım olarak, koyu temayı tercih eden kullanıcı grubu için etkileşimi iyileştirip iyileştiremeyeceğini görmek üzere bir "koyu tema" stratejisi üzerinde çalışmaya karar verdi.

Koyu tema uygulama

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

Terra, kullanıcıya daha fazla kontrol vermeye karar verdi: Cihazlarında "koyu rengi tercih et" ayarının açık olduğunu fark ettiklerinde (medya sorgusu üzerinden) kullanıcılara "gece modu"nda gitmek isteyip istemediklerini sormaları için bir istem gösteriyorlar. Kullanıcı istemi reddetmediği ("Yoksay" düğmesini tıklayarak) sürece kullanıcının işletim sistemi ayarına uyar ve özel bir koyu tema uygular:

Terra'nın açık temasının, kullanıcıdan koyu modu kabul etmesini isteyen ekran görüntüsü.
Terra, kullanıcıya cihazında koyu modu tercih ettiğini gördükten sonra koyu modda gezinmek isteyip istemediğini soran bir istem gösteriyor.

Bu stratejiye ek olarak, "ayarlar" ekranında ek yapılandırma seçenekleri sunarlar. Burada kullanıcı açıkça "açık" mı, "koyu" mu tercih ettiğ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 kullanılan 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ına bağlı olmasına olanak tanır.

Terra'nın "Gece Modu" şöyle görünüyor:

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

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

Terra, koyu temanın etkisini ölçmek için cihazlarında "Koyu Tercih Et" ayarı açık olan kullanıcı grubunu seçip "Açık" ve "Koyu" temalarının gösterildiği 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ı aynı kalırken, kullanıcılara koyu renk bir tema ile karşılaşıldığı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 renkli %26,91 2,47
Koyu Renk Tercih Ediliyor %23,91 5,24

    2X

    Oturum başına daha fazla sayfa

Masaüstü (Windows)

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

Görüntü Modu Hemen Çıkma Oranı Oturum Başına Sayfa Sayısı
Açık renkli %27,5 3,7
Koyu Renk Tercih Ediliyor %10,82 avro

    %60

    Hemen Çıkma Oranlarındaki Düşüş

    %170

    Oturum başına daha fazla sayfa

Bu veriler ışığında Terra, koyu tema uygulamasının kullanıcılar açısından faydalarını onayladı ve bunu sitenin temel özelliği olarak sürdürmeye karar verdi.

Sonuç

Koyu Mod, kullanıcıların cihazlarında ekranların stilini koyu temalara dönüştürmek için etkinleştirebilecekleri bir tercihtir. Bu tekniğin, kullanıcı deneyiminden ve kullanıcı cihazlarının pil ömründen tasarruf gibi farklı açılardan faydalı olduğunu bildirdi.

Bu makalede, özel bir koyu tema sağlamanın, cihazlarında tercih edilen koyu mod ayarının açık olduğu Terra kullanıcı grubunun etkileşim metriklerini nasıl iyileştirdiğini ele aldık.

Alternatif bir koyu tema uygulayacak kaynaklara sahip şirketler için önerilen yaklaşım budur. Chrome, böyle bir özelliğe yatırım yapmaya vakti olmayanlar için bir Otomatik Koyu Mod özelliğini kullanıma sunuyor.