Mehr als nur Smartphones: Wie JioHotstar die UX für faltbare Smartphones 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. Mit einer riesigen Inhaltsbibliothek,die über 330.000 Stunden Video-on-Demand (VOD) umfasst, und der Echtzeitübertragung wichtiger Sportereignisse ist die Plattform sehr umfangreich.

Um seinem großen Publikum ein erstklassiges Erlebnis zu bieten, hat JioHotstar die App für faltbare Smartphones und Tablets optimiert. Dazu hielten sie sich an die Google-Leitlinien für adaptive Apps und nutzten Ressourcen wie Beispiele, Codelabs, Cookbooks und Dokumentation, um eine einheitliche, nahtlose und ansprechende Nutzung auf allen Displaygrößen zu ermöglichen.

Die Herausforderung von JioHotstar bei großen Bildschirmen

JioHotstar bot auf Standard-Smartphones eine hervorragende Nutzererfahrung und das Team wollte die neuen Formfaktoren nutzen. Zuerst hat das Team seine App anhand der Qualitätsrichtlinien für Apps auf großen Bildschirmen bewertet, um herauszufinden, welche Optimierungen erforderlich sind, um die Nutzerfreundlichkeit auf faltbare Smartphones und Tablets auszuweiten. Um den Status einer Tier 1-App für große Bildschirme zu erreichen, hat das Team zwei strategische Updates implementiert, um die App an verschiedene Formfaktoren anzupassen und sie auf Foldables zu differenzieren. Durch die Berücksichtigung der besonderen Herausforderungen, die Foldables und Tablets mit sich bringen, möchte JioHotstar ein hochwertiges und immersives Erlebnis auf allen Displaygrößen und Seitenverhältnissen bieten.

Was sie tun mussten

Die Benutzeroberfläche von JioHotstar, die hauptsächlich für Standard-Smartphone-Displays entwickelt wurde, hatte Probleme bei der Anpassung der Seitenverhältnisse von Hero-Bildern, Menüs und Bildschirmen an die verschiedenen Bildschirmgrößen und Auflösungen anderer Formfaktoren. Dies führte häufig zu Bildzuschnitten, Letterboxing, niedriger Auflösung und ungenutztem Platz, insbesondere im Querformat. Um die Funktionen von Tablets und faltbaren Geräten voll auszuschöpfen und eine optimierte Nutzererfahrung auf diesen Gerätetypen zu bieten, hat sich JioHotstar auf die Optimierung der Benutzeroberfläche konzentriert. So sollten eine optimale Layoutflexibilität, Bildwiedergabe und Navigation auf einer größeren Anzahl von Geräten gewährleistet werden.

Vorgehensweise

Um die Wiedergabe auf großen Bildschirmen zu verbessern, hat JioHotstar die App optimiert, indem WindowSizeClass integriert und optimierte Layouts für kompakte, mittlere und erweiterte Breiten erstellt wurden. So konnte die Benutzeroberfläche der App an verschiedene Bildschirmgrößen und Seitenverhältnisse angepasst werden, um auf verschiedenen Geräten eine einheitliche und ansprechende Benutzeroberfläche zu 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 wird die Funktion currentWindowAdaptiveInfo() aufgerufen und dann werden die neuen 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 Haltepunkte sind der Größe nach geordnet, vom größten zum kleinsten, da die API intern auf „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 eine Premium-Funktion, die es nur auf faltbaren Geräten gibt: den Modus „Auf dem Tisch“. Mit 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 ist. So kannst du das Gerät freihändig nutzen.

Dazu kann ebenfalls die Material 3 Adaptive-Bibliothek verwendet werden. Mit currentWindowAdaptiveInfo() lässt sich der Modus „Auf dem Tisch“ abfragen. Wenn das Gerät im Modus „Auf dem Tisch“ gehalten wird, kann das Layout an die obere und untere Hälfte des Geräts angepasst werden. Dazu wird eine Spalte verwendet, um den Player in der oberen Hälfte und die Steuerelemente 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 Stufe 1. Das Team nutzte die Anleitung für adaptive Apps und setzte die Empfehlungen mithilfe von Beispielen, Codelabs, Cookbooks und Dokumentation um.

Um die Nutzerfreundlichkeit weiter zu verbessern, hat JioHotstar die Berührungszielbereiche auf Video-Discovery-Seiten auf die empfohlenen 48 dp vergrößert, um die Barrierefreiheit auf Geräten mit großem Display zu gewährleisten. Die Videodetailseite ist jetzt adaptiv und passt sich an Bildschirmgrößen und ‑ausrichtungen an. Sie gingen über die einfache Bildskalierung hinaus und nutzten stattdessen Fenstergrößenklassen, 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 Wiedergabetreue verbessert werden. Auch die Navigation wurde verbessert. Die Layouts passen sich jetzt an verschiedene Bildschirmgrößen an.

Nutzer können sich ihre Lieblingsinhalte von JioHotstar jetzt auf Geräten mit großem Display ansehen und von einer verbesserten und optimierten Wiedergabe profitieren.

„Die Einstufung als Tier-1-App für große Bildschirme durch Google ist ein Meilenstein, der die Stärke unserer gemeinsamen Vision widerspiegelt. Bei JioHotstar waren wir schon immer der Meinung, dass die Optimierung für Geräte mit großen Displays über die Anpassungsfähigkeit hinausgeht. Es geht darum, die Wiedergabe für Zuschauer zu verbessern, die immer häufiger faltbare Smartphones, Tablets und internetfähige Fernseher nutzen.

Durch die Nutzung der Jetpack-Bibliotheken und ‑Leitfäden von Google konnten wir unsere Erkenntnisse zum Konsum von Inhalten mit der Expertise von Google im Bereich Plattforminnovationen kombinieren. Durch diese Zusammenarbeit konnten beide Teams Grenzen überwinden, Lücken schließen und gemeinsam eine nahtlose, immersive Nutzung auf allen Bildschirmgrößen ermöglichen.

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