#042
UI設計パターン
#042えらーぼうし
エラー防止
別名・表記:Error Prevention防衛的デザイン
UIXHERO Definition
「転ばぬ先の杖」。ユーザーが間違える前に、間違えられないようにすること。
概要
ヤコブ・ニールセンのユーザビリティ10原則の一つ(第5原則)。 「優れたエラーメッセージも重要だが、そもそもエラーが発生しないように注意深く設計することの方がはるかに優れている」とされる。 エラーには、うっかりミス(スリップ)と、知識不足による勘違い(ミステイク)があり、それぞれに対策が必要。なお、エラー防止は起きる前、エラー回復は 起きた後。
UXでの活用
- 制約(Constraint): カレンダー入力で過去の日付を選べないようにするなど、システム側で無効な操作をブロックする。
- アフォーダンス: ボタンが「押せる」ように見える、リンクが「飛べる」ように見えるなど、正しい操作を視覚的に示唆する。
- デフォルト値: 最初から妥当な値を入力しておくことで、ユーザーの入力負荷とミスを減らす。
💡 使いどころ
フォーム入力、データ削除、決済完了など、ユーザーが失敗しやすい、または失敗したときの影響が大きい箇所で設計する。
⚠️ 注意点・誤用
過保護にしすぎると操作の手間が増える(確認ダイアログの乱用など。例:操作コスト増大・フロー中断・警告の形骸化 など)。「使いやすさ」と「安全性」のバランスが必要。
具体例
- 入力フォームで、半角英数字以外を入力できないようにする
- 検索ボックスで、入力候補(サジェスト)を表示してタイプミスを防ぐ
- 削除ボタンを赤くし、他のボタンと離して配置する
出典・参考文献:
- Nielsen, J. (1994). Enhancing the explanatory power of usability heuristics. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 152–158.
- Nielsen, J. (1995). 10 usability heuristics for user interface design. Nielsen Norman Group.
- Reason, J. (1990). Human error. Cambridge University Press.
- Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.