स्मार्टफ़ोन से आगे बढ़कर: JioHotstar ने फ़ोल्डेबल डिवाइसों और टैबलेट के लिए, अपने यूज़र एक्सपीरियंस को कैसे ऑप्टिमाइज़ किया

फ़ोन से आगे बढ़कर: JioHotstar ने अडैप्टिव यूएक्स कैसे बनाया

JioHotstar भारत का एक लोकप्रिय स्ट्रीमिंग प्लैटफ़ॉर्म है. इसके उपयोगकर्ताओं की संख्या 40 करोड़ से ज़्यादा है. इस प्लैटफ़ॉर्म पर मांग पर उपलब्ध वीडियो (वीओडी) की एक बड़ी लाइब्रेरी है. इसमें 3,30,000 से ज़्यादा घंटों का कॉन्टेंट मौजूद है. साथ ही, इस पर खेल-कूद के बड़े इवेंट रीयल-टाइम में डिलीवर किए जाते हैं.

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

बड़ी स्क्रीन पर JioHotstar के सामने आने वाली चुनौतियां

JioHotstar ने स्टैंडर्ड फ़ोन पर बेहतरीन उपयोगकर्ता अनुभव दिया. साथ ही, टीम नए फ़ॉर्म फ़ैक्टर का फ़ायदा लेना चाहती थी. सबसे पहले, टीम ने बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के लिए बने दिशा-निर्देशों के हिसाब से अपने ऐप्लिकेशन का आकलन किया. इससे उन्हें यह समझने में मदद मिली कि फ़ोल्ड किए जा सकने वाले डिवाइसों और टैबलेट पर उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, ऐप्लिकेशन में क्या बदलाव करने की ज़रूरत है. टियर 1 की बड़ी स्क्रीन वाले ऐप्लिकेशन का स्टेटस पाने के लिए, टीम ने दो रणनीतिक अपडेट लागू किए. इससे ऐप्लिकेशन को अलग-अलग साइज़, डाइमेंशन या कॉन्फ़िगरेशन के हिसाब से अडजस्ट करने और फ़ोल्ड किए जा सकने वाले डिवाइसों पर अलग तरह से दिखाने में मदद मिली. फ़ोल्ड किए जा सकने वाले डिवाइसों और टैबलेट की वजह से आने वाली चुनौतियों को हल करके, JioHotstar का मकसद सभी डिसप्ले साइज़ और आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) पर, अच्छी क्वालिटी और इमर्सिव अनुभव देना है.

उन्हें क्या करना था

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

उन्होंने क्या किया

बड़ी स्क्रीन पर कॉन्टेंट देखने का बेहतर अनुभव देने के लिए, JioHotstar ने अपने ऐप्लिकेशन को बेहतर बनाने की पहल की. इसके लिए, उसने WindowSizeClass को शामिल किया. साथ ही, कॉम्पैक्ट, मीडियम, और बड़ी स्क्रीन के लिए ऑप्टिमाइज़ किए गए लेआउट बनाए. इससे ऐप्लिकेशन को अपने यूज़र इंटरफ़ेस को अलग-अलग स्क्रीन डाइमेंशन और आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के हिसाब से अडजस्ट करने में मदद मिली. इससे अलग-अलग डिवाइसों पर एक जैसा और विज़ुअल तौर पर आकर्षक यूआई मिला.

JioHotstar ने Material 3 Adaptive लाइब्रेरी का इस्तेमाल करके इस पैटर्न को अपनाया, ताकि यह पता चल सके कि ऐप्लिकेशन के लिए कितनी जगह उपलब्ध है. सबसे पहले, currentWindowAdaptiveInfo() फ़ंक्शन को कॉल करें. इसके बाद, विंडो के साइज़ की तीन क्लास के लिए, नए लेआउट का इस्तेमाल करें:

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass

if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

ब्रेकपॉइंट, सबसे बड़े से लेकर सबसे छोटे के क्रम में होते हैं. ऐसा इसलिए, क्योंकि एपीआई अंदरूनी तौर पर, इससे ज़्यादा या इसके बराबर की जांच करता है. इसलिए, कम से कम EXPANDED से ज़्यादा या इसके बराबर की कोई भी चौड़ाई, हमेशा MEDIUM से ज़्यादा होगी.

JioHotstar, फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए खास तौर पर प्रीमियम अनुभव देता है: टेबलटॉप मोड. फ़ोल्ड किए जा सकने वाले डिवाइस को थोड़ा फ़ोल्ड करने पर, यह सुविधा वीडियो प्‍लेयर को स्क्रीन के ऊपरी हिस्से में और वीडियो कंट्रोल को निचले हिस्से में ले जाती है. इससे डिवाइस को हैंड्सफ़्री इस्तेमाल किया जा सकता है.

इसके लिए, Material 3 अडैप्टिव लाइब्रेरी का इस्तेमाल किया जा सकता है. साथ ही, टेबलटॉप मोड के बारे में क्वेरी करने के लिए, currentWindowAdaptiveInfo() का इस्तेमाल किया जा सकता है. डिवाइस को टेबलटॉप मोड में रखने के बाद, लेआउट में बदलाव किया जा सकता है. इससे, डिवाइस के ऊपरी और निचले हिस्से को मैच किया जा सकता है. इसके लिए, एक कॉलम का इस्तेमाल किया जा सकता है, ताकि प्लेयर को ऊपरी हिस्से में और कंट्रोलर को निचले हिस्से में रखा जा सके:

val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

JioHotstar अब टियर 1 के लिए, बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देशों का पालन करता है. टीम ने अडैप्टिव ऐप्लिकेशन से जुड़े दिशा-निर्देशों का फ़ायदा उठाया. इसके लिए, उसने सैंपल, कोडलैब, कुकबुक, और दस्तावेज़ का इस्तेमाल किया, ताकि इन सुझावों को शामिल किया जा सके.

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

अब उपयोगकर्ता, JioHotstar पर अपना पसंदीदा कॉन्टेंट बड़ी स्क्रीन वाले डिवाइसों पर देख सकते हैं. उन्हें कॉन्टेंट देखने का बेहतर और ऑप्टिमाइज़ किया गया अनुभव मिलेगा.

"Google के साथ मिलकर, बड़ी स्क्रीन वाले ऐप्लिकेशन के लिए टियर 1 का स्टेटस हासिल करना एक बड़ी उपलब्धि है. इससे हमारे साझा विज़न की मज़बूती का पता चलता है. JioHotstar में हमारा हमेशा से मानना रहा है कि बड़ी स्क्रीन वाले डिवाइसों के लिए ऑप्टिमाइज़ करने का मतलब सिर्फ़ स्क्रीन के हिसाब से कॉन्टेंट को अडजस्ट करना नहीं है. इसका मतलब है कि फ़ोल्ड किए जा सकने वाले डिवाइसों, टैबलेट, और कनेक्टेड टीवी का इस्तेमाल करने वाले दर्शकों को कॉन्टेंट देखने का बेहतर अनुभव देना.

Google की Jetpack लाइब्रेरी और गाइड का इस्तेमाल करके, हम कॉन्टेंट के इस्तेमाल से जुड़ी अपनी अहम जानकारी को प्लैटफ़ॉर्म इनोवेशन में उनकी विशेषज्ञता के साथ जोड़ पाए. इस साझेदारी की वजह से, दोनों टीमों को अपनी सीमाओं से आगे बढ़ने, कमियों को दूर करने, और हर स्क्रीन साइज़ के लिए एक बेहतरीन और इमर्सिव अनुभव देने में मदद मिली.

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