Au-delà du smartphone : comment JioHotstar a optimisé son UX pour les pliables et les tablettes

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

JioHotstar est une plate-forme de streaming de premier plan en Inde, qui compte une base d'utilisateurs de plus de 400 millions. 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 à grande échelle.

Pour offrir une expérience de qualité à sa vaste audience, JioHotstar a optimisé son application pour les pliables et les tablettes. Pour ce faire, ils ont suivi les conseils de Google sur les applications adaptatives et ont utilisé des ressources telles que des exemples, des ateliers de programmation, des guides et de la documentation afin de créer une expérience fluide et attrayante sur toutes les tailles d'écran.

Le défi des grands écrans pour JioHotstar

JioHotstar offrait une excellente expérience utilisateur sur les téléphones standards, et l'équipe souhaitait tirer parti de 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 l'expérience utilisateur aux pliables et aux tablettes. Pour atteindre le niveau 1 des applications pour grands écrans, 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 de haute qualité sur toutes les tailles d'écran et tous les formats.

Ce qu'ils devaient 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 héros, les menus et les écrans d'émission aux différentes tailles et résolutions d'écran des autres facteurs de forme. Cela entraînait souvent un recadrage de l'image, l'apparition de bandes noires, une basse résolution et un espace inutilisé, en particulier en mode Paysage. Pour exploiter pleinement les capacités des tablettes et des 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 d'assurer une flexibilité optimale de la mise en page, du rendu des images et de la navigation sur un plus grand nombre 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 et proportions d'écran, garantissant ainsi une UI 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 pour l'application. Tout d'abord, en appelant la fonction currentWindowAdaptiveInfo(), puis en utilisant 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 du plus grand au plus petit, car l'API vérifie en interne si la largeur est supérieure ou égale à une valeur donnée. Ainsi, toute largeur supérieure ou égale à EXPANDED sera toujours supérieure à MEDIUM.

JioHotstar est en mesure de proposer l'expérience premium unique des appareils pliables : le mode sur table. Cette fonctionnalité déplace 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 bibliothèque Material 3 Adaptive. La même fonction currentWindowAdaptiveInfo() peut être utilisée pour interroger le mode sur table. Une fois l'appareil en mode sur table, vous pouvez modifier la mise en page pour l'adapter aux moitiés supérieure et inférieure de la position. Pour ce faire, utilisez une colonne pour 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 suivi les conseils sur les applications adaptatives, en utilisant des exemples, des ateliers de programmation, des guides 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 pour atteindre les 48 dp recommandés sur les pages de découverte de vidéos, garantissant ainsi l'accessibilité sur les appareils à grand écran. La page d'informations de la vidéo est désormais adaptative, s'ajustant aux tailles et orientations d'écran. Au lieu de simplement redimensionner les images, l'équipe 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 qui s'adaptent à différentes tailles d'écran.

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

"Atteindre le niveau 1 de la qualité 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 des utilisateurs qui adoptent rapidement les appareils pliables, les tablettes et les TV connectées.

En nous appuyant sur les bibliothèques et les guides Jetpack de Google, nous avons pu combiner nos insights sur la consommation de contenus avec leur expertise en matière d'innovation de la 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.

Ensemble, 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 entier."
- Sonu Sanjeev, Senior Software Development Engineer