Web入力フォームについて調べてみた！親切な改善でコンバージョンアップ | ネットPR.JP

こんにちは。おざえりです。

Webサイトに必ずといってよいほど存在する入力フォーム。みなさんは、入力する際にストレスを感じたことはありませんか？

私は先日某サイトで個人情報を変更したのですが、入力を間違う度にページを戻され入力情報は消えるしイライライラ・・・すごい労力と時間を費やしてしまい、ネットって便利なはずなのに？と疑問に思ってしまいました。
というわけで、当サイトのフォームを例に「ストレスフリーなWeb入力フォーム」について調べてみると以下の3つが大事であることが分かりました。

• シンプルな要素構成
• Web入力フォームの最適化
• 目的を明確にし説明すること

シンプルが一番！Web入力フォームの要素見直し

マルチデバイスの普及が加速し、Webサイトのデザイン傾向としてミニマルでシンプルなものが求められるようになり、入力フォームの記入がより簡単になっています。これまでもユーザーは、個人情報の盛り込まれた長い入力フォームを避ける傾向にあり、今後はシンプルなフォーマットが増えていきます。また、多すぎる質問や記入欄はせっかく関心を持ってくれたユーザーを遠ざけてしまう原因になりかねません。不必要なものはなるべく削除し、シンプルなフォームを心がけましょう。

特に電話番号やプライバシーに関わる項目が必要な場合は、なぜその項目の記入が必要なのかきちんと説明するとよいでしょう。

エラーを防ぐ！Web入力フォームの最適化 入力条件を事前に伝える

入力条件は（例えば、パスワードの最小文字数を必要とするなど）は、フォームを送信する前に、フォームの中で記載しましょう。

プレースホルダーを使用し入力例を表示する

プレースホルダー（placeholder）とは、入力フォームの記入欄へ入力に関するヒントを示す仕組みです。入力フォームに何が入るかを明確にするのに役立ち、入力が促進されます。

注意点として、ユーザーが自分で入力した情報と勘違いしないように視覚的な工夫が必要です。また、入力し始めるとプレースホルダーの記述は消えてしまうのでラベル代わりに使用することは好ましくありません。

インラインバリテーションを使用しエラーをリアルタイムでチェックする

インラインバリデーション（Inline Validation）とは、フォームを入力する際にエラーをリアルタイムでチェックする仕組みです。入力ミスが発生した時点ですぐ通知してくれるので、Webページ内をスクロールしたり更新することで入力情報が消えてしまうというストレスがなくなります。
インラインバリデーションの仕組みはジェイクエリー（jQuery）で実装できるようです。

ユーザーが簡単に修正できるように、エラーメッセージは入力フィールドの隣へ配置しましょう。

必須項目と任意項目を分かりやすく区別する

入力が必須の項目と任意の項目をはっきり区別できるようにします。必須項目へマークを追加するなどの対応がわかりやすいでしょう。

 

適切なラベルを使う

ラベルは分かりやすく簡潔にし、ユーザーに安心感を与えます。また、ユーザーが全体を見渡せるように入力フィールドの横ではなく上に配置します。そうすることで視線を左右に動かすことなくスムーズに進むことができます。デザインにもよりますが、この配置は表示面積の小さいモバイル環境で最も有効的です。

 

一般的には視線の余分な動きが増えれば増えるほどコンバージョン率は下がる傾向にあります。配置を改善することで視線の無駄な動きと時間が軽減されます。

 分かりやすいボタン用テキストを使う

ボタンデザインは、クリックしたあとに何が起こるのか想定できるものにしましょう。漠然とした「Submit」などの表記は次のアクションが不明でユーザーにとっては不安要素となります。

Web入力フォームの目的を明確にし説明する

Web入力フォームを完了してもらうことは、言い換えるとユーザーの信頼を得ることです。
なぜその情報が必要なのか、明確な理由を持ち説明することが重要です。またセキュリティーはコンバージョンの鍵といっても過言ではありません。個人情報の取扱についてもヘルプやガイドラインを一緒に提供しながら、シンプルに伝えるとよいでしょう。

おまけ

Googleの研究レポートによると、上記を改善しユーザーテストした結果、Web入力フォームを完了するのに良い影響を与えたと報告しています。
また、Webユーザビリティの専門家であるルーク・ウロブルスキー（Luke Wroblewski）氏が行ったインラインバリテーションのユーザーテストによると、次のような結果が出たと報告しています。

• コンバージョンが22％増加
• 発生したエラー率は22％減少
• 満足度評価が31％増加
• フォーム入力完了までの時間が42％減少
• 視線が移動する回数が47％減少

詳しい内容は参考記事をご覧ください。

参考記事：

• Web Design Trends That Will Disappear in 2014
  2014年消えてゆくデザイントレンド
• Simple is better – Making your web forms easy to use pays off
  Googleレポート
• Inline Validation in Web Forms
  ルーク・ウロブルスキー（Luke Wroblewski）氏（モバイルファーストの提唱者）による検証