Uiデザイン
TVプラットフォームのユーザーインターフェイスを再考する
TVUIの基本的な要素の紹介
最近の消費者の大多数は有料テレビでケーブルを切断していますが、これは彼らがそのコンテンツを消費するために大画面から逃げ出したという意味ではありません。
からのデータリリースによると ニールセン 、米国の成人の視聴習慣では、視聴全体の92％が依然としてテレビ画面で行われていることがわかりました。これらの数は非常に大きいです。
アメリカの成人の92％以上の視聴者がまだテレビ画面にいます。
「テレビを見る」という意味は、ここ数十年で大きく変わりました。画面を埋めるための有線およびリモートボックスに制限されなくなりました。スマートTVを使用しているか、Roku、Amazon Fire、Apple TVなどのディスクを使用してストリーミングしているか、XboxやPlaystationなどのビデオゲームコンソールを接続しています。そして、これらの各デバイスは、古い画面上のガイドよりもはるかに強力なユーザーインターフェイスを可能にします。
Hulu、Netflix、Amazonなどのサブスクリプションベースのオンラインサービスを通じて放送やVOD番組を視聴するために支払うことは、世界のオンライン回答者の26％を占めています（ ニールセン ）。これはかなりの数です。ただし、調査対象者の72％は、従来のテレビ接続を介してコンテンツを視聴するために引き続き料金を支払っていることを確認しました。
これは、従来のテレビ接続が維持されることを意味しますか？
私たちは皆、そこにあるロープカッターがより多くの数を表すだろうと思っているようです。 ニールセン 米国の1億1640万世帯が2015-16シーズン中にテレビを見ると予想されていると報告しています。これは膨大な数であり、レポートはまた、それらの家の約950万が無料のOTATVに切り替えたことを発見しました。そこにあるすべてのストリーミングサービスの中で、Netflix（60.7％）がゲームをリードしているようで、Amazon Prime Video（49.4％）とHulu（26％）がそれに続きます。人々がコードを切断している最大の理由の1つは、使用した分だけ支払いたいということだと思います。
コンピュータや携帯電話と比較しても、テレビのユーザーインターフェイスデザインはまだ比較的新しい分野です。また、これは根本的に異なるプラットフォームであり、コンテンツの消費方法も異なります。 TV向けの設計には、画面サイズと視聴者の距離、技術的な制限、使用状況など、独自の考慮事項が必要です。ユーザーは「リラックスした」体験をしており、平均10フィート離れて座っており、ユーザーインターフェイスとエクスペリエンスはこれを反映する必要があります。タッチスクリーンのタブレットや電話とは異なり、テレビでの操作は、リモコンまたはビデオゲームコントローラーを使用して十字キー（方向制御）を介して行われるため、広告がより複雑になります。
モニター
テレビはタブレットや電話のようなものではありません。
テレビは、時間の経過とともに、巨大な家具から、1つの壁からぶら下がっている洗練されたミニマリストの画面に大きく変化しました。テレビが居間全体を占めるとき、彼らはテレビで、特に端の近くで一貫性のない画像を生成する技術を使用しました。これらの問題を補うために、CRTテレビはオーバースキャンの対象となりました。これは、画像がわずかに拡大されたため、エッジが表示領域の範囲外にならないことを意味します。
従来、放送局はこれを予期しており、重要な情報が画面の端に近すぎて表示されないようにしたいと考えていました。この問題を解決するために、彼らはタイトルが歪みなくテキストを表示するための安全な領域と、画像を安全に表示できる安全なアクション領域を作成しました。
私たちの制御が及ばない理由のために、オーバースキャンはまだ問題です...あなたの新しいHDTVでさえ。オーバースキャンの量は、TV間で一貫していません。重要なタイトルや株など、すべての主要な情報を安全に保つために、安全なマージン内に保管してください。
主にプラットフォーム自体によって定義されるため、現在、安全なアクション領域の「標準」はありません。グーグルはその安全領域を狭く保ち、アップルはもう少し寛大です。私がウェブで何度も検索したところ、これらのゾーンはテレビ画面の中心から85％から95％の間で変化しています。使用している可能性のあるすべての異なるプラットフォームの要件を満たすために、60pxの上下の余白と90pxの横の余白のセーフゾーンを使用することをお勧めします。つまり、すべてのテレビ画面に対応し、すべてのプラットフォーム要件を満たすには、すべての主要情報がこの領域に収まる必要があります。
新しいTVユーザーインターフェイスデザインを開始するには、新しい1920 x 1080キャンバスを作成します。その塗りつぶし（セーフゾーン）は、側面（左右）が90ピクセル、上下が60ピクセルである必要があります。あなたはあなたの無料のファイルを得ることができます こちらからダウンロード 。
ナビゲーション
「上下左右」がTVインターフェースを形成する方法。
デザイナーとして、私たちがデザインするハードウェアは、私たちのデザインパターンのいくつかを定義します。モバイルでは、パス、プレス、長押し、プルなどのアクションを実行します。タブとメニューは、デバイスのナビゲーションパターンとして使用されます。テレビは大きなキャンバスを提供しますが、正しく行わないと簡単に複雑になりすぎる可能性があります。ユーザーに表示される内容の量を最大化するためにコンテンツの長い行を表示することは、テレビUIの標準要素になっています。
指で操作するモバイルデバイスとは異なり、ほとんどのTV UIはDパッドで制御され、画面から離れた場所で使用されます。リモコンでもゲームパッドでも、十字キーはナビゲーションを上、下、左、右の4方向に制限します。
各プラットフォームには、独自の確立された規則もあります。たとえば、Xboxでは、トリガーは「PageUp」と「PageDown」のコントロールを提供し、バンパーはコンテンツのビュー間をタブで移動するために使用されます。各プラットフォームには、経験豊富なゲーマーが精通している「パワーユーザー」ボタンも多数あります。
TV UIのもう1つの重要な要素は、フォーカスステータスです。画面に触れたりマウスを使用したりする機能がない場合、ユーザーは選択するアイテムに移動する必要があります。ユーザーがアプリケーション内をナビゲートするとき、ナビゲーション要素にフォーカスがあることを示すために、ユーザーインターフェイスのさまざまな要素を強調表示する必要があります。
テレビ用に設計するときは、州が非常に重要であるため、州に焦点を当てて強調します。そのフォーカス状態は、選択可能なコンポーネントを強調表示し、画面上のユーザーの現在の場所を示すアイテムです。フォーカスの表示方法は異なる場合があります。ただし、コンポーネントによっては、一貫性が常に重要になります。明確で目立つフォーカスは、ユーザーが画面上の現在の場所をすばやく認識し、ナビゲーションを容易にするのに役立ちます。ユーザーが一時的にテレビから離れて振り返ると、ナビゲーションにどのオプションが選択されているかが明確になります。画面上のすべての項目にはカーソルでアクセスできる必要があり、カーソルが次に移動できる場所が常に明確である必要があります。
ユーザーがアプリのどこにいるのか疑問に思うようなレイアウトの例。これらの例では、ポジショニングの十分な視覚的表示（フォーカスステータス）が提供されていません。ユーザーは、上下に移動することなく、常に自分がどこにいるかを明確に確認できる必要があります。テレビから目をそらし、その逆も可能で、テレビの位置を知ることができなければなりません。
クレジットカード番号を取得するためのウェブサイト
タイポグラフィ
10フィート離れたところから読んでください。
テレビアプリは、10フィートの体験と呼ばれることがよくあります。これは、あなたとあなたのテレビの間の一般的な距離を指す用語です。モバイルやデスクトップなどの他のデバイスとは異なり、テレビはより「リラックスして楽しむ」環境に設定されています。この距離を考えると、Webやモバイルとは少し異なるユーザーインターフェイスを扱う必要があります。
テレビ画面は通常、モバイルデバイスやデスクトップコンピューターのモニターよりも大きくなりますが、遠くから見ることができます。読みやすさは重要な機能になります。つまり、テキストやその他の要素のサイズをそれに応じて調整する必要があります。年齢にもよりますが、18pxはおそらく最小の読み取り可能なサイズであり、まつげなどの不要なタグにのみ適しています。それでも、一般的な経験則として、選択するフォントサイズは24ポイント以上にする必要があります。これは、各タイプのユーザーに対応するための最小フォントサイズと私が考えるものです。
テレビでの優れたタイポグラフィの鍵は、常にテストすることです。モニターの小さくて細かいタイプはきれいでシャープに見えますが、テレビに入ると、吹き飛ばされたり、理解できなくなったりすることがあります。
技術設計書とは
テレビでの良いタイポグラフィの鍵は、絶えずテストすることです。モニターの薄くて小さいタイプは、すっきりと鮮明に見えますが、テレビに入ると、吹き飛ばされたり、理解できなくなったりすることがあります。
探査ライン
スキャンラインとは何ですか？
デスクトップ、モバイル、タブレットの画面とは異なり、テレビ画面の画像は奇数の等しいスキャンラインで構成されています。テレビは、奇数と偶数のスキャンラインをすばやく切り替えることにより、これらのラインをフェーズに変換します。 1つのスキャンラインに該当するピクセル（またはピクセルのライン）が点滅します。画面上の要素のちらつきを防ぐために、常に偶数の線を維持し、2ピクセル以上にする必要があります。これは、クロスプラットフォームプロジェクトで作業し、テレビ用の1pxボーダーボタンの作成がよく見られるタッチデバイス（モバイルおよびタブレット）にデザインを転送する準備をするときに考慮すべきことです。
これらのぼやけた線や形状を回避する別の方法は、デザインが常にピクセルパーフェクトであることを確認することです。次のアイデアは、無理数を使用して作成された線の良い例です。ご覧のとおり、その効果がはっきりとわかり、目に留まります。
色
TVモニターには制限があります。
覚えておくべき最初の項目は、テレビはデスクトップ、タブレット、電話デバイスよりもはるかに高いガンマ値を持っているということです。ガンマが画質にどのように影響するかを説明する最良の方法は、ガンマがグレースケールの各ステップ間の明るさの違いのレベル、または「速い」黒がどれだけ明るくなるかを表すことです。私たちは光をほんの少しだけ明るいものとして2回知覚します。テレビのブランドやモデルは、明るさ、ディスプレイ、その他の設定に関して大きく異なります。タイプと同様に、色はテレビで早期に、そして頻繁にテストする必要があります。
色を選択する際に従うべきいくつかのガイドライン：夜や暗い部屋でテレビを見ているとき、明るい色は目に厳しい場合があります。彩度の高い色（特に赤）の使いすぎや、大きな要素や背景での白の多用は避けてください。純粋な白は、ハローやその他の視覚的な注意散漫を引き起こします。ブランクを選択するときは、16進値を選択することをお勧めします# f1f1f1ちらつきを避けるため。読みやすさを向上させるために、要素間に十分なコントラストを作成するようにしてください
一般的な経験則では、コントラストの高い色（特に明るい色と暗い色）の間の鋭いエッジを避け、彩度の高い赤や黄色などの「ホット」な色を避けます。これらは、彩度の低い色や、青や緑などの涼しい色よりも簡単ににじみます。
常に実際のテレビで色をテストして、選択した色が大画面にどのように変換されるかを理解してください。色はテレビのモデル間で大幅に異なる可能性があるため、可能であれば、複数のテレビでアプリケーションをプレビューしてください。テレビからHDMIケーブルを差し込んで試してみてください。
基礎
考慮すべきいくつかの小さなこと。
これらの要素は、デザイン全体をガイドするために使用する必要があります。 TV UIを設計する際の最も重要な考慮事項は、シンプルさと軽量なインタラクションです。
多くの インタラクションデザインの基礎とベストプラクティス それでも適用されますが、テレビはコンピューターやモバイルデバイスとは異なり、よりリラックスした方法で使用されます。テレビのユーザーインターフェイスは、明確でシンプルかつ視覚的である必要があります。設計には、情報密度が低く、シンプルさと明快さが求められます。アイテムは大きく、離れた場所から読むことができるように十分な間隔を空けて配置する必要があります。各画面のアクションまたはオプションの明確なセットを提示します。
このデザインは、カードに素敵な大きな処理を使用して、すっきりとシンプルです。フォーカス状態は、他のクリーンなデザインと位置合わせされたスケールシャドウとドロップシャドウで実現されます。
このデザインはすっきりとしていてシンプルで、大きなカード処理が施されています。フォーカス状態は、他のクリーンなデザインと位置合わせされたスケールシャドウとドロップシャドウで実現されます。メタデータも_hover_状態でのみ表示されるため、ユーザーは現在のカードに集中できます。
このデザインはすっきりとしていてシンプルで、大きなカード処理が施されています。フォーカス状態は、他のクリーンなデザインと位置合わせされたスケールシャドウとドロップシャドウで実現されます。
従来のテレビデザインの限界を押し広げます。これは、他の多くの人が使用する通常の16 x9カード処理に代わる映画的なアプローチを提供します。他の多くのサービスと比較して、焦点はメニューを画面の下部に表示することでした
従来のテレビデザインの限界を押し広げます。ニュースを前面に出すことで、ユーザーは一度に1つのニュースに集中できます。コンテンツの行と行。
子供のユーザーインターフェイスは、直感的で、楽しく、使いやすいものでなければなりません。この設計は、企業が1x1、2x3、さらには16x9のカードに焦点を当てることで、従来のグリッドシステムを超えて設計を推進できることを示しています。
最も重要なコンテンツまたはオプションを画面の最初に配置して、ユーザーが簡単に表示およびナビゲートできるようにします。不要な画面レベルを削除する必要があります。さまざまなレベルに入ると再び出るのは簡単で明白なはずです。
TVアプリケーションを設計する際の最も重要な要素は、ユーザー操作のための明確で正確なナビゲーションを含めることです。ナビゲーションがあいまいな場合、ユーザーは混乱して不安を感じるでしょう。
つまり、ユーザーは常にアプリケーション内のどこにいるかを正確に知っている必要があります。ユーザーは基本的なコントロールのみを使用してナビゲートしていることを忘れないでください。移動、戻る、入力、およびその他の基本的なナビゲーション機能は明確である必要があります。ユーザーは、これらのアクションで必要な操作を使用できる必要があります。
焦点は、従来のテレビデザインの限界を押し上げることでした。直感的で使いやすくしながら、ユーザーが利用できる幅広いコンテンツを示すための創造的な方法を見つけます。
デザイナーとしての私たちの仕事は、ユーザーが明確でナビゲートしやすい方法でコンテンツにアクセスできるようにするユーザーインターフェイスを作成および設計することです。ユーザーが私たちのコンテンツを閲覧できるように、新しい習慣を身に付けることは期待できません。むしろ、ユーザーインターフェースを調整して、暗闇の中で、意図を十分に満たしていない誰かが、非常に限られた入力デバイスで操作できるようにする必要があります。それは大きな挑戦ですが、潜在的な見返りは莫大です。デザインを楽しんでください！
