Oltre gli smartphone: in che modo JioHotstar ha creato un'esperienza utente adattiva

JioHotstar è una piattaforma di streaming leader in India, con una base di utenti che supera i 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 di importanti eventi sportivi, la piattaforma opera su una scala enorme.

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, guide pratiche e documentazione per creare un'esperienza coinvolgente e coerente su tutte le dimensioni dello schermo.

La sfida di JioHotstar per gli schermi di grandi dimensioni

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 sua 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 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 tablet, JioHotstar mira a offrire un'esperienza immersiva e di alta qualità su tutte le dimensioni dello schermo e i formati.

Cosa dovevano fare

L'interfaccia utente di JioHotstar, progettata principalmente per gli schermi degli smartphone standard, ha incontrato difficoltà nell'adattare i formati delle immagini hero, i menu e le schermate dei programmi alle diverse dimensioni e risoluzioni dello schermo di altri fattori di forma. Ciò ha spesso portato a ritaglio delle immagini, letterboxing, bassa risoluzione e 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 dell'interfaccia utente per garantire una flessibilità ottimale del layout, il rendering delle immagini e la navigazione su una gamma più ampia di dispositivi.

Cosa hanno fatto

Per una migliore esperienza di visione 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. Ciò ha consentito all'app di adattare la sua interfaccia utente a varie dimensioni dello schermo e formati, 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, ha richiamato la funzione currentWindowAdaptiveInfo(), quindi ha utilizzato 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 la larghezza è maggiore o uguale a, 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: la modalità da tavolo. Questa funzionalità riposiziona 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 a mani libere.

Per farlo, utilizzando anche la libreria adattiva Material 3, è possibile utilizzare la stessa currentWindowAdaptiveInfo() per eseguire una query per la modalità da 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 soddisfa le norme sulla qualità delle app per schermi di grandi dimensioni di livello 1. Il team ha sfruttato le indicazioni per le app adattive, utilizzando esempi, codelab, guide pratiche e documentazione per incorporare questi consigli.

Per migliorare ulteriormente l'esperienza utente, JioHotstar ha aumentato le dimensioni dei touch target, fino ai 48 dp consigliati, nelle pagine di scoperta dei video, garantendo l'accessibilità sui dispositivi con schermi di grandi dimensioni. La pagina dei dettagli del video ora è adattiva e si adatta alle dimensioni e agli orientamenti dello schermo. Il team è andato 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 a diverse dimensioni dello schermo.

Ora gli utenti possono guardare i loro contenuti preferiti di JioHotstar sui 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 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.

Sfruttando le guide e le librerie Jetpack di Google, abbiamo potuto combinare le nostre informazioni sul consumo di contenuti con la loro competenza nell'innovazione della piattaforma. 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 ogni dimensione dello schermo.

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