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

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

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

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

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

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