入力エラーと送信失敗から回復できるフォームにする | Web Parts Library

解決する問題

入力内容に問題がある時や送信処理が失敗した時に、利用者が修正箇所と次の操作を判断できない。

発生条件

必須項目や形式検証を持つ入力フォーム。
ファイル選択または送信処理に失敗状態がある画面。

原因候補

エラー要約と項目エラーが結び付いていない
どこを直すか画面上で追えない。
失敗時に入力値や選択内容を消している
再試行前に同じ内容を入力し直す必要がある。

推奨判断

項目単位の説明、先頭のエラー要約、入力値保持、明示的な再試行を組み合わせ、失敗後も修正可能な状態を保つ。

修正手順

失敗を分類する
入力不備と送信失敗を別状態として表示する
期待する結果: 利用者が修正か再試行かを選べる。
修正箇所へ導く
要約から該当項目へ移動でき、項目付近にも理由を表示する
期待する結果: キーボードでも修正対象へ到達できる。
再試行を安全にする
値を保持し、処理中は重複送信を止め、失敗後に再試行を戻す
期待する結果: 二重処理を起こさず同じ内容で再送できる。

失敗例

色だけで不正項目を示す
起こること: 理由と対象を判別しにくい
代わりに: 文言と関連付けを併用する。
失敗時にフォームを初期化する
起こること: 修正コストが増えて離脱しやすい
代わりに: 安全な入力値を保持して再試行を提示する。

検証方法

未入力と形式不正を送信する
要約と項目説明が同じ不備を示す。
送信失敗を再現する
入力値が残り、再試行操作が利用できる。
処理中に操作を連打する
送信処理が重複しない。