フォーム入力においてエラー表示は最もユーザーをイライラさせる瞬間の一つです。
やっとの思いで送信した途端、現れる大量のエラーにゲンナリ…という経験は
かなりの人がお持ちなのではないでしょうか。
エラー表示はユーザーにとってとにかくストレス。
そのためEFOにおいては、ユーザーがエラーを出さないための工夫を行うことが重要ですが、
やはりどうしてもエラーは出てしまうもの。
そこで今回は、
エラー表示でどれだけストレスを軽減するか
という観点で、最低限クリアしておきたいポイントをお伝えします。
悪い例その1：どの項目がエラーなのかわからない
よく、このようなフォームを見かけます。
ズラッと並ぶエラー文言に興ざめしてしまいますね。
さらに、これではどこでエラーが起きているのか文章を読み込まなければわかりません。
ではどうするか
エラー文言を対応する項目の位置に移動するだけです。
▼各項目の右横および下部にエラー文を移動
ほんの一手間ですが、これでどこがエラーなのかが一目瞭然となりました。
▼さらに、このように表現上も目立たせるとよりいっそうわかりやすくなります。
色や背景色などデザインを工夫することで視認性を向上させることも重要ですね。
悪い例その2：エラーをどう直せばいいのかわからない
▼このようなエラー表示を行うサイトがあるとします。
例えばこの項目が「会員登録フォームのメールアドレス入力欄」だとすると、
エラーの要因は以下の５パターン、存在するかもしれません。
- 必須項目なのに入力がされていない
- 入力形式が半角英数字ではない
- メールアドレスの形式になっていない（＠マークがない）
- 禁止文字列が含まれている（…ドットの羅列など）
- すでに入力したメールアドレスが登録されている（重複登録）
「エラーがあります」の文言のみで、
ユーザーが正しく入力内容を修正できる可能性はかなり低いでしょう。
エラー内容は、
「半角英数字で誤入力ください」
「ドットの羅列を含むメールアドレスを登録することはできません」
などと、できるだけ具体的に表示するのが親切です。
リアルタイムのエラーチェックが理想的
ここまで、ユーザーが一度入力内容を送信した際のエラー表示についてお話しました。
上記の施策でも、ある程度効果はありますが、
やはり「完璧に入力していたと思っていたのにエラーが出た…」というがっかり感を払拭することは不可能です。
そこで効果的なのがリアルタイムのエラー表示です。
▼入力し終わった時点でエラー判定を実施し、アラートを表示
入力を行ったその都度エラーを出すことで、
ユーザーはその場ですぐに修正を行うことができるため、
圧倒的にストレスを軽減することができます。
▼さらに、入力内容に問題がない場合に完了マーク（チェックマークなど）を表示
この例では入力が正しく行われているかがさらにわかりやすくなり、
なおかつユーザーに達成感を与えることも可能です。
より一層、エラーへのストレスを軽減できる施策だといえるでしょう。
まとめ
いかがだったでしょうか。今日のまとめは以下のとおりです。
- エラー文言の表示位置、デザイン、文言を工夫するだけでユーザーのストレスは軽減
- 劇的な改善を狙うならリアルタイムでのエラー判定は必須
- リアルタイム判定の表現の工夫次第で、さらに使い易いフォームに
どれも基本的なことですが、
離脱要因となりやすいエラー表示のストレスを取り除くことが
完了率に与えるインパクトは少なくないでしょう。
この機会にぜひ、エラー表示のユーザー体験を見直してみてはいかがでしょうか。
