Beyond Phones: How JioHotstar Built an Adaptive UX

JioHotstar è una piattaforma di streaming leader in India, con una base di utenti superiore a 400 milioni. Con una vasta libreria di contenuti che comprende oltre 330.000 ore di video on demand (VOD) e la trasmissione in tempo reale dei principali eventi sportivi, la piattaforma opera su larga scala.

Per garantire un'esperienza premium al suo vasto pubblico, JioHotstar ha migliorato l'esperienza di visione ottimizzando la propria app per dispositivi pieghevoli e tablet. Per raggiungere questo obiettivo, hanno seguito le indicazioni di Google per le app adattive e hanno utilizzato risorse come esempi, codelab, cookbook e documentazione per creare un'esperienza coerente, fluida e coinvolgente su tutte le dimensioni del display.

La sfida di JioHotstar per gli schermi di casa

JioHotstar offriva un'esperienza utente eccellente sugli smartphone standard e il team voleva sfruttare i nuovi fattori di forma. Per iniziare, il team ha valutato la propria app in base alle norme sulla qualità delle app per schermi di grandi dimensioni per comprendere le ottimizzazioni necessarie per estendere l'esperienza utente a dispositivi pieghevoli e tablet. Per ottenere lo stato di app per schermi di grandi dimensioni di livello 1, il team ha implementato due aggiornamenti strategici per adattare l'app a vari fattori di forma e differenziarla sui pieghevoli. Affrontando le sfide uniche poste dai dispositivi pieghevoli e dai tablet, JioHotstar mira a offrire un'esperienza immersiva e di alta qualità su tutte le dimensioni e i formati dello schermo.

Che cosa dovevano fare

L'interfaccia utente di JioHotstar, progettata principalmente per i display standard dei telefoni, ha incontrato difficoltà nell'adattare le proporzioni delle immagini in primo piano, i menu e le schermate dei programmi alle diverse dimensioni e risoluzioni dello schermo di altri fattori di forma. Ciò spesso comportava il ritaglio delle immagini, il letterbox, la bassa risoluzione e lo spazio inutilizzato, in particolare in modalità orizzontale. Per sfruttare al meglio le funzionalità di tablet e pieghevoli e offrire un'esperienza utente ottimizzata su questi tipi di dispositivi, JioHotstar si è concentrata sul perfezionamento dell'interfaccia utente per garantire flessibilità ottimale del layout, rendering delle immagini e navigazione su una gamma più ampia di dispositivi.

Cosa è stato fatto

Per una migliore esperienza di visualizzazione su schermi di grandi dimensioni, JioHotstar ha preso l'iniziativa di migliorare la propria app incorporando WindowSizeClass e creando layout ottimizzati per larghezze compatte, medie ed estese. Ciò ha consentito all'app di adattare la sua interfaccia utente a varie dimensioni dello schermo e proporzioni, garantendo un'interfaccia utente coerente e visivamente accattivante su diversi dispositivi.

JioHotstar ha seguito questo pattern utilizzando la libreria adattiva Material 3 per sapere quanto spazio ha a disposizione l'app. Innanzitutto, invoca la funzione currentWindowAdaptiveInfo(), quindi utilizza i nuovi layout di conseguenza per le tre classi di dimensioni della finestra:

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()
}

I punti di interruzione sono in ordine, dal più grande al più piccolo, poiché internamente l'API verifica la larghezza maggiore o uguale, quindi qualsiasi larghezza maggiore o uguale a EXPANDED sarà sempre maggiore di MEDIUM.

JioHotstar è in grado di offrire l'esperienza premium unica dei dispositivi pieghevoli: modalità da tavolo. Questa funzionalità sposta comodamente il video player nella metà superiore dello schermo e i controlli del video nella metà inferiore quando un dispositivo pieghevole è parzialmente piegato per un'esperienza a mani libere.

Per farlo, utilizzando anche la libreria adattiva Material 3, è possibile utilizzare lo stesso currentWindowAdaptiveInfo() per eseguire query per la modalità Tavolo. Una volta che il dispositivo è in modalità Da tavolo, è possibile modificare il layout in modo che corrisponda alla metà superiore e inferiore della postura con una colonna per posizionare il player nella metà superiore e i controller nella metà inferiore:

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

JioHotstar ora rispetta le norme sulla qualità delle app per schermi di grandi dimensioni per il livello 1. Il team ha sfruttato le indicazioni relative alle app adattive, utilizzando esempi, codelab, raccolte di soluzioni e documentazione per incorporare questi consigli.

Per migliorare ulteriormente l'esperienza utente, JioHotstar ha aumentato le dimensioni dei target di tocco, portandole a 48 dp consigliati, nelle pagine di scoperta dei video, garantendo l'accessibilità su tutti i dispositivi con schermi di grandi dimensioni. La pagina dei dettagli del video è ora adattabile e si adatta alle dimensioni e agli orientamenti dello schermo. Sono andati oltre il semplice ridimensionamento delle immagini, sfruttando invece le classi di dimensioni delle finestre per rilevare le dimensioni e la densità delle finestre in tempo reale e caricare l'immagine hero più appropriata per ogni fattore di forma, contribuendo a migliorare la fedeltà visiva. Anche la navigazione è stata migliorata, con layout che si adattano a schermi di dimensioni diverse.

Ora gli utenti possono guardare i loro contenuti preferiti di JioHotstar su dispositivi con schermi di grandi dimensioni con un'esperienza di visione migliorata e altamente ottimizzata.

"Ottenere lo stato di app per schermi di grandi dimensioni di livello 1 con Google è un traguardo che riflette la forza della nostra visione condivisa. In JioHotstar abbiamo sempre creduto che l'ottimizzazione per i dispositivi con schermi grandi vada oltre l'adattabilità: si tratta di migliorare l'esperienza di visualizzazione per il pubblico che sta adottando rapidamente pieghevoli, tablet e TV connesse a internet.

Sfruttando le guide e le librerie Jetpack di Google, abbiamo potuto combinare le nostre informazioni sul consumo di contenuti con la loro esperienza nell'innovazione della piattaforma. Questa collaborazione ha permesso a entrambi i team di superare i limiti, colmare le lacune e creare insieme un'esperienza immersiva e senza interruzioni su ogni dimensione dello schermo.

Siamo orgogliosi di offrire questa esperienza migliorata a milioni di utenti e di stabilire nuovi standard per lo streaming in India e nel mondo".
- Sonu Sanjeev, Senior Software Development Engineer