【保存版】エラー表示に関するEFOの鉄則15つ

フォーム入力でユーザーに最もストレスを与え、離脱につながるきっかけのひとつであるエラー表示。
このエラー表示時のストレスをいかに軽減させるかがEFOにおいては非常に大きなポイントです。

エラー表示の改善については過去に何度もお伝えしてきましたが、本日の記事ではこれまで取り上げた内容を15のポイントにまとめてお伝えいたします。
フォーム改善の際に、チェックリストのように役立てていただければと思います。

表示について

同じエラーでも、見せ方によってユーザーが受け取るストレスの大きさが左右されます。
まずはどのようにエラー内容を見せるかという側面から7つのポイントをお伝えします。

1. 入力画面上でエラーを表示する

例えば、エラー内容だけを示したページに遷移する方法や、ダイアログ内にエラー内容を表記する方法では、ユーザーがエラー内容を参照しながら修正を行うことができません。エラーが複数ある場合には修正漏れが発生したり、何度もエラー画面と入力画面を行き来する必要が出る場合があり、非常にストレスフルです。

（左）エラー内容だけを示したページに遷移する方法。ユーザーはエラー確認後、フォーム画面に戻って修正作業を行う必要がある。（右）ダイアログ内にエラー内容を表記する方法。エラーをダイアログ形式で表示。一旦表示を閉じて修正を行う必要がある。

最近ではかなり少なくなりましたが、まだまだこのようなフォームが存在するのが実情です。
まずは大前提として、入力画面の中にエラー内容を表示するようにしましょう。

2. エラー文言は該当項目の近くに表示

たとえ入力画面の中にエラー内容が表示されていたとしても、フォームの冒頭にすべてまとめて表示するのはNG。
ユーザーはエラー箇所がどこかにあるのかをひとつひとつ探さなくてはならず、面倒です。

NG例：エラーのサマリーがフォーム上部にズラリ…

具体的なエラーの内容はその場に表示すると直感的に修正を開始することができます。

エラーを該当箇所に表示した例。

3. フォーム冒頭には、エラーが存在する旨を簡潔に伝える

エラーを該当箇所に表示することは大切ですが、スクロールしないとフォーム全体が表示できない長いフォームの場合には注意が必要です。
ファースビューに表示されない位置のフォーム項目でエラーがあった場合には、画面読み込み直後にエラーを発見できないためです。

そのような場面ではフォームの冒頭に一言表記することで、ユーザーはエラーがある旨を理解することができます。

フォームの上部でエラーがある旨を表記。

4. デザイン上引き立たせる

また、エラーがある旨を表記しても、それが目立たなければ意味がありません。
デザイン上目立つ文字色や背景色などを用いて強調するようにしましょう。

該当箇所にを赤枠で強調したうえでエラー文言を表記。

5. エラー項目のハイライトは、赤ではなく黄色やオレンジを使用

どこがエラーか目立たせることは大切ですが、その際には赤色ではなく黄色やオレンジ系の色を使うべきとの意見も。その理由は赤色が過剰に危険なイメージを与えてしまうことにあるようです。

赤色だと、どぎつい印象を与える

エラー表示の強調色に赤色を用いるフォームは非常に多いですが、強烈すぎる表現は避けたほうが良いのかもしれません。

6. 入力内容を保持する

フォームでのエラー時に、入力した内容がクリアされてしまうことがあります。
修正が必要な内容だったとしても、入力内容の一部だけを修正したいユーザーにとって、入力欄がすべて白紙に戻ってしまうと非常に手間に感じます。

エラー時には、それまでの入力内容を保持するようにしましょう。

7. エラー項目だけ表示する

ページの情報量が多かったり、縦に大きくスクロールしなくてはならない状況では、上記の方法をとったとしてもユーザーがエラー箇所を見落としてしまう可能性はあります。
特にページが縦長になりがちなスマートフォンサイトでは、画面を少しずつスクロールして該当箇所を発見しなくてはならないのは面倒です。

そこで、エラー箇所以外の項目を画面から非表示にする方法が有効です。

エラーのあった箇所のみが表示される。その他の項目を再表示することも可能。

タイミングについて

次に、エラーを表示するタイミングについて３つのポイントを紹介します。

8. 入力直後に、リアルタイムにエラーチェックする

同じエラーを表示するにしても、すべてを入力し終えてボタンを押下した後よりも、ミスした直後に指摘されるほうがすぐに軌道修正することができますし、エラー箇所を探す手間も省けストレスは少なく済みます。

入力したその場でアラートを表示するリアルタイムアラートが効果的です。

エフトラEFOのリアルタイムアラートが作動し、入力形式にミスがある場合アラートが発動

入力形式にミスがある場合リアルタイムにアラートが発動

9. 複数の入力条件がある場合、あらかじめチェックリストのように表示する

入力条件をエラーになって初めて聞かされることはユーザーにとって大きなストレスになります。
諸条件をあらかじめ表示するのは大前提。さらに入力条件が多い場合は入力中にチェックリストのように表示するとエラーを防止することができます。

チェックリストのように表示されたIDの入力条件。

10. エラーの存在を事前に知らせる

送信前にエラーの存在を知らせることで、ボタン押下後のがっかりをを防止できます。
例えばエラーがある状態でのボタン押下を防ぐサブミットブロック機能や、フォームの進行状況を示すガイド表示などの機能で実現することができます。

必須項目の入力がまだ残っている状態。送信ボタン部分には代替画像が表示されており、次に進むためのアクションを起こすことはできない。（サブミットブロック）また、右上に示されたガイド表示が残り必須項目の存在を示している

メッセージについて

最後は、エラーメッセージの内容に関するポイント５つです。

11. ネガティブトーン否定的の言葉を使用しない

誤りがあります」「間違っています」「失敗しました」「無効です」などと必要以上に否定的な言葉を使うとユーザーの気分を害することにつながります。
ついつい使用してしまいがちな表現ばかりですが、できるだけ使わないように心がけたいですね。

12. 専門用語を排除する

エラーの内容をユーザーが理解できなければ入力し直すことは困難です。
誰にでも理解できるような平易な表現でエラーを表示するように心がけたいものです。

13. エラーの理由を明確にし、何を訂正すれば良いかをわかりやすくする

「エラーがあります」とだけ表現され、具体的に何をどうすれば良いのかが示されていないエラーが極めて不親切です。

例えばカードが使えないという事象に対してであれば、ただ「このカードは使えません」という結論だけ述べるのではなく、「有効期限が切れている」「カード会社が対応していない」「現金のみの対応」など、なぜ使えないのか、その理由を明確にすることではじめてユーザーは次のアクションを考慮することができるようになります。

14. 問題を解決するためのヒントを与える

エラーの理由を明確化するだけでなく、さらにどうすればよいか問題解決に向けたネクストステップを提示するとさらに親切です。

15. ユーザーではなく、自分自身に責任を置く

そもそも設定しているエラーとは、サービス提供側の都合に過ぎません。ユーザーのミスは決して悪いことではありませんし、修正を要求するのであればサービスとして謙虚であるべきです。
決して高圧的ではなく謙虚なトーンでメッセージを表現し、ユーザーを不快にさせないように気をつけたいですね。

最後に

いかがだったでしょうか。本日はフォームのエラー表示に関する15つの改善ポイントをご紹介しました。
下記にあらためて15のリストを記載します。ぜひご担当フォームのEFOに活かしていただければと思います。

表示について
- 入力画面上でエラーを表示する
- エラー文言は該当項目の近くに表示
- フォーム冒頭には、エラーが存在する旨を簡潔に伝える
- デザイン上引き立たせる
- エラー項目のハイライトは、赤ではなく黄色やオレンジを使用
- 入力内容を保持する
- エラー項目だけ表示する
タイミングについて
- 入力直後に、リアルタイムにエラーチェックする
- 複数の入力条件がある場合、あらかじめチェックリストのように表示する
- エラーの存在を事前に知らせる
メッセージについて
- ネガティブトーン否定的の言葉を使用しない
- 専門用語を排除する
- エラーの理由を明確にし、何を訂正すれば良いかをわかりやすくする
- 問題を解決するためのヒントを与える
- ユーザーではなく、自分自身に責任を置く

また、これまで当ブログでエラー表示をテーマに取り上げた記事を以下にリンクします。ぜひ合わせて参考にしていただければ幸いです。

【保存版】エラー表示に関するEFOの鉄則15つ