Beyond Phones: How JioHotstar Built an Adaptive UX

JioHotstar adalah platform streaming terkemuka di India, yang melayani basis pengguna yang melebihi 400 juta. Dengan koleksi konten yang luas yang mencakup lebih dari 330.000 jam video on demand (VOD) dan penayangan real-time acara olahraga besar, platform ini beroperasi dalam skala besar.

Untuk membantu memastikan pengalaman premium bagi audiensnya yang luas, JioHotstar meningkatkan pengalaman menonton dengan mengoptimalkan aplikasi mereka untuk perangkat foldable dan tablet. Mereka melakukannya dengan mengikuti panduan aplikasi adaptif Google dan memanfaatkan berbagai referensi seperti contoh, codelab, buku resep, dan dokumentasi untuk membantu menciptakan pengalaman yang lancar dan menarik secara konsisten di semua ukuran layar.

Tantangan layar besar JioHotstar

JioHotstar menawarkan pengalaman pengguna yang sangat baik di ponsel standar dan tim ingin memanfaatkan faktor bentuk baru. Untuk memulai, tim mengevaluasi aplikasi mereka berdasarkan pedoman kualitas aplikasi layar besar untuk memahami pengoptimalan yang diperlukan guna memperluas pengalaman pengguna ke perangkat foldable dan tablet. Untuk mencapai status aplikasi layar besar Tingkat 1, tim menerapkan dua pembaruan strategis untuk menyesuaikan aplikasi di berbagai faktor bentuk dan membedakannya di perangkat foldable. Dengan mengatasi tantangan unik yang ditimbulkan oleh perangkat foldable dan tablet, JioHotstar bertujuan untuk memberikan pengalaman yang berkualitas tinggi dan imersif di semua ukuran layar dan rasio aspek.

Yang perlu mereka lakukan

Antarmuka pengguna JioHotstar, yang dirancang terutama untuk tampilan ponsel standar, mengalami tantangan dalam menyesuaikan rasio aspek gambar utama, menu, dan layar acara dengan berbagai ukuran dan resolusi layar dari faktor bentuk lainnya. Hal ini sering kali menyebabkan pemangkasan gambar, tampilan lebar, resolusi rendah, dan ruang yang tidak digunakan, terutama dalam mode lanskap. Untuk membantu memanfaatkan sepenuhnya kemampuan tablet dan perangkat foldable serta memberikan pengalaman pengguna yang dioptimalkan di seluruh jenis perangkat ini, JioHotstar berfokus pada penyempurnaan UI untuk memastikan fleksibilitas tata letak, rendering gambar, dan navigasi yang optimal di berbagai perangkat.

Yang mereka lakukan

Untuk pengalaman menonton yang lebih baik di layar besar, JioHotstar mengambil inisiatif untuk meningkatkan kualitas aplikasinya dengan menyertakan WindowSizeClass dan membuat tata letak yang dioptimalkan untuk lebar ringkas, sedang, dan diperluas. Hal ini memungkinkan aplikasi menyesuaikan antarmuka penggunanya dengan berbagai dimensi dan rasio aspek layar, sehingga memastikan UI yang konsisten dan menarik secara visual di berbagai perangkat.

JioHotstar mengikuti pola ini menggunakan library Adaptif Material 3 untuk mengetahui seberapa banyak ruang yang tersedia untuk aplikasi. Pertama, panggil fungsi currentWindowAdaptiveInfo(), lalu gunakan tata letak baru yang sesuai untuk tiga class ukuran jendela:

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

Titik henti sementara diurutkan dari yang terbesar hingga yang terkecil, karena secara internal API memeriksa dengan lebih besar atau sama dengan, sehingga lebar apa pun yang setidaknya lebih besar atau sama dengan EXPANDED akan selalu lebih besar dari MEDIUM.

JioHotstar dapat memberikan pengalaman premium yang unik untuk perangkat foldable: Mode di Atas Meja. Fitur ini memindahkan pemutar video ke bagian atas layar dan kontrol video ke bagian bawah layar saat perangkat foldable dilipat sebagian untuk pengalaman handsfree.

Untuk melakukannya, dengan menggunakan library Adaptif Material 3, currentWindowAdaptiveInfo() yang sama dapat digunakan untuk membuat kueri mode di atas meja. Setelah perangkat dipegang dalam mode di atas meja, perubahan tata letak agar sesuai dengan bagian atas dan bawah postur dapat dilakukan dengan kolom untuk menempatkan pemain di bagian atas dan pengontrol di bagian bawah:

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

JioHotstar kini memenuhi Pedoman kualitas aplikasi Layar Besar untuk Tingkat 1. Tim memanfaatkan panduan aplikasi adaptif, dengan menggunakan contoh, codelab, buku resep, dan dokumentasi untuk menerapkan rekomendasi ini.

Untuk lebih meningkatkan pengalaman pengguna, JioHotstar meningkatkan ukuran target sentuh, hingga 48dp yang direkomendasikan, di halaman penemuan video, sehingga memastikan aksesibilitas di seluruh perangkat layar besar. Halaman detail video mereka kini bersifat adaptif, menyesuaikan ukuran dan orientasi layar. Mereka melampaui penskalaan gambar sederhana, dengan memanfaatkan class ukuran jendela untuk mendeteksi ukuran dan kepadatan jendela secara real time serta memuat gambar utama yang paling sesuai untuk setiap faktor bentuk, sehingga membantu meningkatkan kualitas visual. Navigasi juga ditingkatkan, dengan tata letak yang disesuaikan agar sesuai dengan berbagai ukuran layar.

Sekarang pengguna dapat menonton konten favorit mereka dari JioHotstar di perangkat layar besar dengan pengalaman menonton yang lebih baik dan sangat dioptimalkan.

"Mencapai status aplikasi perangkat layar besar Tingkat 1 dengan Google adalah pencapaian yang mencerminkan kekuatan visi bersama kami. Di JioHotstar, kami selalu percaya bahwa pengoptimalan untuk perangkat layar besar tidak hanya sekadar kemampuan beradaptasi, tetapi juga tentang meningkatkan pengalaman menonton bagi audiens yang dengan cepat mengadopsi perangkat foldable, tablet, dan TV yang terhubung.

Dengan memanfaatkan panduan dan library Jetpack Google, kami dapat menggabungkan insight kami tentang konsumsi konten dengan keahlian mereka dalam inovasi platform. Kolaborasi ini memungkinkan kedua tim mendorong batas, mengatasi kesenjangan, dan berkolaborasi menciptakan pengalaman yang lancar dan imersif di setiap ukuran layar.

Bersama-sama, kami bangga menghadirkan pengalaman yang lebih baik ini kepada jutaan pengguna dan menetapkan tolok ukur baru dalam cara India dan dunia menikmati streaming."
- Sonu Sanjeev, Senior Software Development Engineer