デザインとユーザーエクスペリエンス(UX)に関するガイドライン


デザインとユーザーエクスペリエンス(UX)に関するガイドライン

テレビのユーザーインターフェイス(UI)設計は、デスクトップコンピューター、タブレット、スマートフォンの設計とは大きく異なります。ここでは、10フィートUIのデザイン原則を理解し、アプリとそのデザインをAmazon Fire TVのUIに対応させる際に役立つガイドラインを紹介します。

全般的な原則

アプリをデザインする際は、以下の原則を全体的に適用します。

10フィートUI

テレビを観るとき、ユーザーは画面から10フィート(約3メートル)以上離れているため、テレビのインターフェイスは10フィートユーザーインターフェイス(10-ft UI)と呼ばれることがあります。画面自体を大きくすることはできますが、画面が大きいほど解像度は低くなり、画面から離れるほど視野角は小さくなります。

デスクトップコンピューターやタブレット、スマートフォンでは、より近い距離から画面を観るため、これらで実行するアプリやウェブページ向けのデザインは、テレビを対象にする場合と根本的に異なります。

また、テレビはデスクトップコンピューター、タブレット、スマートフォンに比べて、よりくつろいだ雰囲気で視聴するため、テレビのUIでは高いレベルの注意力や正確性を求めないようにする必要があります。10フィートUIでは、既存のアプリのデザインやレイアウト、ナビゲーションを完全に見直す必要があります。

クリア、シンプル、ビジュアル

10フィートUIでは、画面をシンプルかつクリアにし、情報密度を低くする必要があります。画面に表示されるデザイン要素やUIコンポーネント(メニュー、ボタン、イメージ)は、あまり数を多くせず、遠くからでも認識して区別できるように大きくし、間を空けるようにします。各画面では、一連の操作とオプションを明確に提示します。

ユーザーはテレビの画面で大量のテキストを読むことに慣れていないので、テキストの量は最小限にします。情報を大量に入力しなくても済むようにし、可能な限り合理的なデフォルト値を提供します。

重要なコンテンツを最初に配置する

最も重要なコンテンツやオプションを画面の目立つところに配置し、ユーザーが容易に認識してナビゲーションできるようにします。

コンテンツ再生に重点を置く

アプリでは、ユーザーがすばやくコンテンツにアクセスできるようにすることに重点を置く必要があります。テレビのインターフェイスは、娯楽を提供することが主な目的です。テレビの前に座っているユーザーは、余計な操作をしたくはありません。ユーザーは、「今すぐ観たいものを観て、聴きたいものを聴く」という本来の目的を実現する、 シンプルなユーザーインターフェイスを求めています。

デザインガイドライン

アプリで個々の画面やビューをデザインする際には、次のガイドラインを使用します。

画面サイズと解像度

タブレットやスマートフォンに対応するアプリをデザインする際、対象となる画面のサイズと解像度は固定されています。これと異なり、テレビのデザインでは、同じアプリが720pまたは1080pのいずれかの解像度で、しかもさまざまなサイズの画面に表示されることを考慮する必要があります。

最高のユーザーエクスペリエンスを提供するために、フル1080pのテレビ画面を対象にして、アプリとそのリソースをデザインすることをお勧めします。Amazon Fire TVプラットフォームでは、テレビの画面サイズと解像度に応じて、リソースが拡大/縮小されます。1080pの場合、画面サイズは1920x1080px、密度は320dpi("xhdpi")、出力解像度は960 x 540dp("large")です。

また、Amazon Fire TVプラットフォームでは、標準のAndroid構成がサポートされており、Android開発者ガイドの複数画面をサポートするで説明されているように、出力パラメーターの違いに応じて複数のリソースディレクトリを使用できます。

アプリを実行すると、Fire TVはリソースを適切なフォルダから読み込みます。Amazon Fire TVで利用できるリソース構成の詳細については、表示とレイアウトを参照してください。

オーバースキャンとセーフゾーン

画面サイズに関係なく、すべてのテレビには、画面の表示可能な領域の周囲に余白が確保されています。このスペースは、オーバースキャンと呼ばれます。テレビがオーバースキャンとして使用する領域の大きさは、メーカーによって異なります。オーバースキャンの領域は、アプリで使用できません。

Amazon Fire TVプラットフォームでは、テレビのオーバースキャンの大きさを設定で調整できますが、念のために画面の縁から5%以内にはアプリのUI要素を配置しないようにすることをお勧めします。特に、フォーカスが置かれるアイテムや画面上のテキストは、その全体が画面の内側90%(セーフゾーン)内に収まるようにする必要があります。

オーバースキャン

開発者オプションを使用してFire TVにオーバースキャンを表示できます。System X-Rayを参照してください。

カラー

テレビの画面はコンピューターの画面よりもコントラストが高く設定されており、カラーがより明るく、鮮やかで、飽和しているように見えます。表示可能な色の範囲を示す色域も、PC画面よりも狭い範囲となります。アプリでは、飽和度の低いカラーを使用してください。寒色(青、紫、灰)が暖色(赤、橙)よりも見やすくなります。

カラー

タイポグラフィ

テレビ画面は部屋のどこからでも読み取れる必要があるため、本文のテキストには大きなフォントサイズ(14sp以上、つまり720pでは約19px、1080pでは約28px)を使用します。Amazonでは、システムフォントとしてHelvetica Neue Regularが使用されます。

アイテムの説明やそのほかのテキストブロックは、その内容も行幅もできる限り短くします。行間は、デスクトップやタブレットの画面の場合よりも広くします。テキストは段落または小さなチャンクに分割し、短い平叙文で記述します。

Amazon Fire TVユーザーインターフェイスでは、ナビゲーションとユーザー入力の両方とも、Fire TVリモコン(Amazon Fire TVリモコンまたは音声認識リモコン)か、ゲームコントローラー(Amazon Fire TVゲームコントローラー(日本では現在お取り扱いできません)またはBluetoothゲームコントローラー)から行います。マウス、キーボード、タッチ入力の代わりに物理コントローラーを使用するため、Fire TV対応アプリの入力や制御の方法は、柔軟性の点でほかのデバイスに比べてやや劣ります。

D-Padを使用した方向ナビゲーション

Amazon Fire TVリモコンまたはゲームコントローラーの上下左右のD-Padボタンを使用して、アプリのユーザーインターフェイスをナビゲーションできます。ユーザーに対しては、アプリのユーザーインターフェイスを使用したナビゲーションの方法を明確に示してください。上下左右の方向を明確に示し、操作可能な画面要素すべてがD-Padを通してアクセスできるようにします。

フォーカスと選択

ユーザーはリモコンやゲームコントローラーの方向ボタンを使用してユーザーインターフェイスをナビゲーションするので、フォーカスされた要素を示すために各種のUI要素を強調表示します。アプリ内では、現在フォーカスされている画面要素を明確に示す必要があります。ユーザーがテレビから目を離し、再び画面を見たときに、ナビゲーションで利用できるオプションが明確に維持されている必要があります。

UI要素にフォーカスが置かれているときに [選択](またはゲームコントローラーの [A] ボタン)が押された場合、その要素がすぐに選択された状態に変化する必要があります。

テキスト入力

テキストフィールドにフォーカスが移動すると、システムキーボードが自動的に表示されます。情報の入力は、リモコンまたはゲームコントローラーの方向ボタンを使用して文字や数字を選択することによって行えます。オートコンプリート機能が用意されており、予測された入力候補をいつでも選択できます。

画面、ビュー、フロー

このセクションでは、Amazon Fire TVユーザーインターフェイスの主な画面とビュー、およびそれらを構築するために使用されているコントロールについて説明します。独自のアプリのデザインを最適化し、アプリをシステムUIと統合する際には、ここに記載されているパターンを参照してください。

画面

ホーム画面(ランチャー)

画面

ホーム画面は、グローバルナビゲーションメニュー(左側)と一連のコンテンツタイル(右側)で構成されます。

グローバルナビゲーションメニューは、中心となるシステムメニューです。画面の左側に、縦に1列に並んで表示されます。グローバルナビゲーションメニューでは、主なコンテンツカテゴリーのほか、[検索]、[ホーム]、[映画]、[TV番組]、[ミュージック]、[ゲーム]、[アプリ] などのオプションを選択できます。グローバルナビゲーションメニューの各アイテムは、[上] と [下] の方向ボタンを使用して選択できます。

グローバルナビゲーションメニューのいずれかのアイテムにフォーカスを置くと、そのノードのホームビューが画面の右側に表示されます。各ノードには、独自のホームビューと独自のコンテンツがあります。ランチャーと呼ばれる、システム全体のホームビューにアクセスするには、Fire TVリモコンまたはゲームコントローラーの [ホーム] キーを使用するか、グローバルナビゲーションメニューから [ホーム] を選択します。

コンテンツ行

各ホームビューは、複数のコンテンツ行で構成されます。行のタイトルタイルはコンテンツの種類(たとえば、「注目タイトル」、「マイビデオ」、「おすすめ」など)を示します。残りのタイルは、そのコンテンツのサンプルを示します。これらのコンテンツ行では、次のことができます。

  • [上] と [下] の方向ボタンを使用して、行間をナビゲーションできます。
  • [左] ボタンを使用して、ナビゲーションメニューに戻ることができます。
  • [選択] または [右] を使用して行を選択し、その行の1Dリストを表示できます。

1Dリストビュー

1Dリスト

1Dリストビューは、ホームビューからコンテンツ行が選択されると表示されます。1Dリストは、1行のアイテムで構成されます。タイトルバーには、リストのタイトル(たとえば、「注目タイトル」、「マイビデオ」、「おすすめ」など)に加えて、リストにあるアイテムの数とフォーカスされているアイテムの位置を示す数の2つの数が表示されます。

参照リストでフォーカスされているアイテムについては、そのアイテムの簡単な説明がリストの下に表示されます。簡単な説明には、アイテムの基本情報(タイトル、日付、評価)と [ウォッチリストに追加] などのオプションが含まれます。

1Dリストでは、次のことができます。

  • [左] と [右] の方向ボタンを使用してアイテム間をナビゲーションする。リストの最後を越えてナビゲーションすると、フォーカスは最初のアイテムに戻ります。
  • [選択] ボタンを使用してアイテムを選択する。この操作で、そのアイテムの詳細ビューが表示されます。

詳細ビュー

詳細ビュー

詳細ビューは、参照リストからアイテムが選択されると表示されます。上の画像は、ある映画の詳細ビューです。表示される詳細情報は、テレビ番組や音楽など、コンテンツによって異なる可能性があります。詳細ビューには、コンテンツまたはほかのアイテムに関連する情報と操作が表示されます。

説明の下には、このアイテムで実行可能な操作が表示されます。実行可能な操作は、ユーザーの登録ステータス(たとえば、Amazonプライムメンバーであるなど)とコンテンツの利用状況によって異なります。

画面の左側のディスカバリーメニューには、アイテムに関連する追加情報(たとえば、[Cast]、[Trivia]、[Reviews] など)が表示されます。

ホーム画面の [検索] メニューを選択すると検索画面が表示され、音声検索やテキスト検索を利用できます。検索画面は、Alexa対応音声認識リモコンの [Microphone] ボタンからも利用でき、現在のアプリまたはコンテンツ上にオーバーレイとして表示されます。

テキスト検索の場合は、[左] と [右] の方向キーを使用してアルファベット間を移動し、文字ごとに [選択] を押して検索クエリを入力します。入力候補がクエリの下にリストとして表示されます。

検索

グローバル検索はシステム全体で利用できますが、個々のアプリ向けにカスタマイズすることはできません。開発者は独自のアプリ内検索を実装できますが、この検索は、グローバル検索機能には含まれません。

そのほかのリソース

10フィートUIをデザインする際のユーザーエクスペリエンスに関するベストプラクティスについて詳しくは、Android TVを参照してください。