Au-delà des téléphones : comment JioHotstar a créé une UX adaptative

JioHotstar est une plate-forme de streaming de premier plan en Inde, qui compte plus de 400 millions d'utilisateurs. Avec une vaste bibliothèque de contenus comprenant plus de 330 000 heures de vidéo à la demande (VOD) et la diffusion en temps réel d'événements sportifs majeurs, la plate-forme fonctionne à très grande échelle.

Pour offrir une expérience de qualité à son vaste public, JioHotstar a amélioré l'expérience de visionnage en optimisant son application pour les appareils pliables et les tablettes. Pour ce faire, ils ont suivi les conseils de Google sur les applications adaptatives et utilisé des ressources telles que des exemples, des ateliers de programmation, des cookbooks et de la documentation pour créer une expérience fluide et attrayante sur toutes les tailles d'écran.

Le défi de JioHotstar sur grand écran

JioHotstar offrait une excellente expérience utilisateur sur les téléphones standards, et l'équipe souhaitait tirer parti des nouveaux facteurs de forme. Pour commencer, l'équipe a évalué son application par rapport aux consignes relatives à la qualité des applications sur grand écran afin de comprendre les optimisations nécessaires pour étendre son expérience utilisateur aux appareils pliables et aux tablettes. Pour atteindre le niveau 1 pour les applications sur grand écran, l'équipe a implémenté deux mises à jour stratégiques afin d'adapter l'application à différents facteurs de forme et de la différencier sur les appareils pliables. En relevant les défis uniques posés par les appareils pliables et les tablettes, JioHotstar vise à offrir une expérience immersive et de haute qualité, quelles que soient la taille et le format de l'écran.

Ce qu'ils devaient faire

L'interface utilisateur de JioHotstar, conçue principalement pour les écrans de téléphone standard, a rencontré des difficultés pour adapter les formats d'image hero, les menus et les écrans de séries aux différentes tailles et résolutions d'écran des autres facteurs de forme. Cela entraînait souvent un recadrage de l'image, un letterboxing, une basse résolution et un espace inutilisé, en particulier en mode Paysage. Pour exploiter pleinement les capacités des tablettes et des appareils pliables, et offrir une expérience utilisateur optimisée sur ces types d'appareils, JioHotstar s'est concentré sur l'amélioration de l'UI afin de garantir une flexibilité optimale de la mise en page, du rendu des images et de la navigation sur un plus large éventail d'appareils.

Stratégie de l'entreprise

Pour améliorer l'expérience de visionnage sur les grands écrans, JioHotstar a pris l'initiative d'améliorer son application en intégrant WindowSizeClass et en créant des mises en page optimisées pour les largeurs compactes, moyennes et étendues. Cela a permis à l'application d'adapter son interface utilisateur à différentes dimensions d'écran et différents formats, garantissant ainsi une interface utilisateur cohérente et esthétique sur différents appareils.

JioHotstar a suivi ce modèle en utilisant la bibliothèque adaptative Material 3 pour connaître l'espace disponible dans l'application. Commencez par appeler la fonction currentWindowAdaptiveInfo(), puis utilisez les nouvelles mises en page en conséquence pour les trois classes de taille de fenêtre :

  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()
}

Les points d'arrêt sont classés du plus grand au plus petit, car en interne, l'API vérifie si la largeur est supérieure ou égale à une valeur donnée. Par conséquent, toute largeur supérieure ou égale à EXPANDED sera toujours supérieure à MEDIUM.

JioHotstar est en mesure de fournir une expérience premium unique aux appareils pliables : le mode sur table. Cette fonctionnalité permet de déplacer facilement le lecteur vidéo vers la moitié supérieure de l'écran et les commandes vidéo vers la moitié inférieure lorsqu'un appareil pliable est partiellement plié pour une expérience mains libres.

Pour ce faire, vous pouvez également utiliser la même fonction currentWindowAdaptiveInfo() de la bibliothèque Adaptive Material 3 pour interroger le mode sur table. Une fois l'appareil en mode sur table, vous pouvez modifier la mise en page pour qu'elle corresponde aux moitiés supérieure et inférieure de la position. Pour ce faire, ajoutez une colonne pour placer le lecteur dans la moitié supérieure et les contrôleurs dans la moitié inférieure :

  val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

JioHotstar respecte désormais les consignes relatives à la qualité des applications sur grand écran pour le niveau 1. L'équipe a tiré parti des conseils concernant les applis adaptatives, en utilisant des exemples, des ateliers de programmation, des cookbooks et de la documentation pour intégrer ces recommandations.

Pour améliorer encore l'expérience utilisateur, JioHotstar a augmenté la taille des cibles tactiles à 48 dp (taille recommandée) sur les pages de découverte de vidéos, ce qui garantit l'accessibilité sur les appareils à grand écran. La page "Détails de la vidéo" est désormais adaptative et s'ajuste à la taille et à l'orientation de l'écran. Ils ont dépassé la simple mise à l'échelle des images et ont plutôt utilisé des classes de taille de fenêtre pour détecter la taille et la densité de la fenêtre en temps réel, et charger l'image de bannière la plus appropriée pour chaque facteur de forme, ce qui a permis d'améliorer la fidélité visuelle. La navigation a également été améliorée, avec des mises en page qui s'adaptent à différentes tailles d'écran.

Les utilisateurs peuvent désormais regarder leurs contenus JioHotstar préférés sur des appareils à grand écran avec une expérience visuelle améliorée et hautement optimisée.

"Obtenir le statut d'application pour grand écran de niveau 1 avec Google est une étape importante qui reflète la force de notre vision commune. Chez JioHotstar, nous avons toujours pensé que l'optimisation pour les appareils à grand écran ne se limitait pas à l'adaptabilité. Il s'agit également d'améliorer l'expérience de visionnage pour les spectateurs qui adoptent rapidement les appareils pliables, les tablettes et les téléviseurs connectés.

En tirant parti des bibliothèques et des guides Jetpack de Google, nous avons pu combiner nos insights sur la consommation de contenu avec leur expertise en matière d'innovation de plate-forme. Cette collaboration a permis aux deux équipes de repousser les limites, de combler les lacunes et de co-créer une expérience fluide et immersive sur toutes les tailles d'écran.

Nous sommes fiers de proposer cette expérience améliorée à des millions d'utilisateurs et de définir de nouvelles références pour le streaming en Inde et dans le monde."
- Sonu Sanjeev, Senior Software Development Engineer