フィードバック
ユーザーが操作した後、その結果を画面上で素早く伝えるパターン。適切なフィードバックがないと、操作が成功したかどうかをユーザーが判断できない。
基本的な考え方
3 つの原則でフィードバックを設計する。
- 受動的に認識できること: ユーザーが特別な操作をしなくても、結果が画面に自動で表示されるようにする。操作後に「何も変わっていないように見える」状態はNG。
- 操作部の近くに表示する: フィードバックは操作した要素の近くに出す。画面の遠くに表示すると弱視のユーザーや集中しているユーザーが見逃す。
- エラーは原因と対処を伝える: 「エラーが発生しました」だけでなく、何が問題で、どうすれば解決できるかをセットで伝える。
操作タイプ別フィードバック
操作の種類ごとに適したコンポーネントと表示タイミングが異なる。
| タイミング | コンポーネント | 備考 |
|---|---|---|
| フォーム入力エラー（フォーカス離脱時） | Input の error 状態 + エラーメッセージ | 該当フィールドの直下に表示。スクロールが必要な場合は先頭エラーにフォーカスを移す |
| フォーム送信エラー（バリデーション失敗） | Input の error 状態 + ページ上部 Banner | 全エラー一覧をページ上部にまとめて表示し、各フィールドにもインラインで表示する |
| 処理中（同期・短時間） | Button の loading 状態 | ボタンを disabled にして処理中スピナーを表示。二重送信を防ぐ |
| 処理中（画面全体が変わる） | Spinner または ページローディング | 画面全体をローディング状態にする場合は、スケルトン UI または中央 Spinner を使う |
| 処理成功（同期） | Toast（success） | 画面右下に一時表示。3〜5 秒で自動消去。「保存しました」「送信しました」 |
| 処理失敗（同期） | Toast（error）または Banner | 自動消去しない。ユーザーが内容を確認してから閉じられるようにする |
| ページ読み込み失敗 | エラー画面（インラインまたは全画面） | 部分失敗はエリア内に Banner。全体失敗は専用エラーページ |
| 非同期処理完了（後から通知） | Toast（success）または Badge | AI 要約完了・テキスト化完了など。完了時点でトーストを出すか、項目に更新バッジを付ける |