フォームバリデーションデザイン時の4つのポイント

2022.02.25　Posted by Design team

Webデザイン

フォームバリデーションデザイン時の4つのポイントみなさん、こんにちは。ウェブラボデザイナーチームです。
Webサイトにおける入力フォームのデザインの大切さは既に広く知られていますよね。しかしそこで見落としがちなのがフォームの入力チェック機能である「バリデーション」のデザインです。
ユーザーの入力内容に誤りがある際にエラーの表示を出すだけ、と言ってしまえば簡単のようではありますが、ここに気をつけたいポイントがあるのです。
今回は基本的な注意点を4つご紹介いたします。

ポイント1：エラーメッセージにはポジティブな言葉を使う。

ユーザーにとって、ログインや問い合わせといったフォームを送信する動作は少なからず緊張するものです。そんなときに否定的なエラーメッセージが出ると、ユーザーは自分自身が重大なミスをしてしまったかのように感じてしまうでしょう。ここで必要以上に不安を感じてしまうと「なんだか怖いからやっぱり問い合わせはよそう」と引き返してしまう可能性もあります。とてももったいないですよね。

エラーメッセージではユーザーのミスを強調してはいけません。できるだけポジティブな言葉を使用して、修正するには何をすればいいかを促すような表現が良いでしょう。特に不安感を与えやすい、誤り、間違い、失敗、エラー、などの言葉は避け、やわらかい表現に言い換えられないか見直してみてください。

否定的なメッセージの例：
入力エラーです。〇〇〇〇に誤りがあります。

ポジティブなメッセージの例：
入力内容に不備があるようです。〇〇〇〇を正しく入力してください。

ポイント2：インラインバリデーションのメリットとデメリットに注意。

フォームにおいてバリデーションを行うタイミングには2つの種類があります。

まず一つ目は、フォームを送信するタイミングです。一度サーバーに入力内容を送信してからエラー内容をはき出すため、ページが切り替わる動作を経てエラーメッセージが表示される場合が多いです。一般的なWebサイトからのお問い合わせやECサイトでの注文など、様々なフォームでみられます。
二つ目が、リアルタイムで行う「インラインバリデーション」。入力と同時にバリデーションを実行します。サービスのログインフォームやアプリ（もしくはアプリ風のWebサービス）において特によくみられます。
このインラインバリデーションにはメリットとデメリットがあるため注意が必要です。

インラインバリデーションのメリット

入力が済んだタイミングでエラーメッセージが表示されるため、よく目立ちます。不備のあった箇所が明確ですぐに修正できるため、エラー項目を探して画面を行ったり来たりするなどのユーザーの負担がほぼゼロになります。

インラインバリデーションのデメリット

ユーザーの集中を欠いてしまうとされています。
フォームに必要事項を入力する際、一般的にユーザーはまず「入力」のタスクに集中します。何はともあれ全ての項目を入力する作業に意識を向け、全てを入力し終えたところでやっと「訂正」のタスクに移ります。
しかしインラインバリデーションを採用していると、「入力」と「訂正」のタスクが交互にやってくることになりますね。これが繰り返されるとユーザーの注意力が分散されてしまい、通常のタイミングでのバリデーションよりもミスが多くなるとの実験結果もあるようです。
ミスが多くなるとフォームの入力がより億劫に感じられてしまい、ユーザーの離脱につながるとの見方です。

以上のメリットとデメリットから、バリデーションのタイミングはフォームの項目の内容や量によって使い分けていくのがよさそうです。
特にインラインバリデーションに向いているのは厳しい条件のある項目です。「ユーザー名の登録」や「パスワード入力」はその良い例ですね。
まずユーザー名を登録する項目では、「他のユーザーと被ってはいけない」ルールが設けられている場合がほとんどです。登録したい名前が既に使われているものばかりでやきもきした経験のある方も多いのではないでしょうか。使いたい名前から被らないようなものを一つずつ試して送信していくのは骨が折れますよね。
そんなときにインラインバリデーションを採用しておけば、入力したそばから「このユーザー名は既に使用されています」「このユーザー名は使用できます」と判断を下せます。ユーザーのストレスも最小限に抑えられるでしょう。
続いてパスワード入力の項目では、「〇字以上」「数字を含まなければならない」などのルールが設けられているケースが多いです。厳しい条件をつけてユーザーに不便を強いるのは心苦しいですが、仕様上、安全性を高めるために避けられないこともありますよね。この場合はせめて細かいパスワードを何度も入力させないように、インラインバリデーションを採用してリアルタイムでパスワードのルールを確認する方法をとりましょう。

ポイント3：入力途中はエラーメッセージを出さない。

これはインラインバリデーションを採用する際に気をつけたいポイントです。
入力と同時にエラーがわかって便利ではありますが、今まさに入力している真っ最中にもかかわらずエラーメッセージが表示される仕様は気分のいいものではありません。特にパスワードのような最小文字数制限がある項目においてしばしば見られますね。1文字目を入力したところで「パスワードは最低〇文字以上です」とエラーメッセージを出されるとなんとなく気が急いてしまいます。
バリデーションのタイミングは、せめて入力エリアのフォーカスが外れてからにしましょう。

ポイント4：エラーメッセージを配置する場所に注意。

これはフォーム送信後にバリデーションをする際に気をつけたいポイントです。
エラーメッセージを配置すべき場所は、ファーストビューとエラーが出ている項目のそばの2箇所です。どちらかだけでは親切なフォームとはいえません。

①ファーストビュー

まずは、一番最初にユーザーの目に入る場所にエラーがある事実を知らせるメッセージを入れましょう。
実際にエラーが出ている項目がフォームの下部にあった場合、ユーザーはすぐに気づくことができずなぜ送信されないのかと不安になってしまうでしょう。もしくは、一度画面が切り替わっているので「既に送信されたのだな」と勘違いしてしまう可能性もありますね。あの会社に問い合わせたはずなのに返事がこない、なんて事態になったら大変です。
仮にエラーが出ているのに気づいたとしても、特にスマホでは何度もスクロールしてエラー項目を探し回らなければなりません。ユーザーにとっては大変なストレスです。
一番最初に目に入るファーストビューでエラーが出ている項目をお知らせし、ユーザーを安心させましょう。

②エラーが出ている項目のそば

ファーストビューにおいてどの項目でエラーが出ているのかを大まかに示したら、次は各項目のそばに具体的な修正内容を指示するメッセージを配置しましょう。
例えば入力エラーが複数個あった場合、ファーストビューのメッセージだけではユーザーは全てのエラー内容を覚えて各項目まで辿り着かなければなりません。これではちょっと不親切ですもんね。
さらに、すばやくスクロールしてもエラー項目が目に止まるよう修正指示の文字や入力欄は目立つ色に変えておくのが一般的です。ユーザーがひと目でエラー箇所を見つけられるよう配慮しておきましょう。