ネットコンパスのブログ

UXデザインの法則

こんにちは!株式会社ネットコンパスのSIXです。

私はエンジニアとしておもにフロントエンドの開発を担当しています。同時に、UIデザインも任せていただくことが多く、直感的に使いやすいシステムについて想いを巡らせる日々です。

そこで今回は、この本をご紹介しようと思います。

『UXデザインの法則』Jon Yablonski

UXデザインの法則

『UXデザインの法則 ― 最高のプロダクトとサービスを支える心理学』Jon Yablonski(オライリージャパン 2021) https://www.oreilly.co.jp/books/9784873119496/

UXデザインと関係する心理学の法則をまとめたサイト( https://lawsofux.com/ )を書籍化したもの。心理学を活用して、ユーザがプロダクトへどんな期待をするのかを理解し、デザインに活かしていこうという内容です。

書籍に書かれている、心理学的法則についてご紹介します。

1. ヤコブの法則

ユーザは他のサイトと同じ挙動をあなたのサイトにも期待している。

  • 「慣れ」には大きな価値がある。既存のメンタルモデル(この見た目のものはこう動くよね、といった共通理解)を活かすことで、ユーザは精神的なエネルギーを消費することなくプロダクトを使いこなすことができる。
  • 一方で、このようにデザインすることで、Webサイトやアプリがどれも同じデザインにならないか?(同質化)
  • デザイナーは、独創的である前にユーザにとって最適な方法を選ばなければならない。既存のメンタルモデルを活かし、まずはありふれたパターンからはじめる。そして、うまくいきそうなときだけ慣例から離れる。その場合、ユーザテストを行い、戻れる状態にしつつ移行期間を設けるとよい。

2. フィッツの法則

ユーザが対象に到達するのにかかる時間は、対象の大きさと距離による。

  • ターゲット(テキストボックスやボタンなど)は十分な大きさと間隔を持ち、ユーザの操作で簡単に到達できる場所に配置する。
  • 例: フォームの送信ボタンを最後のインプット要素の近くに置く

3. ヒックの法則

意思決定にかかる時間は、選択肢の数と複雑さによる。

  • ユーザの目的を理解し、目的達成に役立たない要素を取り除くことが、デザインプロセスにおいて何より重要。
  • タスクを階層化することで認知負荷が減り、ユーザはそのときそのときのタスクに集中し続けられるようになる。
  • 一方で、単純化しすぎて抽象的になりすぎるとよくわからなくなってしまうことに注意。

4. ミラーの法則

人の短期記憶には制限がある。

  • 記憶範囲は、情報量の大小に関係なく、およそ7つ程度まで。
  • 「ナビゲーションの項目数は7つ以下に制限しなければならない」と解釈するのは誤解で、「チャンク化」をすることで情報をより効果的に保持できる。
  • チャンク化とは、重要な情報を素早く識別しやすくするためのコンテンツの整理方法。情報の断片をいかに意味のあるチャンクに整理できるかが重要。
  • チャンク化の例: カテゴリ分類や見出し、電話番号のハイフン

5. ポステルの法則

出力は厳密に、入力には寛容に。

  • ロバストネス(堅牢性)の原則: データを受け取るプログラムは、意味が明確である限り、仕様に適合していない入力を受け入れ解析できる堅牢性を保つべきである。
  • レジリエンス(強靭さ): できるだけ多くのことを予測し計画してデザインするほど、デザインはよりレジリエントになる。
  • 人間とコンピュータは異なる方法で情報伝達をする。そのコミュニケーションのギャップを埋めることがデザインの責務。

6. ピークエンドの法則

体験への評価は、全体の平均ではなく、ピーク時と終了時にどう感じたかによる。

  • 経験に対する判断は、できごと全体を通して感じたことではなく、感情のピーク時と終了時に感じたことの平均に基づく。
  • 待ち時間やエラー時など、ネガティブな瞬間のUIに細心の注意を払うことで、ユーザはその体験をポジティブに記憶してくれる。

7. 美的ユーザビリティ効果

見た目が美しいデザインはより使いやすいと感じられる。

  • 美しいデザインは、脳のポジティブな反応を引き出し、よく機能しているように見える。
  • 人間は初めて目にするものに対し、自動的な認知処理によって美しいかどうかを直感的かつ瞬間的に判断する。つまり第一印象が重要。
  • 一方で、美しいデザインは、ユーザビリティの問題を隠蔽し、課題発見を邪魔してしまう恐れもある。

8. フォン・レストルフ効果

似たものが並んでいるとき、その中で異なるものは記憶に残りやすい。

  • 孤立効果=他の項目から、視覚的、概念的に孤立している項目があると記憶しやすい。
  • 色使いは要素を際立たせるのによくあるやり方だが、他にも大きさ、形、余白、動きを用いることでも目的が達成できる。
  • コントラストを用いて重要なコンテンツに注意を向けることは効果的だが、使い方によっては懸念材料になる点に注意。

9. テスラーの法則

どんなシステムにも、それ以上減らすことのできない複雑さがある。

  • デザイナーと開発者が「複雑性を担う」ことで、ユーザ体験をシンプルにできる。
  • ユーザ体験は直感的で簡単に感じられ、目的達成を邪魔するものがないのがよい。
  • 一方で、インターフェースをシンプルにしすぎて抽象的な表現になると、ユーザの意思決定に十分な情報が得られなくなってしまう。バランスが大事。
  • 事例: メールアプリの宛先サジェスト、認証のみで支払いができる決済システム

10. ドハティのしきい値

レスポンスが0.4秒以内のとき、コンピュータとユーザの双方が最も生産的になる。

  • 遅延が1秒を超えると、ユーザはタスク以外のことを考え始め、認知的負荷が高まり、全体としてユーザ体験が損なわれてしまう。
  • パフォーマンスはエンジニアが取り組むべき技術的な課題ではなく、デザインの本質的要素。適切なフィードバックを提供し、「待ち」の感覚を減らすことが重要。
  • 一方で、「速すぎる」レスポンスについても考慮が必要な場合がある。例えば、セキュリティスキャンが速すぎて不信感につながるような場合は、意図的に遅延させるように見せるやり方もある。
  • 事例: スケルトンスクリーン、プログレスバー

いかがでしたか?たしかに!と感じる原則も多かったのではないでしょうか。普及したUIの裏側には心理学的な裏付けがあるのだなと感じます。

著者は、心理学をデザインプロセスに応用するには、心理学的な知見をチーム全員の意思決定の中に組み込むことが重要であるとしています。ここにまとめた内容のほかにも、アンチパターンについてなど、UI/UXを構築する上での「心構え」が散りばめられていて、時々読み返して振り返りたい本です。

最後までお読みいただきありがとうございました!