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

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

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

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

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

60_%

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

170_%

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

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

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

गहरे रंग वाले मोड से, उपयोगकर्ता अनुभव को फ़ायदे मिलते हैं. कुछ लोग इसे सुंदर या सुलभ बनाने के लिए पसंद करते हैं. इसके अन्य फ़ायदे हैं, जैसे कि डिवाइसों की बैटरी लाइफ़ बनाए रखना. उपयोगकर्ता अपने डिवाइसों पर सेटिंग के ज़रिए, यह बता सकते हैं कि उन्हें गहरे रंग वाला मोड पसंद है. यह सेटिंग ऑपरेटिंग सिस्टम पर निर्भर करती है. उदाहरण के लिए, नीचे दिया गया स्क्रीनशॉट दिखाता है कि 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
}

"हल्का" बनाम "गहरे" रंग के थीम वाले उपयोगकर्ता कोहॉर्ट की पहचान करना

दिसंबर 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, पसंद के मुताबिक गहरे रंग की थीम उपलब्ध नहीं करा रहा था. इसलिए, इस एक्सपेरिमेंट के लक्ष्य ये थे:

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

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

मोबाइल (Android)

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

डेस्कटॉप (Windows)

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

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

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

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

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

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

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

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

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

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

मोबाइल (Android)

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

2_X

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

डेस्कटॉप (Windows)

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

60_%

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

170_%

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

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

नतीजा

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

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

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