Mehr als nur ein Smartphone: Wie JioHotstar die UX für faltbare Geräte und Tablets optimiert hat

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 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 auf allen Displaygrößen ein einheitliches, nahtloses und ansprechendes Erlebnis 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. Durch die Berücksichtigung der besonderen Herausforderungen, die faltbare Geräte und Tablets mit sich bringen, möchte JioHotstar auf allen Displaygrößen und Seitenverhältnissen ein hochwertiges und immersives Erlebnis bieten.

Erforderliche Maßnahmen

Die Benutzeroberfläche von JioHotstar wurde hauptsächlich für Standard-Smartphones entwickelt. Es gab daher Probleme, das Seitenverhältnis des Hero-Bilds, die Menüs und die Bildschirme für Sendungen an die verschiedenen Bildschirmgrößen und Auflösungen anderer Formfaktoren anzupassen. 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 auf diesen Gerätetypen eine optimierte Nutzererfahrung 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 das Unternehmen WindowSizeClass integriert und optimierte Layouts für kompakte, mittlere und erweiterte Breiten erstellt hat. So konnte die App die Benutzeroberfläche an verschiedene Bildschirmgrößen und Seitenverhältnisse anpassen und auf verschiedenen Geräten eine einheitliche und ansprechende Benutzeroberfläche 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 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 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.

Auch hier wird die adaptive Material 3-Bibliothek 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 ist über die einfache Bildskalierung hinausgegangen und nutzt stattdessen Fenstergrößenklassen, um die Fenstergröße und ‑dichte in Echtzeit zu erkennen und das am besten geeignete Hero-Bild für jeden Formfaktor zu laden. So wird die visuelle Qualität verbessert. 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 hochgradig optimierten 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 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, das Seherlebnis für Nutzer zu verbessern, die faltbare Geräte, Tablets und Smart-TVs 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