Beyond Phones: How JioHotstar Built an Adaptive UX (artykuł w języku angielskim)

JioHotstar to wiodąca platforma streamingowa w Indiach, z której korzysta ponad 400 milionów użytkowników. Platforma działa na ogromną skalę, ponieważ ma obszerną bibliotekę treści obejmującą ponad 330 tys. godzin wideo na żądanie (VOD) i transmisje na żywo z najważniejszych wydarzeń sportowych.

Aby zapewnić wysoką jakość usług dla szerokiego grona odbiorców, JioHotstar zoptymalizował aplikację pod kątem urządzeń składanych i tabletów, co poprawiło wrażenia użytkowników. Osiągnęli to, postępując zgodnie z wytycznymi Google dotyczącymi aplikacji adaptacyjnych i korzystając z zasobów takich jak przykłady, ćwiczenia, poradniki i dokumentacja, aby zapewnić spójną, płynną i angażującą obsługę na wszystkich rozmiarach ekranów.

Wyzwanie związane z dużym ekranem w JioHotstar

JioHotstar zapewniało doskonałe wrażenia użytkownikom standardowych telefonów, a zespół chciał wykorzystać nowe formaty. Na początek zespół ocenił aplikację pod kątem wytycznych dotyczących jakości aplikacji na duże ekrany, aby określić optymalizacje wymagane do rozszerzenia komfortu użytkowania na urządzenia składane i tablety. Aby uzyskać status aplikacji na duże ekrany poziomu 1, zespół wprowadził 2 strategiczne aktualizacje, które dostosowują aplikację do różnych formatów i wyróżniają ją na urządzeniach składanych. Dzięki rozwiązaniu unikalnych problemów związanych z urządzeniami składanymi i tabletami JioHotstar chce zapewnić wysoką jakość i wciągające wrażenia na wszystkich rozmiarach ekranów i współczynnikach proporcji.

Co musieli zrobić

Interfejs użytkownika JioHotstar, zaprojektowany głównie z myślą o standardowych wyświetlaczach telefonów, miał problemy z dostosowaniem formatu obrazu banerów powitalnych, menu i ekranów programów do różnych rozmiarów i rozdzielczości ekranów innych formatów. Często prowadziło to do przycinania obrazu, letterboxingu, niskiej rozdzielczości i niewykorzystanej przestrzeni, zwłaszcza w trybie poziomym. Aby w pełni wykorzystać możliwości tabletów i urządzeń składanych oraz zapewnić optymalne wrażenia użytkownikom na tych urządzeniach, JioHotstar skupiło się na udoskonaleniu interfejsu, aby zapewnić optymalną elastyczność układu, renderowanie obrazów i nawigację na szerszej gamie urządzeń.

Zastosowane rozwiązanie

Aby zapewnić lepsze wrażenia podczas oglądania na dużych ekranach, JioHotstar podjęło inicjatywę ulepszenia swojej aplikacji poprzez włączenie WindowSizeClass i utworzenie zoptymalizowanych układów dla kompaktowych, średnich i rozszerzonych szerokości. Dzięki temu aplikacja mogła dostosowywać interfejs użytkownika do różnych wymiarów ekranu i formatów obrazu, zapewniając spójny i atrakcyjny wizualnie interfejs na różnych urządzeniach.

JioHotstar postępował zgodnie z tym wzorcem, korzystając z biblioteki adaptacyjnej Material 3, aby sprawdzić, ile miejsca jest dostępne w aplikacji. Najpierw wywołaj funkcję currentWindowAdaptiveInfo(), a potem użyj nowych układów odpowiednio do 3 klas rozmiarów okien:

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

Punkty podziału są uporządkowane od największego do najmniejszego, ponieważ interfejs API sprawdza, czy szerokość jest większa lub równa danej wartości. W związku z tym każda szerokość, która jest większa lub równa EXPANDED, będzie zawsze większa niż MEDIUM.

JioHotstar zapewnia wyjątkowe wrażenia na urządzeniach składanych dzięki trybowi stołu. Ta funkcja wygodnie przenosi odtwarzacz wideo do górnej połowy ekranu, a elementy sterujące wideo do dolnej połowy, gdy urządzenie składane jest częściowo złożone, aby umożliwić korzystanie z niego bez użycia rąk.

Aby to zrobić, możesz użyć tej samej funkcji currentWindowAdaptiveInfo() z biblioteki adaptacyjnej Material 3, aby sprawdzić, czy urządzenie jest w trybie stołowym. Gdy urządzenie jest w trybie stołu, można zmienić układ, aby dopasować go do górnej i dolnej połowy urządzenia. W tym celu należy umieścić odtwarzacz w górnej połowie, a kontrolery w dolnej:

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

JioHotstar spełnia teraz wskazówki dotyczące jakości aplikacji na duże ekrany na poziomie 1. Zespół skorzystał z wskazówek dotyczących aplikacji adaptacyjnych, wykorzystując przykłady, ćwiczenia, przepisy i dokumentację, aby wdrożyć te zalecenia.

Aby jeszcze bardziej zwiększyć wygodę użytkowników, JioHotstar powiększył na stronach wyszukiwania filmów docelowe elementy dotykowe do zalecanej wielkości 48 dp, zapewniając ułatwienia dostępu na urządzeniach z dużym ekranem. Strona z informacjami o filmie jest teraz adaptacyjna i dostosowuje się do rozmiaru i orientacji ekranu. Zamiast prostego skalowania obrazu wykorzystali klasy rozmiarów okien, aby wykrywać rozmiar i gęstość okna w czasie rzeczywistym i wczytywać najbardziej odpowiedni baner powitalny dla każdego formatu, co pomogło zwiększyć wierność wizualną. Ulepszyliśmy też nawigację, a układy dostosowują się do różnych rozmiarów ekranu.

Użytkownicy mogą teraz oglądać ulubione treści z JioHotstar na urządzeniach z dużym ekranem, korzystając z ulepszonego i zoptymalizowanego sposobu wyświetlania.

„Osiągnięcie statusu aplikacji na duże ekrany poziomu 1 w Google to kamień milowy, który odzwierciedla siłę naszej wspólnej wizji. W JioHotstar zawsze wierzyliśmy, że optymalizacja pod kątem urządzeń z dużym ekranem to nie tylko dostosowywanie się do nich, ale też podnoszenie komfortu oglądania dla widzów, którzy coraz częściej korzystają z urządzeń składanych, tabletów i telewizorów z dostępem do internetu.

Dzięki bibliotekom i przewodnikom Jetpack od Google mogliśmy połączyć nasze spostrzeżenia dotyczące konsumpcji treści z ich wiedzą na temat innowacji platformowych. Ta współpraca pozwoliła obu zespołom przekraczać granice, wypełniać luki i wspólnie tworzyć spójne, wciągające wrażenia na ekranach o różnych rozmiarach.

Jesteśmy dumni, że możemy udostępnić to ulepszone rozwiązanie milionom użytkowników i wyznaczyć nowe standardy w zakresie streamingu w Indiach i na całym świecie”.
– Sonu Sanjeev, starszy inżynier ds. rozwoju oprogramowania