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

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