ツァイガルニク効果
やりかけの作業は、終えた作業より記憶に残りやすい。未完了を見せると、続きをやりたくなる。
Zeigarnik Effect
なぜ効くか
1920 年代に心理学者 Bluma Zeigarnik が、途中で中断された課題のほうが完了した課題より思い出されやすいことを実験で示した（給仕が未払いの注文をよく覚えているという観察が発端とされる）。追試の結果は一定しないが、UI では「途中であることを見せると続けられる」という形で使われている。Web UI では、「3/5 完了」と残りを示すチェックリスト、進捗バー付きの多段階フォーム、手順のどこにいるかを示すステッパー、記事の残量を示す読み進めバー、変更があると消えない保存バー、全体のうちどこかを示すドット。共通するのは、終わりまでの距離と今の位置の両方が見えること。距離だけ見せると重く、位置だけ見せると終わりが分からない。
UIでの当て方
- 01手順があるものは、全体の段階数と現在位置を最初から最後まで見せる。完了した段階はチェックに変える。
- 02初期設定や書きかけは「あと N 件」「N/M 完了」の形で残量を数字で示し、次にやることを 1 つだけ提示する。
- 03未保存の変更がある間は、保存か破棄を選ぶまで消えない帯を出す。閉じても消えると未完了が伝わらない。
- 04長い読みものには読み進めた割合の細いバーを置く。残りが分かると最後まで読まれやすい。
誤用・反例
- 終わらない進捗（常に 80%）や、埋めても増える項目で、未完了を人工的に作り続ける。
- スキップできない手順にして、未完了の圧で離脱させる。
この原則を体現するパーツ
- クリック
プログレスチェックリスト
Progress Checklist
初期設定を促すチェックリスト。項目をクリックすると打ち消し線とチェックのアニメーションで完了扱いになり、上部のプログレスバーと「3/5 完了」カウンターが進む。
- JS
- 入力
ステップフォーム解説あり
Multi-Step Form (Wizard)
3ステップ（基本情報→住所→確認）を進捗バー付きで切り替え。次へ/戻るボタンと必須チェックを備え、最後に入力内容を確認表示する。
- JS
- クリック
ステッパー解説あり
Progress Stepper
カート→配送→決済→完了など手順の進捗を示すインジケータ。次へ/戻るボタンで進められる。
- JS
- クリック
チェックアウト画面実例あり
Checkout Flow
配送→支払い→確認の3ステップ。左に住所フォーム／支払い方法の選択カード、右に固定の注文サマリ。狭い画面ではサマリが上部の折りたたみになる。CTA の脇に安心の一言。
- JS
- 入力
設定画面
Settings Page
左ナビ（プロフィール/通知/課金/セキュリティ）で各セクションへ移動する設定画面。どこかを変更した瞬間に下から保存バーが現れ、保存か破棄を選ぶまで消えない。
- JS
- スクロール
スクロール進捗バー解説あり
Reading Progress Bar
ページ上部のバーが読み進めた割合を示す。長い記事で残量がわかって安心。
- JS
- クリック
ウォークスルー
Walkthrough (Coach Marks)
初回ガイド（コーチマーク）。暗転した画面で1つのUI要素だけをスポットライトで照らし、吹き出しの「次へ／スキップ」で3ステップ進むたびにハイライトが移動する。ドットで現在地を示す。
- JS
- クリック
ドーナツ進捗
Radial Progress (Donut)
SVGの stroke-dashoffset で指定%まで円弧が描かれ、中央に数値%がカウントアップで表示される。
- JS
関わるカテゴリ
出典
- Laws of UX別サイト ↗Zeigarnik Effect の項。Zeigarnik（1927）と追試の状況を紹介している。
- Nielsen Norman Group別サイト ↗進捗表示の種類と、待ち時間・手順の長さに応じた使い分け。