このワイヤーの特徴
間違いに、入力した直後に気づける
送信ボタンを押してからまとめて指摘されると、読み手は上に戻って、どこを直すのかを探すことになります。次の欄へ移った時点でその項目を確認するので、入力した直後に、その場で直せます。
入力の途中では、エラーを出さない
メールアドレスを入れ始めた瞬間に「形式が正しくありません」と出ると、まだ途中なのに責められているように感じます。判定は欄から離れたときに行うので、入力している間は邪魔をしません。
直した時点でエラーが消え、直ったことが分かる
一度出たエラーが送信するまで残っていると、直せたのかどうかが分かりません。エラーを出した項目は入力のたびに判定し直し、正しくなった時点で消すので、直ったことがすぐ分かります。
直さなくてよい違いは、エラーにしない
全角の数字や、ハイフンのあるなしで入力を拒まれると、読み手には理由が分かりにくくなります。意味を変えず安全に整えられる違いは受け付けてから整えるので、エラーの数そのものを減らせます。
SPでは、エラーが入力欄のすぐ下に出る
SPでは、エラーが画面の上の方にまとめて出ると、見るために画面を行き来することになります。エラーを入力欄のすぐ下に出し、画面の位置は動かさないので、入力の流れを止めずに直せます。
制作時のよくある失敗
1文字目を入れた瞬間に、エラーが出る
入力している途中から判定すると、正しく入力している人にもエラーが出続けます。
判定は、欄から離れたときに行います。
直しても、エラーが消えない
エラーが送信するまで消えない作りだと、読み手は直せたのかどうか分からず、同じ欄を何度も見直すことになります。
一度エラーを出した項目は、入力のたびに判定し直して、正しくなった時点で消します。
エラーの文が「入力内容が正しくありません」だけ
何が違うのか、どう直せばよいのかが書かれていないと、読み手は試行錯誤するしかありません。
何を確認すればよいかを示し、正しい形の例を添えます。
全角の数字やハイフンのあるなしを、エラーにしている
電話番号や郵便番号で、全角の数字やハイフンの有無を理由に入力を拒むと、読み手は何が悪いのか分かりにくくなります。
意味を変えず安全に整えられる違いは受け付けて、送信する前に整えます。
すべて正しくなるまで、送信ボタンを押せない
送信ボタンが押せない理由が画面から分からないと、読み手はそこで止まってしまいます。
送信ボタンは押せる状態にしておき、押したときに足りない項目をまとめて示します。
よくある質問
エラーは、どのタイミングで出すのがよいですか?
適したタイミングは、フォームや項目によって変わります。
このワイヤーでは、入力中にエラーを出さないよう、入力欄から次の欄へ移ったときに最初の判定を行います。
一度エラーを出した項目は、入力するたびに判定し直し、正しくなった時点で消します。
正しく入力できたときの表示は、必要ですか?
必ずしも必要ではありません。
メールアドレスや郵便番号など、形式が決まった項目で控えめに示す程度なら、入力の手応えになります。
名前やご要望のように正解のない項目にまで表示すると、かえって意味が分かりにくくなります。
その場で確認していれば、送信時の確認はいりませんか?
送信時の確認も必要です。
その場の確認は、入力した欄にしか働かないため、一度も触れていない必須の項目は見落とされます。
送信時にも全項目を確認し、足りない項目をフォームの上部に一覧で示します。
サーバー側でも同じ内容を確認します。
1ページ完結型の送信時のエラー表示と、どう違いますか?
1ページ完結型は、送信ボタンを押したときにまとめて確認し、上部の一覧と各項目の下にエラーを示します。
その場エラー表示型は、それに加えて、各項目を入力した直後にも確認します。
形式が決まった項目が多いほど、その場で直せる利点が大きくなります。
