ユーザーの入力情報が正しい形式になっているかを判断する「フォームバリデーション」機能は、いまではほとんどすべてのホームページで実装されています。

フォームバリデーション機能は、ユーザーの誤入力を防ぐために有用な機能です。
しかし場合によっては、逆にUXの低下を招いてしまうこともあります。
今回は、UX上嫌われるフォームバリデーションの7つの禁じ手をご紹介します。

UX上嫌われるフォームバリデーションの7つの禁じ手

1. 入力フィールドを入力しはじめた途端にエラーメッセージを出してしまう

01.png
※ 自作イメージ

まず最初にご紹介したいのは、フォームを入力した途端にエラーメッセージが登場してしまうケースです。
キーボードを押した瞬間にエラーメッセージが登場してしまうので、当然ながらユーザーは戸惑ってしまいます。
入力フィールドが完全に入力されてはじめてエラーメッセージが消えますが、ユーザーにとっては気持ちいい形とは言えません。

こうしたバリデーションは、パスワードのような最低文字数が必要な場合に実装されることが多いです。
1文字目を入力した途端に、「最低でも8文字必要です」とエラーメッセージが出るので、ユーザーは戸惑ってしまうのです。

こうした戸惑いを避けるためには、ユーザーが完全に入力し終わってからバリデーションを開始することです。
そうでなければ、ユーザーはほとんどの時間をエラーメッセージとともに付き合うことになってしまいます。

2. フォーカスを外した途端にエラーメッセージが出てしまう

02.png
※ 自作イメージ

ユーザーがフォームに何も入力していないにもかかわらず、フォーカスを外した途端にエラーメッセージが出てしまうことがあります。
ユーザーが何かを入力する心の準備ができていて、次の項目から入力しようとした途端にエラーメッセージが登場してしまうので、ユーザーとしては面食らってしまいます。

これは、ユーザーがウィンドウを一時的に切り替えたり、パスワードマネジャーを使う際にもよく起こります。

入力フォームのフォーカスを外すとJavaScriptのonblurイベントが読み込まれ、バリデーションが始まってしまうのですが、何も入力をしていない場合にはバリデーションを行わないほうがよいでしょう。
ユーザーがタイピングを終えるまでバリデーションを待ったほうが、ユーザビリティが向上します。

3. 入力がすべて完了しないままにエラーメッセージが出てしまう

03.png
※ 自作イメージ

メールアドレスの入力フォームでよくあるのですが、入力がすべて完了しないままに「有効なメールアドレスではありません」とエラーが出てしまうことがあります。
極端な話、「.com」のドットを打ち込んだ時点でエラーメッセージが表示されてしまうのです。

結局のところ、これまでご紹介したすべてのポイントで言えることですが、ユーザーが入力するのを待たずしてエラーメッセージが出てしまうのは、バリデーションの禁じ手と言えます。
JavaScriptでonfocusやonkeypressイベントが設定されている場合には、本当にそれでいいのか、自分に問いかけてみましょう。

4. 送信ボタンを押したあとにエラーメッセージが出てしまう

04.png
※ 自作イメージ

送信ボタンを押してからサーバー側でバリデーションを行う、いわゆる「サーバーサイドバリデーション」は、UXの観点では絶対に避けるべきです。

サーバー側でバリデーションを行うということは、ユーザーが入力をしたりチェックボックスにチェックをしたりするのがリアルタイムにフィードバックされないことを意味しているので、場合によってはユーザーはあとで複数項目を修正しなければならなくなります。
基本はJavaScriptなどで、即時フィードバックができるようにするべきです。

こうしたサーバーサイドバリデーションは徐々に減ってはきているのですが、なぜか「ログインフォーム」は関係ないと思っている人が多いです。

ログインフォームでも、パスワードを打ち込んだ時に送信ボタンを押して、少し待ってからエラーメッセージが表示されてしまうと、時間をロスした気分になります。
極力送信ボタンを押す前にバリデーションを行なって、ユーザーに入力しているものが誤っていることを早めに伝えましょう。

5. エラーメッセージがユーザーの気づかないところで出ている

05.png
※ 自作イメージ

こちらもよくあることですが、エラーメッセージが画面の上方にまとまって出てしまうようなパターンです。

ページ上部にまとめてエラーメッセージが出るのは一見するとわかりやすいように思えますが、どこを修正しなければならないのかを結局ユーザーが見つける羽目になってしまうだけでなく、そもそもエラーメッセージが出ていることに気づかないユーザーも出てくるでしょう。

エラーメッセージが実際に修正する箇所と離れてしまうと、その部分を探さなければならないという手間が発生してしまいます。
エラーメッセージは、エラーが発生している箇所のすぐそばで、ユーザーの入力が完了したタイミングで表示するのが、一番効果が高いようです。

6. グリーンのチェックが出てくる箇所と出てこない箇所が混在している

06.png
※ 自作イメージ

入力フォームを入力し終わったあとにエラーがない場合に、グリーンのチェックマークで正しく入力していることを知らせるフィードバック自体は、ユーザーにとってもありがたい表示であることは間違いありません。

しかし、複数の入力フォームがある場合に、チェックマークが登場する箇所とそうではない箇所が混在してしまうと、チェックマークの出てこない箇所が本当に正しく入力されているのかが分からなくなってしまいます。

入力が正しいことを伝えるためにグリーンのチェックを表示するのであれば、すべての入力フォームにつけておいてください。
こうすれば、ユーザーは「これ、ちゃんと合ってるのかな？」と不安にならずに済むでしょう。

7. そもそもどのように修正すればいいのか分からない

07.png
※ 自作イメージ

せっかくバリデーションを実装したのに、逆にユーザーの足をひっぱってしまうのが、「そもそもどのように修正すればいいのか分からない」という現象です。
これは、意図的でないにしても発生してしまう現象です。

例えば、メールアドレスを入力する欄で、ユーザーがGmailのアドレスを入力したいときに「abcdefg@gmail.co」と入力してしまったとしましょう。
そこで、「メールアドレスが誤っています」と表示されても、ユーザーはすぐに何が間違っているか気づかないことがあります。

この場合、もっとも親切なのは、「もしかして、"abcdefg@gmail.com"ですか？」というように、修正案を提示してあげることです。
こうすれば、ユーザーは一見正しく入力したつもりになっていたのに「m」が抜けていた、という自分の過失に気づくことができるのです。