Poza smartfonem: jak JioHotstar zoptymalizował UX pod kątem urządzeń składanych i tabletów

Nie tylko telefony: jak JioHotstar stworzył adaptacyjny interfejs

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ć najwyższą jakość wrażeń swoim licznym odbiorcom, JioHotstar zoptymalizował aplikację pod kątem urządzeń składanych i tabletów. Zrobili to, postępując zgodnie z wytycznymi Google dotyczącymi aplikacji adaptacyjnych i korzystając z zasobów takich jak przykłady, ćwiczenia, przepisy i dokumentacja, aby zapewnić spójne, płynne i angażujące wrażenia na ekranach o różnych rozmiarach.

Wyzwanie JioHotstar związane z dużym ekranem

JioHotstar zapewniało doskonałe wrażenia użytkownikom standardowych telefonów, a zespół chciał wykorzystać nowe formaty urządzeń. 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 ekranach o różnych rozmiarach i proporcjach.

Co musieli zrobić

Interfejs użytkownika JioHotstar, zaprojektowany głównie z myślą o standardowych wyświetlaczach telefonów, miał problemy z dostosowaniem proporcji obrazów głównych, menu i ekranów programów do różnych rozmiarów i rozdzielczości ekranów innych urządzeń. 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ć optymalną wygodę 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.

Aplikacja JioHotstar postępowała zgodnie z tym wzorcem, korzystając z biblioteki adaptacyjnej Material 3, aby określić, ile miejsca jest dostępne. 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 przerwania są uporządkowane od największego do najmniejszego, ponieważ interfejs API sprawdza, czy szerokość jest większa lub równa, więc każda szerokość, która jest co najmniej 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 Tabletop. 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 Material 3 Adaptive, która umożliwia sprawdzenie, czy urządzenie jest w trybie stołowym. Gdy urządzenie jest trzymane w trybie stołu, można zmienić układ, aby dopasować go do górnej i dolnej połowy pozycji. W tym celu należy użyć kolumny, aby umieścić odtwarzacz w górnej połowie, a kontrolery w dolnej połowie:

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

JioHotstar spełnia teraz wytyczne 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 rekomendacje.

Aby jeszcze bardziej zwiększyć wygodę użytkowników, JioHotstar powiększył obszary klikalne na stronach wyszukiwania filmów do zalecanej wielkości 48 dp, zapewniając dostępność na urządzeniach z dużym ekranem. Strona z informacjami o filmie jest teraz adaptacyjna i dostosowuje się do rozmiarów i orientacji ekranu. Zamiast prostego skalowania obrazów wykorzystali klasy rozmiarów okien, aby wykrywać rozmiar i gęstość okna w czasie rzeczywistym oraz wczytywać najbardziej odpowiedni baner powitalny dla każdego formatu, co pomogło zwiększyć wierność wizualną. Ulepszono 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 w ulepszonej i zoptymalizowanej wersji.

„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 coś więcej niż tylko dostosowywanie się do nich. Chodzi o podniesienie jakości oglądania dla odbiorców, którzy coraz częściej korzystają z urządzeń składanych, tabletów i telewizorów z dostępem do internetu.

Korzystanie z bibliotek i przewodników Jetpack od Google pozwoliło nam połączyć nasze spostrzeżenia dotyczące konsumpcji treści z ich wiedzą specjalistyczną w zakresie innowacji na platformie. 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ć tę ulepszoną usługę 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