Über das Smartphone hinaus: So hat JioHotstar die Nutzerfreundlichkeit für faltbare Smartphones und Tablets optimiert

Über Smartphones hinaus: So hat JioHotstar eine adaptive Benutzeroberfläche entwickelt

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-Inhalten (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 Falt- und Tablet-Geräte angepasst wurde. Dazu folgten sie den Google-Richtlinien für adaptive Apps und nutzten Ressourcen wie Beispiele, Codelabs, Cookbooks und Dokumentation, um ein einheitliches, nahtloses und ansprechendes Erlebnis auf allen Displaygrößen zu schaffen.

Herausforderung für JioHotstar auf großen Bildschirmen

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 für verschiedene Formfaktoren anzupassen und sich auf Foldables zu konzentrieren. JioHotstar möchte den besonderen Herausforderungen von Foldables und Tablets gerecht werden und ein hochwertiges und immersives Erlebnis 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. Dies 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.

Vorgehensweise

Um das Seherlebnis 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 Material 3-Bibliothek, um zu ermitteln, wie viel Platz die App zur Verfügung hat. Rufen Sie zuerst die Funktion currentWindowAdaptiveInfo() auf und verwenden Sie dann entsprechend neue Layouts für die drei Fenstergrößenklassen:

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 oder gleich“ prüft. Jede Breite, die mindestens größer 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, um es freihändig zu nutzen.

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, um den Player in der oberen Hälfte und die Controller 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 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 Berührungszielbereiche auf den Seiten zur Videofindung auf die empfohlenen 48 dp erhöht. So wird die Barrierefreiheit auf Geräten mit großen Bildschirmen gewährleistet. Die Seite „Videodetails“ wird jetzt an die Bildschirmgröße und ‑ausrichtung angepasst. Sie haben sich nicht nur auf die einfache Skalierung von Bildern verlassen, sondern auch Fenstergrößenklassen genutzt, 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 und die Layouts werden an verschiedene Bildschirmgrößen angepasst.

Nutzer können sich ihre Lieblingsinhalte von JioHotstar jetzt auf Geräten mit großen Displays ansehen und 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. Wir bei JioHotstar sind der Meinung, dass die Optimierung für Geräte mit großen Displays über die Anpassungsfähigkeit hinausgeht. Es geht darum, das Wiedergabeerlebnis für Zuschauer zu verbessern, die schnell auf faltbare Smartphones, Tablets und internetfähige Fernseher umsteigen.

Dank der Jetpack-Bibliotheken und -Anleitungen von Google konnten wir unsere Erkenntnisse zum Content-Konsum mit dem Fachwissen von Google im Bereich Plattforminnovation kombinieren. Durch diese Zusammenarbeit konnten beide Teams Grenzen überschreiten, Lücken schließen und eine nahtlose, immersive Erfahrung für jede Bildschirmgröße schaffen.

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