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

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

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

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

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

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