テレビデバイスでは、アプリのナビゲーション コントロールが限定されています。テレビアプリ向けの効率的なナビゲーション スキームを作成するには、ナビゲーション コントロールがこのように限定されていることと、アプリを使用するユーザーの認識に限界があることを理解することが重要です。テレビ向け Android アプリをビルドする際には、ユーザーがタッチスクリーンではなくテレビのリモコンボタンを使用して実際にどのようにナビゲートするかをよく考える必要があります。
原則
ナビゲーションは、ユーザー インターフェースを占有したり、コンテンツから注意をそらしたりすることなく、自然で使い慣れたものにする必要があります。以下の原則は、テレビアプリ全体で一貫した直感的ユーザー エクスペリエンスを実現するためのベースラインを設定するのに役立ちます。
コンテンツに簡単にアクセスできるようにします。ユーザーは、最小限のクリック数でコンテンツにすばやくアクセスしたいと考えています。必要な画面数を最小限に抑えるように情報を整理します。
ベスト プラクティスと推奨事項に沿って、ユーザーがナビゲーション を予測できるようにします。混乱や予測不能につながるため、ナビゲーション パターンを不必要に再考しないでください。
広く採用されているユーザーの行動をシームレスにサポートできるように、ナビゲーションを簡素化します。不要なナビゲーション レイヤを追加して複雑にしないでください。
コントローラ
コントローラには、シンプルなリモコンから複雑なゲーム コントローラまで、さまざまなスタイルがあります。すべてのコントローラに、十字キー（D-pad）と選択ボタン、ホームボタン、戻るボタンが搭載されています。その他のボタンはモデルによって異なります。
D-pad
テレビの主なナビゲーション方法は D-pad です。D-pad には、
上、下、左、右の方向
ハードウェア ボタンがあります。D-pad は、フォーカスを 1 つのオブジェクトから、押されたボタンの方向にある最も近いオブジェクトに移動します。
選択ボタン
フォーカスされている画面上の項目を選択します。
ホームボタン
ユーザーをシステムのホーム画面に移動します。
戻るボタン
ユーザーが前のビューに戻る方法を提供します。
マイクボタン
Google アシスタントまたは音声入力を呼び出します。
D-pad ナビゲーション
テレビデバイスでは、ユーザーは D-pad または矢印キーを使用してナビゲーション操作を行います。このタイプのコントロールでは、上下左右の移動のみが可能です。テレビ向けに最適化された使いやすいアプリをビルドするには、このような限られたコントロールでアプリを操作する方法をユーザーがすぐに習得できるナビゲーション スキームが必要です。
Android のフレームワークでは、レイアウト要素間の方向ナビゲーションが自動的に処理されるため、通常は特に何もする必要はありません。ただし、D-pad コントローラによるナビゲーションを十分にテストし、問題なく操作できることを確認する必要があります。
次のガイドラインに沿って、アプリのナビゲーション システムがテレビデバイスの 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 に設定します。ナビゲーションの順序はループとして設定する必要があります。これにより最後のコントロールから最初のコントロールにフォーカスが戻ります。
明確なフォーカスと選択を可能にする
テレビデバイスのアプリのナビゲーション スキームで重要なのは、画面上のどのユーザー インターフェース要素にフォーカスがあるかをユーザーが簡単に判別できるようにすることです。フォーカスされているアイテムが明確でないと、ユーザーはどのアイテムに対してアクションが可能かを判別できず、ストレスを感じてアプリを終了してしまうことになりかねません。同じ理由で、アプリの起動直後やアイドル状態のときも、ユーザーによるアクションが可能な目的のコンテンツとして表示されているアイテムが常に示されている状態にしておくことが重要です。
次に可能なアクションをユーザーが簡単に判別できるように、アプリのレイアウトと実装で色、サイズ、アニメーションや、こうした属性の組み合わせを使用することをおすすめします。アプリ内では、一貫したスキームを使用してフォーカス状態を示すようにしてください。
Android にはドローアブルとしての状態リストリソース が用意されており、フォーカス状態の選択されたコントロールにハイライトを実装できます。次のコードサンプルは、ユーザーがコントロールに移動して選択したことを示すボタンの視覚的な動作を有効にする方法を示しています。
<!-- res/drawable/button.xml --> <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>
1 つ前の状態リストのドローアブルを Button に適用する方法を次のレイアウト XML サンプルコードに示します。
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
周囲のハイライトがはっきりと見えるように、フォーカスおよび選択可能なコントロール内には十分なパディングを確保してください。
戻るボタンのナビゲーション
プラットフォーム上のアプリ全体で一貫性を保つため、戻るボタンの動作が次のガイドラインに沿っていることを確認してください。
予測可能な戻るボタンの動作を使用する
わかりやすく予測可能なナビゲーション エクスペリエンスを実現するには、ユーザーがリモコンの戻るボタンを押したときに、前のデスティネーションに移動するようにします。
ユーザーがメニュー項目からページの中央にあるカードに移動して戻るボタンを押した場合、結果はアプリが上部ナビゲーションを使用するか左側ナビゲーションを使用するかによって異なります。
- アプリが上部ナビゲーションを使用する場合: ページの上部にすばやくスクロールし、メニューのフォーカスを有効にして、ユーザーをページの上部に戻します。
- アプリが左側ナビゲーションを使用する場合: 左側のサイドメニューを有効にし、現在アクティブなメニュー項目にフォーカスします。
戻るボタンが確認画面でゲート処理されないこと、無限ループの一部ではないことを確認します。
禁止事項
終了ゲート処理を避ける。ユーザーが
確認なしでアプリを終了できるようにします。
禁止事項
メニューの開閉の無限ループに入らないようにします。
理想的には、戻るボタンを押すとアプリが終了します。お子様用プロフィールなどの特別な場合を除き、メニューに終了ボタンを表示しないでください。
[上へ] ボタンまたは [戻る] ボタンを表示しない
ハンドヘルド デバイスとは異なり、リモコンの戻るボタンはテレビで戻る操作に使用されます。画面に仮想の戻るボタンを表示する必要はありません。
禁止事項
必要に応じて [キャンセル] ボタンを表示する
表示されるアクションが確認、破壊的、購入アクションのみの場合は、前のデスティネーションに戻る [キャンセル] ボタンを用意することをおすすめします。
必須事項
戻るナビゲーションを実装する
Android のフレームワークは、D-pad と同様に、通常は戻るナビゲーションを適切に処理します。 Navigation コンポーネントを使用すると、さまざまなナビゲーション グラフをサポートできます。場合によっては、戻るボタンで長いリストの先頭にフォーカスをリセットするなど、カスタム動作を実装する必要があります。
ComponentActivityは、FragmentActivityとAppCompatActivityの基本クラスであり、getOnBackPressedDispatcher()を呼び出して取得できるOnBackPressedDispatcherを使用して、戻るボタンの動作を制御できます。
詳細については、適切な「戻る」ナビゲーションを提供するをご覧ください。
テレビの再生コントロール
動画再生は、テレビの最も重要な機能の一つです。Android TV のアプリの動画プレーヤーは同じように動作することが重要です。テレビの再生 コントロールのガイドラインを参照してください。
[ライブ] タブのナビゲーション
テレビアプリの品質要件に準拠することに加えて、[ライブ] タブにライブテレビ フィードが統合されたアプリは、次のセクションで説明するように、スムーズな再生とダイレクト バックの要件も満たす必要があります。
スムーズな再生
スムーズな再生は、Google TV と Android TV の [ライブ] チャンネルまたはリニア チャンネルのディープリンクの後のアプリ内動作に適用されます。
ユーザーがディープリンクをクリックすると、次のルールが適用されます。
- 遅延なし: ログイン フローや登録フロー、ブランディング動画などの画面をブロックしたり遅延させたりすることなく、ユーザーをチャンネル再生に直接誘導する必要があります。
- コールドブートの例外: ディープリンクによってターゲット アプリがコールドブートから読み込まれる場合、起動の遅延は許可されます。この場合、アプリの起動時のブランディング動画やアニメーションも許可されます。
- 読み込みの遅延の例外: チャンネルのチューニングに数秒かかる場合は、ブランディングの表示が許可されます。時間はチャンネルの読み込みに必要な時間のみにする必要があります。
ユーザーがログアウトしている場合や定期購入していない場合は、有料チャンネルの再生をブロックして、ログイン フローまたは登録フローを完了できます。
ダイレクト バック
ユーザーが [ライブ] タブのディープリンクからアプリを起動して戻るボタンを押すと、経過時間に関係なく、1 回の戻る操作で [ライブ] タブに戻る必要があります。このダイレクト バックの動作は、Google TV と Android TV のすべての [ライブ] タブのディープリンクで必要です。
[ライブ] タブのディープリンクは、追加されたディープリンク パラメータ ?exit_on_back=[true|false] で区別されます。アプリは、このパラメータを解析して、アプリが [ライブ] タブから起動されたかどうかを判断する必要があります。exit_on_back が true の場合、アプリはダイレクト バックの動作を実装する必要があります。
ディープリンクの後にユーザーが最初に押したボタンが戻るボタン以外の場合、ダイレクト バックの要件は適用されず、標準の戻るボタン の動作のみが必要になります。
たとえば、ディープリンクをたどった後に、ユーザーが D-pad の選択ボタンを押すと、コントロール オーバーレイが表示されます。ユーザーはオーバーレイが消えるのを待ってから、戻るボタンを押します。ディープリンクをたどった後に最初に押したボタンが D-pad の選択ボタンであるため、ダイレクト バックの要件は適用されません。代わりに、通常のアプリのバックスタック ロジックが適用されます。
戻るボタンを繰り返し押すと、無限ループが発生することなく、アプリのルートに移動してから Google TV または Android TV に戻る必要があります。詳細については、予測可能な戻るボタンの動作のセクションをご覧ください。
ナビゲーション アーキテクチャ
適切に定義されたナビゲーション アーキテクチャにより、ユーザーはアプリ内の現在位置とさまざまなコンテンツへのアクセス方法を把握できます。ナビゲーション設計の次の点を考慮してください。
固定的な開始デスティネーションを設定する
ユーザーがランチャーからアプリを起動したときに最初に表示される画面は、ユーザーが戻るボタンを押してランチャーに戻るときに表示される最後の画面でもあります。
ディープリンクの場合は手動ナビゲーションをシミュレーションする
特定のデスティネーションに対してディープリンク経由で移動した場合でも、手動ナビゲーション経由で移動した場合でも、ユーザーは戻るボタンを使用することで、デスティネーション間を移動して最終的に開始デスティネーションに戻ることができます。
別のアプリからアプリへのディープリンクは、手動ナビゲーションをシミュレートします。たとえば、ユーザーが Google TV から Moviestar アプリの詳細ページに直接移動して戻るボタンを押すと、Moviestar アプリのホームページに移動します。
すべてのフォーカス可能な要素への明確なパス
ユーザーが明確な方向で UI を操作できるようにします。コントロールに直接アクセスできない場合は、コントロールの場所を変更することを検討してください。
必須事項
ここに示されている検索アクションなどのコントロールは、他のクリック可能な要素と重複しない場所に配置します。
禁止事項
操作しにくい場所にコントロールを含むレイアウトは避けてください。ここに示されている検索アクションは、D-pad で操作するのが難しい場合があります。
軸
水平軸と垂直軸の両方を活用するようにレイアウトを設計します。 各方向に特定の機能を持たせることで、大規模な階層をすばやく移動できます。
必須事項
カテゴリは垂直軸で移動でき、各
カテゴリ内の項目は水平軸でブラウジングできます。
禁止事項
複雑なネストされたレイアウト階層は避けてください。