フォーム入力時の「エラー表示」では、間違っている「位置」と「原因」をすぐに明示できている
利用者にとって、フォーム入力をするのはそもそも面倒なことです。だからこそ、利用者のストレスを軽減させるためにさまざまな工夫が必要と言えます。
ここでは、フォーム入力時において最もモチベーションを低下させる「エラー表示」を、どう改善するか考えてみましょう。
作業手順
「入力エラー」の際に、どのように表示しているかをチェックする
自社サイトのフォームを確認して、間違って入力した際の「エラー表示」を一度チェックしてみましょう。主なチェックのポイントは以下になります。
どの「位置」でエラーが発生したかが、一目でわかるようになっているか間違った入力をしたときに、エラーになった設問の入力枠の「色」が変わったり、アラート用の「アイコン」が表示されたりなどして、すぐにエラー箇所が特定しやすいと良いでしょう。文字・色・アイコンなどで目立つようにすると利用者にとってわかりやすいです。
エラーが発生してしまった「原因」を、その設問の付近に表示できているか
入力フォームの末尾にエラーをまとめて表示させているサイトもありますが、基本的にはエラーがあった設問の上下付近に、テキスト文字で理由を記述するのが良いです。できるだけ具体的にエラーの原因を指摘することで、利用者は悩まずに再入力しやすくなります。
入力したものがエラーであると認識したら、「リアルタイム」で指摘しているか
必須項目を空欄のままにしたり、機種依存文字の使用、半角全角などの間違いは、入力直後に検知できるものも多いため、すぐさまエラー表示することも可能です。すべて入力して送信した後に、エラー表示されると大変手間になるので、リアルタイムで指摘できるのが望ましいです。
※リアルタイムのエラー表示を「インラインバリデーション（Inline Validation）」と言いますが、実行する場合には、プログラミング実装する必要がありますので、社内のエンジニアに一度相談してみましょう。
エラーの「位置」と「原因」を明示できていなければ改善をおこなう
チェックした結果、エラーの発生した場所がわかりづらかったり、エラーの理由が表示されない、あるいは曖昧な表記だとしたら、「エラー表示」について一度再考してみましょう。
フォーム入力時のストレスは、実際に使ってみないとわからないところがあります。社内の何人かに実際にテストしてもらってエラー時にストレスを感じることがないかヒアリングしてみながら改善するのが望ましいです。
▼エラー表示例
まとめ
1つでも当てはまったらチェックしましょう。
- 「入力エラー」の際に、どのように表示されているかをチェックできた
- エラーの「位置」と「原因」の双方について改善して明示できた
