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

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

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

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

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

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