Selain smartphone: Cara JioHotstar mengoptimalkan UX-nya untuk perangkat foldable dan tablet

Selain Ponsel: Cara JioHotstar Membangun UX Adaptif

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

Untuk membantu memastikan pengalaman premium bagi audiensnya yang luas, JioHotstar meningkatkan pengalaman menonton dengan mengoptimalkan aplikasinya untuk perangkat foldable dan tablet. Mereka mencapai hal ini dengan mengikuti panduan aplikasi adaptif Google dan memanfaatkan referensi seperti  contoh, codelab, buku petunjuk, dan dokumentasi untuk membantu menciptakan pengalaman yang konsisten dan menarik di semua ukuran layar.

Tantangan JioHotstar di layar TV

JioHotstar menawarkan pengalaman pengguna yang luar biasa di ponsel standar dan tim ingin memanfaatkan faktor bentuk baru. Untuk memulai, tim mengevaluasi aplikasi mereka berdasarkan pedoman kualitas aplikasi perangkat layar besar guna memahami pengoptimalan yang diperlukan untuk memperluas pengalaman pengguna ke perangkat foldable dan tablet. Untuk mencapai status aplikasi perangkat layar besar Tingkat 1, tim menerapkan dua update 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 imersif dan berkualitas tinggi di semua ukuran layar dan rasio aspek.

Yang perlu mereka lakukan

Antarmuka pengguna JioHotstar, yang dirancang terutama untuk layar ponsel standar, mengalami tantangan dalam menyesuaikan rasio aspek banner besar, menu, dan layar acara dengan berbagai ukuran dan resolusi layar faktor bentuk lainnya. Hal ini sering menyebabkan pemangkasan gambar, letterbox, resolusi rendah, dan ruang yang tidak terpakai, 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 memberikan pengalaman menonton yang lebih baik di layar besar, JioHotstar berinisiatif meningkatkan kualitas aplikasinya dengan menyertakan WindowSizeClass dan membuat tata letak yang dioptimalkan untuk lebar rapat, 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 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 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 memudahkan pemindahan pemutar video ke bagian atas layar dan kontrol video ke bagian bawah saat perangkat foldable dilipat sebagian untuk pengalaman handsfree.

Untuk melakukannya, juga 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 Layar Besar untuk Tingkat 1. Tim ini memanfaatkan panduan aplikasi adaptif, menggunakan contoh, codelab, buku panduan, dan dokumentasi untuk menerapkan rekomendasi ini.

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

Kini 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 meningkatkan pengalaman menonton bagi audiens yang dengan cepat beralih ke 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 mendobrak batasan, mengatasi kesenjangan, dan bersama-sama menciptakan pengalaman yang lancar dan imersif di setiap ukuran layar.

Bersama-sama, kami bangga dapat 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