TV UIデザイン:ホワイトスペースの操作

公開: 2022-03-11

TV向けのデザインには、UXの原則を包括的かつ統制のとれた形で理解する必要があります。 テレビのデザインで常に懸念される要素の1つは、デザインでの空白の使用です。 市場には、空白を適切に利用する方法を知らない(または意識的に使用しないことを選択する)テレビアプリが多すぎます。 その結果、ビジネス目標を積極的に損なう雑然とした目障りになります。

ここでは、空白とは何か、およびTVアプリで空白を使用することがビジネスに最適である方法について説明します。

ホワイトスペースは私たちの友達です

何よりもまず…

空白とは何ですか?

空白は、テキストやグラフィックが上に重ねられていない、空いている不動産です。

背景のグラフィック画像は、その上に何も追加されていない限り、空白と見なすことができるため、これは注意することが重要です。

空白はありません
空白は必ずしも白いだけではありません。

大したことは何ですか?

なぜこんなに単純なことがそのような違いを生むのでしょうか? ビジネスオーナーは、空白をより多くのコンテンツを宣伝する機会の喪失と見なすことがよくあります。これは、貴重な画面領域の浪費です。 彼らの目的は、ユーザーの前にできるだけ多くのコンテンツを配置することです。これは、ある程度理解できるものです。 ただし、顧客が利用できるコンテンツが多すぎると、顧客はいわゆる意思決定の麻痺に直面します。これは、意思決定能力の完全な欠如です。

イギリスとアメリカの心理学者ウィリアム・エドマンド・ヒックとレイ・ハイマンにちなんで名付けられたヒックの法則、またはヒック・ハイマンの法則は、人が可能な選択の結果として決定を下すのにかかる時間を説明しています。選択肢を選択すると、対数的に決定時間が長くなります。

TVアプリの概念全体、つまりCHOICEを考慮に入れると、これは実際には大きな問題です。 テレビ番組や映画のサムネイルの無限のライブラリを閲覧して、何も決定できないことに気付いたことが何回ありますか? 内容が良くないからではありません。 それは、呼吸の余地がなく、重要なセパレーターがないためです。 あなたの心は非常に多くのオプションを見ています、それはシャットダウンします。

デザイナーにとって、空白はページ上のネガティブスペースであり、目に視覚的な呼吸の余地を提供します。

デザイナーは、空白がユーザーが見たいコンテンツに焦点を合わせて吸収するのに役立つことを知っています。

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

ホワイトスペースに「はい」と言ってください

空白はTVアプリの設計にとって特に重要です。通常、ユーザーはリラックスして、のんびりとした体験を楽しんでいるためです。距離を置いて決定を下そうとします。 コンテンツと空白のバランスをうまくとることで、実際にこのプロセスを支援しています。

正しく使用すると、空白はデザインとユーザーがそれから得られるエクスペリエンスを変えることができます。 デザインとレイアウトは、目にやさしく、意思決定を容易にするために、呼吸する余地が必要です。 空白を利用することで、実際にコンテンツの読みやすさとユーザーの操作性が向上します。 これは、視聴者が決定を下すのを妨げている気晴らしを減らすことによって達成されます。

Human Factors Internationalが実施した調査によると、空白はユーザーの理解度をほぼ20%向上させます。

ホワイトスペースが呼吸の余地を作るのにどのように役立つか、そしてそれが意思決定プロセスをどのように変えるかを見てみましょう。

不安を引き起こすように設計されているように見えるテレビインターフェース
不安を引き起こすように設計されているように見えるテレビインターフェース。


同時にやりすぎをしようとしているTVインターフェース
同時にやりすぎをしようとしているTVインターフェース。


見た目にはよく実行されますが、コンテンツ間に空白がありません
見た目にはよく実行されますが、コンテンツ間に空白がありません。


呼吸室とのインターフェース
呼吸室とのインターフェース。


要素間のバランスと階層が良好なTVインターフェース
要素間のバランスと階層が良好なTVインターフェース。


要素間のバランスと階層が良好なTVインターフェース
要素間のバランスと階層が良好なTVインターフェース。


分かりますか?

空白は、ユーザーが見たいコンテンツにユーザーの目を集中させる明確な分離を作成します。

Huluは、HuluLiveアプリで空白を使用するという素晴らしい仕事をしています。 従来のポスターアートの代わりに使用されている大きな背景画像を確認してください。没入型で美しく見えます。 これは、利用可能な巨大な小売スペースを使用する方法の良い例です。

Huluは没入型の空白であなたを引き込みます
Huluは没入型の白いスペースであなたを引き込みます。

ホワイトスペースは、認知的負荷を軽減し、意思決定をスピードアップします。 Fast Co Designで説明されているように、空白を追加すると、雑然としたものを取り除くだけでなく、次の重要な機能を果たします。

  • 理解力を向上させます
  • インタラクティブな要素間の関係を明確にします
  • ユーザーの注意を引き付け、集中させる

ホワイトスペースは美学だけではなく、ユーザーインターフェイスを成功させるための鍵です。 視覚的な空白、レイアウトの空白、テキストの空白、コンテンツの空白に焦点を当てることで、ユーザーの理解を劇的に向上させます。 これにより、強調が追加され、コンテンツが前面と中央に配置されます。 互いに近い画像は同じように見えます。 したがって、ユーザーとの関係を明確にすることで、ユーザーは自信を持ってナビゲートできるようになります。 以前聞いたように、「少ないほど多い」。

ホワイトスペースの力を利用して、デザインを向上させ、意思決定を支援します。

認知的負荷を軽減することで、UIがより使いやすくなるだけでなく、より楽しく使用できるようになります。空白は、ユーザーエクスペリエンス全体で調和と流動性の感覚を生み出すのに役立ちます。

ホワイトスペースの有効活用

効果的な空白の力を使用して、楽しく使用できるインターフェイスを作成するTVアプリの例をさらにいくつか示します。

これらのTVインターフェースにより、ユーザーは数十の選択肢ではなく、1つに集中することができます。
これらのTVインターフェースにより、ユーザーは一度に数十の選択肢ではなく、1つに集中することができます。

ホワイトスペースは、今日のテレビデザインの多くで見過ごされ、十分に活用されていない要素です。 TVアプリではコンテンツが重要ですが、画面の隅々までカバーして画面を乱雑にする必要があるという意味ではありません。 ホワイトスペースは、市場のすべてのTVアプリに適用する必要がある、シンプルでありながら強力なデザインデバイスです。 モダンで洗練された、視覚的に刺激的なものであり、ユーザーが視聴するコンテンツを決定するのに役立つことが証明されています。

デザインに空白を使用すると、コンテンツを任意のサイズの画面で輝かせることができます
デザインに空白を使用すると、コンテンツを任意のサイズの画面で輝かせることができます。

•••

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

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