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

Beyond Phones: How JioHotstar Built an Adaptive UX

‫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 تجربة مميزة وفريدة للأجهزة القابلة للطي: وضع "التثبيت على سطح مستوٍ". تنقل هذه الميزة مشغّل الفيديو إلى النصف العلوي من الشاشة وعناصر التحكّم في الفيديو إلى النصف السفلي عندما يكون الجهاز القابل للطي مطويًا جزئيًا، ما يتيح لك مشاهدة الفيديوهات بدون لمس الجهاز.

لتحقيق ذلك، يمكن أيضًا استخدام واجهة برمجة التطبيقات currentWindowAdaptiveInfo()‎ نفسها لطلب وضع "التثبيت على سطح مستوٍ"، وذلك باستخدام مكتبة Material 3 Adaptive. عند تثبيت الجهاز في وضع "التثبيت على سطح مستوٍ"، يمكن تغيير التنسيق ليتطابق مع النصف العلوي والسفلي من وضعية الجهاز باستخدام عمود لوضع المشغّل في النصف العلوي ووحدات التحكّم في النصف السفلي:

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

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

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

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

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

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

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