Vượt ra ngoài điện thoại thông minh: Cách JioHotstar tối ưu hoá trải nghiệm người dùng cho thiết bị gập và máy tính bảng

Không chỉ dành cho điện thoại: Cách JioHotstar xây dựng trải nghiệm người dùng thích ứng

JioHotstar là một nền tảng phát trực tuyến hàng đầu ở Ấn Độ, phục vụ cơ sở người dùng vượt quá 400 triệu. Với thư viện nội dung khổng lồ bao gồm hơn 330.000 giờ video theo yêu cầu (VOD) và khả năng phát trực tiếp các sự kiện thể thao lớn theo thời gian thực, nền tảng này hoạt động trên quy mô rất lớn.

Để đảm bảo trải nghiệm cao cấp cho lượng khán giả đông đảo, JioHotstar đã nâng tầm trải nghiệm xem bằng cách tối ưu hoá ứng dụng cho thiết bị có thể gập lại và máy tính bảng. Họ đã làm được điều này bằng cách làm theo hướng dẫn của Google về ứng dụng thích ứng và sử dụng các tài nguyên như  mẫu, lớp học lập trình, sách hướng dẫn và tài liệu để tạo ra trải nghiệm mượt mà và hấp dẫn nhất quán trên mọi kích thước màn hình.

Thách thức của JioHotstar trên màn hình lớn

JioHotstar mang đến trải nghiệm người dùng tuyệt vời trên điện thoại thông thường và nhóm muốn tận dụng các kiểu dáng mới. Để bắt đầu, nhóm đã đánh giá ứng dụng của họ dựa trên nguyên tắc về chất lượng đối với ứng dụng trên màn hình lớn để hiểu rõ những điểm tối ưu hoá cần thiết nhằm mở rộng trải nghiệm người dùng sang thiết bị có thể gập lại và máy tính bảng. Để đạt được trạng thái ứng dụng dành cho màn hình lớn Cấp 1, nhóm đã triển khai hai bản cập nhật chiến lược để điều chỉnh ứng dụng cho phù hợp với nhiều kiểu dáng và tạo sự khác biệt trên thiết bị gập. Bằng cách giải quyết những thách thức riêng biệt do thiết bị có thể gập lại và máy tính bảng đặt ra, JioHotstar hướng đến việc mang lại trải nghiệm chất lượng cao và sống động trên mọi kích thước màn hình và tỷ lệ khung hình.

Việc họ cần làm

Giao diện người dùng của JioHotstar (vốn được thiết kế chủ yếu cho màn hình điện thoại thông thường) gặp khó khăn trong việc điều chỉnh tỷ lệ khung hình của hình ảnh chính, trình đơn và màn hình chương trình cho phù hợp với nhiều kích thước màn hình và độ phân giải của các kiểu dáng khác. Điều này thường dẫn đến việc cắt hình ảnh, tạo dải đen, độ phân giải thấp và không gian không được sử dụng, đặc biệt là ở chế độ ngang. Để tận dụng tối đa các tính năng của máy tính bảng và thiết bị gập, đồng thời mang lại trải nghiệm tối ưu cho người dùng trên các loại thiết bị này, JioHotstar tập trung vào việc tinh chỉnh giao diện người dùng để đảm bảo bố cục linh hoạt, hiển thị hình ảnh và điều hướng tối ưu trên nhiều thiết bị hơn.

Giải pháp

Để mang lại trải nghiệm xem tốt hơn trên màn hình lớn, JioHotstar đã chủ động cải thiện ứng dụng của mình bằng cách kết hợp WindowSizeClass và tạo bố cục tối ưu cho chiều rộng thu gọn, trung bình và mở rộng. Nhờ đó, ứng dụng có thể điều chỉnh giao diện người dùng cho phù hợp với nhiều kích thước và tỷ lệ khung hình, đảm bảo giao diện người dùng nhất quán và đẹp mắt trên nhiều thiết bị.

JioHotstar đã làm theo mẫu này bằng cách sử dụng thư viện Thích ứng Material 3 để biết dung lượng mà ứng dụng có. Trước tiên, hãy gọi hàm currentWindowAdaptiveInfo(), sau đó sử dụng bố cục mới tương ứng cho 3 lớp kích thước cửa sổ:

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

Các điểm ngắt được sắp xếp theo thứ tự từ lớn nhất đến nhỏ nhất, vì API kiểm tra nội bộ xem có lớn hơn hoặc bằng hay không, nên mọi chiều rộng ít nhất lớn hơn hoặc bằng EXPANDED sẽ luôn lớn hơn MEDIUM.

JioHotstar có thể mang đến trải nghiệm cao cấp chỉ có trên thiết bị gập: Chế độ mặt bàn. Tính năng này giúp bạn dễ dàng di chuyển trình phát video lên nửa trên của màn hình và các nút điều khiển video xuống nửa dưới khi thiết bị gập được gập một phần, mang đến trải nghiệm rảnh tay.

Để thực hiện việc này, bạn cũng có thể sử dụng thư viện Thích ứng Material 3, cùng một hàm currentWindowAdaptiveInfo() để truy vấn chế độ mặt bàn. Khi thiết bị được giữ ở chế độ mặt bàn, bạn có thể thay đổi bố cục cho phù hợp với nửa trên và nửa dưới của tư thế bằng một cột để đặt trình phát ở nửa trên và bộ điều khiển ở nửa dưới:

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

JioHotstar hiện đáp ứng Nguyên tắc về chất lượng ứng dụng cho màn hình lớn đối với Cấp 1. Nhóm đã tận dụng hướng dẫn về ứng dụng thích ứng, sử dụng mẫu, lớp học lập trình, sách hướng dẫn và tài liệu để kết hợp các đề xuất này.

Để cải thiện hơn nữa trải nghiệm người dùng, JioHotstar đã tăng kích thước đích chạm lên mức đề xuất là 48dp trên các trang khám phá video, đảm bảo khả năng hỗ trợ tiếp cận trên các thiết bị màn hình lớn. Trang thông tin chi tiết video của họ hiện có khả năng thích ứng, điều chỉnh theo kích thước và hướng màn hình. Họ không chỉ điều chỉnh tỷ lệ hình ảnh đơn giản mà còn tận dụng các lớp kích thước cửa sổ để phát hiện kích thước và mật độ cửa sổ theo thời gian thực, đồng thời tải hình ảnh chính phù hợp nhất cho từng kiểu dáng, giúp nâng cao độ chân thực của hình ảnh. Tính năng điều hướng cũng được cải thiện, với bố cục thích ứng với nhiều kích thước màn hình.

Giờ đây, người dùng có thể xem nội dung yêu thích trên JioHotstar qua các thiết bị màn hình lớn với trải nghiệm xem được cải thiện và tối ưu hoá cao.

"Việc đạt được trạng thái ứng dụng màn hình lớn Cấp 1 với Google là một cột mốc phản ánh sức mạnh của tầm nhìn chung giữa chúng tôi. Tại JioHotstar, chúng tôi luôn tin rằng việc tối ưu hoá cho các thiết bị màn hình lớn không chỉ dừng lại ở khả năng thích ứng, mà còn là nâng cao trải nghiệm xem cho những khán giả đang nhanh chóng đón nhận các thiết bị gập, máy tính bảng và TV thông minh.

Việc tận dụng các thư viện và hướng dẫn Jetpack của Google giúp chúng tôi kết hợp thông tin chi tiết về mức tiêu thụ nội dung với kiến thức chuyên môn của họ về đổi mới nền tảng. Sự hợp tác này cho phép cả hai nhóm vượt qua ranh giới, giải quyết các lỗ hổng và cùng nhau tạo ra trải nghiệm liền mạch, sống động trên mọi kích thước màn hình.

Chúng tôi tự hào khi cùng nhau mang đến trải nghiệm nâng cao này cho hàng triệu người dùng và thiết lập những tiêu chuẩn mới về cách Ấn Độ và thế giới trải nghiệm dịch vụ truyền phát trực tuyến."
- Sonu Sanjeev, Kỹ sư phát triển phần mềm cấp cao