スマートフォンを超えて: JioHotstar がアダプティブ UX を構築した方法

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

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

JioHotstar の大画面に関する課題

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

必要な対応

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

社内での取り組み

大画面での視聴エクスペリエンスを向上させるため、JioHotstar は WindowSizeClass を組み込み、コンパクト、中程度、拡大用の幅に最適化されたレイアウトを作成することで、アプリの強化に率先して取り組みました。これにより、アプリのユーザー インターフェースをさまざまな画面サイズとアスペクト比に適応させ、さまざまなデバイスで一貫して視覚的に魅力的な UI を実現しました。

JioHotstar は、Material 3 アダプティブ ライブラリを使用して、アプリで使用できるスペースを把握しました。まず 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 は、折りたたみ式デバイスならではのプレミアム エクスペリエンスであるテーブルトップ モードを提供できます。この機能では、折りたたみ式デバイスを部分的に折りたたんでハンズフリーで操作する場合、動画プレーヤーを画面の上半分に、動画コントロールを画面の下半分に移動できます。

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

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

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

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

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

「Google で大画面アプリの Tier 1 ステータスを達成できたことは、共通のビジョンの強さを反映するマイルストーンです。JioHotstar では、大画面デバイス向けに最適化することは、適応性だけでなく、折りたたみ式デバイス、タブレット、コネクテッド テレビを急速に採用している視聴者の視聴エクスペリエンスを高めることだと考えています。

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

この強化されたエクスペリエンスを何百万人ものユーザーに提供し、インドと世界がストリーミングを体験する方法に新たな基準を設定できることを誇りに思っています。」
- Sonu Sanjeev 氏、シニア ソフトウェア開発エンジニア