本記事では、入力フォームをデザインする際のポイントをご紹介します。
オンライン上での消費活動が増える今、入力フォームは事業者とユーザーをつなぐWeb上の重要な接点です。
申込直前の入力フォームで離脱させないために、入力フォームをデザインする際のポイントをおさえましょう!
誰でもすぐに実践できるポイントを10個まとめましたので是非参考にしてください。
フォームのことならフォームアシスト!
入力フォームをデザインから見直して「CVアップ」するならフォームアシストにお任せください。
小さな改善から大規模改修まで、システムの変更なしに低コストで対応可能です。
改修フォーム数5000以上の専任コンサルタントがサポートにつくので安心してご相談ください。
入力フォームのデザインが重要な理由と改善事例
入力フォームのデザインが重要なのは、CV率に直接影響を与えるからです。
デザイン変更だけで、本当に離脱は減るの?CV率は向上するの?と半信半疑の方もいるでしょう。
下記は東急カード様の事例です。入力フォームを最適化する「フォームアシスト」というサービスを導入し スマホ画面のレイアウトを最適化した事でCV率が6.9%も改善しています!
東急カード様の事例について詳しく知りたい方>>東急カード株式会社様の事例ページを見る 入力フォームのデザイン変更を行いたい方>>入力フォーム最適化ツール「フォームアシスト」のサービスページを見る 本記事に掲載していないCV率改善事例を見たい方>>入力フォームの修正だけで離脱防止・CV率改善を実現した施策の紹介ページを見る
入力フォームをデザインする際のポイント10選
デザインのポイント1:項目をまとめる
入力項目は極力1カラムのデザインを採用しましょう。理由は、カーソルイン移動の手間を減らせるからです。 入力フォームにおいて作業量の削減はユーザーの負担軽減に繋がり、離脱削減を見込めます。
デザインのポイント2:縦のラインを揃える
入力フォーム全体の縦ラインを揃えましょう。項目の幅不揃いだと入力しずらい印象を与える可能性があります。 最低限のデザイン性や統一感は意識しましょう。
デザインのポイント3:ステップナビを設置する
入力フォームのファーストビュー内にステップナビの設置をお勧めします。 自分が今何の入力作業をしているか、全体の入力量のうちどれ位進んだのか等、現状のステータスを知らせ、ユーザーを安心させましょう。
デザインのポイント4:難易度の低い項目から配置する
入力難易度が低い項目から配置しましょう。難易度が低い項目を先頭に配置する事で、入力開始率の改善を期待できます。
入力難易度が低い項目とは、「名前・生年月日・性別」等です。要は、反射的に入力可能な項目を指します。
反対に、「メールアドレス・運転免許証・クーポン番号・日時選択」は入力難易度が高い項目です。主に、準備・参照・調整が必要な項目が該当します。
【難易度が低い項目】:名前・性別・生年月日(考えずとも反射的に入力可能)
【難易度が高い項目】:メールアドレス・運転免許証・クーポン番号・日時選択(準備・参照・調整が必要)
フォームのことならフォームアシスト!
入力フォームをデザインから見直して「CVアップ」するならフォームアシストにお任せください。
小さな改善から大規模改修まで、システムの変更なしに低コストで対応可能です。
改修フォーム数5000以上の専任コンサルタントがサポートにつくので安心してご相談ください。
デザインポイント5:フォントサイズとカラーを最適化する
入力フォームのフォントサイズとカラーを上手に活用しましょう。 全て同じフォントサイズ・カラーでは、メリハリが付かず重要なポイントに目が行きません。 まずは、「項目名→記入例→注釈」の順で目立つデザインを意識してみてください。
デザインポイント6:案内を非表示化する
基本的に、入力フォームは項目名と入力欄(項目)があれば成立します。しかし、お知らせや申し送り事項等、ユーザーへの伝達事項が多いのが現状です。 企業側に負い目が無いよう、丁寧に細かく注意書きを羅列していませんか?
特定のユーザーにのみ該当する注釈や法的に表示不要な内容はデフォルトで非表示化しましょう。 ユーザー自身で情報の取捨選択ができるデザインが理想です。 また、デフォルトで非表示化する事でページ全体が短く、文字量が減るためスッキリとした印象になります。 入力フォームのUI・UXを改善するための機能を知りたい方>>入力フォームに導入したいおすすめ機能20選!を見る
デザインポイント7:CTAボタンを最適化する
入力フォームのCTAボタンは、「押すとどうなるのか」が伝わるデザインや文言にしましょう。
「次のページに進むのか・前ぺージに戻るのか・押すと申し込んだ事になるのか」等、ユーザーが安心して行動出来る様にデザインしましょう。 また、進むためのボタンが目立つデザインを採用すれば、誤操作によるページ戻りも防止できます。
デザインポイント8:必須項目のデザインを最適化する
ユーザーは常に楽をしたいと考えています。必須項目を強調し入力フォームを最短で駆け抜けてもらいましょう。 必須ラベルのデザイン例をまとめました。是非参考にして下さい。
デザインポイント9:不要な項目を設置しない
申込みに不要な項目を設置している入力フォームを良く目にします。例えば、アンケート項目や金融商材のフォームによくある審査項目です。
アンケートデータは集計して本当に活用していますか?審査には不要だけど「情報として欲しい」という理由で項目を設置していませんか? 該当する場合には見直しましょう。
デザインポイント10:レスポンシブ対応を行う
項目にカーソルを合わせると、画面が拡大(=ピンチイン)される入力フォームを見かけます。
スマホ用の画面幅で表示されていないため、いちいち指で画面を縮小しながら入力を進める必要があり非常に面倒です。レスポンシブ対応を行い適正な画面幅でユーザーに表示しましょう。
レスポンシブ対応の概要を知りたい方>>レスポンシブ・スマホ対応に関する記事を読む
まとめ
入力フォームにおけるデザインのゴールは「入力すべき内容が正確に直感的に伝わる事」です。
入力作業は「必要不可欠だけどやりたく無い事」です。ユーザーが重い腰を上げ、「これなら入力してもいいかな」という気持ちにさせるデザインはどの様なものでしょうか。
ユーザーの目線に立ち、少し気の利いたデザインを取り入れる事で入力開始率・CV率を改善しましょう!
入力フォームを改善するなら「フォームアシスト」
フォームアシストなら軽微な修正から大掛かりなデザイン変更まで弊社で対応可能です。お悩み解決だけでなく、トレンドも取り入れたCV率の高い入力フォームをデザインし実装まで行います。
ABテスト機能も備わっているためユーザーの反応を確認しながらPDCAサイクルを回す事が可能です。
よくある質問と関連記事
Q:EFO(入力フォーム最適化)とは何ですか?
A:EFOとは
Q:EFOでCV率が改善した事例を知りたいです
Q:EFO機能について知りたいです
A:【EFO機能一覧】入力フォームに導入したいオススメ20選!
Q:入力しやすいフォームとしにくい入力フォームの違いを知りたいです!
Q:EFO(入力フォーム最適化)の事例集やテクニックを知りたいです!
A:こちらから資料をダウンロードできます!CV率改善必勝テクニック集ダウンロード