Bright-Core,Inc. 株式会社ブライトコア

入力項目数の多いサービスのためのエントリーフォーム最適化

入力項目数の多いサービスのためのエントリーフォーム最適化

エントリーフォーム最適化

エントリーフォーム最適化(Entry Form Optimization)とは、ユーザーの入力ストレスを最大限に減らし、快適で分かりやすいフォームにすることで、コンバージョン率の向上を図る施策です。フォームの目的によって設計は異なり、明確なゴールを設定したら、画面内の余計なリンクや項目は極力精査し、ユーザーにとって快適に入力してもらえる環境を整える必要があります。今回は、その中でも特に入力項目が多いエントリーフォームについて最適化のポイントをまとめてみました。
入力項目が多いフォームとは、電気/ガスの新規申し込み、採用系のフォーム、クレジットカード・ローンの申し込み、保険の申し込み、インターネット等の通信系サービスの申し込み、アンケートフォーム、等が挙げられます。これらは申し込み時に必要な情報が多く選択肢が多いため入力には手間がかかり、最後まで入力できずに離脱してしまいがちです。

<入力項目の多いサービスの例>

  • 電気・ガス(新規申し込み)・・・・・契約番号、代理人情報、工事日時・開始日時、コース選択、支払い情報、引っ越し先情報 等
  • 採用関連のエントリー・・・・・学歴・職歴、職務経歴詳細、年収、希望職種 等
  • クレジットカード・ローン・・・・・職業・年収、住居年数、銀行口座、世帯家族情報、コース選択 等
  • 保険・・・・・本人確認、健康状態等の確認書類、受取人・代理人情報、支払い情報、コース選択、開始日時 等
  • インターネット等の通信サービス・・・・・住居情報、固定電話の有無、工事日時・開始日時、コース選択、支払い情報 等
  • アンケートフォーム・・・・・※アンケートの種類によって様々

エントリーフォーム最適化の7つのポイント

  1. スマートフォン中心の設計
  2. 心理的なハードルを下げる
  3. 操作の数を極力減らす
  4. 入力補助・ガイド (ミス・漏れを防ぐ)
  5. 離脱防止
  6. エラーをわかりやすく知らせる
  7. PDCA(運用のポイント)

以上7つのポイントの具体的な施策を説明いたします。

目次

1. スマートフォン中心の設計

2. 心理的なハードルを下げる

3. 操作の数を極力減らす

4. 入力補助・ガイド (ミス・漏れを防ぐ)

5. 離脱防止

6. エラーをわかりやすく知らせる

7. PDCA:運用のポイント

1.スマートフォン中心の設計

スマートフォン版のフォームは画面いっぱいに大きく。

スマートフォンの使い勝手が良くなり、若年層を中心にパソコンを使わない傾向にあるとの記事をよく見かけるようになりました。スマートフォンは、小さな画面の中で操作する為、フォームが小さいと入力が大変です。
小さな画面に配慮し、拡大せずに済むように、横幅を最大限使ってフォームを大きく文字も大きめに表示させると良いでしょう。

スマートフォンの画面に合わせてデザインを調整します。
Point : 画面いっぱいにする分、縦に長くなる為、TOPへ戻るボタンは常に表示しておくことが大切です。


フォームに最適な入力モードを表示する

項目ごとの、かな、数字、英字等の入力モードの切り替えはユーザーにとって負担です。
入力する際に、自動的に最適な入力モードへ切り替われば負担を軽減できます。
例えば電話番号の場合、スマートフォンではテンキーが表示されるようにすると良いでしょう。

Point : 電話番号や郵便番号のフォームを複数にわけないことが望ましいが、システム側の都合上、フォームの項目を構成しなければならない場合があるのでその際はなるべく入力しやすい配慮が必要です。


ボタンは押せることが直感的に認識できるようなデザインに。

ボタンは一目でわかる様にメリハリのあるデザインにしましょう。
文字をよく読む前にデザインで認識できることでスムーズな入力につながります。

2.心理的なハードルを下げる

不要な項目は表示しない

入力項目のボリュームが多いと、ユーザーの入力意欲が減少し離脱につながる傾向がある為、
ページを極力コンパクトに見せ、ハードルの低いフォームを印象付ける事がとても重要です。
下記の見本では、該当する場合にのみチェックを入れるとフォームが出現する仕組みになっており、
該当しない場合はそのまま次のページへ進むことができるので、時間短縮にもつながります。

Point : チェックボックスの各タイトルは端的でわかりやすい言葉にすることが大切です。


重要度の高い注意書きは、キャラクターの吹き出し等でフレンドリーに表現する。

注意書きは読むのが面倒だと思われがちな上、見落とされてしまう可能性があります。
キャラクターの吹き出しにすることにより、目に留まり読みやすくなり、理解が深まります。


ラベル(項目名)はシンプルでわかりやすい言葉で。必要に応じて説明画面を追加する。

ラベル(項目名)は理解に必要な思考的負荷を減らすため、長い文章は避けましょう。
余計な文言は入れずに、なるべくシンプルでわかりやすい言葉にまとめることが大切です。

Point : 捕捉が必要な場合は、必要に応じて説明画面を別枠で追加する等、フォームが文字だらけで読みづらくならないように工夫します。

3.操作の数を極力減らす

任意項目はなるべく設けず、項目数そのものを減らすよう検討する。

任意項目とは、入力しなくても良い項目の為、ユーザーはそもそも入力しない事が多く意味がありません。さらに、1画面あたりの項目数が多いと、必須項目と任意項目を見極める手間もかかってしまいます。
必須項目として本当に必要なものだけに絞ることで入力操作の数を減らす事ができます。

こちらの例では性別や生年月日がこのエントリーフォームの目的に不要な為削除し、項目数を減らす事ができました。


1画面あたりの入力項目をなるべく少なく設計する。

1ページに対しての項目数を限定し、なるべくスクロールが不要になるようにしましょう。
名前・電話番号・住所等のグループで分けページごとにまとめることで、入力のしやすさにもつながります。

Point : 画面サイズに収まる程度、または少しのスクロールで済む程度の項目数で刻むのがベストです。


住所入力は郵便番号から自動入力。

フォーム側の入力サポートにより、郵便番号を入力すると自動的に住所が入力されます。
住所を入力する手間が省け、ユーザーの負担が軽減します。

Point : 市区町村まで自動入力されるようにすると便利です。

4.入力補助・ガイド (ミス・漏れを防ぐ)

入力欄にある入力例により、漢字・カナ・数字等の判別を理解しやすく

入力例を表示していないと、エラーやミスが起こりやすい原因になります。
入力例により、入力項目や、漢字・カナ・数字等をユーザーが直感的に把握することができ、視線の移動も最小限に抑えることができます。また、プレースホルダーにすると、余分なスペースをとらずにすっきりと見せることができ、より効果的といえるでしょう。
(※プレースホルダーとは、入力エリア内にあらかじめ表示しておく仮テキストのこと。)


現在入力中のフォームをしめすオレンジ枠

ユーザーが、今どこを入力中なのかを瞬時に把握することができます。キャレットの位置を見失って間違った入力欄に入力してしまいもう一度やり直し、という様な二度手間も防ぐことができます。


ボタンデザインは重要度によって配置・強弱を調整。

ボタンは押しやすさを考慮したデザインにします。
大きさや、濃淡で強弱をつけ、重要なボタンほど、押しやすいデザインを心がけましょう。
ボタンの設置場所は、次ページへの誘導ボタンなら右側に設置することで、流れを把握しやすくなります。

Point : ボタンに余計な文言は入れずに、簡潔でわかりやすい言葉にするが大切です。


ラジオボタン・チェックボックスを押しやすくする

ラジオボタンやチェックボックスは、ボタン内のクリックだけでは押しづらい為、ラベル部分(文字)をクリックした時にも反応するようにしましょう。

5.離脱防止

離脱防止アラート(PCのみ)

ユーザーの操作ミスで入力中のフォームを閉じてしまう事があっても、アラートで再確認することで、意図しない離脱を防止することができます。
また、確認ページで「送信完了」したと誤解してウィンドウを閉じるという離脱も防止します。


フォーム内から不要なリンクは外す

フォームの目的は、入力をして送信してもらうことなので、それに関係ない要素は取り除きましょう。
余計なリンクが入っていると、ユーザーはフォーム以外の要素が目に入り、クリックして離脱してしまう可能性があります。

Point : デザインもなるべくシンプルにし、気が散る要素は控えましょう。


現在の入力地点の表示「ガイドナビゲーション」

現在の入力地点がわからないと、終わりが見えないことに不安を感じ離脱してしまう可能性があります。
ガイドナビゲーションを入れることで、あとどれくらい入力が必要かを大まかに把握することができ、入力意欲につながります。

ページのボリュームを一目で把握することができるデザインにしましょう。

6.エラーをわかりやすく知らせる

入力時のエラーアラート

入力中にエラーアラートが出ることで、すぐに入力ミスに気づき時間短縮になります。
また、送信時のエラーを事前にふせぐ事ができ、ユーザーを混乱させません。

Point : なるべく場所をとらずにシンプルなアラートデザインにしましょう。


送信後のエラーアラート

入力ミスや漏れがある状態で送信ボタンを押した際にも、エラーアラートが出現させましょう。
エラー表示は、ヘッダー部分とエラー箇所の項目に二重で表示することでわかりやすくしています。

7.PDCA:運用のポイント

Googleアナリティクスによる状況把握

エントリーフォームは、完成したら終わりではありません。
運用の際には、Googleアナリティクスを活用し、ユーザーがどのようにフォームを使用しているかを把握しましょう。
<例>
・ユーザーがエントリーフォームに至るまでのルート
・途中離脱箇所はどこか、また、どこへ離脱するのか
・入力にかかった時間
・送信完了のコンバージョン率
これらの状況を把握し、よりコンバージョン率を上げる為に運用していくことが大切です。


問題個所の改善策とUI/UX視点からのアップグレード

ユーザーの動向を把握しながら、改善点を洗い出しアップグレードしていきましょう。
<例>
・ボタンやフォームのデザイン
・項目名見直し
・導線
・説明文
・項目そのものの見直し

最後に

せっかくサイトリニューアルして、コンテンツマーケティング施策でアクセスを集めても、実際のサービス申し込みの段階で離脱させてしまっては、大変もったいないと思います。細かな配慮や改善は、ユーザーが気持ちよく入力を完了させて「送信」ボタンを押してもらうために、効果的な対策です。

お問い合わせ

ご相談・お見積り等、Webサイトに関する事ならお気軽にお問い合わせください。

mail

 メールでのお問い合わせ

お問い合わせフォーム


mail

 お電話でのお問い合わせ

TEL:03-6869-0727

FAX:03-6869-0726

営業時間:平日10:00~18:00 まで