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

Nie tylko telefony: jak JioHotstar stworzył adaptacyjny UX

JioHotstar to wiodąca platforma streamingowa w Indiach, z której korzysta ponad 400 milionów użytkowników. Dzięki obszernej bibliotece treści,która obejmuje ponad 330 tys. godzin filmów na żądanie (VOD) i transmisje na żywo najważniejszych wydarzeń sportowych, platforma działa na ogromną skalę.

Aby zapewnić swoim użytkownikom jak najlepsze wrażenia, JioHotstar zoptymalizował aplikację pod kątem składanych urządzeń i tabletów. Zrobili to, stosując się do wskazówek Google dotyczących aplikacji adaptacyjnych i korzystając z zasobów takich jak przykłady, ćwiczenia, przewodniki i dokumentacja. Dzięki temu udało im się stworzyć spójne i angażujące wrażenia na ekranach o różnych rozmiarach.

Wyzwanie JioHotstar związane z dużymi ekranami

JioHotstar oferował doskonałe wrażenia użytkownikom standardowych telefonów, a zespół chciał wykorzystać nowe formaty. Na początku zespół ocenił aplikację pod kątem wskazówek dotyczących jakości aplikacji na dużych ekranach, aby dowiedzieć się, jakie optymalizacje są potrzebne, aby rozszerzyć wrażenia użytkowników na składane urządzenia i tablety. Aby osiągnąć poziom 1 jakości aplikacji na dużych ekranach, zespół wdrożył 2 strategiczne aktualizacje, które dostosowują aplikację do różnych formatów i wyróżniają ją na składanych urządzeniach. Dzięki temu, że JioHotstar radzi sobie z unikalnymi wyzwaniami związanymi ze składanymi urządzeniami i tabletami, może oferować wysokiej jakości i wciągające wrażenia na ekranach o różnych rozmiarach i proporcjach.

Co musieli zrobić

Interfejs JioHotstar, zaprojektowany głównie pod kątem standardowych ekranów telefonów, miał problemy z dostosowaniem proporcji obrazu głównego, 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 składanych urządzeń oraz zapewnić optymalne wrażenia użytkownikom tych urządzeń, JioHotstar skupił się na udoskonaleniu interfejsu, aby zapewnić optymalną elastyczność układu, renderowanie obrazu i nawigację na szerszej gamie urządzeń.

Co zrobili

Aby zapewnić lepsze wrażenia podczas oglądania na dużych ekranach, JioHotstar podjął inicjatywę ulepszenia aplikacji przez dodanie klasy WindowSizeClass i utworzenie zoptymalizowanych układów dla kompaktowych, średnich i rozszerzonych szerokości. Dzięki temu aplikacja może dostosowywać swój interfejs do różnych wymiarów i proporcji ekranu, zapewniając spójny i atrakcyjny wizualnie interfejs na różnych urządzeniach.

JioHotstar zastosował ten wzorzec, używając biblioteki adaptacyjnej Material 3, aby dowiedzieć się, ile miejsca ma do dyspozycji aplikacja. Najpierw wywołuje funkcję currentWindowAdaptiveInfo(), a potem używa nowych układów odpowiednio do 3 klas rozmiaru okna:

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ż wewnętrznie interfejs API sprawdza, czy szerokość jest większa lub równa. Dlatego każda szerokość, która jest co najmniej większa lub równa EXPANDED, będzie zawsze większa niż MEDIUM.

JioHotstar może zapewnić najwyższą jakość, która jest unikalna dla składanych urządzeń: tryb stołu. Ta funkcja wygodnie przenosi odtwarzacz wideo do górnej połowy ekranu, a elementy sterujące do dolnej połowy, gdy składane urządzenie jest częściowo złożone, co umożliwia korzystanie z niego bez użycia rąk.

Aby to osiągnąć, można użyć tej samej funkcji currentWindowAdaptiveInfo() z biblioteki adaptacyjnej Material 3, aby sprawdzić tryb stołu. 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, używając 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()
}

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

Aby jeszcze bardziej poprawić wrażenia użytkowników, JioHotstar zwiększył rozmiary docelowych obszarów dotyku do zalecanych 48 dp na stronach wyszukiwania filmów, zapewniając dostępność na urządzeniach z dużym ekranem. Strona szczegółów filmu jest teraz adaptacyjna i dostosowuje się do rozmiaru i orientacji ekranu. Zespół nie ograniczył się do prostego skalowania obrazu, ale wykorzystał klasy rozmiaru okna, aby wykrywać rozmiar i gęstość okna w czasie rzeczywistym oraz wczytywać najbardziej odpowiedni baner powitalny dla każdego formatu, co pomaga zwiększyć wierność obrazu. 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, korzystając z ulepszonych i zoptymalizowanych wrażeń.

„Osiągnięcie poziomu 1 jakości aplikacji na dużych ekranach 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 adaptacja, ale też podnoszenie jakości oglądania dla odbiorców, którzy coraz częściej korzystają ze składanych urządzeń, tabletów i telewizorów z dostępem do internetu”.

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

„Jesteśmy dumni, że możemy udostępnić te ulepszone wrażenia milionom użytkowników i wyznaczyć nowe standardy w sposobie, w jaki Indie i cały świat korzystają ze streamingu”
- Sonu Sanjeev, starszy inżynier ds. rozwoju oprogramowania