Au-delà des téléphones : comment JioHotstar a créé une expérience utilisateur 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 et la diffusion en temps réel d'événements sportifs majeurs, la plate-forme fonctionne à grande échelle.

Pour offrir une expérience premium à 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, l'entreprise a suivi les conseils de Google concernant les applications adaptatives et a utilisé des ressources telles que des exemples, des ateliers de programmation, des guides pratiques et de la documentation pour créer une expérience cohérente, 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 des 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 se 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é sur toutes les tailles d'écran et tous les formats.

Ce qu'il fallait faire

L'interface utilisateur de JioHotstar, conçue principalement pour les écrans de téléphone standards, a rencontré des difficultés pour adapter les formats des images de héros, les menus et les écrans d'affichage aux différentes tailles et résolutions d'écran des autres facteurs de forme. Cela entraînait souvent un recadrage des images, un letterboxing, une faible 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'interface utilisateur afin de garantir une flexibilité optimale de la mise en page, un rendu des images et une navigation sur une plus large gamme d'appareils.

Ce qui a été fait

Pour une meilleure expérience de visionnage sur grand écran, 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. L'application a ainsi pu adapter son interface utilisateur à différentes dimensions d'écran et différents formats, ce qui a permis de garantir une interface utilisateur cohérente et visuellement attrayante 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. Tout d'abord, l'entreprise a appelé la fonction currentWindowAdaptiveInfo(), puis a utilisé de 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 par ordre décroissant, car l'API vérifie en interne 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 l'expérience premium unique aux appareils pliables : le mode sur table. Cette fonctionnalité déplace 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, en utilisant également la bibliothèque adaptative Material 3, la même fonction currentWindowAdaptiveInfo() peut être utilisée pour interroger le mode sur table. Une fois l'appareil en mode sur table, il est possible de modifier la mise en page pour qu'elle corresponde à la moitié supérieure et à la moitié inférieure de la posture à l'aide d'une colonne permettant de placer le lecteur dans la moitié supérieure et les commandes 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 applications adaptatives, en utilisant des exemples, des ateliers de programmation, des guides pratiques 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, jusqu'à la valeur recommandée de 48 dp, sur les pages de découverte de vidéos, ce qui garantit l'accessibilité sur les appareils à grand écran. La page de détails de ses vidéos est désormais adaptative et s'ajuste aux tailles et aux orientations de l'écran. L'entreprise a dépassé la simple mise à l'échelle des images et a 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 héros 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 adaptées aux 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 de visionnage améliorée et hautement optimisée.

"L'obtention du niveau 1 des applications sur grand écran 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é, mais qu'il s'agissait d'améliorer l'expérience de visionnage pour les audiences 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 créer conjointement une expérience fluide et immersive sur toutes les tailles d'écran.

Ensemble, nous sommes fiers d'offrir cette expérience améliorée à des millions d'utilisateurs et de définir de nouvelles références en matière de streaming en Inde et dans le monde."
- Sonu Sanjeev, ingénieur senior en développement logiciel