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-Inhalten (VOD) und überträgt große Sportereignisse in Echtzeit.

Um seinen vielen 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 bei großen Bildschirmen

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. JioHotstar möchte die besonderen Herausforderungen von faltbaren Geräten und Tablets angehen und ein hochwertiges und immersives Erlebnis auf allen Displaygrößen und Seitenverhältnissen bieten.

Erforderliche Maßnahmen

Die Benutzeroberfläche von JioHotstar wurde hauptsächlich für Standard-Smartphone-Displays entwickelt. Es gab jedoch Probleme, die Seitenverhältnisse von Hero-Bildern, Menüs und Sendungsbildschirmen an die verschiedenen Bildschirmgrößen und Auflösungen anderer Formfaktoren anzupassen. Dies führte häufig zu Bildbeschneidungen, Letterboxing, niedriger 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

Für ein besseres Seherlebnis auf großen Bildschirmen hat JioHotstar die App verbessert, indem WindowSizeClass integriert und optimierte Layouts für kompakte, mittlere und erweiterte Breiten erstellt wurden. So konnte die App die Benutzeroberfläche an verschiedene Bildschirmgrößen und Seitenverhältnisse anpassen und eine einheitliche und optisch ansprechende Benutzeroberfläche auf verschiedenen Geräten bieten.

JioHotstar hat dieses Muster mit der adaptiven Material 3-Bibliothek 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 in der Reihenfolge von der größten zur kleinsten Größe angegeben. Intern prüft die API mit „größer oder gleich“. Daher ist jede Breite, die mindestens größer oder gleich EXPANDED ist, immer größer als MEDIUM.

JioHotstar kann das erstklassige Erlebnis bieten, das für faltbare Geräte einzigartig ist: den Modus „Auf dem Tisch“. Bei dieser Funktion wird der Videoplayer bequem 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.

Dazu kann mit der adaptiven Material 3-Bibliothek dieselbe Funktion „currentWindowAdaptiveInfo()“ verwendet werden, um den Modus „Auf dem Tisch“ abzufragen. 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 Touch-Ziele 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 mehr als nur eine einfache Bildskalierung vorgenommen. Stattdessen wurden Fenstergrößenklassen verwendet, um die Fenstergröße und ‑dichte in Echtzeit zu erkennen und das am besten geeignete Hero-Bild für jeden Formfaktor zu laden, um die visuelle Qualität zu verbessern. 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 dabei von einem verbesserten und hochoptimierten Seherlebnis 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 sind immer der Meinung gewesen, dass die Optimierung für Geräte mit großen Bildschirmen mehr als nur Anpassungsfähigkeit erfordert. Es geht darum, das Seherlebnis für Nutzer 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 des Unternehmens im Bereich Plattforminnovation kombinieren. Durch diese Zusammenarbeit konnten beide Teams Grenzen überschreiten, Lücken schließen und gemeinsam ein nahtloses, immersives Erlebnis auf allen Bildschirmgrößen schaffen.

Gemeinsam freuen wir uns, Millionen von Nutzern dieses verbesserte Erlebnis zu bieten und neue Maßstäbe für das Streaming in Indien und weltweit zu setzen."
- Sonu Sanjeev, Senior Software Development Engineer