本日は、エラー画面に関する改善アイデアをご紹介したいと思います。
エラー画面といえば、フォーム入力中のユーザーをイライラさせ離脱に直結させてしまうことから、EFOでは最も注意を払うべき存在のひとつです。
エラー画面でのストレスのひとつ「エラー箇所さがし」
そんなエラー画面でのストレスのひとつに、どこがエラー箇所なのかが直感的にわからないというパターンがあります。
もちろん、下記のように入力項目が少なくファーストビューに収まるフォームであれば、エラーがどこにあるかは一目瞭然です。
しかし、画面内にたくさんの入力項目やコンテンツがあったり、ファーストビュー内にフォーム全体が収まっていない場合では、エラー箇所を漏れ無く発見するのは簡単ではありません。
エラーを漏れ無く発見できなかった場合、修正できないまま再び送信してしまい、ユーザーは何度も同じエラー画面を見せられることとなり、さらにストレスを与えてしまう原因にもなります。
冒頭でのひとこと&該当箇所へのマークが基本施策
そのためエラー表示では、の見た目を強調したり、冒頭にエラーがある旨を一言添えることが重要です。
しかし、フォームページの情報量が多かったり、縦に大きくスクロールしなくてはならない状況では、上記の方法を駆使したとしても、ユーザーがエラー箇所を見落としてしまう可能性はあります。
特にスマートフォンは要注意
特にスマートフォンサイトでは、画面領域が小さいために、ページが縦長になりがちです。
縦に長いエラー画面では、ユーザーは画面を少しずつスクロールして該当箇所を発見しなくてはならず面倒です。
既に問題ない項目を非表示にする
それでは、このようなフォームで、ユーザーがストレスなくエラーの修正に取り掛かれるようにするにはどうすればよいのでしょうか。
この場合ユーザーのストレスは、他の入力項目によってエラー箇所が埋もれてしまっていることで起こっています。
そこで「余計なコンテンツは画面から取り除く」というEFOの鉄則に当てはめてみましょう。
鋭い方はもうお気づきですね。
エラー箇所以外のすでに入力し終えている項目を画面から非表示にすることで、入力画面をスッキリさせる方法が有効です。
フォーム事例
この方法を取り入れている実例をいくつかご紹介したいと思います。
Yahoo(PC)
まずは、Yahoo!Japan様の会員登録フォームをご紹介します。
Yahooのフォームでは、エラー箇所以外の項目については入力フォームを取り除き、既に入力した値を表示するようになっています。
入力フォームを表示ぜずにシンプルなテキストとすることで、反対に赤色で強調したエラー箇所が引き立って見えますね。
Yaho(スマートフォン)
Yahooはスマートフォンでも同様の表示方法を採用しています。
既に入力完了済みのフォームをプレーンテキストにすることで、縦の厚みをスッキリと見せることにも成功している好例です。
エバーライフ
「皇潤」でおなじみのエバーライフ様のフォームは、入力済みの項目を完全に非表示にし、エラーの入力欄のみを画面上に表示する形をとっています。
どこを直すかは言わずもがな、あといくつ修正すればよいかも一目瞭然ですね。
さらに、入力済みの入力欄は、「全部表示する」のボタンを押下することで再度表示することも可能です。
入力画面とエラー画面を見比べてみましょう。
かなり余計なコンテンツがカットされ、エラー画面が見やすくなっているのがわかります。
ぜひ、ご担当のフォームでも活用を
いかがだったでしょうか。上記で取り上げた事例からもわかるように、エラー項目のみを表示することで、該当箇所を直感的に認識でき、再入力をスムーズに促してくれるということがお分かりいただけたのではと思います。
特に項目数の多いフォームや、スマートフォンのフォームをお持ちのご担当者のみなさまは、ぜひ採用してみてはいかがでしょうか。