入力画面のユーザビリティを改善してefo対策をする

会員登録をはじめとする入力画面は、多くのウェブサービスにおいて大変重要な役割をに担っています。

このページのユーザビリティが低いければ、注文数や申し込み数は落ち込み、ひいてはそれらがもたらすコンバージョン率の低下にも繋がることでしょう。ここでは、登録画面のユーザービリティを改善し、EFO (Entry Form Optimization) 対策を図るための方法を幾つか紹介します。

efoで会員登録率アップ


入力画面へのリンクは分かりやすいところに設ける

サインインやサインアップのリンクがどこにあるのか分かりにくウェブサイトを見たことはないでしょうか。そもそも登録画面へのリンクが見つけにくいサイトでは、もとより登録以前にページへのアクセスすら期待することができません。

それゆえ、各入力画面へのリンクは、見やすく、分かりやすい場所に設ける必要があります。例えば、会員登録ならトップページのヘッダーやサイドバーへ、注文や申し込みなら商品の横に配置するのか望ましいと言えます。

また、登録画面へのリンクは分かりやすくとも、解約画面へのリンクが分かりにくいサイトもしばしば見かけることがあります。これでは、フォームがどんなに入力しやすくとも、本当の意味でユーザビリティに優れたサービスとは言えないかもしれません。

不可逆にせず、取り消しが可能だということを明示することは、ユーザーの安心感にも繋がり、結果としてコンバージョン率が上がることも少なくないはずです。

複数のフォームを分割する

さて、入力画面についてですが、まずは複数のフォームを1ページに詰め込もうとはせずに分割することが大切です。1つの画面にたくさんの項目が並べられていては、それだけでユーザーは精神的な負担を感じ、離脱してしまうことも少ないでしょう。

分割のコツは、各フォームをカテゴリ別に分けることです。もちろんウェブサービスの種類や、そのフォームの目的にもよりますが、「名前と性別」、「住所とメールアドレス」、「その他の項目」のように3程度で抑えられると最善かもしれません。

また、フォームのカテゴリを各ページで分割した際に、それぞれのページが1つのフローとして認識できるよう、進捗をプログレスバーやパーセンテージで表示することがおすすめです。ユーザーの視点に立ち、今どれほど入力が完了しているのかを把握できることは、進捗を把握できずに先の見えない不安感を軽減させることができるでしょう。

入力内容に応じフォームを最適化する

各フォームにはその入力内容によって最適化を図ることができます。例えば、住所なら郵便番号を指定するだけで、住所が検索され、自動的に入力が行われるようなフォームを見たことがあるかもしれません。このように1つ1つの目的に応じてフォームを改善することは、ユーザーの入力工数を減らし、実質的な労力を軽減させることに繋がります。

また、メールアドレスの場合は、@(アットマーク)の前後でフォームを分割することにより、入力ミスを減らす効果が期待できるでしょう。また、フォームによっては、送信前にもリアルタイムでバリデーションを行えるように実装することが最善です。

入力しながらにして、入力ミスに気がつくことができれば、送信後に修正するという余計な労力を省くことが可能です。なお、リアルタイムでバリデーションができる代表的なものには、メールアドレスのフォーマットや文字の種類、あるは文字数などが挙げられます。

これらは、javascript で正規表現などを用いて実装することができます。

入力内容を保持しリセットさせない

「送信」や「次へ」のボタンを押下した後に入力ミスがあった場合、パスワードなどの一部の特殊なフォームを除き、その入力内容を再度フォームへ表示させる必要があります。

しばしば、入力ミスの後に再度入力を求められ、面倒に感じてしまうフォームを見かけますが、そのような事態は極力避けることが最善と言えるでしょう。具体的な方法としては、入力内容を受け取ったサーバー側で入力不備が見つかった場合に、送信元のページにPOSTで返却をします。

この際、エラーのあるフォームの項目にはそのエラーの旨を赤字で表示する必要があるでしょう。また、よりユーザービリティを高めるならば、そのエラーの最初の項目へ自動でフォーカスが当たるようにできれば、ユーザーが能動的にエラーを探す手間が省けるかもしれません。

フォーム内にトップページへのリンクを設ける

他のページにも共通して言えますが、ページの推移は基本的に不可逆としないことが最善です。もちろん、ブラウザバックを使えば元のページへ戻ることも可能ですが、フォームが複数ページに渡る場合、幾度もボタンを押下することが必要となってしまいます。

それゆえ、各フォームのページには最低限トップページへのリンクを設けておくことが良いでしょう。一方、入力画面に限っては、入力フローから外れるいかなるページ推移に対しても、ダイアログなどで本当に入力を辞めても良いのかを確認する必要があります。

確認なしにページを推移して、予想外にこれまでの入力内容を失ってしまうリスクを防止する目的です。複数のフォームを用いる場合は、その数の分だけ再入力のコストがかかってしまいますので、確実に確認を促せるよう実装しましょう。

まとめ

登録画面をはじめとする入力画面は、そのページへアクセスした人の半数以上が離脱をしているという話もあるほどに実装が難しいページです。ただでさえ、それだけユーザーを思いとどまらせてしまう入力画面。そこで、より良い成果を得るためには、1つ1つのフォームを丁寧に、確実に最適化を進めていき、少しずつより高いユーザービリティを目指していく必要があるでしょう。

また、efo対策には配置の仕方や文字サイズ、配色をはじめとする、ここでは紹介しきれていない様々な施策が考えられます。

加えて、スマートフォン用とパソコン用それぞれに異なる最適化も求められます。スマートフォンの場合、入力文字に応じ、キーボードの種類を英字や数字に切り替える必要もあるかもしれません。一方、パソコンの場合は、複数のコラムに分け1画面に沢山のフォームが表示できるほうが良いかもしれません。

efo対策に十分すぎるということはないでしょう。これらの施策をはじめからすべて取り入れようとするのではなく、少しずつ学びを進め、成果を見つつ、最適化を続けていくことが大切なのかもしれません。

入力フォームのバリデーションを見直しefo対策をする

参考(f-tra ... efo)http://f-tra.com/ja/efo/