認知負荷
画面を理解し操作するのに使う頭の容量には限りがある。目的に関係ない読み取り・記憶・判断を減らすほど、本来の作業に頭を使える。
Cognitive Load
なぜ効くか
教育心理学者 John Sweller が 1980 年代に提唱した理論で、負荷を「課題そのものの難しさ（内在的）」「提示の仕方が生む余計な負荷（外在的）」「理解を作る負荷（学習的）」に分ける。UI で減らせるのは外在的な負荷で、NN/g はこれを「視覚のごちゃつき」「不要な選択」「記憶に頼らせる操作」の 3 つに整理している。Web UI では、誇張のない見出しと下線リンク＋一行説明だけの目次、見出し→本文→CTA を読む順に出す演出、変わった桁だけ回る数字、一覧から詳細へ位置を保って広がるカード、押す前に「その条件なら何件か」を出すチップ、その場で編集できる欄、形が変わらないスケルトンからの差し替え。どれも「探す・覚える・比べる」の手間を画面側が肩代わりしている。
UIでの当て方
- 01画面の要素は「その作業に要るか」で残す。装飾・形容詞・重複する導線は削り、主役を 1 つにする。
- 02変化は差分だけ動かす。全部を描き直すと、どこが変わったかを探す負荷が生まれる。
- 03文脈を保ったまま詳細へ進む。別画面へ飛ばさず、その場で広げる・その場で編集する形にする。
- 04判断に要る情報（件数・結果の予告・現在の値）は、操作の前に操作の近くへ出す。覚えて別の場所で使わせない。
- 05読み込みや切り替えでレイアウトを動かさない。形が変わると視線の再配置が要る。
誤用・反例
- 減らしすぎて、必要なラベルやヘルプまで消す。内在的な負荷は減らせない。
- 「シンプル」を理由にアイコンだけにし、意味を推測させる。
この原則を体現するパーツ
- ホバー
誇張しない目次型セクション実例あり
Plain Table-of-Contents Section
「堅牢で、使いやすい。それだけです」のような平文の見出しと、下線リンク＋一行説明の縦並びだけで製品を紹介するセクション。装飾を足さず、言葉で信頼を作ります。
- CSSのみ
- クリック
見出し→本文→CTA の順出し
Sequential Entrance
ヒーローの要素を、見出し・本文・CTA の順に 80ms ずつ遅らせて fade+rise で出す。読む順番と現れる順番を揃えると、視線が自然に CTA へ着地する。
- JS
- クリック
差分の桁だけ回る数字
Digit Roll Ticker (changed digits only)
桁ごとに 0〜9 を縦に並べた帯をずらして表示する数字スロット。値を更新すると変わった桁だけが回り、変わらない桁は静止するので、どこが動いたかが一目で分かる。
- JS
- クリック
カード→詳細のモーフ
FLIP Layout Morph (Card to Detail)
一覧のカードを押すと、その位置と大きさを計測して枠いっぱいの詳細へ拡大する（FLIP）。閉じると同じ経路で元のカードへ戻るので、どこから来たかを見失わない。
- JS
- クリック
複数選択フィルタチップ実例あり
Multi-Select Filter Chips
カテゴリ・価格帯・在庫のチップで商品を絞り込む。同じ群の中は OR、群をまたぐと AND。各チップに「今押したら何件か」を出し、0件は押せない色にする。
- JS
- 入力
インライン編集
Inline Editing
テキストをクリック／タップでその場編集に切り替え、Enter または保存ボタンで確定、Esc またはキャンセルで元に戻す。
- JS
- クリック
スケルトン→本文クロスフェード
Skeleton Crossfade
スケルトンと本文を同じグリッドセルに重ねて置き、読み込み完了で不透明度だけを入れ替える。要素の差し替えをしないのでレイアウトシフトが起きない。
- JS
関わるカテゴリ
出典
- Nielsen Norman Group別サイト ↗認知負荷を減らす設計: ごちゃつき・不要な選択・記憶への依存を減らす。
- Laws of UX別サイト ↗Cognitive Load の項。Sweller の理論の 3 分類を紹介している。