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

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

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