Di Luar Ponsel: Cara JioHotstar Mem-build UX Adaptif

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 pengiriman 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 aplikasinya untuk perangkat foldable dan tablet. Mereka melakukannya dengan mengikuti panduan aplikasi adaptif Google dan menggunakan resource seperti contoh, codelab, buku resep, dan dokumentasi untuk membantu menciptakan pengalaman yang konsisten, lancar, dan menarik di semua ukuran layar.

Tantangan JioHotstar terkait perangkat layar besar

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 perangkat layar besar untuk memahami pengoptimalan yang diperlukan guna memperluas pengalaman pengguna ke perangkat foldable dan tablet. Untuk mencapai status aplikasi perangkat layar besar Tingkat 1, tim menerapkan dua update strategis untuk mengadaptasi aplikasi di berbagai faktor bentuk dan membedakan perangkat foldable. Dengan mengatasi tantangan unik yang ditimbulkan oleh perangkat foldable dan tablet, JioHotstar bertujuan untuk memberikan pengalaman berkualitas tinggi dan imersif di semua ukuran layar dan rasio aspek.

Hal yang perlu mereka lakukan

Antarmuka pengguna JioHotstar, yang dirancang terutama untuk layar ponsel standar, menghadapi tantangan dalam mengadaptasi rasio aspek gambar hero, menu, dan layar acara ke berbagai ukuran dan resolusi layar faktor bentuk lainnya. Hal ini sering kali menyebabkan pemangkasan gambar, letterboxing, 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.

Hal yang mereka lakukan

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

JioHotstar mengikuti pola ini menggunakan library Adaptif Material 3 untuk mengetahui jumlah ruang yang tersedia di 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 diurutkan dari yang terbesar hingga 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 paruh atas layar dan kontrol video ke paruh bawah 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 paruh atas dan bawah postur dapat dilakukan dengan kolom untuk menempatkan pemutar di paruh atas dan pengontrol di paruh 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 Perangkat Layar Besar untuk Tingkat 1. Tim memanfaatkan panduan aplikasi adaptif, menggunakan contoh, codelab, buku resep, dan dokumentasi untuk menggabungkan rekomendasi ini.

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

Kini pengguna dapat melihat konten favorit mereka dari JioHotstar di perangkat layar besar dengan pengalaman menonton yang ditingkatkan 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 meningkatkan pengalaman menonton bagi audiens yang dengan cepat menggunakan perangkat foldable, tablet, dan TV yang terhubung.

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

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