Mehr als nur Smartphones: Wie JioHotstar eine adaptive UX entwickelt hat

JioHotstar ist eine führende Streamingplattform in Indien mit über 400 Millionen Nutzern. Die Plattform bietet eine riesige Content-Bibliothek mit über 330.000 Stunden Video-on-Demand (VOD) und überträgt große Sportereignisse in Echtzeit.

Um seinen Nutzern ein erstklassiges Erlebnis zu bieten, hat JioHotstar die App für faltbare Geräte und Tablets optimiert. Dazu hat das Unternehmen die Richtlinien für adaptive Apps von Google befolgt und Ressourcen wie Beispiele, Codelabs, Cookbooks und Dokumentationen genutzt, um ein einheitliches und ansprechendes Erlebnis auf allen Displaygrößen zu schaffen.

Die Herausforderung für JioHotstar

JioHotstar bot bereits eine hervorragende Nutzererfahrung auf Standard-Smartphones und das Team wollte die Vorteile neuer Formfaktoren nutzen. Zuerst hat das Team die App anhand der Qualitätsrichtlinien für Apps auf großen Bildschirmen bewertet, um die erforderlichen Optimierungen zu ermitteln, mit denen die Nutzererfahrung auf faltbaren Geräten und Tablets verbessert werden kann. Um den Status „Tier 1“ für Apps auf großen Bildschirmen zu erreichen, hat das Team zwei strategische Updates implementiert, um die App an verschiedene Formfaktoren anzupassen und sich auf faltbaren Geräten von der Konkurrenz abzuheben. Mit diesen Maßnahmen möchte JioHotstar eine hochwertige und immersive Nutzererfahrung auf allen Displaygrößen und mit allen Seitenverhältnissen bieten.

Erforderliche Maßnahmen

Die Benutzeroberfläche von JioHotstar wurde hauptsächlich für Standard-Smartphones entwickelt. Es gab jedoch Probleme bei der Anpassung des Seitenverhältnisses des Hero-Bilds, der Menüs und der Sendungsbildschirme an die unterschiedlichen Bildschirmgrößen und Auflösungen anderer Formfaktoren. Dies führte häufig zu abgeschnittenen Bildern, Letterboxing, einer niedrigen Auflösung und ungenutztem Platz, insbesondere im Querformat. Um die Möglichkeiten von Tablets und faltbaren Geräten voll auszuschöpfen und eine optimierte Nutzererfahrung auf diesen Gerätetypen zu bieten, hat JioHotstar die Benutzeroberfläche verfeinert, um eine optimale Layoutflexibilität, Bildwiedergabe und Navigation auf einer größeren Bandbreite von Geräten zu gewährleisten.

Umgesetzte Maßnahmen

Um die Nutzererfahrung auf großen Bildschirmen zu verbessern, hat JioHotstar die App durch die Einbindung von WindowSizeClass und die Erstellung optimierter Layouts für kompakte, mittlere und erweiterte Breiten verbessert. So konnte die App die Benutzeroberfläche an verschiedene Bildschirmgrößen und Seitenverhältnisse anpassen und eine einheitliche und ansprechende Benutzeroberfläche auf verschiedenen Geräten gewährleisten.

JioHotstar hat dieses Muster mit der adaptiven Bibliothek von Material 3 verwendet, um zu ermitteln, wie viel Platz der App zur Verfügung steht. Zuerst wurde die Funktion currentWindowAdaptiveInfo() aufgerufen und dann wurden entsprechend neue Layouts für die drei Fenstergrößenklassen verwendet:

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

Die Breakpoints sind von der größten zur kleinsten Größe geordnet. Intern prüft die API, ob die Breite größer oder gleich ist. Daher ist jede Breite, die mindestens größer oder gleich EXPANDED ist, immer größer als MEDIUM.

JioHotstar kann die erstklassige Nutzererfahrung bieten, die für faltbare Geräte einzigartig ist: den Modus „Auf dem Tisch“. Bei dieser Funktion wird der Videoplayer in die obere Hälfte des Bildschirms und die Videosteuerung in die untere Hälfte verschoben, wenn ein faltbares Gerät teilweise gefaltet wird, um es freihändig zu verwenden.

Auch hier wurde die adaptive Bibliothek von Material 3 verwendet. Mit derselben Funktion currentWindowAdaptiveInfo() kann der Modus „Auf dem Tisch“ abgefragt werden. Sobald sich das Gerät im Modus „Auf dem Tisch“ befindet, kann das Layout an die obere und untere Hälfte der Position angepasst werden. Dazu wird eine Spalte verwendet, um den Player in der oberen Hälfte und die Steuerung in der unteren Hälfte zu platzieren:

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

JioHotstar erfüllt jetzt die Qualitätsrichtlinien für Apps auf großen Bildschirmen für Tier 1. Das Team hat die Richtlinien für adaptive Apps genutzt und Beispiele, Codelabs, Cookbooks und Dokumentationen verwendet, um diese Empfehlungen umzusetzen.

Um die Nutzererfahrung weiter zu verbessern, hat JioHotstar die Größe der Berührungszielbereiche auf den Seiten zur Videoerkennung auf die empfohlene Größe von 48 dp erhöht, um die Barrierefreiheit auf Geräten mit großen Bildschirmen zu gewährleisten. Die Seite mit den Videodetails ist jetzt adaptiv und passt sich an Bildschirmgrößen und ‑ausrichtungen an. Das Unternehmen hat sich nicht nur auf die einfache Bildskalierung beschränkt, sondern auch Fenstergrößenklassen verwendet, um die Fenstergröße und ‑dichte in Echtzeit zu erkennen und das am besten geeignete Hero-Image für jeden Formfaktor zu laden. So konnte die visuelle Qualität verbessert werden. Auch die Navigation wurde verbessert, da sich die Layouts an verschiedene Bildschirmgrößen anpassen.

Nutzer können sich jetzt ihre Lieblingsinhalte von JioHotstar auf Geräten mit großen Bildschirmen ansehen und von einer verbesserten und hochgradig optimierten Nutzererfahrung profitieren.

„Der Status „Tier 1“ für Apps auf großen Bildschirmen mit Google ist ein Meilenstein, der die Stärke unserer gemeinsamen Vision widerspiegelt. Wir bei JioHotstar waren schon immer der Meinung, dass die Optimierung für Geräte mit großen Bildschirmen mehr als nur Anpassungsfähigkeit erfordert. Es geht darum, die Nutzererfahrung für Zuschauer zu verbessern, die faltbare Geräte, Tablets und vernetzte Fernseher immer häufiger nutzen.

Mit den Jetpack-Bibliotheken und ‑Leitfäden von Google konnten wir unsere Erkenntnisse zum Content-Konsum mit der Expertise von Google im Bereich Plattforminnovation kombinieren. Durch diese Zusammenarbeit konnten beide Teams Grenzen überschreiten, Lücken schließen und gemeinsam eine nahtlose, immersive Nutzererfahrung auf allen Bildschirmgrößen schaffen.

Wir sind stolz darauf, Millionen von Nutzern diese verbesserte Nutzererfahrung zu bieten und neue Maßstäbe für das Streaming in Indien und weltweit zu setzen."
- Sonu Sanjeev, Senior Software Development Engineer