Oltre lo smartphone: come JioHotstar ha ottimizzato la sua UX per pieghevoli e tablet

Oltre gli smartphone: come JioHotstar ha creato una UX adattiva

JioHotstar è una piattaforma di streaming leader in India, con una base utenti di oltre 400 milioni. Con una vasta raccolta di contenuti che comprende oltre 330.000 ore di video on demand (VOD) e la trasmissione in tempo reale di importanti 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 sua app per pieghevoli e tablet. Per farlo, ha seguito le indicazioni di Google per le app adattive e ha utilizzato risorse come esempi, codelab, cookbook e documentazione per creare un'esperienza sempre fluida e coinvolgente su tutte le dimensioni dei display.

Sfida su grande schermo di JioHotstar

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 pieghevoli e tablet. Per ottenere lo stato di app per schermi grandi 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 dei display.

Che cosa dovevano fare

L'interfaccia utente di JioHotstar, progettata principalmente per i display degli smartphone standard, ha riscontrato difficoltà nell'adattare le proporzioni delle immagini hero, i menu e le schermate dei programmi alle diverse dimensioni e risoluzioni dello schermo di altri fattori di forma. Questo spesso comportava il ritaglio delle immagini, il letterboxing, una bassa risoluzione e uno spazio inutilizzato, in particolare in modalità Orizzontale. Per sfruttare appieno le funzionalità di tablet e pieghevoli e offrire un'esperienza utente ottimizzata su questi tipi di dispositivi, JioHotstar si è concentrata sul perfezionamento della UI per garantire flessibilità di layout, rendering delle immagini e navigazione ottimali su una gamma più ampia di dispositivi.

Cosa è stato fatto

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

JioHotstar ha seguito questo pattern utilizzando la libreria adattiva di Material 3 per sapere quanto spazio ha a disposizione l'app. Innanzitutto, richiama 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 se un valore è maggiore o uguale, quindi qualsiasi larghezza che sia almeno maggiore o uguale a EXPANDED sarà sempre maggiore di MEDIUM.

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

Per farlo, sempre utilizzando la libreria Material 3 Adaptive, è possibile utilizzare lo stesso currentWindowAdaptiveInfo() per eseguire query sulla modalità da tavolo. Quando il dispositivo viene tenuto in modalità da tavolo, è possibile modificare il layout in modo che corrisponda alla metà superiore e inferiore della posizione 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 soddisfa le norme sulla qualità delle app per schermi di grandi dimensioni per il livello 1. Il team ha sfruttato le indicazioni per le app adattive, utilizzando esempi, codelab, cookbook e documentazione per incorporare questi consigli.

Per migliorare ulteriormente l'esperienza utente, JioHotstar ha aumentato le dimensioni dei target di tocco fino ai 48 dp consigliati nelle pagine di scoperta dei video, garantendo l'accessibilità su dispositivi con schermi di grandi dimensioni. La pagina dei dettagli dei video ora è adattiva e si adatta alle dimensioni e agli orientamenti dello schermo. Sono andati oltre il semplice ridimensionamento delle immagini, sfruttando invece le classi di dimensioni della finestra per rilevare le dimensioni e la densità della finestra 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 alle diverse dimensioni dello schermo.

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

"Il raggiungimento dello 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 di grandi dimensioni vada oltre l'adattabilità: si tratta di migliorare l'esperienza di visione per il pubblico che sta adottando rapidamente pieghevoli, tablet e TV connesse a internet.

Sfruttare le librerie e le guide di Google Jetpack ci ha permesso di combinare le nostre informazioni sul consumo di contenuti con la loro esperienza nell'innovazione delle piattaforme. Questa collaborazione ha consentito a entrambi i team di superare i limiti, colmare le lacune e creare insieme un'esperienza immersiva e senza interruzioni su schermi di ogni dimensione.

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