「FAST COMPANY」に、「Why White Space Is Crucial To UX Design? – なぜホワイトスペースはUXデザインにおいて重要なのか」という、記事が掲載されていたのでシェアします。あなたはデザインするとき、余白の美しさにこだわるあまり「UX」の視点を置き去りにしていませんか？
Why White Space Is Crucial To UX Design?
WRITTEN BY Jerry Cao and Kamil Zieba and Matt Ellis
ホワイトスペースは単にレイアウト上の美しさを決定するだけでなく、機能的なUIを設計するためのキーにもなる。以下でそれを具体的に述べていきたいと思う。
すべての優れたビジュアルアーティストはネガティブスペースの重要性を理解している。ネガティブスペースとは要素の周りの余白のことで、主役である要素を引き立てる。ネガティブスペース（デザイナーが言うところの「ホワイトスペース」と同義）は、例えると舞台の主役をより輝かせるために、自らの主張を抑える脇役のようなものだ。
もしあなたが自分のデザインに意図的な余白をふくめる必要性を感じないのであれば、World’s Worst Website Ever (世界史上最低のウェブサイト)を見てみてほしい。これは極端な例だが、各要素がそれぞれ注目を引くために主張するだけだと、画面の崩壊を招くことがわかる。
UsauraのクリエーターのDmitry Fadeyevによると、実際、段落間と左右のマージンのホワイトスペースを適切に使用すれば理解度が20%向上したことが証明されているという。ホワイトスペース使用のスキルはユーザーに消化可能な量のコンテンツを提供し、本質的でないディテールを無視することを可能にする。
ホワイトスペースは4つの要素に分けることができる。
-
ヴィジュアル・ホワイトスペース
グラフィックやアイコン、図像のまわりにあるスペース
-
レイアウト・ホワイトスペース
マージン、パディング、ガッター
-
テキスト・ホワイトスペース
線や文字の間のスペーシング
-
コンテンツ・ホワイトスペース
テキストのカラム間のスペース
Mediumは、4種のホワイトスペースが絶妙なバランスで成り立っている好例である。まず、インタラクション観点からユーザーゴールを考えよう。ユーザーは興味あるコンテンツにできるだけ早くたどり着きたいものだ。ホームページはコンテンツを正面かつ中心に置き、片方サイドのホワイトスペースを多めにとることで、そのゴールを即座に提供する。図像のまわりのパディングは一様になっていてもいいものだが、ビジュアルのまわりやコピーの行の間には広めのスペースが取られている。（それぞれの図像の左側のスペースと下のスペースに一貫性が取られていない点にお気付きだろうか）
「ホワイトスペースはメンタルマップを作ることを促す」
理解度の向上を超えて、ホワイトスペースはメンタルマップを作ることも促す。トップナビゲーションとメインコンテンツの間は最小限のホワイトスペースがとられているが、これはユーザーにコンテンツにより深くのめり込んでもらうためという似たような機能を持っているから（そして似たような機能はグループ化されるべきであるから）である。右サイドのナビゲーションはコンテンツを作ったり保存したりするためのものなので、より多くのホワイトスペースをとってメインコンテンツは引き離さないといけない。この場合、ホワイトスペースは異なる機能をもつ要素を、異なるインターフェースのパーツに割り当てることを助けてくれる。ユーザーが記事をクリックする際、ホワイトスペースは彼らが最も注目したい「コンテンツ」に自然に誘導してくれる。各記事を区切る線の上下にとられた多めのスペースが可読性を向上させている点にも着目したい。
「近接の法則は、近くにある図像が似たように見えることをいう」
ホワイトスペースについてもっと知りたい方は、Smashing Magazineが挙げている22 expert piecesと21inspiring examplesをを見てみてください。
2. 関係性を明確にする
視覚的情報を個人がどのように体系づけるかを観察していたゲシュタルト心理学者は、近接の法則ー近くにある図像が似たように見えることーに気がついた。例えば、この図を見て欲しい。
ほぼすべての人には、「単なる20のドット」ではなく「2つのドットのグループ」が見えるのではないだろうか。ドットはすべて同じで、それらを別ものにしているのはホワイトスペースの間隔だけである。それは、重要な申し込みのインタラクションデザイン、特にフォーム入力の形式においても行動学的に観察できる。
以下の2つを覚えておいてほしい：
-
関係性が最も高いジャンルのものにラベル付けをすべき
以下の例を見ると、関係性の高いジャンルにラベル付けをした時の方が飛躍的に情報の伝達がスムーズになることがわかる。我々がe-book『Web UI Best Practices』で書いた通り、ほんの少しのためらいが生まれるとユーザはフォームを埋めるのをやめてしまうと調査結果は示している。この場合、微妙なスペーシングの調整でユーザーはためらいなくフォームを埋めることができる（事実、フォームの入力率も向上している）。
-
関係のあるトピックは同じグループに括るべき
長いフォームを埋めなければならない時、すべてを埋めるというタスクは膨大に見え、トライすること自体をやめてしまうユーザーも出てくる。扱える範囲の適切なグループに情報を分割する。右側のフォームにおいて、15のジャンルを3つのグループにカテゴライズすると心理的に大分楽になる。コンテンツの量が同じにもかかわらず、ユーザーが受ける印象は大分違う。現状、フォームが一番そういった心理的摩擦を引き起こすが、ナビゲーションやコンテンツにおいても同じ手法を適用できる。ナビゲーションに20の項目を置く代わりに、4〜7の重要項目を残したドロップダウンメニューを作って、残りを サブメニューの下に隠す、といったように。
3. 注目を引く
すでに上で述べたように、「目に見えていない」残りの要素は、「目に見える」要素をより引き立てるためにある。我々が行っているYelpのリデザインはそのいい例だ。プロトタイプにおいて、我々は検索機能のカテゴリーを分割する際に多めのホワイトスペースをとった。そうすることによって、各カテゴリーのアイコンはより目立つ（現状の垂直なフォーマットより、ごちゃつきも少なくなった）。また、ホバー時にアニメ風の色を敷くことで、ユーザーの注目を引き、カテゴリーセクションはより多くのフィードバックを受けるようになった。
しかし、バナーブラインドネス（訳註：UXにおいて、ユーザーにバナーが無視される現象のこと）で知られるように、人間は視野狭窄（さく）症につながる選択的注意（訳註：自分自身が重要だと認識する情報のみを選択し、注意を向ける認知的機能を指す概念）といった性質をもつ。コンテンツ間のスペーシングは時に減らしたり変更する必要があることも気に留めておくべきだ。
「人間の興味持続力と記憶力には限りがある」
突き詰めると、人間の興味持続力と記憶力に限りがある、といった点でホワイトスペースは効力を発揮する。YahooとGoogleのインターフェースを比較してみよう。Yahooはあまりに多くのアクションを一度にユーザーに求めすぎている。Googleは、人々が検索エンジンを使う理由を「目当てのものを探し当てるため」だと理解している。ユーザーゴールを現実的な最低ラインに設定することで、Googleのデザインはより効果的なインタラクションを促しているのだ。
ほとんどのデザイナーは「ユーザーに考えさせない」ことを良しとする。これはユーザーを怠けさせるという意味ではない。すでにあれこれ別のことで頭がいっぱいになっているユーザーに対し、追加情報をつめこみ、タスクを終わらせるハードルを一層高くすることを防ぐということだ。ちなみに、インターフェースデザインにおいて生まれるストレスの量を認知負荷（訳註：http://www.yasuhisa.com/could/article/cognitive-load-theory/）と呼ぶ。
