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

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

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