UIデザイン初心者、Webディレクターのための心理学的法則と実践テクニックまとめ
より背景感を持たせたデザインや、デザインへのフィードバックを意識して行きたいと思っていくつかの記事を読みサマリした✍
まとめて改めて思うのはあたまでっかちにならず「議論」「要件」などの構造を把握することが大事だなと経験上強く感じる。意識して読んでみてほしい☝🏻
対象読者
UIデザイン初級〜中級者
ディレクター
上記ふくめ、合意形成が必要なデザインパーソン
1. 複雑さの管理と簡潔性
テスラーの法則：システムには必ず複雑さが存在する。UIデザイナーの役割は、この複雑さを管理し、シンプルで使いやすいユーザーエクスペリエンスを提供すること。複雑さは完全に取り除くことは難しく、ある部分から取り除くと他の部分に移行する性質がある。
2. 慣れ親しんだデザインの重要性
ヤコブの法則：ユーザーは既存のものと同様の動作体験を望む。慣れ親しんだUIを採用することで、ユーザーの学習コストを低減できる。例えば、Instagram、TikTok、Facebook Story、YouTubeなど最近のSNSのUIが似ているのは、この法則を活用した結果と言える。
3. 操作のしやすさと視覚的な配置
フィッツの法則：対象が大きく、距離が近いほど選択しやすい。重要な機能は大きく、アクセスしやすい位置に配置する。特にモバイルデバイスでは、適切な大きさのボタンやアクション領域を提供することで、ユーザーの操作を容易にし、誤タップを減少させることができる。
4. 情報の記憶と提示方法
ミラーの法則：人間が同時に記憶できる情報は7±2個。UIでは選択肢や表示項目を適切に制限し、必要に応じてカテゴリー分けする。この法則に基づき、UIデザインでは画面に表示されるオブジェクトや選択肢を7つ以下、または5つまでに抑えることが一般的。大量の項目を並べる場合、カテゴリー毎に分けるとユーザーのストレスが軽減される。
5. レスポンス時間の重要性
ドハティの閾値：0.4秒以内のレスポンスでユーザーの興味を維持できる。ページロード時間の最適化が重要。例えば、ページのロードスピード、ボタンが反応するまでの時間、メニューが開くまでの時間などが当てはまる。どうしても時間がかかる場合は、進行中のプロセスを知らせる視覚的な要素やアニメーションを導入したり、進捗状況を分かりやすく表示し、残り時間の予測を提供したりすることで、離脱のリスクを軽減できる。
6. 視覚的な手がかりの提供
知覚アフォーダンス：ユーザーが操作方法を直感的に理解できるデザインを心がける。ボタンの立体感や、クリック可能な要素の強調など。以下の点に気をつけてUIデザインをすると良い：
ボタンデザインは、陰影や立体感などを利用して押せる印象を与える
テキストなどクリック可能な要素は、色や下線で強調する
サブメニューがある場合など、直感的に開閉できるようなデザインにし、階層も理解しやすいようにする
物理法則に反するアニメーションはユーザーに混乱を招く可能性があるので慎む
7. 美しさとユーザビリティの関係
美的ユーザビリティ効果：美しいデザインはユーザーに使いやすさを感じさせる。ただし、根本的なUX設計が前提。美的なデザインは信頼感を生むことがあったり、ユーザーの使用しようとする意欲を高め、積極的な行動を促す効果がある。しかし、美的ユーザビリティ効果だけでは根本的なユーザビリティの問題は解決できないため、デザインや表層的な設計よりもまずは、きちんとUXを設計しておくことが前提となる。
8. 進捗の可視化
目標勾配効果：目標に近づくにつれユーザーの行動が積極的になる。進捗バーなどで進み具合を視覚化する。例えば、ECサイトの会員登録や購入フローなどに、進捗バーを設置することは効果的。ステップをどこまで完了したか視覚的に確認できるようにしたり、ユーザーをゴールに向かって行動しやすくする工夫が必要。
9. 一貫性のあるデザイン
文脈効果：同じ文脈で使用される要素は同じようにデザインし、ユーザーの期待に応える。Webサイト内のデザインやレイアウトに一貫性を持たせることが大切。また、使用する色やフォントも文脈に合ったものを選定し、一貫性を保つ。
10. 視覚的な注目点の作成
輪郭線バイアス：重要な要素にははっきりとした輪郭をつけ、注目を集める。人が物体や要素の輪郭に興味を引かれやすい性質がある。デザインする際には、大事な部分や目立たせたい要素にはっきりとした輪郭をつけると、ユーザーがそれに注意しやすくなる。また、曲線のあるオブジェクトは安心感を与えるが、鋭角のあるオブジェクトは緊張感から注目されやすい性質がある。エラーや留意事項を示す際には、円形のモチーフを使うより、三角形の尖ったモチーフを使用すると効果的。
11. 要素のグループ化
ゲシュタルトの法則：近接、類似性、連続性などの原理を用いて、関連する要素をグループ化する。人が何かを見るとき、無意識に「まとまり」として捉える傾向がある。主な原則は以下の通り：
近接（Proximity）：近くにあるもの同士をグループと捉える
同類（Similarity）：色、形、大きさなど共通したもの同士をグループと捉える
連続（Continuity）：連続的な要素同士をグループと捉える
閉合（Closure）：不完全な形状でも、脳はそれを補完し、完全なものと捉える
対称（Symmetry）：対になっているもの同士をグループと捉える
共同運命（Common Fate）：同じ方向に動く要素は一体感があり、共通の目的や関連性を感じさせる
図と地面（Figure & Ground）：図と地面（背景）の前後関係を区別して捉える
12. ページレイアウトの最適化
F型視線誘導の法則：ユーザーの視線の動きを考慮し、重要な情報を左上や左側に配置する。ユーザーがWebサイトを閲覧する際の視線の動きは、「F型」の形を取ることが多い。一般的に視線は右に移動し、その後左に戻り、最後に下に移動するパターンが多いため、画面の左上部や左側がより注目される傾向がある。リピートユーザーは通常、「F型」の動きを示しやすく、一方で初めて訪れるユーザーは全体の構造を理解するために「Z型」の動きをするとされている。縦書きの媒体、例えば書籍やパンフレットなどは、「N型」の動きがよく見られる。
13. 重要な要素の強調
孤立効果：特定の要素を他と差別化することで、注目を集める。特定の要素やオブジェクトを、孤立させるように他のものと差別化させると、人はそれに注意を向けやすくなる。例えばユーザーに選択して欲しい、重要な情報やおすすめなどの、色や形状を変えることで、視覚的に際立たせることができる。
14. 選択肢の適切な提示
ヒックの法則：選択肢が増えると反応時間が増加する。メニュー構造をシンプルに保ち、効率的な操作を可能にする。ヒックの法則を理解し適用することで、ユーザーの反応時間を最小限に抑え、効果的なユーザーエクスペリエンスを提供することが可能。例えば、ナビゲーションメニューで多くの選択肢がある場合、ヒックの法則に基づいてメニューの構造をシンプルに保つことが重要。また、フォームやオプションの選択肢も、ユーザーが迷わず効率的に操作できるように工夫することが求められる。
15. ポジティブな感情の重視
3対1の法則：ネガティブな要素1つに対し、3つ以上のポジティブな要素を提供する。人はポジティブな感情がネガティブな感情を上回るには、3つのポジティブな感情が必要と言われている。ポジティブ感情要素の例：エラーの原因表示、可愛らしさ、明るい色、スムーズさ、ステップ表示 (2/5など)、選択項目、ヒューマン感、5つ以下の選択肢、ローディングが速い、クリック要素が明確、クリック後が予想できる。ネガティブ感情要素の例：エラーメッセージ、タイムリミット、煩わしさ、暗い色、入力項目が多い、マシーン感、5つ以上の選択肢、ポップアップ広告、ローディングが遅い、クリック要素が不明確、クリック後が予想できない。
16. 情報提示の工夫
フレーミング効果：情報の表現方法によってユーザーの印象が変わる。ポジティブな表現を心がける。情報や選択肢を提示する際に、その言葉や表現の仕方がユーザーの意思決定や評価に影響を与える現象。例えば「失敗率10%」と「成功率90%」は意味は同じだが、与える印象は「成功率90%」の方がポジティブな影響を与えることができる。また、「肌に良いですか？」と聞くよりも、「肌に悪いですか？」と聞くと、異なる回答が得られる可能性がある。このように、状況に応じた適切なフレーミングを使い、ユーザーに対して意図した印象を与えることが求められる。
17. 記憶に残る情報配置
系列位置効果：最初と最後の情報が記憶に残りやすい。重要な情報はページの始めと終わりに配置する。初頭効果は最初に見たものが、新近効果は最後に見たものが記憶に残りやすい現象を指す。例えばユーザーが操作する手順や手続きがある場合、その手続きの最初と最後に特に注意を払うと良い。また文章やUIデザインにおいても、最初に要点を提示し、最後にまとめを述べることで、ユーザーの記憶に残りやすくなる。
18. 望ましい行動の促進
ナッジ：微細な助言や刺激を与え、ユーザーの望ましい行動を促す。過度な使用は避ける。良いナッジを設計するための6原則：
インセンティブ（iNcentives）：選択による心理的安全を確保する
マッピングの理解（Understand mappings）：選択とその結果の関係を分かりやすくする
デフォルト（Defaults）：迷う人向けに良い選択に導く
フィードバックを与える（Give feedback）：選択した結果をフィードバックによって正しく伝える
エラー予測（Expect error）：間違った選択を未然に防ぐ
複雑な選択の構造化（Structure complex choices）：複雑な選択を構造化し選択しやすくする
19. ユーザーの期待への対応
認知的不協和：ユーザーの期待と実際の挙動が一致しないと不快感を生む。期待に沿ったデザインを心がける。UIデザインでは、そのUIでどんな操作ができるか、ユーザーが感覚的に認知できることが重要。以下のようなユーザーの直感に反するUIデザインは避けるべき：
押せそうに見えないボタン
開きそうに見えない開閉メニュー
背後の画面が操作できそうに見えるモーダルウィンドウ
マウススクロールの動きに反する画面スクロール
物理法則に反するアニメーション
20. システム制約の最小化
ポステルの法則：ユーザー入力に対して寛容なデザインを心がけ、不必要な制約を避ける。これは「ロバストネス原則」とも呼ばれ、「送信するものに関しては厳密に、受け取るものに関しては寛容に」という考え方。UIデザインでは、ユーザーの入力に対して柔軟に対応し、エラーを最小限に抑えることが重要。例えば、日付入力フォームで様々な形式（2023/11/19, 2023-11-19, 20231119など）を受け付けられるようにすることで、ユーザーの利便性を高めることができる。
21. 単純接触効果
ユーザーが繰り返し接する要素や情報に対して、好感度や親近感が増す効果。UIデザインでは、重要な機能や情報を適度に繰り返し表示することで、ユーザーの理解と受容を促進できる。ただし、過度な繰り返しは逆効果になる可能性があるため、バランスが重要。
22. ピークエンドの法則
ユーザー体験の評価は、そのピーク（最も印象的な瞬間）と終了時の感情に大きく影響される。UIデザインでは、ユーザージャーニー全体を通じて、特に重要な場面や最後の印象に注力することが効果的。例えば、購入完了画面でのお礼メッセージや特典の提供など、最後に良い印象を残すことが重要。
23. プライミング効果
先行する刺激が後続の行動や判断に影響を与える現象。UIデザインでは、ユーザーの行動を促すために適切な文脈や視覚的手がかりを提供することが有効。例えば、ECサイトで「人気商品」というラベルを付けることで、ユーザーの購買意欲を高める効果がある。
24. 社会的証明
他者の行動や意見を参考にして自分の行動を決める傾向。UIデザインでは、ユーザーレビュー、購入数、「いいね」の数などを表示することで、製品やサービスの信頼性を高め、ユーザーの行動を促進できる。
25. 認知的負荷の最小化
ユーザーの認知的負荷を減らすことで、より良い体験を提供する。複雑な情報は段階的に提示し、視覚的階層を明確にすることで、ユーザーの理解と操作を容易にする。また、適切なマイクロインタラクションを用いて、ユーザーの行動に即時フィードバックを提供することも効果的。
26. エンダウメント効果
所有しているものに対して、実際の価値以上の価値を感じる傾向。UIデザインでは、ユーザーに「所有感」を与えることで、製品やサービスへの愛着を高めることができる。例えば、カスタマイズ機能の提供やパーソナライズされたコンテンツの表示などが効果的。
27. 選択のパラドックス
選択肢が多すぎると、かえって選択が困難になり、満足度が低下する現象。UIデザインでは、ユーザーに提示する選択肢を適切に絞り込み、意思決定を容易にすることが重要。必要に応じて、段階的な選択プロセスや推奨オプションの提示などを検討する。
28. アンカリング効果
最初に提示された情報（アンカー）が、その後の判断や意思決定に影響を与える現象。UIデザインでは、価格設定や製品比較などで活用できる。例えば、高価格の商品を先に表示することで、後続の中価格帯の商品がより魅力的に感じられるようになる。
<aside>
参考となる原則・心理学
ゲシュタルト心理学：人間の視覚認知に関する原則を提供
認知心理学：情報処理や意思決定プロセスに関する洞察を提供
行動経済学：ユーザーの意思決定に影響を与える要因を理解するのに役立つ
ユーザビリティ工学：効率的で使いやすいインターフェースの設計原則を提供
色彩心理学：色が人間の感情や行動に与える影響を理解するのに役立つ
情報アーキテクチャ：大量の情報を効果的に構造化し提示する方法を提供
人間工学：人間の身体的特性や制約を考慮したデザインの原則を提供
</aside>
これらの法則と効果を適切に組み合わせ、ユーザーの認知や行動特性を考慮したUIデザインを行うことで、より効果的で使いやすいインターフェースを実現できる。ただし、これらの法則を機械的に適用するのではなく、具体的な状況や目的に応じて柔軟に活用することが重要である。また、常にユーザーテストを行い、実際のユーザー行動を観察して改善を重ねることが、優れたUIデザインの鍵となる。