TVプラットフォームのユーザーインターフェイスデザインを再考する

TVUIの基本的な要素の紹介

最近の消費者の大多数は有料テレビでコードを切断していますが、これは彼らがコンテンツを消費するために大画面から身を引いているという意味ではありません。 Nielsenによるデータリリースによると、米国の成人の視聴習慣では、すべての視聴の92％が依然としてテレビ画面で行われていることがわかりました。 これらはかなり膨大な数です。

米国の成人の視聴の92％以上は、依然としてテレビ画面で発生しています。

「テレビを見る」という意味は、過去数十年で大きく変わりました。 画面を埋めるためのリモートボックスとケーブルボックスに制限されなくなりました。 スマートTVを使用しているか、Roku、Amazon Fire、Apple TVなどのパックを使用してストリーミングしているか、XboxやPlaystationなどのビデオゲームコンソールを接続しています。 そして、これらの各デバイスは、昔ながらの画面上のガイドよりもはるかに強力なユーザーインターフェイスを可能にします。

Hulu、Netflix、Amazonなどのサブスクリプションベースのオンラインサービスを介して放送やVOD番組を視聴するために支払うことは、世界のオンライン回答者の26％を占めています（Nielsen）。 これは有効数字です。 ただし、回答者の72％は、従来のテレビ接続を介してコンテンツを視聴するために引き続き料金を支払うことを確認しました。

これは、従来のテレビ接続が維持されることを意味しますか？

私たちは皆、そこにあるコードカッターがより多くの数を表すだろうと思っているようです。 Nielsenは、米国の1億1,640万世帯が2015-16シーズンにテレビを視聴すると予想されていたと報告しています。 これは膨大な数であり、レポートはまた、それらの家の約950万が無料のOTATVに切り替えたことを発見しました。 そこにあるすべてのストリーミングサービスの中で、Netflix（60.7％）がゲームをリードしているようで、Amazon Prime Video（49.4％）とHulu（26％）がそれに続きます。 人々がコードを切断している最大の理由の1つは、使用した分だけ支払いたいということだと思います。

コンピュータや携帯電話と比較した場合、テレビのUIの設計はまだ比較的新しい分野です。 また、これは根本的に異なるプラットフォームであり、コンテンツの消費方法も異なります。 TVの設計には、画面サイズと視聴者の距離、技術的な制約、使用状況など、独自の考慮事項が必要です。 ユーザーは「リーンバック」エクスペリエンスを利用しており、平均10フィート離れて座っており、ユーザーインターフェイスとエクスペリエンスはこれを反映する必要があります。 タッチスクリーンのタブレットや電話とは異なり、テレビでの操作は、リモコンまたはビデオゲームコントローラーを使用した十字キー（方向制御パッド）を介して行われるため、複雑さが増します。

ディスプレイ

テレビはタブレットや電話のようなものではありません。

テレビは、時間の経過とともに、巨大な不格好な家具から、壁に掛けられた洗練されたミニマリストのディスプレイに大きく変化しました。 テレビが居間全体を占めるようになった頃、テレビは、特に端の近くで、テレビセット全体で一貫性のない画像を生成する技術を使用していました。 これらの問題を補うために、ブラウン管テレビはオーバースキャンの対象となりました。 これは、画像がわずかに拡大されたため、エッジが表示領域の境界の外側にないことを意味します。

従来、放送局はこれを予期しており、重要な情報が画面の端に近すぎて表示されないようにしたいと考えていました。 この問題を解決するために、彼らはテキストを歪みなく表示するためのタイトルセーフエリアと、画像を安全に表示できるアクションセーフエリアを作成しました。

私たちの手に負えない理由のために、オーバースキャンはまだ問題です…あなたの新しいHDTVでさえ。 オーバースキャンの量は、テレビ間で一貫していません。 タイトルや重要なアクションなどのすべての主要な情報が安全であることを確認するには、それらを安全なマージン内に保持します。

現在、安全な行動領域の「基準」は設定されていません。 ほとんどの場合、プラットフォーム自体によって定義されます。 グーグルは彼らのセーフエリアを狭く保ち、アップルはもう少し寛大です。 私がWebで何度も検索したところ、これらのゾーンは、テレビ画面の中心から85％から95％の間で変化します。 作業している可能性のあるすべての異なるプラットフォームの要件を満たすために、60ピクセルの上下マージンと90ピクセルのサイドマージンのセーフゾーンを使用することをお勧めします。 これは、すべてのテレビ画面に対応し、すべてのプラットフォーム要件を満たすために、すべての主要な情報がこの領域に収まる必要があることを意味します。

新しいテレビユーザーインターフェイスデザインを開始するには、新しい1920x1080キャンバスを作成します。 パディング（セーフゾーン）は、側面（左右）が90ピクセル、上下が60ピクセルである必要があります。 ここから無料のファイルをダウンロードできます。

ナビゲーション

上下左右がテレビのインターフェースをどのように形作るか。

設計者として、私たちが設計するハードウェアは、私たちの設計パターンのいくつかを定義します。 モバイルでは、スワイプ、タップ、長押し、プルなどのアクションを実行します。 タブとメニューは、デバイスのナビゲーションパターンとして使用されます。 テレビは素晴らしい大きなキャンバスを提供しますが、正しく行わないと簡単に複雑になりすぎる可能性があります。 ユーザーに表示されるコンテンツの量を最大化するためにコンテンツの長い行を表示することは、テレビUIの標準要素になっています。

指で操作するモバイルデバイスとは異なり、TV UIの大部分は十字キーで制御され、画面から離れた場所で使用されます。 リモコンでもゲームパッドでも、十字キーはナビゲーションを上、下、左、右の4方向に制限します。

各プラットフォームには、独自の確立された規則もあります。 たとえば、Xboxでは、トリガーは「PageUp」と「PageDown」のコントロールを提供し、バンパーはコンテンツビュー間をタブで移動するために使用されます。 各プラットフォームには、経験豊富なゲーマーが使い慣れている「パワーユーザー」ボタンも多数あります。

TV UIのその他の重要な要素は、フォーカス状態です。 画面に触れたりマウスを使用したりする機能がない場合、ユーザーは選択する要素に移動する必要があります。 ユーザーがアプリ内を移動すると、ナビゲーション要素にフォーカスがあることを示すさまざまなUI要素が強調表示されます。

テレビ用にデザインするときのフォーカスとハイライトの状態は非常に重要です。 そのフォーカス状態は、選択可能なコンポーネントを強調表示し、ユーザーの現在の画面上の場所を示す要素です。 フォーカスが表示される形式は異なる場合があります。 ただし、コンポーネントによっては、一貫性が常に重要になります。 明確で目立つフォーカスは、ユーザーが現在の画面上の位置をすばやく認識し、ナビゲーションを容易にするのに役立ちます。 ユーザーがテレビから一瞬目をそらしてから視線を戻すと、ナビゲーション用に現在選択されているオプションが自動的にクリアされます。 画面上のすべての項目はカーソルで到達可能である必要があり、カーソルが次に移動できる場所が常に明確である必要があります。

ユーザーがアプリのどこにいるのか疑問に思うようなデザインの例。 これらの例では、ポジショニングの視覚的な表示（フォーカス状態）が十分ではありません。 ユーザーは、上下に移動することなく、常に自分がどこにいるかを明確に確認できる必要があります。 あなたはテレビから離れて戻って一瞥することができ、それでもあなたの位置を知ることができるはずです。

タイポグラフィ

10フィート離れたところから読んでいます。

TVアプリは、多くの場合、10フィートのエクスペリエンスと呼ばれます。これは、あなたとあなたのテレビの間の一般的な距離を指す用語です。 モバイルやデスクトップなどの他のデバイスとは異なり、テレビはより「身を乗り出してリラックスできる」環境に設定されています。 この距離を考えると、UIをWebやモバイルの場合とは少し異なる方法で処理する必要があります。

テレビ画面は通常、モバイルデバイスやデスクトップコンピューターのモニターよりも大きくなりますが、遠くから見ることができます。 読みやすさが重要な機能になります。つまり、テキストやその他の要素のサイズをそれに応じて調整する必要があります。 年齢にもよりますが、18pxはおそらく最小の読み取り可能なサイズであり、眉毛のタブなどの不要なラベルにのみ適しています。 それでも、一般的な経験則として、選択したフォントサイズは24ポイントより小さくしないでください。 これは、すべてのタイプのユーザーに対応するための最小フォントサイズと私が考えるものです。

テレビで良いタイポグラフィを行うための鍵は、絶えずテストすることです。 モニターの薄くて小さいタイプは、すっきりと鮮明に見えますが、テレビに表示されると、吹き飛ばされたり、理解できなくなったりする場合があります。

スキャンライン

スキャンラインとは何ですか？

デスクトップ、モバイル、タブレットの画面とは異なり、テレビ画面の画像は奇数と偶数のスキャンラインで構成されています。 テレビは、これらの線を奇数と偶数のスキャン線の間で急速に交互に位相を合わせてレンダリングします。 単一のスキャンラインに落ちる単一のピクセル（またはピクセルのライン）はちらつきます。 画面上のアイテムのちらつきを防ぐために、線は常に偶数に保ち、2ピクセル以上にする必要があります。 これは、クロスプラットフォームプロジェクトで作業し、テレビ用に1pxの境界線ボタンを作成することが多いタッチデバイス（モバイルおよびタブレット）からデザインを転送する準備をするときに考慮すべきことです。

これらのぼやけた線や形を避ける別の方法は、デザインが常にピクセルパーフェクトであることを確認することです。 以下の例は、不均等な数を使用して作成された線の良い例です。 ご覧のように、その影響がはっきりとわかり、目に不安を感じます。

色

TVディスプレイには制限があります。

覚えておくべき最初の要素は、テレビはデスクトップ、タブレット、携帯電話のデバイスよりもはるかに高いガンマ値を持っているということです。 ガンマが画質にどのように影響するかを説明する最良の方法は、ガンマがグレースケールの各ステップ間の明るさの違いのレベル、つまり「速い」黒がどれだけ明るくなるかを表すことです。 私たちは、2倍の光をほんのわずかに明るいものとして知覚します。 明るさ、ディスプレイ、その他の設定に関しては、テレビのメーカーやモデルが大きく異なります。 タイプと同様に、色はテレビで早期に、そして頻繁にテストする必要があります。

色を選択する際に従うべきいくつかのガイドライン：夜や暗い部屋でテレビを見ているとき、明るい色は目にきついかもしれません。 彩度の高い色（特に赤）を使いすぎたり、大きな要素や背景に白を多用したりしないでください。 真っ白な白は、ハローやその他の視覚的な注意散漫を引き起こします。 白を選択するときは、ちらつきを避けるために#f1f1f1の16進値を選択することをお勧めします。 読みやすさを向上させるために、要素間に十分なコントラストを作成するようにしてください

一般的な規則は、非常に対照的な色（特に暗い色の隣の明るい色）の間の鋭いエッジを避け、非常に飽和した赤や黄色などの「暑い」色を避けることです。 これらは、彩度の低い色や、青や緑などの涼しい色よりも簡単ににじみます。

選択した色が大画面にどのように変換されるかを理解するために、常に実際のテレビで色をテストしてください。 テレビのモデルによって色が大幅に異なる可能性があるため、可能であれば、複数のテレビでアプリをプレビューしてください。 テレビからHDMIケーブルを接続してテストするだけです。

基礎

考慮すべき小さなこと。

これらの要素は、デザイン全体をガイドするために使用する必要があります。 TV UIを設計する際の最大の考慮事項は、シンプルさと軽量なインタラクションです。

インタラクションデザインの基本とベストプラクティスの多くは依然として適用されますが、テレビはコンピューターやモバイルデバイスとは異なり、よりリラックスした方法で使用されます。 テレビのUIは、明確でシンプルかつ視覚的である必要があります。 設計には、情報密度が低く、シンプルさと明快さが求められます。 要素は大きく、離れた場所から読み取ることができるように十分に離れている必要があります。 各画面のアクションまたはオプションの明確なセットを提示します。

このデザインはすっきりとシンプルで、素敵なビッグカード処理を使用しています。 フォーカス状態は、クリーンなデザインの残りの部分と整列するスケールとドロップシャドウで実現されます。 また、メタデータはホバー時にのみ表示されるため、ユーザーは現在のカードに集中できます。

最も重要なコンテンツまたはオプションを最初に画面に配置して、ユーザーが簡単に表示およびナビゲートできるようにします。 不要な画面レベルを削除する必要があります。 さまざまなレベルに入って再び出るのは簡単で明白でなければなりません。

TVアプリケーションを設計する際の最も重要な要素は、ユーザー操作のための明確で正確なナビゲーションを含めることです。 ナビゲーションがあいまいな場合、ユーザーは混乱して不安を感じるでしょう。

つまり、ユーザーは常にアプリケーション内のどこにいるかを正確に知っている必要があります。 ユーザーは基本的なコントロールのみを使用してナビゲートしていることを忘れないでください。 移動、戻り、入力、およびその他の基本的なナビゲーション機能は明確である必要があります。 ユーザーは、これらのアクションで必要な操作を使用できる必要があります。

デザイナーとしての私たちの仕事は、ユーザーが明確でナビゲートしやすい方法でコンテンツにアクセスできるようにするユーザーインターフェイスを作成および設計することです。 ユーザーが私たちのコンテンツを見ることができるようにするためだけに、ユーザーが新しい習慣に適応することを期待することはできません。 むしろ、ユーザーインターフェイスを調整して、暗闇の中で、意図したものよりも少ない入力デバイスを使用して操作できるようにする必要があります。 それはかなりの挑戦ですが、潜在的な見返りは莫大です。 デザインを楽しんでください！

•••

Toptal Designブログでさらに読む：

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法