अपने डिवाइस पर गहरे रंग वाला मोड इस्तेमाल करने वाले उपयोगकर्ताओं को गहरे रंग वाली थीम दिखाकर, Tera ने बाउंस रेट को 60% तक कम कर दिया. साथ ही, उसने हर सेशन में पढ़े जाने वाले पेजों की संख्या 170% तक बढ़ा दी.
Tera, ब्राज़ील की सबसे बड़ी मीडिया कंपनियों में से एक है. इस कंपनी को हर महीने 7.5 करोड़ उपयोगकर्ता मिलते हैं. इस कंपनी की वजह से बाउंस रेट में 60% की कमी आई है. साथ ही, उपयोगकर्ता के लिए गहरे रंग वाली थीम इस्तेमाल करने वाले लोगों के लिए, डेस्कटॉप पर हर सेशन में पढ़े जाने वाले पेजों की संख्या 170% तक बढ़ गई है.
इस लेख में, हम Tera के सफ़र के दौरान, "डार्क मोड" के कोहॉर्ट के साइज़ की पहचान करने, पसंद के मुताबिक गहरे रंग वाली थीम लागू करने से लेकर आखिर में, मुख्य केपीआई पर इसे लागू करने के असर का आकलन करेंगे.
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 की स्थिति से यह पता चलता है कि 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');
Tera ने अपनी साइट में इस कोड को लागू किया और मोबाइल (Android) और डेस्कटॉप (Windows) डिवाइसों पर दोनों ग्रुप के व्यवहार की तुलना की. उस समय Tera अपनी पसंद के मुताबिक, गहरे रंग वाली थीम नहीं उपलब्ध करा रहा था. इसलिए, इस एक्सपेरिमेंट के मकसद ये थे:
- गहरे रंग को पसंद करने वाले उपयोगकर्ताओं के ग्रुप का साइज़ तय कर रहे हैं.
- पैटर्न की पहचान करना: उदाहरण के लिए, क्या रोशनी पसंद करने वाले उपयोगकर्ताओं की तुलना में, उपयोगकर्ता कम रोशनी में साइट छोड़कर चले जाते हैं?
इस जानकारी के आधार पर, बेहतर फ़ैसले लिए जा सकते हैं. उदाहरण के लिए: अगर आपके हिसाब से गहरे रंग वाली थीम देना ज़रूरी हो, तो ऐसा करें. 14 दिनों तक टेस्ट के बाद, Tera से ये नतीजे मिले:
मोबाइल (Android)
मोबाइल (Android) के मामले में, बाउंस रेट और हर सेशन के पेज के डेटा में, "गहरे रंग" को प्राथमिकता देने वाले उपयोगकर्ताओं की तुलना में, "रोशनी" पसंद करने वाले उपयोगकर्ताओं के बीच ज़्यादा अंतर नहीं दिखता:
डेस्कटॉप (Windows)
डेस्कटॉप (Windows) के मामले में, "गहरे" रंग को प्राथमिकता देने वाले उपयोगकर्ताओं का समूह साइट पर बहुत कम रहा: उनकी तुलना में "लाइट" को प्राथमिकता देने वाले उपयोगकर्ताओं की तुलना में उनकी बाउंस दर दोगुनी थी और आधे से कुछ ज़्यादा पेज पढ़े:
इस डेटा के आधार पर, Tera ने अनुमान लगाया कि "गहरे रंग वाली थीम" को पसंद करने वाले उपयोगकर्ता, डेस्कटॉप डिवाइसों पर ज़्यादा देर नहीं रुकते. ऐसा इसलिए, क्योंकि उनकी साइट में गहरे रंग वाली थीम काम नहीं करती.
अगले कदम के तौर पर, टेरा ने "गहरे रंग वाली थीम" वाली रणनीति पर काम करने का फ़ैसला किया, ताकि वे यह देख सकें कि गहरे रंग को पसंद करने वाले उपयोगकर्ताओं के ग्रुप की दिलचस्पी इस थीम को कैसे बेहतर बना सकती है.
गहरे रंग वाली थीम लागू करना
ज़्यादातर वेबसाइटें, गहरे रंग वाली थीम लागू करती हैं. इसके लिए, उपयोगकर्ता के कॉन्फ़िगरेशन में होने वाले बदलावों को ध्यान में रखते हुए, prefers-color-scheme मीडिया क्वेरी और उसके आधार पर स्टाइल बदलने के तरीके का इस्तेमाल किया जाता है.
टेरा ने लोगों को ज़्यादा कंट्रोल देने का फ़ैसला किया: जब उन्हें पता चलता है कि उनके डिवाइस पर "डार्क डार्क" सेटिंग चालू है (मीडिया क्वेरी के ज़रिए), तो उन्होंने उनसे एक प्रॉम्प्ट में पूछा कि क्या वे "नाइट मोड" में नेविगेट करना चाहते हैं. जब तक उपयोगकर्ता "अनदेखा करें" बटन पर क्लिक करके प्रॉम्प्ट को अस्वीकार नहीं करता है, तब तक वह उपयोगकर्ता की ओएस-सेटिंग का पालन करता है और उसकी पसंद के मुताबिक गहरे रंग वाली थीम लागू करता है:
इस रणनीति के साथ, वे "सेटिंग" स्क्रीन में अतिरिक्त कॉन्फ़िगरेशन के विकल्प देते हैं. यहां उपयोगकर्ता यह तय कर सकता है कि उसे साफ़ तौर पर "हल्के" या "गहरे" वाले विकल्प पसंद है या वह डिवाइस की बुनियादी सेटिंग पर भरोसा करना चाहता है.
Tera का "नाइट मोड" ऐसा दिखता है:
टेरा की गहरे रंग वाली थीम का असर मापना
गहरे रंग वाली थीम के असर का आकलन करने के लिए, टेरा ने ऐसे उपयोगकर्ताओं के ग्रुप का डेटा लिया जिन्होंने अपने डिवाइसों पर "गहरे रंग वाली थीम" सेटिंग चालू की हुई है. साथ ही, उन्होंने दर्शकों की दिलचस्पी से जुड़ी मेट्रिक की तुलना करने के लिए, "हल्के रंग" और "गहरे रंग वाली" थीम का इस्तेमाल किया है. यहां मोबाइल (Android) और डेस्कटॉप (Windows) के लिए, नतीजे दिए गए हैं:
मोबाइल (Android)
उपयोगकर्ताओं के गहरे रंग वाली थीम उपलब्ध होने पर, बाउंस रेट में कोई बदलाव नहीं हुआ, लेकिन पेजों और सेशन की संख्या करीब दोगुनी (2.47 से 5.24) हो गई:
2 X
हर सेशन में ज़्यादा पेज
डेस्कटॉप (Windows)
गहरे रंग वाली थीम दिखाने पर दोनों मेट्रिक में सुधार हुआ: बाउंस रेट 27.25% से बढ़कर 10.82% हो गया है और हर सेशन के पेज करीब तीन गुना (3.7 से 9.99) हो गए हैं.
60%
बाउंस दरों में कमी
170%
हर सेशन में ज़्यादा पेज
इस डेटा के आधार पर, टेरा गहरे रंग वाली थीम लागू करने से लोगों को मिलने वाले फ़ायदों की पुष्टि कर सकती है. साथ ही, उसने इसे साइट की मुख्य सुविधा के तौर पर बनाए रखने का फ़ैसला किया है.
नतीजा
उपयोगकर्ता गहरे रंग वाले मोड को अपने डिवाइस पर चालू करके, स्क्रीन की स्टाइल को गहरे रंग वाली थीम में बदल सकते हैं. इस तकनीक से, उपयोगकर्ता अनुभव से मिलने वाले फ़ायदों और उपयोगकर्ता के डिवाइसों के अलग-अलग पहलुओं, जैसे कि बैटरी लाइफ़ की बचत के बारे में जानकारी मिली है.
इस लेख में हमने देखा है कि पसंद के मुताबिक गहरे रंग वाली थीम सेट करने से, कैसे Tera के उपयोगकर्ता ग्रुप के डिवाइसों पर गहरे रंग वाले मोड की सेटिंग चालू है. इसके लिए, यूज़र ऐक्टिविटी वाली मेट्रिक बेहतर हुई है.
जिन कंपनियों के पास गहरे रंग वाली वैकल्पिक थीम को लागू करने के संसाधन हैं उनके लिए यह तरीका इस्तेमाल करने का सुझाव दिया जाता है. जिन लोगों के पास ऐसी सुविधा को इस्तेमाल करने का समय नहीं है उनके लिए, Chrome एक ऑटो डार्क मोड सुविधा रोल आउट कर रहा है.