ما وراء الهواتف الذكية: كيف حسّنت JioHotstar تجربة المستخدم للأجهزة القابلة للطي والأجهزة اللوحية

ما وراء الهواتف: كيف صمّم تطبيق JioHotstar تجربة مستخدم تكيُّفية؟

‫JioHotstar هي منصة بث رائدة في الهند، تخدم قاعدة مستخدمين تتجاوز 400 مليون مستخدم. وتعمل المنصة على نطاق واسع، إذ تضمّ مكتبة محتوى ضخمة تشمل أكثر من 330,000 ساعة من الفيديوهات عند الطلب (VOD) وتقدّم بثًا مباشرًا لأهم الأحداث الرياضية.

لضمان تقديم تجربة متميّزة لجمهورها الواسع، حسّنت 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 Adaptive، ويمكن استخدام currentWindowAdaptiveInfo()‎ نفسها لطلب وضع "التثبيت على سطح مستوٍ". بعد تثبيت الجهاز في وضع "التثبيت على سطح مستوٍ"، يمكن تغيير التنسيق ليتطابق مع النصف العلوي والسفلي من وضعية الجهاز باستخدام عمود لوضع المشغّل في النصف العلوي ووحدات التحكّم في النصف السفلي:

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

يستوفي تطبيق JioHotstar الآن إرشادات جودة التطبيقات على الشاشات الكبيرة للمستوى الأول. استفاد الفريق من إرشادات التطبيقات التكيُّفية، واستخدم النماذج والدروس التطبيقية حول الترميز والأدلة الإرشادية والمستندات لدمج هذه الاقتراحات.

لتحسين تجربة المستخدم بشكل أكبر، زادت JioHotstar أحجام مساحات اللمس إلى 48 بكسل مستقل الكثافة (dp) المقترَحة على صفحات استكشاف الفيديوهات، ما يضمن تسهيل الاستخدام على الأجهزة ذات الشاشات الكبيرة. أصبحت صفحة تفاصيل الفيديو الآن تكيُّفية، إذ يتم ضبطها لتلائم أحجام الشاشات واتجاهاتها. لم يكتفوا بتغيير حجم الصور البسيط، بل استخدموا فئات حجم النافذة لرصد حجم النافذة وكثافتها في الوقت الفعلي وتحميل الصورة الرئيسية الأكثر ملاءمةً لكل شكل جهاز، ما ساعد في تحسين دقة العرض المرئي. تم أيضًا تحسين التنقّل، مع تكييف التنسيقات لتناسب أحجام الشاشات المختلفة.

يمكن للمستخدمين الآن مشاهدة المحتوى المفضّل لديهم من JioHotstar على الأجهزة ذات الشاشات الكبيرة مع تجربة مشاهدة محسّنة للغاية.

"إنّ الحصول على تصنيف الفئة الأولى للتطبيقات المخصّصة للشاشات الكبيرة من Google هو إنجاز يعكس قوة رؤيتنا المشتركة. في JioHotstar، نؤمن دائمًا بأنّ تحسين التطبيقات للأجهزة ذات الشاشات الكبيرة يتجاوز مجرد التكيّف معها، بل يتعلّق بالارتقاء بتجربة المشاهدة للجمهور الذي يتبنى بسرعة الأجهزة القابلة للطي والأجهزة اللوحية وأجهزة التلفزيون المتّصلة.

من خلال الاستفادة من مكتبات Jetpack وأدلة Google، تمكّنا من الجمع بين إحصاءاتنا حول استهلاك المحتوى وخبراتهم في ابتكار المنصات. وقد سمح هذا التعاون لكلا الفريقَين بتجاوز الحدود ومعالجة الثغرات والمشاركة في إنشاء تجربة سلسة وغامرة على جميع أحجام الشاشات.

نحن فخورون بتقديم هذه التجربة المحسّنة لملايين المستخدمين ووضع معايير جديدة لكيفية تجربة البث في الهند والعالم."
- "سونو سانجيف"، كبير مهندسي تطوير البرامج