Không chỉ trên đ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 tại Ấn Độ, phục vụ hơn 400 triệu người dùng. Với một thư viện nội dung khổng lồ bao gồm hơn 330.000 giờ nội dung video theo yêu cầu (VOD) và việc phân phối các sự kiện thể thao lớn theo thời gian thực, nền tảng này hoạt động ở quy mô lớn.

Để đảm bảo mang đến trải nghiệm chất lượng cao cho đông đảo khán giả, JioHotstar đã nâng cao trải nghiệm xem bằng cách tối ưu hoá ứng dụng của họ cho thiết bị có thể gập lại và máy tính bảng. Họ đã đạt được điều này bằng cách tuân 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ổ tay hướng dẫn và tài liệu để tạo ra trải nghiệm nhất quán, liền mạch và hấp dẫn trên mọi kích thước màn hình.

Thử thách 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 tiêu chuẩn và nhóm này 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 của ứng dụng trên màn hình lớn để hiểu rõ những điểm cần tối ưu hoá 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 Cấp 1 cho màn hình lớn, nhóm đã triển khai 2 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 các thiết bị có thể gập lại. 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 mang lại, JioHotstar hướng đến việc mang đến 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.

Những việc họ cần làm

Giao diện người dùng của JioHotstar, được thiết kế chủ yếu cho màn hình điện thoại tiêu chuẩn, gặp phải những thử thách 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 hình ảnh bị cắt, hiệu ứng hòm thư, độ 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ị có thể gập lại, đồng thời mang đến trải nghiệm người dùng tối ưu 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 tính linh hoạt tối ưu về bố cục, khả năng kết xuất hình ảnh và điều hướng trên nhiều loại thiết bị.

Những việc họ đã làm

Để 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 được tối ưu hoá cho chiều rộng nhỏ, trung bình và lớn. Điều này cho phép ứng dụng điều chỉnh giao diện người dùng cho phù hợp với nhiều kích thước màn hình và tỷ lệ khung hình, đảm bảo giao diện người dùng nhất quán và bắt 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 ứng dụng có bao nhiêu dung lượng trống. Trước tiên, hãy gọi hàm currentWindowAdaptiveInfo(), sau đó sử dụng bố cục mới 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ì nội bộ API kiểm tra 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 dành riêng cho thiết bị có thể gập lại: Chế độ trên mặt bàn. Tính năng này giúp di chuyển trình phát video đến nửa trên của màn hình và các chế độ điều khiển video đến nửa dưới khi thiết bị có thể gập lại được gập một phần để mang lại trải nghiệm rảnh tay.

Để thực hiện việc này, bạn cũng có thể dùng currentWindowAdaptiveInfo() tương tự trong Thư viện thích ứng Material 3 để truy vấn chế độ mặt bàn. Sau 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à các 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 đang đá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 các 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 những đề 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 48 dp (kích thước được đề xuất) trên các trang khám phá video, đảm bảo khả năng tiếp cận trên các thiết bị có 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ỉ đơn giản là điều chỉnh tỷ lệ hình ảnh 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 hệ số hình dạng, giúp nâng cao độ trung thực về 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 cho phù hợp 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 của mình trên JioHotstar trên các thiết bị có 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 cấp 1 cho màn hình lớn với Google là một cột mốc phản ánh sức mạnh của tầm nhìn chung của chúng ta. 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ỉ là khả năng thích ứng mà còn là việc 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ị có thể gập lại, máy tính bảng và TV có kết nối Internet.

Việc tận dụng các thư viện và hướng dẫn của 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 chuyên môn của họ về việc đổi mới nền tảng. Nhờ sự hợp tác này, cả hai nhóm đều có thể vượt qua giới hạn, giải quyết các điểm thiếu sót và cùng nhau tạo ra một 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 rất vinh dự 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 các tiêu chuẩn mới về cách Ấn Độ và thế giới trải nghiệm dịch vụ phát trực tuyến."
– Sonu Sanjeev, Kỹ sư phát triển phần mềm cấp cao