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

Beyond Phones: How JioHotstar Built an Adaptive UX

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 लाइब्रेरी और गाइड का इस्तेमाल करके, हमने कॉन्टेंट इस्तेमाल करने से जुड़ी अपनी अहम जानकारी को प्लैटफ़ॉर्म में नए-नए बदलाव करने से जुड़ी उनकी विशेषज्ञता के साथ जोड़ा. इस साझेदारी से, दोनों टीमों को बेहतर काम करने, कमियों को दूर करने, और हर स्क्रीन साइज़ के लिए शानदार अनुभव देने वाले ऐप्लिकेशन को साथ मिलकर बनाने में मदद मिली.

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