Nie tylko smartfony: jak JioHotstar optymalizuje UX pod kątem urządzeń składanych i tabletów

Nie tylko telefony: jak JioHotstar stworzył adaptacyjny interfejs

JioHotstar to popularna platforma streamingowa w Indiach, która ma ponad 400 milionów użytkowników. Dzięki ogromnej bibliotece treści obejmującej ponad 330 tys. godzin wideo na żądanie (VOD) i transmisjom w czasie rzeczywistym z najważniejszych wydarzeń sportowych platforma działa na ogromną skalę.

Aby zapewnić swoim licznym odbiorcom najwyższą jakość, JioHotstar zoptymalizowała aplikację pod kątem urządzeń składanych i tabletów. Udało się to dzięki zastosowaniu wskazówek Google dotyczących aplikacji adaptacyjnych oraz wykorzystaniu zasobów takich jak przykłady, ćwiczenia z programowania, poradniki i dokumentacja, które pomagają tworzyć spójne i atrakcyjne środowisko na wszystkich rozmiarach wyświetlaczy.

Wyzwanie JioHotstar dotyczące dużych ekranów

Aplikacja JioHotstar zapewniała doskonałe wrażenia użytkownikom standardowych telefonów, a zespół chciał wykorzystać nowe formaty. Na początek zespół ocenił aplikację pod kątem wskazówek dotyczących jakości aplikacji na duże ekrany, aby dowiedzieć się, jakie optymalizacje są wymagane do dostosowania jej do urządzeń składanych i tabletów. Aby uzyskać status aplikacji na duże ekrany na poziomie 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 wyjątkowych wyzwań związanych z urządzeniami składanymi i tabletami JioHotstar zapewnia wysoką jakość i wciągające wrażenia na wszystkich rozmiarach i formatach obrazu.

Co musieli zrobić

Interfejs JioHotstar, zaprojektowany głównie z myślą o standardowych wyświetlaczach telefonów, napotkał trudności z dostosowaniem formatów obrazu banerów powitalnych, 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, dodawania czarnych pasów, 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 tych urządzeń, JioHotstar skupiła się na ulepszeniu interfejsu, aby zapewnić optymalną elastyczność układu, renderowanie obrazu i nawigację na szerszej gamie urządzeń.

Zastosowane rozwiązanie

Aby poprawić komfort oglądania na dużych ekranach, firma JioHotstar podjęła inicjatywę ulepszenia swojej aplikacji przez włączenie WindowSizeClass i utworzenie zoptymalizowanych układów dla kompaktowych, średnich i rozszerzonych szerokości. Dzięki temu aplikacja mogła dostosowywać interfejs do różnych wymiarów ekranu i formatów obrazu, co zapewniało spójny i atrakcyjny wizualnie interfejs na różnych urządzeniach.

W aplikacji JioHotstar zastosowano ten wzorzec z użyciem biblioteki Material 3 Adaptive, aby określić, ile miejsca jest dostępne dla aplikacji. Najpierw wywołaj funkcję currentWindowAdaptiveInfo(), a następnie 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, zawsze będzie większa niż MEDIUM.

JioHotstar zapewnia wyjątkowe wrażenia na urządzeniach składanych: tryb stołu. Ta funkcja wygodnie przenosi odtwarzacz do górnej połowy ekranu, a elementy sterujące do dolnej, gdy urządzenie składane jest częściowo złożone, co umożliwia obsługę bez użycia rąk.

Aby to zrobić, możesz użyć biblioteki Material 3 Adaptive i tej samej funkcji currentWindowAdaptiveInfo(), aby sprawdzić, czy urządzenie jest w trybie stołu. 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. Można to zrobić za pomocą kolumny, aby umieścić odtwarzacz w górnej połowie, a elementy sterujące w dolnej:

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

Aplikacja JioHotstar spełnia teraz wskazówki dotyczące jakości aplikacji na duże ekrany na poziomie 1. Zespół wykorzystał wskazówki dotyczące aplikacji adaptacyjnych, korzystając z przykładów, ćwiczeń, poradników i dokumentacji, aby wdrożyć te zalecenia.

Aby jeszcze bardziej zwiększyć wygodę użytkowników, JioHotstar zwiększył rozmiary docelowych elementów dotykowych do zalecanych 48 dp na stronach odkrywania filmów, co zapewnia dostępność na urządzeniach z dużym ekranem. Strona z informacjami o filmie jest teraz adaptacyjna i dostosowuje się do rozmiaru oraz orientacji ekranu. Zamiast prostego skalowania obrazów firma wykorzystuje klasy rozmiaru okna, aby wykrywać rozmiar i gęstość okna w czasie rzeczywistym i wczytywać najbardziej odpowiedni baner powitalny dla każdego formatu, co pomaga poprawić jakość wizualną. Ulepszyliśmy też nawigację, dostosowując układy do różnych rozmiarów ekranu.

Teraz użytkownicy mogą oglądać ulubione treści z JioHotstar na urządzeniach z dużym ekranem, ciesząc się ulepszonymi i wysoce zoptymalizowanymi wrażeniami.

„Osiągnięcie poziomu 1 w przypadku aplikacji na duże ekrany w Google to kamień milowy, który odzwierciedla siłę naszej wspólnej wizji. W JioHotstar zawsze uważaliśmy, że optymalizacja pod kątem urządzeń z dużym ekranem to coś więcej niż tylko dostosowanie – chodzi o poprawę wrażeń widzów, którzy coraz częściej korzystają z urządzeń składanych, tabletów i urządzeń CTV.

Wykorzystanie bibliotek i przewodników Jetpack od Google pozwoliło nam połączyć nasze spostrzeżenia dotyczące konsumpcji treści z ich wiedzą na temat innowacji na platformie. Dzięki tej współpracy oba zespoły mogły przekraczać granice, eliminować luki i wspólnie tworzyć płynne, wciągające wrażenia na ekranach o każdym rozmiarze.

Z dumą wspólnie udostępniamy tę ulepszoną funkcję milionom użytkowników i wyznaczamy nowe standardy streamingu w Indiach i na całym świecie”.
– Sonu Sanjeev, starszy inżynier ds. rozwoju oprogramowania