はじめに

エンジニアとして、UIデザインについて学習したいと考えていました。
そこで、UIデザインに関する2冊の本とガイドラインを読みました。

それぞれの資料を関連付けたりしながら、特に気をつけたいと思った点をまとめました。

自分なりの理解で記事を書いているため、誤りがある場合はご指摘いただけますと幸いです。

4つの基本原則

ノンデザイナーズ・デザインブックでは以下の4原則について解説されています。

1. 近接

関連する項目は近づけてグループ化すること。
関連のない項目同士は近づけないこと。

2. 整列

ページ内のすべての要素は意図的に配置すること。
ある項目はどれか他の項目と視覚的なつながりがあるようにすること。

3. 反復

デザイン全体で要素（色、書体、サイズ、形など）を繰り返すこと。

4. コントラスト

目を引き付けるために、要素にコントラストをつけること。
例えば、大きさや色、フォント等を大きく変えて違いを目立たせる。

目的

4つの基本原則は、主に情報の組織化とデザインの一体感を作ることに寄与します。

情報の構造化

情報が構造化されて表示されていると、拾い読みが容易で、目的の情報を見つけやすくなる。

構造化に加えて、上記で説明した4つの基本原則に従うと、より情報をつかみやすくなります。

例えば、見出しと小見出しがある階層構造のあるデザインについて考えてみます。「反復」の原則を使って見出しや小見出しに同じフォントサイズや色を使い、「コントラスト」を使って見出しを目立たせれば、階層構造を容易に把握することができます。

ガイドラインでは

ガイドラインのレイアウトにも、構造を分かりやすくするための記述が書かれています。

位置合わせを行うことで視覚的なスキャンを容易にし、構成や階層構造を分かりやすく伝える。

「位置合わせ」は、4つの基本原則の「整列」に当てはまりますね。

色

色だけに頼ったデザインにしないこと。
色覚異常のあるユーザーなどが違いに気づかない場合があるから。

ガイドラインでは

ガイドラインのアクセシビリティやカラーでも、この点について触れられている箇所がありました。

できるだけシステムが提供するスイッチコンポーネントを使う。

ユーザーが設定を変更すると、色だけでなくラベルでもオンオフを見分けることができます。

オブジェクトの区別、操作可否の提示、重要な情報の伝達をカラーだけで行わない。

リンクにカラー以外の視覚的インジケータ（アンダーラインなど）を追加する。

ガイドラインを読んで、初めてリンクについているアンダーラインの意味を知りました。

周辺視野

視野の中心（中心窩）とその他の部分（周辺視野）では見え方が異なる。

周辺視野は、中心窩より視力が劣る。視力の高い中心窩の範囲は、腕を伸ばした時のたった爪ほどの範囲と言われている。

周辺視野の重要な機能

中心窩を誘導すること

例えば、スーパーでトマトを探していたとする。周辺視野で赤い何かをぼんやりと察知すると、視線がその赤い何かに向く。

動きを感知しやすいこと

UIへの応用

エラーメッセージは、ユーザーの視線の近くに出すこと

周辺視野は中心窩より視力が劣るため、周辺視野でメッセージが表示されても気づきにくいため。

4つの基本原則の「コントラスト」を活用する

コントラストを活用して目立たせることで、目線が誘導され、目的の情報を探索しやすくなる。

文字のみのリストやメニューは、順序を変えない

文字のみの場合、周辺視野で特徴をとらえて視点を誘導することが難しいから。リストやメニューの順序を変えなければ、ユーザーが位置を覚えた場合、探索が容易になる。

ガイドラインでは

ガイドラインのウィジェットでは、以下のような記述がありました。

データのアップデートに注目してもらうため、アニメーションによる遷移を使用する。多くのSwiftUIビューでは、デフォルトでコンテンツの更新にアニメーションが使われています。

「周辺視野は動きを感知しやすい」という特徴を利用していると考えらえます。

読む行為の妨げ

読むという行為の妨げになるものはいくつかある。

なじみのない語

読み手が普段使わない言葉、例えば専門用語のような言葉を使うと読む処理がそこでストップしてしまう。

中央揃え、右揃え

行の先頭位置がずれるため、行頭を探す手間で読む速度が落ちる。
　4つの基本原則の「整列」にあるように、すべての要素は意図的に配置されなければならない。それぞれの文字揃えの特性を意識して、意図的に選択するべき。

ガイドラインでは

ガイドラインの表現でも同じようなことが書かれていました。

誰に対してもわかりやすい表現にする。

普段使用している言葉だと、専門用語と意識せずに使用していることが良くあります。言葉選びをする際は、この点を強く意識しなければいけないと思いました。

作業記憶（注意力）

作業記憶（注意力）の容量は小さく、すぐに忘れてしまう。

UIへの応用

ユーザーが自分の居場所をわかるようにする

どうやってそのページにたどり着いたのか、何の目的で操作しているのかを忘れても大丈夫なようにするため。

ページ内でできる動作を複数にしない

作業記憶（注意力）の容量を超えないようにするため。

デザインガイドラインでは

ガイドラインのナビゲーションバーに以下のような説明がありました。

ナビゲーションバーは、画面のタイトルを表示するのに最適な場所で、ユーザはアプリやゲームのどこにいるのかを簡単に確認できます。

ナビゲーションバーを利用すると、＜戻るボタンが＜ (前の画面のタイトル)　になります。ナビゲーションバーをつけると、現在の位置だけでなく、前の画面には何があったのかも示せるので、自分の位置を把握しやすいですね。

情報の匂い

表示内容の中で、目標を達成できそうなものに目がいく。
その際、表示内容を文字通りに受け取りやすいため、注意を払って言葉を選ぶ必要がある。

例として以下のようなアラートをあげる。「キャンセル」ボタンは「キャンセルをキャンセルする」、「OK」ボタンは「キャンセルしてOK」という意味で設定したとする。しかし、キャンセルをしたいと考えているユーザーは、「キャンセル」ボタンを文字どおりに「〇〇をキャンセルする」と逆の意味で受け取る可能性がある。

デザインガイドラインでは

デザインガイドラインのアラートに、関連する内容がありました。

ボタンのタイトルは簡潔かつ論理的にする。
アラートのテキストに直接関係する動詞や動詞句を使用するようにします。

アラートが純粋に情報提供の目的でない限り、デフォルトのボタンのタイトルに「OK」を使用しない。

アラートのボタンに無意識にOKボタンをつけてしまうことがあるので、注意したいと思いました。

感想

ノンデザイナーズ・デザインブック

4つの基本原則について、多くのデザインとともに紹介されています。いい例、悪い例を比較しながら読み進めることができるので、基本原則の威力を体感しながら学習することができました。

UIデザインの心理学

心理学に関する詳しい内容とともに、どのようにデザインへ応用すればよいのか解説されています。この本を通して、ガイドラインの根拠について学ぶことができました。

参考

ノンデザイナーズ・デザインブック第4版 (Robbin Williams, 株式会社マイナビ出版, 2016)
UIデザインの心理学 (Jeff Johnson, 株式会社インプレス, 2015)
ヒューマンインターフェースガイドライン