エラー画面では、修正が必要な入力項目のみを表示しよう

本日は、エラー画面に関する改善アイデアをご紹介したいと思います。

エラー画面といえば、フォーム入力中のユーザーをイライラさせ離脱に直結させてしまうことから、EFOでは最も注意を払うべき存在のひとつです。

エラー画面でのストレスのひとつ「エラー箇所さがし」

そんなエラー画面でのストレスのひとつに、どこがエラー箇所なのかが直感的にわからないというパターンがあります。

もちろん、下記のように入力項目が少なくファーストビューに収まるフォームであれば、エラーがどこにあるかは一目瞭然です。

error01

しかし、画面内にたくさんの入力項目やコンテンツがあったり、ファーストビュー内にフォーム全体が収まっていない場合では、エラー箇所を漏れ無く発見するのは簡単ではありません。

パッと見ただけでは

パッと見ただけではエラーがあることに気づきにくい

エラーを漏れ無く発見できなかった場合、修正できないまま再び送信してしまい、ユーザーは何度も同じエラー画面を見せられることとなり、さらにストレスを与えてしまう原因にもなります。

冒頭でのひとこと&該当箇所へのマークが基本施策

そのためエラー表示では、の見た目を強調したり、冒頭にエラーがある旨を一言添えることが重要です。

a

エラー箇所を赤色で強調したり、冒頭にエラーがある旨を表記して修正を促している例。

しかし、フォームページの情報量が多かったり、縦に大きくスクロールしなくてはならない状況では、上記の方法を駆使したとしても、ユーザーがエラー箇所を見落としてしまう可能性はあります。

特にスマートフォンは要注意

特にスマートフォンサイトでは、画面領域が小さいために、ページが縦長になりがちです。
縦に長いエラー画面では、ユーザーは画面を少しずつスクロールして該当箇所を発見しなくてはならず面倒です。

スマートフォンサイト

スマートフォンサイトは画面が縦長になりやすく、エラーを発見するのがストレス

既に問題ない項目を非表示にする

それでは、このようなフォームで、ユーザーがストレスなくエラーの修正に取り掛かれるようにするにはどうすればよいのでしょうか。

この場合ユーザーのストレスは、他の入力項目によってエラー箇所が埋もれてしまっていることで起こっています。
そこで「余計なコンテンツは画面から取り除く」というEFOの鉄則に当てはめてみましょう。

鋭い方はもうお気づきですね。
エラー箇所以外のすでに入力し終えている項目を画面から非表示にすることで、入力画面をスッキリさせる方法が有効です。

フォーム事例

この方法を取り入れている実例をいくつかご紹介したいと思います。

Yahoo(PC)

まずは、Yahoo!Japan様の会員登録フォームをご紹介します。
Yahooのフォームでは、エラー箇所以外の項目については入力フォームを取り除き、既に入力した値を表示するようになっています。
入力フォームを表示ぜずにシンプルなテキストとすることで、反対に赤色で強調したエラー箇所が引き立って見えますね。

エラー箇所だけが修正できる

エラー箇所だけが修正できる形

Yaho(スマートフォン)

Yahooはスマートフォンでも同様の表示方法を採用しています。
既に入力完了済みのフォームをプレーンテキストにすることで、縦の厚みをスッキリと見せることにも成功している好例です。

yahooでは該当箇所へのマーク&メッセージ表示のほかに、画面上部へのメッセージの表示や、すでに入力完了した箇所を先に保存してくれる

エバーライフ

「皇潤」でおなじみのエバーライフ様のフォームは、入力済みの項目を完全に非表示にし、エラーの入力欄のみを画面上に表示する形をとっています。
どこを直すかは言わずもがな、あといくつ修正すればよいかも一目瞭然ですね。

さらに、入力済みの入力欄は、「全部表示する」のボタンを押下することで再度表示することも可能です。

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

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

入力画面とエラー画面を見比べてみましょう。
かなり余計なコンテンツがカットされ、エラー画面が見やすくなっているのがわかります。

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

入力画面とエラー画面を見比べてみると、かなり余計なコンテンツがカットされ見やすくなっているのがわかる

ぜひ、ご担当のフォームでも活用を

いかがだったでしょうか。上記で取り上げた事例からもわかるように、エラー項目のみを表示することで、該当箇所を直感的に認識でき、再入力をスムーズに促してくれるということがお分かりいただけたのではと思います。

特に項目数の多いフォームや、スマートフォンのフォームをお持ちのご担当者のみなさまは、ぜひ採用してみてはいかがでしょうか。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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