フォーム最大の関門<エラー表示>のストレスを軽減する基本施策

フォーム入力においてエラー表示は最もユーザーをイライラさせる瞬間の一つです。

やっとの思いで送信した途端、現れる大量のエラーにゲンナリ…という経験は
かなりの人がお持ちなのではないでしょうか。

エラー表示はユーザーにとってとにかくストレス。
そのためEFOにおいては、ユーザーがエラーを出さないための工夫を行うことが重要ですが、
やはりどうしてもエラーは出てしまうもの。

そこで今回は、
エラー表示でどれだけストレスを軽減するか
という観点で、最低限クリアしておきたいポイントをお伝えします。

悪い例その1:どの項目がエラーなのかわからない

よく、このようなフォームを見かけます。

フォーム上部にまとめて表示されるエラー文言

ズラッと並ぶエラー文言に興ざめしてしまいますね。
さらに、これではどこでエラーが起きているのか文章を読み込まなければわかりません

ではどうするか

エラー文言を対応する項目の位置に移動するだけです。

▼各項目の右横および下部にエラー文を移動
エラー文言の位置を調整
ほんの一手間ですが、これでどこがエラーなのかが一目瞭然となりました。

▼さらに、このように表現上も目立たせるとよりいっそうわかりやすくなります。
エラー箇所をデザインで強調
色や背景色などデザインを工夫することで視認性を向上させることも重要ですね。

悪い例その2:エラーをどう直せばいいのかわからない

▼このようなエラー表示を行うサイトがあるとします。
エラー文言の悪い例

例えばこの項目が「会員登録フォームのメールアドレス入力欄」だとすると、
エラーの要因は以下の5パターン、存在するかもしれません。

  • 必須項目なのに入力がされていない
  • 入力形式が半角英数字ではない
  • メールアドレスの形式になっていない(@マークがない)
  • 禁止文字列が含まれている(…ドットの羅列など)
  • すでに入力したメールアドレスが登録されている(重複登録)

「エラーがあります」の文言のみで、
ユーザーが正しく入力内容を修正できる可能性はかなり低いでしょう。

エラー内容は、
「半角英数字で誤入力ください」
「ドットの羅列を含むメールアドレスを登録することはできません」
などと、できるだけ具体的に表示するのが親切です。

リアルタイムのエラーチェックが理想的

ここまで、ユーザーが一度入力内容を送信した際のエラー表示についてお話しました。
上記の施策でも、ある程度効果はありますが、
やはり「完璧に入力していたと思っていたのにエラーが出た…」というがっかり感を払拭することは不可能です。

そこで効果的なのがリアルタイムのエラー表示です。

▼入力し終わった時点でエラー判定を実施し、アラートを表示
リアルタイムアラート表示

入力を行ったその都度エラーを出すことで、
ユーザーはその場ですぐに修正を行うことができるため、
圧倒的にストレスを軽減することができます。

▼さらに、入力内容に問題がない場合に完了マーク(チェックマークなど)を表示
リアルタイムチェック

この例では入力が正しく行われているかがさらにわかりやすくなり、
なおかつユーザーに達成感を与えることも可能です。
より一層、エラーへのストレスを軽減できる施策だといえるでしょう。

まとめ

いかがだったでしょうか。今日のまとめは以下のとおりです。

  • エラー文言の表示位置、デザイン、文言を工夫するだけでユーザーのストレスは軽減
  • 劇的な改善を狙うならリアルタイムでのエラー判定は必須
  • リアルタイム判定の表現の工夫次第で、さらに使い易いフォーム

どれも基本的なことですが、
離脱要因となりやすいエラー表示のストレスを取り除くことが
完了率に与えるインパクトは少なくないでしょう。

この機会にぜひ、エラー表示のユーザー体験を見直してみてはいかがでしょうか。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です