エラーの防止と回復
間違いは起きる前に起きにくくし、起きたら原因と直し方をその場で示し、取り返しのつく形にする。良いエラー表示より、エラーが出ない設計が先。
Error Prevention and Recovery
なぜ効くか
Nielsen のヒューリスティック 5「エラーの防止」と 9「エラーの認識・診断・回復」に対応する。NN/g はエラーを「うっかり（slip）」と「思い違い（mistake）」に分け、前者は入力の整形・制約・確認で、後者は選択肢の見せ方と説明で減らせるとしている。Web UI での防止は、数字以外を弾いて自動整形する電話番号欄、0 件になる選択肢を先に押せなくするファセット、変更があるまで保存バーを出さない設定画面。回復は、削除を即実行せず数秒の取り消しを置くスナックバー、送信時のエラーを先頭にまとめて各欄へ飛べるサマリ、打ち間違いに「もしかして」を出す検索。確認ダイアログは最後の手段で、頻発すると読まずに OK を押す習慣を作る。
UIでの当て方
- 01入力は形式を強制するより、入力に合わせて整形する。数字だけの欄は inputmode=numeric にし、区切りは自動で入れる。
- 02結果が 0 件・無効になる選択肢は、選ぶ前に淡色にして件数を添える。押してから「ありません」と言わせない。
- 03取り消せる操作（削除・アーカイブ）は確認せず即実行し、数秒間の「取り消す」を出す。取り消せない操作だけ確認を挟む。
- 04フォームの送信エラーは先頭にまとめてフォーカスを移し、各項目へのリンクと具体的な直し方を書く。
- 05破壊的な項目はメニューの末尾に離して置き、色で区別する。キャンセルはそれらから離した位置にする。
誤用・反例
- あらゆる操作に確認ダイアログを付け、本当に危険な操作の確認まで読み飛ばされる。
- エラーメッセージが「入力が不正です」だけで、どの欄をどう直せばいいか書いていない。
この原則を体現するパーツ
- 入力
入力マスク
Input Mask
電話番号を入力すると自動整形（03-1234-5678 形式）。数字以外は無視され、入力がスムーズになる。
- JS
- クリック
ファセット絞り込み実例あり
Faceted Navigation
ブランド・素材・色のチェックボックスで絞り込む。1つ選ぶたびに他のファセットの件数が再計算され、0件になる選択肢は淡色で押せなくなる。PC は左サイドバー、狭い幅は上に積む。
- JS
- 入力
設定画面
Settings Page
左ナビ（プロフィール/通知/課金/セキュリティ）で各セクションへ移動する設定画面。どこかを変更した瞬間に下から保存バーが現れ、保存か破棄を選ぶまで消えない。
- JS
- ホバー
スナックバー＋取り消し解説あり
Snackbar with Undo
リスト項目を削除すると「削除しました ［取り消す］」が下部に出て3秒で自動消滅。取り消しで元に戻る。
- JS
- クリック
確認ダイアログ
Confirmation Dialog
「本当に削除しますか？」をOK/キャンセルで確認。破壊的操作の前に一歩置く確認UIのパターン。
- JS
- 入力
エラーサマリ解説あり実例あり
Error Summary
送信すると先頭に「3 件の入力に問題があります」が現れてフォーカスが移り、各項目へのリンクで飛べる。項目側は aria-invalid と aria-describedby で理由が読まれる。
- JS
- 入力
もしかして
Did You Mean
「ぶらうざ」のようなかな違い・打ち間違いで0件になったとき、辞書との編集距離が近い語を「もしかして: ブラウザ」と提案する。押すとその語で検索し直す。
- JS
- クリック
アクションシート
Action Sheet
画面下からせり上がるiOS風のアクションシート。操作の一覧と、離れた位置の「キャンセル」を持ち、破壊的操作は朱色で示す。背景クリック・Escで閉じる。
- JS
関わるカテゴリ
出典
- Nielsen Norman Group別サイト ↗うっかり（slip）を防ぐ設計: 制約・提案・整形・取り消し。
- Nielsen Norman Group別サイト ↗ヒューリスティック 5「エラーの防止」と 9「エラーからの回復」。