Laws of UX
人がどのように見る、記憶する、決定する、行動するかに関する30の原則を実用的なツールキットとして提供します。それぞれの原則は、実際のインターフェースで行う意思決定に変換されています。これらはスタイルの好みではなく、知覚と認知の研究に基づいており、プラットフォーム、時代、ビジュアルトレンドを超えて有効です。
このスキルを使用して、新しいUIを設計したり、既存の画面が「しっくりこない」理由を診断したり、デザインの決定を好みではなく理由で裏付けたりできます。
UXパスの実行方法
- 症状を特定する。 「ボタンが多すぎる」「遅く感じる」「フォームを離脱する人がいる」「誰もCTAに気づかない」。症状は原則にマッピングされます。以下のインデックスはそのように整理されています。
- 関連する1~3の原則を引き出し、
reference/laws.mdの完全なエントリを読む。定義だけでなく、メカニズムと落とし穴を読んでください。そこに有用なニュアンスが詰まっています。 - この画面に対する具体的な変更を提案し、原則名を引用して、理由が監査可能になるようにする。「コントラストを高める」ではなく、「フォン・レストルフ効果:プライマリアクションを唯一の塗りつぶしボタンにして、周囲の3つのゴーストボタンと競合しないようにする」のように。
- 競合を確認する。 原則は互いに引き合います。余白が多い(プラグナンツの法則) vs. より多くの可視オプション(発見可能性)。シンプルさ(オッカムの剃刀)には下限がある(テスラーの法則)。意図的に解決し、一つの法則を盲目的に適用しない。
- 重大な場合はユーザーと検証する。 これらの原則は行動をよく予測しますが、テストの代替にはなりません。特に美的ユーザビリティ効果は、見た目の良いデザインが壊れたタスクを隠す可能性があることを警告しています。
30の原則:分類別
知覚とビジュアルグルーピング(ゲシュタルト) — 誰も言葉を読む前に、目が画面をどのように整理するか。
- 近接の法則・共通領域の法則・類似性の法則・一様連結性の法則・プラグナンツの法則・フォン・レストルフ効果・選択的注意・美的ユーザビリティ効果
記憶と注意 — UIを使用中に人が頭の中に保持できるもの。
- ミラーの法則・ワーキングメモリ・チャンキング・系列位置効果・認知負荷・ツァイガルニク効果・ピークエンドの法則
意思決定 — 選択がどのように行われ、どこで停滞するか。
- ヒックの法則・選択過多・認知バイアス・オッカムの剃刀・パレートの法則
インタラクションとパフォーマンス — 速度、労力、動き、勢い。
- フィッツの法則・ドハティの閾値・フロー・目標勾配効果・パーキンソンの法則
期待とメンタルモデル — ユーザーが到着する前に何を想定しているか。
- ヤコブの法則・メンタルモデル・アクティブユーザーのパラドックス・ポステルの法則・テスラーの法則
インデックス — こんな時に活用しよう…
| 原則 | こんな時に… |
|---|---|
| 美的ユーザビリティ効果 | なぜより美しいデザインが「より簡単」と評価されるのか、そしてそれがなぜ罠なのかを知る必要があるとき。 |
| 選択過多 | 選択肢が多すぎて、人が固まったり、判断を誤ったり、離脱したりするとき。 |
| チャンキング | 密度の高いコンテンツや長い文字列を、スキャンしやすくグループ化する必要があるとき。 |
| 認知バイアス | 決定が「合理的」から歪むとき — フレーミング、デフォルト、アンカリング、確証バイアス。 |
| 認知負荷 | インターフェースが脳に一度に保持または処理させる情報が多すぎるとき。 |
| ドハティの閾値 | 何かが遅く感じられる、応答が約400msを超える、ローディング状態が必要なとき。 |
| フィッツの法則 | ボタン、リンク、タッチターゲットのサイズと配置を決めるとき。 |
| フロー | ユーザーを没入させ続ける、チャレンジとスキルを一致させる、摩擦を取り除くとき。 |
| 目標勾配効果 | 完了を動機付ける、終わりに近づくにつれて加速する進捗のため。 |
| ヒックの法則 | 選択肢の数と複雑さに応じて決定時間が急増するとき。 |
| ヤコブの法則 | ユーザーがあなたのUIが他の既知のUIと同様に動作することを期待するとき。 |
| 共通領域の法則 | 境界線、カード、背景、コンテナでグループ化するとき。 |
| 近接の法則 | 間隔だけでグループ化する — 近いものは関連していると読まれる。 |
| プラグナンツの法則 | 視覚的な複雑さを減らす — 目は最も単純な読み方を好む。 |
| 類似性の法則 | 見た目が似ていることは機能が似ていることを示唆する(リンク vs. プレーンテキスト)。 |
| 一様連結性の法則 | 線、枠、共有コンテナで関連アイテムを結びつける。 |
| メンタルモデル | ユーザーが既にその仕組みがどう動くべきだと信じているかに合わせる。 |
| ミラーの法則 | ワーキングメモリは小さい(約7±2チャンク)。チャンク化するが、制限しすぎない。 |
| オッカムの剃刀 | その存在価値を証明できないすべての要素を削除する。 |
| アクティブユーザーのパラドックス | ユーザーはドキュメントを読まない。コンテキスト内で、インラインで、ジャストインタイムで教える。 |
| パレートの法則 | 価値の約80%を生み出す約20%の機能に労力を集中する。 |
| パーキンソンの法則 | タスクは与えられた時間いっぱいに膨張する。ステップを短縮し、自動入力し、期待値を設定する。 |
| ピークエンドの法則 | 最も強烈な瞬間とエンディングを意図的にデザインする。 |
| ポステルの法則 | 入力を寛大に受け入れ、出力はクリーンで予測可能にする。 |
| 選択的注意 | 人は多くのものを無視する。バナーブラインドネスと変化盲を避ける。 |
| 系列位置効果 | 最初と最後の項目が記憶に残る。主要なアクションは端に配置する。 |
| テスラーの法則 | 一部の複雑さは削減できない — システムに負わせ、ユーザーには負わせない。 |
| フォン・レストルフ効果 | 重要なものを視覚的に際立たせる(広告のように偽らないで)。 |
| ワーキングメモリ | 想起よりも再認をサポートする。画面間で状態を引き継ぐ。 |
| ツァイガルニク効果 | 未完了のタスクは注意を引く。進捗キューを使って完了を促す。 |
レディメイドコンビネーション
- 混雑した画面を整理する → オッカムの剃刀 + 近接の法則 + ミラーの法則。
- 遅く感じるフローを解消する → ドハティの閾値 + 目標勾配効果 + 楽観的UI。
- 混乱する新機能を修正する → ヤコブの法則 + メンタルモデル + アクティブユーザーのパラドックス。
- 放棄されたフォームを救う → ヒックの法則 + パーキンソンの法則 + ポステルの法則 + 進捗キュー(ツァイガルニク効果 / 目標勾配効果)。
- ランディングページを磨く → フォン・レストルフ効果 + 選択的注意 + 系列位置効果 + ピークエンドの法則。
各原則の完全なエントリ(メカニズム、適用方法、落とし穴、実例)は、reference/laws.md にあります。