ヒックの法則
選択肢の数が増えるほど、決めるまでの時間は長くなる。増え方は対数的で、選択肢が等確率で・見慣れないほど効きが強い。
Hick's Law
なぜ効くか
1950 年代に William Hick と Ray Hyman が、ランプの点灯に対応するキーを押す反応時間を測り、選択肢の数の対数に比例して遅くなることを示した。ただし対象は「どれも同じくらい起こりうる、単純な選択」で、慣れた並びや検索できる一覧にはそのまま当てはまらない。Web UI で問題になるのは、初めて来た人に同格の入口を 8 つ並べるヒーロー、主 CTA と副 CTA が同じ強さで並ぶ帯、空のチャット画面で「何でも聞いてください」とだけ言われる状態。選択肢を減らせないときは、分類して段階を分けるか（まず対象者を選ばせる）、入力で絞り込ませるかで、一度に比べる数を減らす。
UIでの当て方
- 011 画面の主要な行動は 1 つにし、副次の行動は文字リンクや小さなボタンに格下げして視覚的な同格を避ける。
- 02入口が多いときは、先に「あなたはどちらか」で 2〜3 個に分岐させ、その先で細かい選択をさせる。
- 03選択肢が 10 を超えるメニューは検索欄を付け、入力で絞り込ませる。候補には見出しを付けて群ごとに読めるようにする。
- 04空の画面には「最初にやること」の候補を 3 つほど提示し、白紙で考えさせない。
誤用・反例
- 慣れた一覧（都道府県・アルファベット順）を無理に段階化して、かえって手数を増やす。
- 選択肢を減らすために必要な操作を隠し、結局は別の画面で探させる。
この原則を体現するパーツ
- スクロール
1画面1メッセージのヒーロー実例あり
One Message Per Screen Hero
見出し＋一行＋CTA 1つだけを1画面に置き、スクロールすると同じ構造の次のメッセージが現れます。スナップで1画面ずつ止まります。
- JS
- 静的
安心の一言つき CTA 帯実例あり
CTA Band with Reassurance
主 CTA は1つ、副 CTA は文字リンクに格下げした帯。ボタンの脇に「クレジットカード不要」「いつでも解約できます」と、押す前の不安に答える一言を添えます。
- CSSのみ
- クリック
対象者で分岐するヒーロー実例あり
Audience Split Hero
ヒーロー直下に「法人のお客さま／個人事業主・副業のお客さま」の2つの入口を置き、誰向けかで迷わせません。ホバーで持ち上がり、選ぶと案内が切り替わります。
- JS
- クリック
プロンプト候補チップ
Prompt Suggestion Chips
空のチャット画面に候補チップを並べ、タップすると入力欄に流し込まれ、AIの返答が1文字ずつストリーミング表示される。空白画面の離脱対策。
- JS
- ホバー
グループ分けサジェスト
Grouped Search Suggestions
入力に応じて候補を「商品／カテゴリ／記事」の見出し付きで出す。↑↓ で見出しをまたいで移動し、Enter で確定。何が起きるかは行の右に「商品ページ」「一覧」と示す。
- JS
- クリック
コマンドパレット解説あり
Command Palette
ボタンまたは ⌘K／Ctrl+K でコマンド検索オーバーレイを開き、入力で絞り込み、↑↓キーまたはタップで実行できる。
- JS
- クリック
アクションシート
Action Sheet
画面下からせり上がるiOS風のアクションシート。操作の一覧と、離れた位置の「キャンセル」を持ち、破壊的操作は朱色で示す。背景クリック・Escで閉じる。
- JS
関わるカテゴリ
出典
- Laws of UX別サイト ↗Hick's Law の項。Hick（1952）・Hyman（1953）の原典を参照している。
- Nielsen Norman Group別サイト ↗ヒューリスティック 8「美的で最小限のデザイン」。競合する情報を減らす根拠。