गहरे रंग वाले मोड का इस्तेमाल करके, Terra ने किस तरह लोगों की दिलचस्पी बढ़ाई

Terra ने अपने प्लैटफ़ॉर्म पर, उन उपयोगकर्ताओं को डार्क थीम दिखाई जिन्होंने अपने डिवाइसों पर डार्क मोड को प्राथमिकता दी. इससे, Terra के प्लैटफ़ॉर्म पर बाउंस रेट 60% कम हो गया और हर सेशन में पढ़े गए पेजों की संख्या 170% बढ़ गई.

Terra, ब्राज़ील की सबसे बड़ी मीडिया कंपनियों में से एक है. हर महीने इसकी वेबसाइट पर 75 करोड़ लोग आते हैं. इस कंपनी ने कस्टम डार्क थीम उपलब्ध कराकर, डेस्कटॉप पर डार्क मोड का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए, हर सेशन में पढ़े गए पेजों की संख्या को 170% बढ़ाया. साथ ही, बाउंस रेट को 60% तक कम किया.

इस लेख में, हम Terra की "डार्क मोड" कोहॉर्ट के साइज़ की पहचान करने से लेकर, कस्टम डार्क थीम लागू करने तक की प्रोसेस का विश्लेषण करेंगे. साथ ही, इस प्रोसेस को लागू करने से उनके मुख्य केपीआई पर पड़ने वाले असर का आकलन करेंगे.

    60%

    बाउंस रेट में कमी

    170%

    हर सेशन में ज़्यादा पेज देखे गए

डार्क मोड क्या है?

आम तौर पर, डिवाइसों में यूज़र इंटरफ़ेस "लाइट मोड" में दिखते हैं. इसका मतलब है कि लाइट इंटरफ़ेस के ऊपर काला टेक्स्ट दिखता है. इसके अलावा, "गहरे रंग का मोड" भी उपलब्ध है. इसमें स्लेटी या काले जैसे गहरे रंग के बैकग्राउंड पर, हल्के रंग का टेक्स्ट दिखता है.

गहरे रंग वाले मोड से, उपयोगकर्ता अनुभव को फ़ायदे मिलते हैं. कुछ लोग इसे सुंदर या सुलभ बनाने के लिए पसंद करते हैं. इसके और भी फ़ायदे हैं. जैसे, डिवाइसों की बैटरी लाइफ़ को बनाए रखना. उपयोगकर्ता अपने डिवाइसों की सेटिंग में जाकर, यह बता सकते हैं कि उन्हें गहरे रंग वाला मोड पसंद है. यह सेटिंग, ऑपरेटिंग सिस्टम पर निर्भर करती है. उदाहरण के लिए, इस स्क्रीनशॉट में दिखाया गया है कि Android Q वाले डिवाइसों में, गहरे रंग वाली थीम का कॉन्फ़िगरेशन विकल्प कैसा दिखता है:

Android Q के गहरे रंग वाले मोड की सेटिंग.
Android Q की गहरे रंग वाली थीम की सेटिंग.

"डार्क मोड" का इस्तेमाल करने वाले उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, light या dark की वैल्यू के साथ prefers-color-scheme मीडिया क्वेरी का इस्तेमाल किया जा सकता है. इस मीडिया क्वेरी से, उपयोगकर्ता के डिवाइस पर उसकी पसंद के बारे में पता चलता है. इसके बाद, गहरे रंग वाली थीम पसंद करने वाले लोगों के लिए, कस्टम गहरे रंग वाली थीम लोड की जा सकती है. उदाहरण के लिए, "डार्क" सीएसएस फ़ाइल लोड करके और फ़ॉन्ट और बैकग्राउंड के रंग जैसी वैल्यू बदलकर. नीचे दिया गया कोड इसका उदाहरण दिखाता है:

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

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

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

सोर्स

"हल्का" बनाम "गहरे" रंग के हिसाब से, उपयोगकर्ताओं के कोहॉर्ट की पहचान करना

दिसंबर 2021 में लिखे जाने के समय, Chrome Platform Status से पता चलता है कि "डार्क मोड का इस्तेमाल करना पसंद है" सेटिंग वाले उपयोगकर्ताओं से, वेब ट्रैफ़िक का करीब 22% आता है.

यह इकट्ठा किया गया डेटा है. इसलिए, किसी साइट पर आने वाले उन उपयोगकर्ताओं का असल प्रतिशत अलग-अलग हो सकता है जो डार्क मोड को पसंद करते हैं. इसलिए, इस ग्रुप के साइज़ को समझने के लिए, हमारा सुझाव है कि आप इन-हाउस मेज़रमेंट का इस्तेमाल करें.

नीचे दिया गया कोड, Analytics डाइमेंशन बनाता है. इससे light बनाम 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 ने इस कोड को अपनी साइट पर लागू किया और मोबाइल (Android) और डेस्कटॉप (Windows) डिवाइसों पर, दोनों ग्रुप के व्यवहार की तुलना की. उस समय Terra, पसंद के मुताबिक गहरे रंग की थीम उपलब्ध नहीं करा रहा था. इसलिए, इस एक्सपेरिमेंट के लक्ष्य ये थे:

  • यह तय करना कि डार्क मोड का इस्तेमाल करने वाले उपयोगकर्ताओं का ग्रुप कितना बड़ा है.
  • पैटर्न की पहचान करना: उदाहरण के लिए, क्या हल्के रंग वाली थीम पसंद करने वाले उपयोगकर्ताओं की तुलना में, गहरे रंग वाली थीम पसंद करने वाले उपयोगकर्ता, साइट से ज़्यादा जल्दी बाहर निकल जाते हैं?

इस जानकारी से, फ़ैसले लेने में मदद मिल सकती है. उदाहरण के लिए: क्या उपयोगकर्ताओं को पसंद के मुताबिक गहरे रंग वाली थीम देना ज़रूरी है. 14 दिनों तक टेस्ट करने के बाद, Terra को ये नतीजे मिले:

मोबाइल (Android)

मोबाइल (Android) के मामले में, बाउंस रेट और हर सेशन में देखे गए पेजों की संख्या से पता चला है कि "डार्क" मोड का इस्तेमाल करने वाले उपयोगकर्ताओं की तुलना में, "लाइट" मोड का इस्तेमाल करने वाले उपयोगकर्ताओं की संख्या में ज़्यादा अंतर नहीं है:

डिसप्ले मोड बाउंस दर हर सेशन में देखे गए पेज
लाइट को प्राथमिकता देता है 25.84% 3.96
डार्क थीम पसंद है 26.10% 3.75

डेस्कटॉप (Windows)

डेस्कटॉप (Windows) के मामले में, "डार्क" थीम को पसंद करने वाले उपयोगकर्ताओं का ग्रुप, साइट पर काफ़ी कम समय तक रहा: "लाइट" थीम को पसंद करने वाले उपयोगकर्ताओं की तुलना में, उनका बाउंस रेट करीब दो गुना था और उन्होंने आधे से ज़्यादा पेज पढ़े:

डिसप्ले मोड बाउंस दर हर सेशन में देखे गए पेज
लाइट को प्राथमिकता देता है 13.20% 7.42
डार्क थीम पसंद है 24.12% 4.68

इस डेटा के आधार पर, Terra ने अनुमान लगाया कि "गहरे रंग" वाले मोड का इस्तेमाल करने वाले लोग, उनकी साइट पर गहरे रंग वाली थीम उपलब्ध न होने की वजह से, डेस्कटॉप डिवाइसों पर कम समय बिताते हैं.

इसके बाद, Terra ने "डार्क थीम" की रणनीति पर काम करने का फ़ैसला लिया, ताकि यह देखा जा सके कि क्या वे डार्क थीम पसंद करने वाले उपयोगकर्ताओं के ग्रुप के लिए यूज़र ऐक्टिविटी को बेहतर बना सकते हैं.

गहरे रंग वाली थीम लागू करना

ज़्यादातर वेबसाइटें, prefers-color-scheme मीडिया क्वेरी की मदद से उपयोगकर्ता के कॉन्फ़िगरेशन में होने वाले बदलावों को सुनकर और उसके आधार पर स्टाइल बदलकर, डार्क थीम लागू करती हैं. यह एक आसान रणनीति है, जिसे हमने पहले बताया है.

Terra ने उपयोगकर्ता को ज़्यादा कंट्रोल देने का फ़ैसला लिया है: जब उन्हें पता चलता है कि उपयोगकर्ता ने अपने डिवाइसों में "डार्क मोड का इस्तेमाल करना पसंद है" सेटिंग चालू की है, तो वे उन्हें एक प्रॉम्प्ट दिखाते हैं. इसमें उनसे पूछा जाता है कि क्या उन्हें "नाइट मोड" में नेविगेट करना है. जब तक उपयोगकर्ता "अनदेखा करें" बटन पर क्लिक करके प्रॉम्प्ट को अस्वीकार नहीं करता, तब तक वह उपयोगकर्ता के ओएस की सेटिंग का पालन करता है और पसंद के मुताबिक डार्क थीम लागू करता है:

Terra की हल्के रंग वाली थीम का स्क्रीनशॉट, जिसमें उपयोगकर्ता को गहरे रंग वाले मोड को स्वीकार करने के लिए कहा गया है.
Terra, उपयोगकर्ता को एक प्रॉम्प्ट दिखाता है. इसमें उससे पूछा जाता है कि क्या उसे डार्क मोड में नेविगेट करना है. ऐसा तब होता है, जब Terra को पता चलता है कि उपयोगकर्ता अपने डिवाइसों पर डार्क मोड का इस्तेमाल करना पसंद करता है.

इस रणनीति के साथ, वे "सेटिंग" स्क्रीन में कॉन्फ़िगरेशन के अन्य विकल्प भी उपलब्ध कराते हैं. यहां उपयोगकर्ता यह तय कर सकता है कि उसे "हल्का", "गहरे रंग का" या डिवाइस की सेटिंग के हिसाब से कौनसा थीम इस्तेमाल करना है.

गहरे रंग वाले मोड में ऑप्ट इन और ऑप्ट आउट करने के लिए, Terra की कॉन्फ़िगरेशन स्क्रीन के स्क्रीनशॉट.
Terra की थीम के कॉन्फ़िगरेशन की मदद से, उपयोगकर्ता "गहरे रंग वाली" और "हल्के रंग वाली" थीम में से किसी एक को चुन सकते हैं. इसके अलावा, वे डिवाइस की सेटिंग पर भी भरोसा कर सकते हैं.

Terra का "नाइट मोड" ऐसा दिखता है:

Terra की गहरे रंग वाली थीम का स्क्रीनशॉट.
Terra की गहरे रंग वाली थीम, "नाइट मोड".

Terra की गहरे रंग वाली थीम के असर का आकलन करना

गहरे रंग वाली थीम के असर को मेज़र करने के लिए, Terra ने उन उपयोगकर्ताओं का ग्रुप लिया जिनके डिवाइसों में "गहरे रंग वाली थीम का इस्तेमाल करें" सेटिंग चालू है. साथ ही, "हलकी" बनाम "गहरे रंग वाली" थीम दिखाने पर, यूज़र ऐक्टिविटी की मेट्रिक की तुलना की. मोबाइल (Android) और डेस्कटॉप (Windows) के लिए नतीजे यहां दिए गए हैं:

मोबाइल (Android)

बाउंस रेट में कोई बदलाव नहीं हुआ, लेकिन जब उपयोगकर्ताओं को डार्क थीम दिखाई गई, तो पेजों और सेशन की संख्या लगभग दोगुनी हो गई (2.47 से 5.24):

डिसप्ले मोड बाउंस दर हर सेशन में देखे गए पेज
लाइट को प्राथमिकता देता है 26.91% 2.47
डार्क थीम पसंद है 23.91% 5.24

    2X

    हर सेशन में ज़्यादा पेज देखे गए

डेस्कटॉप (Windows)

गहरे रंग वाली थीम दिखाने पर, दोनों मेट्रिक में सुधार हुआ: बाउंस रेट 27.25% से घटकर 10.82% हो गया और हर सेशन में देखे गए पेजों की संख्या तीन गुना बढ़कर 3.7 से 9.99 हो गई.

डिसप्ले मोड बाउंस दर हर सेशन में देखे गए पेज
लाइट को प्राथमिकता देता है 27.5% 3.7
डार्क थीम पसंद है 10.82% 9.99

    60%

    बाउंस रेट में कमी

    170%

    हर सेशन में ज़्यादा पेज देखे गए

इस डेटा के आधार पर, Terra ने यह पुष्टि की कि डार्क थीम लागू करने से उपयोगकर्ताओं को फ़ायदे मिलते हैं. इसलिए, उसने इसे साइट की मुख्य सुविधा के तौर पर बनाए रखने का फ़ैसला लिया है.

नतीजा

गहरे रंग वाला मोड एक ऐसी सेटिंग है जिसे उपयोगकर्ता अपने डिवाइसों पर चालू कर सकते हैं. इससे स्क्रीन के स्टाइल को गहरे रंग वाली थीम में बदला जा सकता है. इस तकनीक से, उपयोगकर्ता अनुभव और उपयोगकर्ता के डिवाइस के अलग-अलग पहलुओं को फ़ायदा हुआ है. जैसे, बैटरी लाइफ़ को बचाना.

इस लेख में हमने देखा है कि कस्टम डार्क थीम उपलब्ध कराने से, Terra के उन उपयोगकर्ताओं के ग्रुप के लिए यूज़र ऐक्टिविटी की मेट्रिक कैसे बेहतर हुईं जिन्होंने अपने डिवाइसों पर डार्क मोड की सेटिंग चालू की हुई है.

जिन कंपनियों के पास गहरे रंग वाली वैकल्पिक थीम लागू करने के संसाधन हैं उनके लिए यह तरीका अपनाने का सुझाव दिया जाता है. जिन लोगों के पास इस तरह की सुविधा को सेट अप करने का समय नहीं है उनके लिए, Chrome में ऑटो डार्क मोड की सुविधा लॉन्च की जा रही है.