Beyond Phones: How JioHotstar Built an Adaptive UX

JioHotstar ist eine führende Streamingplattform in Indien mit über 400 Millionen Nutzern. Mit einer riesigen Inhaltsbibliothek mit über 330.000 Stunden Video-on-Demand (VOD) und der Echtzeitübertragung wichtiger Sportereignisse ist die Plattform sehr umfangreich.

Um seinen zahlreichen Nutzern ein erstklassiges Erlebnis zu bieten, hat JioHotstar die Wiedergabe optimiert, indem die App für Foldables und Tablets angepasst wurde. Dazu haben sie die Richtlinien von Google für adaptive Apps befolgt und Ressourcen wie Beispiele, Codelabs, Cookbooks und Dokumentation genutzt, um für alle Displaygrößen ein einheitliches, nahtloses und ansprechendes Nutzererlebnis zu schaffen.

Die Herausforderung für JioHotstar auf dem großen Bildschirm

JioHotstar bot eine hervorragende Nutzerfreundlichkeit auf Standard-Smartphones und das Team wollte die Vorteile neuer Formfaktoren nutzen. Zuerst hat das Team seine App anhand der Qualitätsrichtlinien für Apps für große Displays bewertet, um herauszufinden, welche Optimierungen erforderlich sind, um die Nutzerfreundlichkeit auf Faltgeräten und Tablets zu verbessern. Um den Tier 1-Status für Apps für große Bildschirme zu erreichen, hat das Team zwei strategische Updates implementiert, um die App an verschiedene Formfaktoren anzupassen und sich auf faltbaren Geräten abzuheben. JioHotstar möchte den besonderen Herausforderungen, die durch faltbare Geräte und Tablets entstehen, gerecht werden und eine hochwertige und immersive Erfahrung auf allen Displaygrößen und Seitenverhältnissen bieten.

Was sie tun mussten

Die Benutzeroberfläche von JioHotstar wurde hauptsächlich für Standard-Smartphone-Displays entwickelt. Es gab Probleme bei der Anpassung von Hero-Bild-Seitenverhältnissen, Menüs und Show-Bildschirmen an die unterschiedlichen Bildschirmgrößen und ‑auflösungen anderer Formfaktoren. Das führte häufig zu abgeschnittenen Bildern, Letterboxing, einer niedrigen Auflösung und ungenutztem Platz, insbesondere im Querformat. Um die Funktionen von Tablets und Faltgeräten optimal zu nutzen und eine optimierte Nutzererfahrung auf diesen Gerätetypen zu bieten, hat JioHotstar die Benutzeroberfläche so angepasst, dass sie auf einer Vielzahl von Geräten ein optimales Layout, eine optimale Bildwiedergabe und eine optimale Navigation bietet.

Was sie getan haben

Um die Wiedergabe auf großen Bildschirmen zu verbessern, hat JioHotstar die Initiative ergriffen, die App durch die Einbindung von WindowSizeClass zu optimieren und optimierte Layouts für kompakte, mittlere und erweiterte Breiten zu erstellen. So konnte die App ihre Benutzeroberfläche an verschiedene Bildschirmgrößen und Seitenverhältnisse anpassen und so auf unterschiedlichen Geräten eine einheitliche und ansprechende Benutzeroberfläche bieten.

JioHotstar folgte diesem Muster und verwendete die Adaptive-Bibliothek von Material 3, um zu ermitteln, wie viel Platz für die App verfügbar ist. Zuerst wird die Funktion currentWindowAdaptiveInfo() aufgerufen. Anschließend werden 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 absteigender Reihenfolge angegeben, da die API intern mit „größer als oder gleich“ prüft. Jede Breite, die mindestens größer als oder gleich EXPANDED ist, ist also immer größer als MEDIUM.

JioHotstar bietet mit dem Modus „Auf dem Tisch“ ein Premium-Erlebnis, das nur auf faltbaren Geräten möglich ist. Bei dieser Funktion wird der Videoplayer auf die obere Hälfte des Displays und die Videosteuerung auf die untere Hälfte verschoben, wenn ein faltbares Gerät teilweise gefaltet wird, damit du es nicht in der Hand halten musst.

Dazu kann mit der adaptiven Material 3-Bibliothek dieselbe currentWindowAdaptiveInfo() verwendet werden, um den Tischmodus abzufragen. Wenn das Gerät im Modus „Auf dem Tisch“ gehalten wird, kann das Layout so geändert werden, dass es der oberen und unteren Hälfte der Haltung entspricht. Dazu wird eine Spalte verwendet, in der der Player in der oberen Hälfte und die Controller in der unteren Hälfte platziert werden:

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

JioHotstar entspricht jetzt den Qualitätsrichtlinien für Apps für große Bildschirme für Tier 1. Das Team nutzte die Anleitung für adaptive Apps und verwendete Beispiele, Codelabs, Cookbooks und Dokumentation, um diese Empfehlungen umzusetzen.

Um die Nutzerfreundlichkeit weiter zu verbessern, hat JioHotstar die Größe der Touch-Ziele auf den Seiten zur Videowiedergabe auf die empfohlenen 48 dp erhöht, um die Barrierefreiheit auf Geräten mit großen Bildschirmen zu gewährleisten. Die Seite mit den Videodetails wird jetzt an die Bildschirmgröße und ‑ausrichtung angepasst. Sie haben sich nicht nur auf das einfache Skalieren von Bildern verlassen, sondern auch Fenstergrößenklassen verwendet, um Fenstergröße und ‑dichte in Echtzeit zu erkennen und das am besten geeignete Hero-Bild für jeden Formfaktor zu laden. So konnten sie die visuelle Qualität verbessern. Auch die Navigation wurde verbessert. Die Layouts passen sich an verschiedene Bildschirmgrößen an.

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

„Die Erreichung des Tier 1-Status für Apps für große Displays bei Google ist ein Meilenstein, der die Stärke unserer gemeinsamen Vision widerspiegelt. Bei JioHotstar sind wir immer davon ausgegangen, dass die Optimierung für Geräte mit großen Displays über die Anpassungsfähigkeit hinausgeht. Es geht darum, das Seherlebnis für Zuschauer zu verbessern, die sich schnell für faltbare Smartphones, Tablets und internetfähige Fernseher entscheiden.

Durch die Nutzung der Jetpack-Bibliotheken und -Anleitungen von Google konnten wir unsere Erkenntnisse zum Content-Konsum mit dem Know-how von Google im Bereich Plattforminnovation kombinieren. Durch diese Zusammenarbeit konnten beide Teams Grenzen überschreiten, Lücken schließen und eine nahtlose, immersive Erfahrung auf allen Bildschirmgrößen schaffen.

Gemeinsam können wir Millionen von Nutzern dieses verbesserte Erlebnis bieten und neue Maßstäbe für das Streaming in Indien und weltweit setzen.
– Sonu Sanjeev, Senior Software Development Engineer