#161
UI設計パターン
#161せいやく
制約
別名・表記:ConstraintPhysical ConstraintLogical ConstraintConstraints
UIXHERO Definition
「物理的に（またはシステム的に）できなくする」。そもそも間違えようがない状態を作ること。
概要
ドナルド・ノーマンが提唱したデザイン原則の一つ。 ユーザーの行動の選択肢を意図的に狭めることで、エラーの発生を防ぎ、正しい操作へと誘導する。
💡 使いどころ
ユーザーに特定の順序で操作させたい場合や、無効なデータの入力を防ぎたい場合。
⚠️ 注意点・誤用
制約が強すぎると、ユーザーがコントロール感を失い、ストレスを感じる場合がある。「なぜ操作できないのか」を適切にフィードバックする必要がある（グレーアウトの理由など）。
具体例
- 日付選択で、未来の日付を選べないようにグレーアウトする
- 必須項目を入力し終わるまで、送信ボタンを押せないようにする（Disabled）
- USB端子（逆向きには刺さらない物理的制約）
- ドロップダウンリスト（自由入力ではなく選択式にすることで表記ゆれを防ぐ）
出典・参考文献:
- Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.
- Nielsen, J. (1994). Usability Engineering. Morgan Kaufmann.