今から実践できる!小さなフォーム改善で大きな効果を生むコツ!

今から実践できる!小さなフォーム改善で大きな効果を生むコツ!

いよいよ12月となり、今年も残り1週間となりました…!
この時期になると、Web担当の皆様の場合、トライアンドエラーを繰り返しながら新規ユーザ獲得・売上upを目指して日々仕事をされているのではないでしょうか。
もしかしたら、2019年のはじまりとともにWebサイトをリニューアルされる企業も多くいらっしゃるのではないかなと思います。

さて、前回の記事では入力フォーム改善が大切な理由、改善案をいくつかお話しました。
今回は前回に続き、小さなフォーム改善案をいくつかご紹介させて頂きます!

改善案

今回の改善のポイントも大きく分けて2つです!それぞれに基づいてお話致します。

■Point3: ユーザの視線をコントロール!

 

・項目や説明文の位置はなるべく統一

  

→LPを作成する場合と同様、フォームに訪れたユーザの視線はあまり動かさない方が効果的です。
  例)お名前項目の場合 (※残りの項目は下に続いていく)

1だと視線がテキストボックス→横の例字→テキストボックス(入力のため)→下にある次の項目…と行ったり来たりになってしまい、小さなストレスになってしまいます。
なるべくユーザの視線がうろうろしないよう、配置をシンプルにまとめてみてはいかがでしょうか?

 

・なるべくファーストビューに項目を配置

  

→前回でも「項目数は極力減らす」という案をお話しておりますが、項目数を減らした次は項目をファーストビューに配置することも大切です。
  もし項目数が多いフォーム(商品購入フォーム、LP一体型フォームなど)の場合は、必須項目はなるべく上部に固め、任意項目(アンケートなど)は下部にまとめる など、
最低限必要な情報を、少ない視線移動で与えられるよう工夫してみてください!

 

・電話番号や住所入力等の項目数を減らす

  

→前回の記事や、1つ前の「ファーストビューへ配置」でも記載している「項目数を減らす」ですが、とはいっても項目の種類を減らすというのは判断に迷ってしまいますよね。
   そんなときは、電話番号や住所、郵便番号の項目から減らしてみるのはいかがでしょうか。
   電話番号の場合、1つの長いテキストボックスか3つに分割されたテキストボックス、どちらかのパターンがほとんどかと思いますが、もし3つに分割していた場合は、1つのテキストボックスとしてまとめてみるのはいかがでしょうか。

 

※スマホの場合、1つ目の項目を入力して「キーボードの確定」を押さずに次項目へタップすると、2つ目にフォーカスせず1つ目の項目に戻ってしまう現象がよく起きてしまいます。これはブラウザの仕様になるのですが、こういった入力エラーを減らすためにも、項目は1つにまとめてしまった方がよい場合もあります。

  

■Point4:ユーザの確認の手間を減らす

 

・入力できるパターンは極力増やす

  

→郵便番号や電話番号の項目の場合、-(ハイフン)あり/なしのパターンがありますが、たとえ入力例や注意書きで「-(ハイフン)あり」と記載していても、一定数はそれに気づかず「-(ハイフン)なし」で入力してしまうことが多いです。
   そのため、フォーム側で入力できるパターンを増やせると、ユーザの入力・確認の手間が減りCVにつながりやすくなります。

 ※基幹システムによっては「-(ハイフン)ありのみデータベースに登録できる」という場合もありえるかと思いますので、その場合は+αの対策(リアルタイムエラーチェックや、入力されたものを自動で変換する…など)を行ってみてください!

 

・項目ごとにキーボードタイプを変更させる

  

→郵便番号や電話番号は数字キーボード(PCだと半角英数)に自動で変化されると、ユーザとしてはキーボードを切り替える手間が省け、入力する流れを断つことなく入力できますよね。
   テキストボックス項目の場合、通常<input type=”text”…>と記述しますが、type属性を「tel」や「url」「number」などに変更するだけで、最初に表示されるキーボードが「数字(変換できないもの)」「英数字+記号のあるキーボード」に変化してくれます!
  (※HTML5に対応済、かつスマホのみ)

・項目のサイズを大きくさせる

 

→こちらもスマホサイト向けの対策ですが、項目が小さいと何が入力されたかが分からず、気づかずにエラーとなっているということもあるかと思います。
  なので、テキストボックスやチェックボックスの選択肢を大きくしてあげるだけでも見やすくなり、正しく入力できたかの確認時間を削減することが期待できます!

おわりに

いかがだったでしょうか。

今回ご提案した施策の多くが少しの工数で対応できる内容になっているかと思います。
前回の記事の施策とも併せて、ぜひご検討頂けたら幸いです!

次回も有益な情報をお届けできるよう準備しておりますので、ぜひお楽しみに!