迷わせないデザイン:「ヒックの法則」で設計する意思決定ストレスのないメニュー
多くのWebサイトやスマートフォンアプリで、「ユーザーが必要とするすべての情報を網羅しよう」とするあまり、メニューや選択肢が過剰に配置されている場面に遭遇します。しかし、豊富な選択肢はユーザーの親切になるどころか、意思決定を遅らせ、離脱を招く最大の要因となります。この現象を認知心理学の観点から定式化したのが「ヒックの法則」です。人が情報を選び取る際の脳の特性を理解し、ストレスを感じさせないスムーズなUI/UXを実現するためのアプローチを考えます。
ヒックの法則とは?:選択肢と反応時間の関係
ヒックの法則(Hick’s Law)は、1952年にイギリスの心理学者ウィリアム・エドマンド・ヒックらによって提唱された認知心理学の法則です。
「選択肢の数が増えれば増えるほど、人が意思決定(反応)するまでの時間は対数関数的に増加する」
これを数学的な単純モデルにすると、選択肢の数を $n$ としたとき、意思決定にかかる時間 $T$ は以下の対数式で表されます。
$$T = b \cdot \log_2(n + 1)$$
ここで重要なのは、選択肢が1個から2個、2個から4個へと増える初期段階で、脳の処理時間(認知負荷)が急激に高まるという点です。例えば、サイトのグローバルナビゲーションに15個ものカテゴリーが同列に並んでいた場合、ユーザーはどの項目をクリックすべきかを見つけ出すだけで著しいストレスを感じてしまいます。
脳が一度に処理できる限界「マジカルナンバー」
なぜ選択肢が多すぎると脳はフリーズしてしまうのでしょうか。それは、人間の脳の一時的な情報置き場である「ワーキングメモリ(作業記憶)」の容量が非常に小さいためです。
認知心理学者のジョージ・ミラーは、人間が短期的に記憶できる情報の数は「$7 \pm 2$(5個から9個)」であるとし、これをマジカルナンバー7と名付けました。しかし、より最近の研究(ネルソン・コーワンらによる)では、特に注意を必要とするWebの操作環境下において、脳が確実に同時に処理できる限界はさらに少なく、**「$4 \pm 1$(3個から5個)」**であるという説が有力視されています。
つまり、メニューに並べる主要な選択肢は、多くても5つ以内に絞り込むのが、脳の構造上最もストレスが少ない設計と言えます。
意思決定コストを劇的に下げるUI設計の3ステップ
では、扱う情報や商品数が多いサービスにおいて、どのようにしてヒックの法則をクリアすればよいのでしょうか。以下の3つのデザインアプローチが有効です。
1. 段階的開示(Progressive Disclosure)を用いる
すべてのオプションをはじめから画面に表示するのではなく、必要な情報だけを順次開示していきます。例えば、ECサイトの購入手続きや登録フォーム(オンボーディング)では、1画面にすべての入力欄を並べるのではなく、「お届け先情報」「お支払い方法」「注文内容の確認」とプロセスをステップごとに分けることで、1画面あたりの選択肢を極限まで減らします。
2. カテゴリーを「チャンク化(構造化)」する
どうしても選択肢が多くなるグローバルメニューやフィルター画面では、関連する要素をいくつかの小さなグループ(チャンク)にまとめます。12個のメニューをそのまま並べるのではなく、上位の3つの大分類を作り、その下に子メニューとして展開することで、最初の意思決定にかかる負荷を $\log_2(3+1)$ まで下げることができます。
3. 「推奨」や「デフォルト」を提示する
選択肢を削れない場合は、ユーザーが最も選ぶ可能性の高い項目に「おすすめ」のラベルをつけたり、背景色を目立たせたりして視覚的ヒエラルキーを作ります。これにより、ユーザーは「比較検討する」という脳のステップをバイパスし、「推奨されたものを選択する」という最小限のエネルギーで進めるようになります。
まとめ
「選択肢を増やすことは、ユーザーに自由を与えることだ」という考え方は、UI/UXデザインにおいては幻想にすぎません。人間は選択肢が多すぎると、最終的に「選ばない(離脱する)」という決断を下してしまいます。メニューの項目やボタンの数を削り、順番に見せる工夫を凝らすこと。ヒックの法則に基づいた「迷わせない引き算のデザイン」こそが、ユーザーを目的の場所へ快適に導く道標となります。
お役立ち情報
- 📄 Laws of UX - Hick’s Law
- UI/UXデザイナーにとってのバイブル的なサイト「Laws of UX」のヒックの法則解説ページ(英語)。分かりやすいアニメーションと、実際の製品事例が紹介されています。
- 📄 U-Site - 選択肢は少なく:ヒックの法則
- 日本のユーザビリティ専門メディアによるヒックの法則の詳しい解説記事。マジカルナンバーとインターフェース設計の関係について実例を交えて解説されています。
出典: