#518
インタラクション・アニメーション
#518ふぃーどふぉわーど
フィードフォワード
別名・表記:Feedforward事前フィードバック予告
UIXHERO Definition
UIXHEROでは、フィードフォワードを「操作する前に、その操作が何を起こすかをユーザーに伝える手がかり」と定義する。
概要
インタラクションを時間軸で見ると、情報の提示には3つのタイミングがある。
- 操作前(フィードフォワード): これを押すと何が起きるか
- 操作中: 今どこまで進んだか
- 操作後(フィードバック): 何が起きたか
多くのUIはフィードバックには気を配るが、フィードフォワードが抜けやすい。結果を見てから取り消せる操作なら問題は小さいが、取り消せない操作では、事前に伝わっていないこと自体が欠陥になる。
UXでの活用
- ラベルの具体化: 「OK」「実行」といった汎用ラベルを、結果を述べる動詞句に置き換える。
- プレビュー: ドラッグ&ドロップの着地点表示、フィルタ適用前の該当件数表示など。
- エラーの予防: ニールセンの第5原則「エラーの予防」は、事後のエラーメッセージより事前の設計を優先する。フィードフォワードはその具体的手段のひとつ。
誤用・混乱
- 警告ダイアログの多用とは違う: 「本当によろしいですか?」を並べることはフィードフォワードの改善ではない。確認の連打はやがて読み飛ばされる。何が起きるかを操作要素そのものに書くほうが効く。
- フィードバックの代わりにはならない: 事前に伝えても、実行後に結果を示さなければ状態がわからない。両方が必要である。
- 概念の境界は文献で異なる: フィードフォワードをシグニファイアの一種とみなす整理もある。用語を厳密に主張するより、伝えたい情報とタイミングを合意するほうが実務では有効。
💡 使いどころ
操作の結果が取り返しのつかない場合、または操作の結果が直感的に予想できない場合。実行してから知らせるフィードバックだけでは遅い場面で使う。
⚠️ 注意点・誤用
フィードフォワードはアフォーダンスやシグニファイアと重なる概念で、文献によって切り分けが異なる。「操作可能であること」を伝えるのがシグニファイア、「操作すると何が起きるか」を伝えるのがフィードフォワード、と整理すると実務では扱いやすい。
具体例
- 削除ボタンのラベルを「削除」ではなく「3件を完全に削除」にする
- ドラッグ中に、ドロップ先が枠線でハイライトされる
- 送信ボタンの下に「送信後に取り消しはできません」と明示する
出典・参考文献:
- Beyond Feedback: Feedforward in Gesture-Based Interaction (Vermeulen et al., 2013)
- The Design of Everyday Things (Donald Norman)
関連する解説記事
UIデザイン
フィードバックとフィードフォワードの違いとは?UIにおける「事後」と「事前」の設計
UIXHERO POINT
- •UIXHEROでは、フィードバックを「操作後に結果を伝える」、フィードフォワードを「操作前に結果を予告する」と定義し区別する。
- •フィードバックは「何が起きたか」を伝え、フィードフォワードは「何が起きるか」を伝える。両方を組み合わせることで、ユーザーは安心して操作できる。
UI設計パターン
フィードバック (Feedback)
ユーザーの操作に対してシステムが反応を返さないUIは、沈黙という最悪の体験を生む。あらゆる操作に適切な反応を返し、ユーザーとシステムの対話を成立させる設計原則。