フォームを改善するための１０のポイント

コマースサイトや新規獲得サイトにおいてコンバージョンプロセスはサイトで最も重要な部分だったりします。

ある程度、コンバージョン達成に意欲があるユーザーだけがいるので、余計な部分で離脱の原因は作りたく無い部分です。

ということで、今回はフォームを改善するにあたっての10のポイントをまとめてみました。

と、その前にフォーム分析を行うにあたってどのようなポイントを指標として確認していけば良いかに少し触れていきたいと思います。

フォームの指標

フォームまわりで確認できる指標はそれほど多くはありません。大きく４つと言えるでしょう。

1. フォームページの離脱もしくはフォールアウト
2. フォームでのエラー発生数
3. 放棄（離脱）をした際に入力していたフォーム
4. 放棄した人のその後のパス

１はどのツールでも確認できるものです。通常は問題点を見つける際にも利用しますが、既に「フォームを改善」にフォーカスをしているのであれば、改善の結果を評価するための指標として利用すると良いと思います。

離脱数を見てしまうと、TOPページなどに戻った数は見えなくなってしまいますので、フォールアウトレポートや次ページの遷移を見る中で、通常のサブミット画面とは別のページに遷移している数を確認していくと良いでしょう。

２つ目はフォームでのエラー発生数です。これは改善を行っていくためには非常に重要なものの１つと言えるでしょう。エラーが発生しているということは、サイト側が想定している入力ではない方法で入力がされているということです。

エラーの種類ごとに、発生数を集計し発生率の高いものから、仮説をたてて対応策を検討していくと良いでしょう。

３つ目は、取得できるツールが少ないというか、頑張ればGoogle Analyticsでも取得できないことは無さそうですが、あくまで、ここでは取れた場合ということで。（もし取得方法を知りたい方はご連絡ください）

エラーとは別に、サブミットをせずに画面を閉じたり、他のページへ遷移をしてしまった理由に、途中でわからなくなったり、面倒になったりといったことがあります。

エラーが発生していないので、こういった理由は判断するのが難しいのですが、最後にカーソル（フォーカス）があったフォームの場所をJavaScriptで取得して計測することは可能です。

ということで、これを集計すると意外なフォームで放棄をしてしまっていることがあります。ここでは「何故このフォームで放棄をしてしまったのか？」を仮説として設定し、改善策の案に役立てると良いでしょう。

さて、最後です。放棄した人の動線です。サイトを離脱してしまった人はわかりませんが、サイトを離脱したわけではなく、ページを一旦はずれ、別ページに行っている人を見ます。

ここをうまく読み解ければ「何か不明な点があって一旦離脱した人」を見つけ出すことが出来ます。何かの同意にチェックをするにあたって、不明な点があり離脱している場合も多くあります。

ということで、既に結構な量を書いてしまったのですが、ここまでがWeb解析ツールを使ってフォーム分析をする場合のTipsです。ここからはそこから改善をする場合のTipsです。

実際に改善をする際のTips

実際に改善をしていくにあたって、どのようなポイントを１０個洗い出してみました。もしかしたら、もう少しありそうな気がしますが、切りも良いのでここでは１０個で。

１：フォームの数は最低限にする。

フォームで入力される項目は、訪問者の属性を知る上でも重要な部分です。その為、どうしても入力数を増やして知りたい属性を増やしてしまいがちです。

知りたい気持ちを抑え、少なくする努力をすると良いでしょう。例えば住所を聞いたところで、住所まで知っていてもそれほど活用しない場合もあります。もしかしたら郵便番号だけわかれば地理情報としては十分なのかもしれません。

２：準備に時間のかかる情報は事前にインフォメーションする。

通常の会員登録であればそれほど問題ありませんが、たまに、その情報を入力するにあたって準備に時間のかかるものをシラッと入力を促していたりするフォームに出会うことがあります。

もし、会社で入力をしようとしていて、その情報が家に帰らないとわからないのであれば、放棄しちゃいますよね。そこでまた戻ってきてくれれば良いですが、「途中まで入力したのに…」と意気消沈してしまう場合もあります。

３：クリアボタンはいらない。

もともとのHTMLの機能として対象のフォームに入力したものをきれいに消し去ってしまうクリアボタンを付けることがあります。いまだに、このボタンを設けているフォームを見かける事がありますが、果たしてこのボタンの利点は何でしょうか？恐らく入力したものを全て消してしまいたい人はあまりいないでしょう。

４：エラーを寛容にする。

名前を全角入力をしたあとに、半角入力で電話番号を促したりする場合があります。しかし、その違いに何の意味があるのでしょうか？最終的にデータベースへは半角で保存をした方が良いかもしれませんが、それが全角であってもサーバ側で半角に修正することはそれ程難しいことではありません。「全角で入力をしてください」「半角で入力をしてください」なんてお客様に強要していないですか？

５：入力例を表示する。

エラーを寛容にしたとしても、やはり何を入力して良いかは戸惑う部分です。その為に入力フォームごとに入力例を設けていることは重要です。最近ではフォームにうっすらと例を表示しておき、フォーカスされた時点で消す方法も良く利用されています。このように、どのフォームに何を入力する必要があるかを明示することは非常に重要と言えます。

６：フォームのラベリング

どのフォームに何が入力されているかを示すことは非常に重要です。どのラベルがどのフォームと結びついているかを、ラベルと距離が離れないようにしていくと良いでしょう。

また、必須入力もわかりやすくすることが良いです。もちろん、基本は全て必須入力であり、必要のないものは取得しないぐらいでも良いはずです。ユーザーからしたら必須入力では無い物をわざわざ入力する必要はないからです。

７：延々と続くプルダウンをなくす

プルダウンはたくさんある項目の中から１つを選択してもらいたい場合に便利な方法と言えます。しかし、実際に何十もの項目を１つのプルダウンに入れてしまうと、選択する側は大変です。

果たしてそれ程詳細に取得すべき項目なのか？もう少し大きなカテゴリに分解して２つのプルダウンに分けることが出来ないかなどを検討すると良いでしょう。

８：タブ送りが考慮されているか

HTMLの組み方によってはタブボタンを押しても、画面に表示されている順番通りにタブが遷移しない場合もあります。

タブがうまく利用できないことで、ユーザーは入力の時はキーボード、フォームを選択するためにマウスと行き来をしなくてはならなくなります。細かいことですが、タブ送りを考慮した作りをしておくと良いでしょう。

９：不要な情報を表示しない

何故かフォームを入力するページで、サイト内キャンペーンの広告を表示しているサイトに出会うことがあります。そこからページを放棄してしまって、別のページにいって戻ってこなかったら非常にもったいないでしょう。

フォームには必要最低限のリンクを設けるだけで、バナー広告などは表示しないようにしましょう。

１０：フォームのフォーカスをわかり易くする

フォームの入力をする際に、どのフォームを入力しているのか分かりづらい場合もあります。特にフォーム量が多い場合や別の資料を見ながらの入力などでは見失いがちです。

CSSを利用して、フォーカスされているフォームがどこにあるかをわかり易くすることで、ぐっと入力のユーザビリティがあがると思います。

まとめ

書き始めたら結構長くなってしまいました。。後半のTipsは「ユーザビリティの向上」「手間の軽減」「不要な間違いを防ぐ」といった観点から洗い出しを行っています。

おそらく、この観点で見ていけば、もう少し色々な工夫もできると思いますので、是非、色々とテストをしながらフォームの最適化をしていって頂ければと思います。