テレビのナビゲーション

テレビデバイスでは、アプリのナビゲーション コントロールが限定されています。TV アプリの効果的なナビゲーション スキームを作成するには、こうした制限されたコントロールと、アプリ操作時のユーザーの制限を理解する必要があります。TV 向け Android アプリを作成する際は、タッチ スクリーンではなくリモコン ボタンを使用した場合のユーザー操作に特に注意を払います。

原則

ユーザー インターフェースを支配したりコンテンツから目をそらしたりすることなく、自然でなじみのあるナビゲーションを実現することが目標です。以下の原則は、TV アプリ全体で一貫性があり直感的なユーザー エクスペリエンスのベースラインを設定するのに役立ちます。

効率的

コンテンツにすばやく簡単にアクセスできるようにしましょう。ユーザーは、最小限のクリックですばやくコンテンツにアクセスしたいと考えています。最も少ない画面で情報を整理できます。

予測可能

おすすめの方法と推奨事項に沿って、ユーザーが操作を予測できるようにします。ナビゲーション パターンを不必要に作り直すことは、混乱や予測不可能性につながります。

直感的

ナビゲーションをシンプルにし、広く利用されているユーザー行動をシームレスにサポートします。ナビゲーションの不要なレイヤを追加して複雑にしすぎないでください。

コントローラ

コントローラには、シンプルなリモコンから複雑なゲーム コントローラまで、さまざまなスタイルがあります。すべてのコントローラには、十字キー(D-pad)、選択ボタン、ホームボタン、戻るボタンがあります。その他のボタンはモデルによって異なります。

サンプル リモコン
図 1: テレビのリモコンの例。

D-pad
テレビの主なナビゲーション方法は D-pad です。D-pad にはハードウェアの上下左右の方向ボタンがあります。D-pad は、ボタンが押された方向で、あるオブジェクトから最も近いオブジェクトにフォーカスを移動します。

選択ボタン
フォーカスされている画面上の項目を選択します。

ホームボタン
システムのホーム画面に移動します。

戻るボタン
前のビューに戻るための手段を提供します。

マイクボタン
Google アシスタントまたは音声入力を起動します。

D-pad ナビゲーション

TV デバイスでは、ユーザーは D-pad または矢印キーを使用して移動します。この操作では、動作を上、下、左、右に制限します。テレビ向けに最適化された優れたアプリを作成するには、こうした限られたコントロールを使用してアプリの操作方法をユーザーが簡単に習得できるナビゲーション スキームを提供する必要があります。

Android フレームワークはレイアウト要素間の方向ナビゲーションを自動的に処理するため、通常はアプリに特別なことは必要ありません。ただし、D-pad コントローラでナビゲーションを十分にテストし、ナビゲーションの問題を検出する必要があります。

以下のガイドラインに沿って、アプリのナビゲーション システムが TV デバイスの D-pad で適切に動作することをテストします。

  • D-pad コントローラを使用しているユーザーが、画面に表示されているすべてのコントロールに移動できるようにします。
  • フォーカスを使用してリストをスクロールする場合、D-pad の上下ボタンでリストをスクロールし、選択ボタンでリスト内のアイテムが選択されるようにします。ユーザーがリスト内の要素を選択できることと、要素の選択時にリストがスクロールされることを確認する。
  • コントロール間の切り替え操作がわかりやすく、予測可能であることを確認する。

方向ナビゲーションを変更する

Android フレームワークは、レイアウト内のフォーカス可能な要素の相対位置に基づいて、方向ナビゲーション スキームを自動的に適用します。D-pad コントローラを使用して、生成されたナビゲーション スキームをアプリでテストします。テスト後に、特定の方法でユーザーがレイアウト内を移動できるようにする場合は、コントロールに対して明確な方向ナビゲーションを設定できます。

次のコードサンプルは、TextView レイアウト オブジェクトでフォーカスを受け取る次のコントロールを定義する方法を示しています。

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

次の表に、Android ユーザー インターフェース ウィジェットで使用可能なすべてのナビゲーション属性を示します。

属性 機能
nextFocusDown ユーザーが下に移動したときにフォーカスを受け取る隣のビューを定義します。
nextFocusLeft ユーザーが左に移動したときにフォーカスを受け取る隣のビューを定義します。
nextFocusRight ユーザーが右に移動したときにフォーカスを受け取る隣のビューを定義します。
nextFocusUp ユーザーが上に移動したときにフォーカスを受け取る隣のビューを定義します。

これらの明示的なナビゲーション属性のいずれかを使用するには、値をレイアウト内の別のウィジェットの android:id に設定します。ナビゲーションの順序をループとして設定し、最後のコントロールが最初のコントロールにフォーカスを戻すようにします。

明確なフォーカスと選択を可能にする

TV デバイスでアプリのナビゲーション スキームが成功するかどうかは、フォーカスされているユーザー インターフェース要素をユーザーが簡単に判断できるかどうかにかかっています。フォーカスされているアイテムを明確に示さないと、ユーザーが操作できるアイテムを明確に示さないと、ユーザーは即座にフラストレーションを感じてアプリを終了してしまう可能性があります。同じ理由で、アプリの起動直後またはアイドル状態のときは、ユーザーが操作できるフォーカスのあるアイテムに常にフォーカスしておくことが重要です。

アプリのレイアウトと実装で、色、サイズ、アニメーション、またはこれらの属性の組み合わせを使用して、ユーザーが次に可能なアクションを簡単に判断できるようにします。アプリケーション全体でフォーカスを示すには、統一されたスキームを使用します。

Android には、フォーカスされた選択されたコントロールのハイライトを実装するためのドローアブルの状態リストのリソースが用意されています。次のコード例は、ユーザーがコントロールに移動して選択したことを示すボタンの視覚的な動作を有効にする方法を示しています。

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

次のレイアウト XML サンプルコードは、以前の状態リストのドローアブルを Button に適用します。

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

周囲のハイライトがはっきりと見えるように、フォーカス可能で選択可能なコントロール内に十分なパディングを確保してください。

[戻る] ボタンのナビゲーション

プラットフォーム上のアプリ間で一貫性を保つため、[戻る] ボタンの動作を以下のガイドラインに準拠させます。

予測可能な [戻る] ボタンの動作を使用する

簡単で予測可能なナビゲーション エクスペリエンスを実現するには、ユーザーがリモコンの [戻る] ボタンを押すと、前のデスティネーションに移動します。

トップ ナビゲーションを使用する場合
トップ ナビゲーション使用時のナビゲーションのフローを説明する画像
左側のナビゲーションを使用する場合
左側のナビゲーション使用時のナビゲーションの流れを説明する画像

ユーザーがメニュー項目からページ中央のカードに移動した後で [戻る] ボタンを押した場合、アプリがトップ ナビゲーションと左側のナビゲーションのどちらを使用するかによって、結果は異なります。

  • アプリがトップ ナビゲーションを使用している: すばやくスクロールしてメニューのフォーカスを有効にして、ユーザーをページの一番上に戻す。
  • アプリが左側のナビゲーションを使用する場合: 左側のメニューを有効にして、現在アクティブなメニュー項目にフォーカスします。

[戻る] ボタンが、確認画面や無限ループの一部によって制限されないようにします。

終了するかどうかユーザーに尋ねるダイアログを示すスクリーンショット

すべきでないこと
出口制御を使用しないでください。確認メッセージを表示せずにユーザーがアプリを終了できるようにします。


ナビゲーションのループを示すスクリーンショット

すべきでないこと
メニューの開閉を繰り返す無限ループに陥らないでください。理想的なのは、戻るボタンを押すとアプリを終了することです。お子様用プロフィールなどの特別なケースの場合を除き、メニューに終了ボタンを表示しないでください。

「上へ」または「戻る」ボタンを表示しない

ハンドヘルド デバイスとは異なり、リモコンの [戻る] ボタンはテレビに戻るために使用します。仮想 [戻る] ボタンを画面に表示する必要はありません。

画面にソフト戻るボタンが表示されているスクリーンショット

非推奨

必要に応じてキャンセル ボタンを表示する

確認、破壊、購入のいずれかのアクションのみが表示されている場合は、前のデスティネーションに戻る [Cancel] ボタンを用意することをおすすめします。

画面にソフト キャンセル ボタンが表示されているスクリーンショット

すべきこと。

「戻る」ナビゲーションを実装する

Android フレームワークは通常、D-pad と同様に「戻る」ナビゲーションを適切に処理します。Navigation コンポーネントを使用すると、さまざまなナビゲーション グラフをサポートできます。[戻る] ボタンでフォーカスを長いリストの先頭にリセットするなど、カスタムの動作を実装しなければならない場合があります。

FragmentActivityAppCompatActivity の基本クラスである ComponentActivity を使用すると、getOnBackPressedDispatcher() を呼び出して取得できる OnBackPressedDispatcher を使用して [戻る] ボタンの動作を制御できます。

詳細については、適切な「戻る」ナビゲーションを提供するをご覧ください。

テレビの再生コントロール

動画の再生は、テレビで最も重要な機能の 1 つです。Android TV では、アプリの動画プレーヤーが同じように動作することが重要です。詳しくは、テレビの再生コントロールのガイドラインをご覧ください。

[ライブ] タブのナビゲーション

[ライブ] タブにライブテレビ フィードが統合されたアプリは、テレビアプリの品質要件に準拠するだけでなく、以降のセクションで説明するように、スムーズな再生とダイレクト バックの要件を満たす必要もあります。

スムーズな再生

スムーズな再生は、Google TV と Android TV のライブ/リニア チャンネルのディープリンクに続くアプリ内動作に適用されます。

ユーザーが Google TV や Android TV からライブ/リニア チャンネルのディープリンクをクリックした場合、ターゲット アプリの画面をブロックしたり遅延させたりすることなく、チャンネル再生に直接誘導する必要があります。ログインフロー、登録フロー、ブランディング動画、その他の遅延は許可されません

ただし、ディープリンクがコールドブートからターゲット アプリの読み込みを開始する場合、再生前のこの起動遅延は許容されます。この場合、アプリの起動時のブランディング動画やアニメーションも許可されます。このようなコールドブートがセッションごとに複数回発生することはほとんどありません。

また、ディープリンクされたチャンネルに数秒かかる場合は、チャンネルやサービスのブランドの表示は許可されます。ただし、その継続時間は、チャンネルの読み込みに要する時間の長さ(およびアプリ内のチャンネルの平均読み込み時間と同じ)にする必要があります。

ユーザーがログアウトしているか、チャンネル登録していない場合は、有料チャンネルの再生をブロックして、ログインまたは登録のフローを完了できます。

ダイレクト バック

ユーザーが [ライブ] タブのディープリンクからアプリを起動して [戻る] ボタンを押すと、経過時間に関係なく、1 回戻るボタンで [ライブ] タブに戻る必要があります。このダイレクト バック動作は、Google TV と Android TV のすべてのライブタブのディープリンクに必要です。

[ライブ] タブのディープリンクは、追加されたディープリンク パラメータ(?exit_on_back=[true|false])によって区別されます。このパラメータを解析して、アプリが [ライブ] タブから起動されたかどうかを判断する必要があります。exit_on_backtrue の場合、アプリはダイレクト バック動作を実装する必要があります。

ディープリンク後の最初のボタンとしてユーザーが戻るボタン以外のボタンを押した場合、ダイレクト バック要件は適用されず、標準の戻るボタンの動作のみが必要になります。

たとえば、ディープリンクをたどった後、ユーザーが D-pad の選択ボタンを押して、コントロール オーバーレイを表示するとします。ユーザーはオーバーレイが消えるまで待ってから、戻るボタンを押します。ディープリンクの後に押された最初のボタンが D-pad の選択ボタンだったため、ダイレクト バックの要件は適用されません。代わりに、通常のアプリのバックスタック ロジックが適用されます。

[戻る] ボタンを繰り返し押すと、無限ループなしで、ユーザーをアプリのルートに移動してから Google TV または Android TV に戻る必要があります。詳細については、予測可能な戻るボタンの動作をご覧ください。

固定的な開始デスティネーションを設定する

ユーザーがランチャーからアプリを起動したときに最初に表示される画面は、ユーザーが [戻る] ボタンを押してランチャーに戻ったときに表示される最後の画面でもあります。

ディープリンクの場合は手動ナビゲーションをシミュレーションする

特定のデスティネーションにディープリンクした場合と手動で移動する場合のどちらであっても、ユーザーは [戻る] ボタンでデスティネーション間を移動して最初のデスティネーションに戻ることができます。

アプリ内の詳細ページへのディープリンクを示すスクリーンショット。戻るボタンを押すとアプリのホーム画面に移動し、もう一度戻るボタンを押すと元の画面に戻ります。

別のアプリからアプリへのディープリンクは、手動ナビゲーションをシミュレートします。たとえば、ユーザーが Google TV から Moviestar アプリの詳細ページに直接移動して戻るボタンを押すと、Moviestar アプリのホームページが表示されます。

フォーカス可能なすべての要素への明確なパス

ユーザーがわかりやすい方向に UI を操作できるようにします。コントロールに到達するための直線的な方法がない場合は、コントロールの再配置を検討してください。

ナビゲーションのフォーカス可能な例

推奨事項
ここに示した検索操作のようなコントロールは、他のクリック可能な要素と重ならない場所に配置してください。

ナビゲーションのフォーカス可能な例

すべきでないこと
手の届きにくい場所にコントロールを配置したレイアウトは避けてください。ここに表示される検索アクションは、D-pad で簡単に移動できます。

水平軸と垂直軸の両方を活用できるようにレイアウトを設計します。各方向に特定の機能を設定して、大きな階層をすばやくナビゲートできるようにします。

ナビゲーション軸の例

推奨事項。
カテゴリは縦軸で移動でき、各カテゴリ内のアイテムは横軸でブラウジングできます。

ナビゲーション軸の例

すべきでないこと
複雑なネストされたレイアウト階層は避けてください。