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

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