BLOGHP制作
入力エラーを直しやすくする｜消えない・迷わないフォーム設計
『入力内容に誤りがあります』だけでは、長いフォームを探し直すことになります。項目の近くで、何をどう直すかを具体的に示します。
先に結論エラー概要と項目別メッセージを結び、入力値を保持し、最初の問題へ移動します。
項目名・理由・直し方を書く
『電話番号』の『桁数が不足』しているので『市外局番から入力』など、対象と行動を示します。コードや内部項目名だけを表示しません。
全角・半角など自動で安全に整えられるものは利用者へ直させ過ぎません。条件が複雑な場合は入力前にも短く示します。
色だけでなく位置と文言で示す
エラー項目へ枠、アイコン、文言を組み合わせ、赤だけに頼りません。メッセージを項目ラベルと関連付け、読み上げでも場所が分かるようにします。
ページ上部にはエラー数とリンクを示し、各項目の近くにも直し方を置きます。固定ヘッダーの裏へ対象が隠れない位置へ移動します。
入力済み内容と添付を守る
エラー後に正常な項目を消さず、確認画面から戻っても保持します。パスワードやカード情報など安全上保持しない項目は理由を明確にします。
大きな添付や写真の再選択が必要な場合、送信前に形式・容量を確認します。途中保存と本送信を分け、下書きを確定扱いにしません。
通信失敗と入力不備を分ける
入力エラー、権限、通信切れ、サーバー失敗を同じ文言にしません。再試行してよいか、保存済みか、問い合わせ番号を表示します。
連打や戻る操作で二重登録せず、成功後は完了画面を示します。スマホ、文字拡大、キーボード、通信遮断で実際にエラーを発生させて確認します。
相談前にそろえるもの
- 対象・理由・直し方
- 色以外の表示
- エラー概要・項目リンク
- 入力・添付の保持
- 通信失敗・二重送信
全部そろっていなくても構いません。分かる範囲を確認し、業務ルールや金額に関わる部分は担当者と一緒に決めます。