Beyond Phones: JioHotstar が適応型 UX を構築した方法

JioHotstar は、インドの主要なストリーミング プラットフォームであり、4 億人を超えるユーザーにサービスを提供しています。33 万時間以上のビデオ オンデマンド（VOD）と主要なスポーツ イベントのリアルタイム配信を含む膨大なコンテンツ ライブラリを備えたこのプラットフォームは、大規模なスケールで運用されています。

JioHotstar は、幅広い視聴者にプレミアムな視聴体験を提供するため、折りたたみ式デバイスやタブレット向けにアプリを最適化し、視聴体験を向上させました。Google のアダプティブ アプリのガイダンスに沿って、サンプル、コードラボ、クックブック、ドキュメントなどのリソースを活用することで、あらゆるディスプレイ サイズで一貫してシームレスで魅力的なエクスペリエンスを実現しました。

JioHotstar の大画面に関する課題

JioHotstar は標準的なスマートフォンで優れたユーザー エクスペリエンスを提供しており、チームは新しいフォーム ファクタを活用したいと考えていました。まず、チームは 大画面アプリの品質に関するガイドラインに照らしてアプリを評価し、折りたたみ式デバイスやタブレットでユーザー エクスペリエンスを拡張するために必要な最適化を把握しました。Tier 1 の大画面アプリのステータスを獲得するために、チームはさまざまなフォーム ファクタに対応し、折りたたみ式デバイスで差別化を図るための 2 つの戦略的なアップデートを実装しました。JioHotstar は、折りたたみ式デバイスやタブレット デバイスが抱える固有の課題に対処することで、あらゆるディスプレイ サイズとアスペクト比で高品質で没入感のあるエクスペリエンスを提供することを目指しています。

必要な対応

JioHotstar のユーザー インターフェースは、主に標準的なスマートフォンのディスプレイ向けに設計されているため、ヒーロー画像の縦横比、メニュー、番組画面を、他のフォーム ファクタのさまざまな画面サイズや解像度に適応させるのに苦労しました。そのため、特に横表示では、画像の切り抜き、レターボックス、低解像度、未使用のスペースが発生することがよくありました。タブレットと折りたたみ式デバイスの機能を最大限に活用し、これらのデバイスタイプ全体で最適化されたユーザー エクスペリエンスを提供するために、JioHotstar は UI の改良に注力し、幅広いデバイスで最適なレイアウトの柔軟性、画像レンダリング、ナビゲーションを確保しました。

社内での取り組み

大画面での視聴体験を向上させるため、JioHotstar は WindowSizeClass を組み込み、コンパクト、中程度、拡張の各幅に最適化されたレイアウトを作成することで、アプリを強化しました。これにより、アプリはさまざまな画面の寸法とアスペクト比に合わせてユーザー インターフェースを調整し、さまざまなデバイスで一貫性のある視覚的に魅力的な UI を実現できました。

JioHotstar は、Material 3 Adaptive ライブラリを使用して、アプリで使用可能なスペースを把握することで、このパターンに従いました。まず currentWindowAdaptiveInfo() 関数を呼び出し、3 つのウィンドウ サイズクラスに応じて新しいレイアウトを使用します。

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

ブレークポイントは大きい順に並んでいます。内部的には API は「以上」でチェックするため、EXPANDED 以上の幅は常に MEDIUM より大きくなります。

JioHotstar は、折りたたみ式デバイスならではのプレミアムなエクスペリエンス（テーブルトップ モード）を提供できます。この機能は、折りたたみ式デバイスをハンズフリーで使用するために部分的に折りたたむと、動画プレーヤーを画面の上半分に、動画コントロールを画面の下半分に移動します。

これを実現するため、マテリアル 3 アダプティブ ライブラリを使用して、同じ currentWindowAdaptiveInfo() を使用してテーブルトップ モードをクエリできます。デバイスがテーブルトップ モードで保持されると、レイアウトの変更が行われ、上半分と下半分の形状に合わせて、上半分にプレーヤー、下半分にコントローラを配置する列が作成されます。

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

JioHotstar は、Tier 1 の大画面アプリの品質に関するガイドラインを満たしています。チームは、アダプティブ アプリのガイダンスを活用し、サンプル、コードラボ、クックブック、ドキュメントを使用して、これらの推奨事項を組み込みました。

ユーザー エクスペリエンスをさらに向上させるため、JioHotstar は動画の検索結果ページでタップ ターゲットのサイズを推奨の 48dp に拡大し、大画面デバイスでのユーザー補助を確保しました。動画の詳細ページがアダプティブになり、画面サイズや画面の向きに合わせて調整されるようになりました。単なる画像のスケーリングにとどまらず、ウィンドウ サイズ クラスを活用してウィンドウ サイズと密度をリアルタイムで検出し、各フォーム ファクタに最適なヒーロー画像を読み込むことで、視覚的な忠実度を高めています。ナビゲーションも改善され、さまざまな画面サイズに合わせてレイアウトが調整されるようになりました。

ユーザーは、改善され高度に最適化された視聴エクスペリエンスで、大画面デバイスで JioHotstar のお気に入りのコンテンツを視聴できるようになりました。

「Google とともに Tier 1 大画面アプリのステータスを達成できたことは、両社の共通ビジョンの強さを反映するマイルストーンです。JioHotstar は、大画面デバイス向けに最適化することは適応性を超えたものであり、折りたたみ式スマートフォン、タブレット、コネクテッド テレビを急速に利用する視聴者の視聴体験を向上させることだと考えています。

Google の Jetpack ライブラリとガイドを活用することで、コンテンツ消費に関する当社のインサイトと、プラットフォーム イノベーションに関する Google の専門知識を組み合わせることができました。このコラボレーションにより、両チームは境界を押し広げ、ギャップに対処し、あらゆる画面サイズでシームレスで没入感のあるエクスペリエンスを共同で作成することができました。

この強化されたエクスペリエンスを数百万のユーザーに提供し、インドと世界でストリーミングを体験する方法に新たな基準を設けることができて、大変光栄です。」
- Sonu Sanjeev、シニア ソフトウェア開発エンジニア