提出を増やすための23のフォームデザインのベストプラクティス

すべての企業は、より多くのフォーム送信から利益を得ることができます。 おそらく以前に見たことがあるでしょう。ほとんどのトラフィックは、フォームに記入する前に去り、残った人のすべてがフォームを完了するわけではありません.

訪問者の 100% 未満がフォームを完了する場合、チャンスがあります。

フォームはビジネスにおいて不可欠な役割を果たします。 サインアップ フォーム、ログイン フォーム、注文フォーム、支払いフォーム、フィードバック フォーム、患者フォーム、連絡フォームなど、さまざまなフォームがあります。 リードを生成し、エンゲージメントを高め、拡大するには、Web フォームが必要です。

フォームは Web サイトの訪問者とあなたの間の架け橋ですが、最適化されていないと障壁になります。

フォームに記入して送信しない限り、フォームはその役割を果たせていません。 また、企業が受け取ったフォーム データを有効に活用しない限り (たとえば、タイムリーに戻ってくる、ニュースレターを送信する、見込み顧客を獲得するためにフォーム データを充実させるなど)、フォームは無駄になります。

古いフォームを作成するのは簡単です。 優れたフォームを作成するには、何がユーザーを妨げているのかを知る必要があります。 優れた Web フォーム デザインには、すべてのフォーム要素 (ヘッダー、サブコピー、フォーム フィールド、フィールド ラベル、アクション ボタン、および修正と肯定の両方のフィードバック) を効果的に使用する方法を理解する必要があります。

それを管理すれば、コンバージョン率の高いフォームの報酬を得ることができます. 同じ量のトラフィックでより多くのリードを獲得し、マーケティング活動の費用を節約し、関連するビジネス目標をより早く達成できます。

では、どこから始めますか？

自問してください: フォームを使用する必要がありますか?

最初にフォームを使用するかどうかを決定することから始めます。 フォームがあなたやユーザーに十分な価値を提供していない場合は、フォームをまったく使用しない方がよいでしょう。 必要な情報を取得するためのより簡単な方法があるかもしれません。

ソーシャル メディアのサインアップとログイン オプションは、ユーザーが別のパスワードを作成する手間を省けるため、これらのフォームの代わりとして人気があります。 その利便性により、訪問者が目の前のアクションを実行してサイトにとどまる可能性が高くなります。

フォームを使用する価値があると判断した場合は、次のヒントを使用して戦略を伝え、究極の Web フォーム チェックリストを使用してフォームを見直し、可能な限り効果的であることを確認してください。

動機を明確にする

ユーザーがフォームから何か価値のあるものを得ていると感じると、フォームを完了する可能性が高くなります。 これは、費用対効果の分析の問題です。時間と労力を費やすことで、彼らは何を得るのでしょうか?

この記事で説明するフォーム デザインのベスト プラクティスは、フォームをより魅力的で使いやすくし、完成までのコストを削減します。 それでも、フォームの価値や目的を強調して、送信を増やすことができます。 X を実行したり、無料試用版を取得したり、ヘルプを受けたりできるアカウントを作成しますか? ユーザーが取引所から得るものは何でも、それを明確にします。

強力な見出し、利益志向のコピー、および直接的な行動喚起 (CTA) が役に立ちます。 説得がまだ行われていることを忘れないでください。

訪問者にニュースレターにサインアップしてもらいたい場合は、セールス ポイントを詳しく説明します。 「更新」は説得力がありません。 何のアップデート？ 彼らは他に何かを得ますか？ 彼らが気にする必要がある理由を彼らに伝えてください。

フォームの長さを示すことも良い習慣です。 短い場合は、CTA ボタンが表示された状態ですべてのフィールドを一度に表示して、どれだけ速いかを理解してもらいます。 数ページある長いフォームの場合は、プログレス バーを含めて、フィニッシュ ラインに近づいていると感じられるようにします。 彼らはやめて進歩を無駄にする傾向が少なくなります。

あなたの前に来た人々を観察する

誰もが Web サイトのフォームがどのようなものかについての考えを持っており、これらの考えは比較的一貫しています。 これは、ほとんどの Web フォームが一般的なガイドラインに従っており、似たような外観になっているためです。 偶然ではありません。

Web フォームはどこにでもあり、スタイルやフィールドが似ているため、人々は期待を持っています。 これらの期待に固執することで、親しみやすさ、安全性、安心感が生まれます。

新しいフィールドまたはフォームのデザインがうまくいくと思われる場合は、少しクリエイティブになることができます。 ただし、標準から大きく外れると、一部のユーザーが混乱してフォームを放棄する可能性があることに注意してください。

裁かれる準備をする

意識しているか無意識であるかに関わらず、人は外見で判断します。 企業はこの真実から逃れることはできず、Web サイトとフォームが魅力的でプロフェッショナルであることがますます重要になっています。 Web フォームがページや Web サイトのスタイルにどのように適合するかを常に検討することが役立ちます。

覚えておくべき 2 つのイントロ スタイルのヒントは、スペースと読みやすさです。

スペース:要素間に適度なスペースを確保することで、ナビゲーションをシンプルにします。 どのラベルがどの入力フィールドに対応するかを明確にする必要があります。 スペースを追加すると、フォームがより複雑に感じられる可能性のある密集した外観も防止されます。

読みやすさ:スペースは読みやすさに役立ちますが、フォーム デザイナーは、読みやすく適切なサイズのフォントなど、テキストの選択も考慮する必要があります。 常に不必要な詳細をすべて切り取り、平均的なユーザーが理解できる読み取りレベルで書きます。 文の大文字と小文字を使用すると、読みやすさも向上します。

短くしてください

獲得しようとしている見込み顧客の詳細を把握するのは簡単ですが、知る必要があることだけを尋ねる必要があります。 質問すればするほど、フォームが長くなり、フォームが長くなればなるほど、受け取る提出物は少なくなります。 時間は貴重なので、彼らを尊重してください。

必要ではないが保持するように設定されているフィールドがある場合は、どれが必須かを示します。 ほとんどの企業は、必要なフィールドをアスタリスクで示しています。 気にしないユーザーはすべてのフィールドに入力しますが、追加のフィールドへの応答や多くの個人情報の提供に関心がないユーザーは、入力時間を短縮できます。

意味のあるフィールドを凝縮することで、フォームを短く見せることもできます。 たとえば、姓名に 2 つのフィールドを使用する代わりに、氏名に 1 つのフィールドを使用できます。

ロジックを使用した構造フォーム

会話のような効果的な Web フォーム デザイン フロー。 フォームを構成するときは、リードと話していると想像してください。 論理的な順序に従い、同様の質問をグループ化します。

グループ化したら、フィールドを最も簡単なものから最も難しいものへと並べ替えます。 人々は最初に簡単な情報を記入することを好み、フォームの大部分を記入する時間を確保すると、記入する可能性が高くなります。

優れたフォーム デザインで目の動きと混乱を軽減

ユーザーの目の動きを制限することで、フォームを追跡しやすくなり、エラーやフォームの放棄を減らすことができます。

フォームのどの部分が組み合わされるかを簡単に判断できるようにすることから始めます。 フォーム フィールドのラベルは、フィールドのすぐ隣または上に配置する必要があります。下には配置しないでください。 ラベルは、2 つのフィールド間で均等にするのではなく、それぞれのフィールドに最も近いものにする必要があります。 これにより、ユーザーはどの情報がどこにあるのかをすばやく識別することができます。

2 列ではなく 1 列を使用して、フォームをすっきりと見せ、ユーザーが前後にジグザグに移動するのを防ぎます。 次に、テキストを左揃えにして、より自然に読めるようにします。

デザインに役立つヒント

フォームのデザインに組み込むことができる便利な視覚的な合図があり、ユーザーを完了に導くのに役立ちます。

これらの手がかりの 1 つは、フィールド フォーカスです。 選択されているボックスを示すことで、ユーザーがいつでもどこにいるのかを知ることができます。 これを実現するには、ボックスを太い境界線、色、またはその他の効果で強調表示します。 ユーザーが効果の意味を理解できるように、最初から最初のフィールドを強調表示することもできます。

もう 1 つの一般的な視覚的合図は、パスワード強度インジケーターです。 サインアップまたはアカウント作成フォームを設計している場合は、このインジケーターを使用して、クライアントがパスワードを作成しているときにパスワードの強度を示します。

フォームをより魅力的でナビゲートしやすくする新しいデザインのヒントを思いついたら、試してみてください。 イノベーションは歓迎しますが、機能しない場合は喜んで削除してください。

プレフィルと自動機能を活用する

事前入力、オートコンプリート、オートフィル、およびオートフォーマットにより、フォームの完了時間を短縮しながら、フォームを理解しやすくしてエラーを減らすことができます。

事前入力とは、フォーム フィールドにサンプルの回答を入力することです。 多くの場合、テキストは例であることを示すために明るい色になっています。 サンプルの回答を提供することで、フィールドに入力する内容とユーザーが入力する形式を明確にすることができます。何をするにしても、フィールド ラベルをフィールド自体に配置しないでください。 ユーザーがフィールドを選択すると、テキストが消えてしまい、ユーザーが何を入力する必要があるかを思い出すのが難しくなる可能性があります。

自動入力は、ユーザーのブラウザーに保存されているユーザー データを使用して、フォーム フィールドに自動的に入力します。 これにより、ユーザーが入力しなければならないフィールドの数を減らすことができますが、間違った情報を入力するとイライラすることもあります. 一方、オートコンプリートは、ユーザーが入力を開始した内容に基づいて、ユーザーの応答を自動的に完成させます。 これらの機能を利用するには、自動入力を使用するようにフォームを最適化してください。

実装できるスマートなデフォルトもあります。 これらのデフォルトは、ユーザーの以前の応答のデータに基づいて情報を自動入力します。 たとえば、ユーザーが市区町村を入力すると、対応する郵便番号がフォームに自動入力される場合があります。

もう 1 つの自動機能は、自動フォーマットです。 正しく行うと、コピーの指示やサンプルの回答の必要性を最小限に抑えることができます。 自動書式設定とは、フィールドがユーザーの入力を入力時に書式設定するため、ユーザーは正しい方法で入力したかどうかを考える必要がありません。 これは、日付、電話番号、クレジット カード番号など、変数の間隔や形式が異なることが多い場合に役立ちます。

条件付きロジックを使用する

フォームの質問は、特定のオーディエンス セグメントとは無関係であり、時間を無駄にすることがあります。 フォームに記入し、自分に当てはまらないいくつかの質問に答えたりスキップしたりすることほど悪いことはありません。

この可能性がある場合は、条件付きロジックの使用を検討してください。 条件付きロジックを含むフォームは、ユーザーの最初の応答に基づいて、特定のユーザーに表示する質問に基づいています。 このようにして、関連する質問のみでパーソナライズされたエクスペリエンスをユーザーに提供します。

適切な入力コントロールを使用する

フォームをデザインする場合、添付ボタン、チェックボックス、ドロップダウン メニュー、ラジオ ボタンなど、さまざまな入力コントロールを使用できます。 目的ごとに正しい入力コントロールを使用することが重要です。

チェックボックスとラジオボタンはよく混同されます。 ユーザーが選択肢の配列から複数のオプションを選択できる場合、またはオプトインまたはステートメントへの同意をユーザーに求めている場合は、チェックボックスを使用します。 ユーザーが 1 つのオプションしか選択できない場合は、ラジオ ボタンを使用します。

入力コントロールを追加するときは、倫理を念頭に置いて使用してください。 ユーザーを混乱させたり、見逃しやすい事前チェックボックスやトグルを使用することは、倫理に反する可能性があります。 場合によっては違法です。

フォームボタンで正しく行う

ボタンは重要なナビゲーション要素です。 それらは、フォームを送信したり、次の一連の質問に進むための鍵となります。 ユーザーがログインフォームを使用しているが、サインアップフォームが必要な場合など、ユーザーが正しいフォームに切り替えるのに役立つ場合があります。 ボタンはユーザーを正しい方向に導きます。

ボタンは見やすく、注目を集め、その目的を明確にする必要があります。そうしないと、フォームが放棄される可能性が高くなります。 CTA ボタンは、見やすい大きさにする必要がありますが、大きすぎてスパムだと感じてはいけません。 一部のフォームでは、ボタンを目立たせるために色やドロップ シャドウを使用しています。

フォームには、プライマリ ボタンとセカンダリ ボタンという 2 つの重要なボタンがあります。 プライマリ ボタンは、主な目的のアクションを促進し、常に表示されます。 すべてのフォームにセカンダリ ボタンがあるわけではありませんが、サポートを提供するために使用されることがよくあります。

マイクロ アニメーションやコピー アファメーションを使用して、システムがボタンの押下を登録したことをユーザーに示すこともできます。

エラーを明確にして修正しやすくする

ヘルプを提供せずにユーザーにエラーを通知するのは、イライラさせられます。 ユーザーフレンドリーなエラーメッセージが解決策を提供します。

エラーが含まれているボックスを常に表示するようにフォームを設計して、ユーザーがフォーム全体をもう一度スキャンする必要がないようにします。 インラインのエラー メッセージと検証が最適です。 これは、エラー自体のすぐ隣にメッセージが表示される場合です。 ボックスを強調表示したり、カーソルをそこに移動することもできます。

可能であれば、エラーについて具体的に説明してください。そうすれば、ユーザーはそれが何であるかを推測する必要がなくなります。 情報はあなたの記録と一致しませんか? 許可されていないタイプミスまたは記号が原因ですか? おそらく彼らはパスワードを作成していて、長さの要件を満たしていませんでした。 それが何であれ、彼らに伝えてください。

エラーが発生した場合は、その存在をすぐに共有します。 ユーザーが最終的に送信を押したとき、それはユーザーにとってより失望であり、期待する結果は発生しません。

キャッシュデータを保存

フォームへの入力を開始したが、途中で中断されたことはありませんか? WiFi が切れた、ページがリロードされた、または誤って Web サイトを終了した可能性がありますか?

キャッシュ データを保存すると、これらの種類のイベントが発生したときに、ユーザーがフォームを最初からやり直す必要がなくなります。 スクエアワンのフラストレーションから保護し、フォームを完成させる可能性を高めます。

すでにレスポンシブ デザインと友達になる

まだレスポンシブ デザインを採用していない場合は、今こそ採用するときです。 これは、フォームを含む Web サイトのすべての領域に当てはまります。

レスポンシブ デザインは、ユーザーが使用しているデバイスに適応し、Web サイトが常に美しく機能するようにします。 現在、世界のインターネット人口の 90% 以上がモバイル デバイスを使用してオンラインに接続しているため、これらのデバイスでフォームの使いやすさを維持することが重要です。

はい、ここにもアクセシビリティが適用されます

ビジネスに最適であり、法的に義務付けられているという理由だけでなく、それが正しいことだからです。 これらのサイトのすべての Web サイトと機能にアクセスできる必要があります。 これは、障害のある人を含むすべての人がアクセスして入力できるフォームを作成することを意味します。

アクセシブルなフォームは、スクリーン リーダーとうまく連携し、色に依存しません。 たとえば、赤色だけを使用してフォーム エラーを示すと、色盲のユーザーにとっては見づらくなる可能性があります。

その他のヒントについては、障害のあるユーザー向けのアクセシビリティ デザインに関するガイドをご覧ください。

作る。 それか。 コピー。 仕事。

フォームはすべてのボックスとユーザー エントリではありません。 優れた UX ライティングは、あらゆるフォームでユーザーを効率的にガイドするために不可欠です。 Form UX コピーは、エラー メッセージや、ボタン、プレースホルダー、ラベルなどのマイクロコピーに表示されます。

フォームのコピーは、短く、有益で、理解しやすいものにする必要があります。

フォームのラベルを書くときは、名詞のみを使用し、動詞は省略します (たとえば、「名前を入力してください」ではなく「名前」)。 それはより簡単で標準的です。 ボタンについては、マイクロコピーを結果指向にして、ユーザーが何をしているかを正確に把握できるようにします (たとえば、「送信」ではなく「ニュースレターを購読する」または「PDF を取得する」など)。

短くて目的を果たしている限り、フォームのコピーは便利な詳細を提供することもできます。 「名前」を「カードに記載されている名前」または「ギフト受取人の名前」に置き換えることで、ユーザーの不確実性を解決し、エラーを防ぐことができます。

もう 1 つの選択肢は、個人情報が不適切であると思われる場合に、なぜ個人情報を求めているのかを説明するマイクロコピーを追加することです。 電話番号や郵便番号を尋ねている理由と、それが明らかでない場合はどのように使用するかを共有できます。

否定的な言葉やフレーズは人々を立ち止まって考えさせる傾向があり、肯定的な言葉遣いはより友好的です. 誰かにスパムを送信しないと言っている場合でも、「スパム」などの否定的な意味合いを持つ言葉は避けてください。

コピーは、親しみやすくブランドに合っていると感じさせることで、フォームの風味にも貢献します。 フォーム フィールドは説明的なものである必要がありますが、フォーム ヘッダーやその他のテキストは、メッセージが中継される限り、ブランド メッセージを楽しむことができます。

トーク プライバシー

特にユーザーが個人情報をオンラインで共有することの脅威についてより多くの教育を受けているため、プライバシーに関する懸念は多くの形を妨げています。 ユーザーは教育を受ける必要があり、フォームはこれを考慮に入れる必要があります。

約 29% の人が、フォームを放棄する理由としてセキュリティ上の懸念を挙げています。 ユーザー データの機密性を保護するプライバシー ポリシーがある場合は、それを知らせてください。 理解して懸念を和らげ、29% の人が安心してあなたと共有できるようにします。

数字を見る

フォームを再設計する場合、最も価値のあるツールであるデータが手に入ります。

フォームでユーザーの履歴を確認し、パターンを探します。 ユーザーが離脱した場所と理由は? ユーザーが離れることを選択すると、特定のフィールドが原因で放棄されたのか、ボタンの場所が明確ではなかったのか、問題が明らかになる可能性があります。 Expedia の場合のように、1 つの紛らわしい要素を修正するだけで十分な場合もあります。

フォーム データを確認したとき、Expedia は 1 つの特定のフォーム フィールドがコンバージョンの妨げになっていることに気付きました。 間違った情報を入力すると、次のステップに進むことができませんでした。 そのため、彼らはフィールドを削除しました。

その年、彼らはフォームから1200万の利益を上げました.

A/B テストフォームのデザイン

企業は、フォームのユーザー履歴だけを見るべきではありません。 改善を続けるためにテストを実施する必要があります。 特に A/B テストは、Web フォームをアップグレードし続けるための優れた方法です。

フォームを A/B テストするには、問題のフォームの 2 つの正確なイテレーションを作成しますが、1 つの要素を変更します。 ヘッダー、マイクロコピー、CTA の色、またはフィールドの 1 つを削除することができます。 両方を指定された時間使用して、どちらのパフォーマンスが優れているかを評価します。

自分でアイデアをテストすることは、経験則としては良いことです。 たとえば、フォームの電話番号フィールドを削除するとコンバージョンが増加すると言う人もいます。 独自のオーディエンスで同じ結果が得られるかどうかを知る唯一の方法は、テストすることです。

決定: シングルステップフォームとマルチステップフォーム

シングル ステップ フォームは、すべてのフィールドを一度に一覧表示する標準フォームです。 マルチステップ フォームは、質問を複数のページに分割します。 ユーザーが最初の作業を完了すると、次の作業に進みます。

1 ステップ フォームと 2 ステップ フォームを比較したある調査では、2 ステップ フォームを完了する人が 14% 多いことが示されました。 他の研究でも、複数ステップのフォームの方がコンバージョン率が高いと主張していますが、実際には、フォームを最初に使用する理由によって最適な方法が異なります。

シングル ステップ フォームは、基本的な情報を収集し、送信を増やすのに最適です。 新しいユーザーや訪問者を怖がらせる可能性が低いため、連絡先、サポート、またはログインフォームによく使用されます.

複数ステップのフォームは、いくつかのフィールドに値する情報を収集するのに最適です。 質問を広げることで、フォームの難しさが減り、より魅力的に見えます。 このタイプのフォームは、製品の購入など、ユーザーがすでにプロセスに取り組んでいる場合に特に効果的です。 オンラインで注文する場合は、次のページに請求手順を配置するのが理にかなっています。

マルチステップ フォームを作成する場合、フォームが無限に続くことは望ましくありません。 各ページにいくつかの質問をグループ化して、ページ数が多すぎないようにします。 複数ステップのフォームを構築することは、条件付きロジックを利用する絶好の機会です。

どちらの形式を選択する場合でも、この記事で説明したデザインとコピーのヒントを実装してください。

決定: チャットボット vs Web フォーム

チャットボットの人気が高まっており、ユーザーを引き付けてユーザー エクスペリエンスを向上させる楽しい方法になる可能性があります。 パーソナライゼーションの向上や応答時間の短縮などの利点があり、一部の企業は Web フォームの代わりに使用し始めています。

しかし、チャットボットと Web フォームのどちらが優れているかは、ビジネスとユーザーによって異なります。 未来を受け入れる必要がありますが、やみくもにトレンドに従うべきではありません。 特にチャットボットは小さな投資ではないため、実際に使用する前に、チャットボットを使用するかどうかを確認するテストを実施してみてください。

チャットボットとフォームの長所と短所、およびそれらをいつ使用するかについては、次のガイドで説明します。

秘密のオプション 3: 自然言語形式

前述のとおり、Web フォームがどのように見えるかについては、長い間類似しているため、誰もが同じような考えを持っていると述べました。 まあ、それはまれな自然言語形式には完全には当てはまりません。

自然言語フォーム、または mad libs スタイルのフォームは、空欄を埋めるオプションを使用して文として書き出されます。 調査によると、これらのフォームを使用するとコンバージョンが増加することが明らかになっていますが、他のフォーム オプションと同様に、コンテキスト内で何が機能するかを自分でテストする必要があります。

自然言語形式の長所は、より自然で、魅力的で、個人的に感じられるように設計されていることです。 彼らは、日常の会話や執筆に慣れ親しんでいます。

しかし、いくつかの懸念があります。 自然言語フォームの形式はスキャンを遅くし、フォームを処理するときにほとんどのユーザーが期待するものではありません。 また、複数の言語に翻訳する際に、識字率や混乱の問題が生じる可能性もあります。

The Theme Foundry から取られた自然言語形式の例。

フォームをエクスペリエンスに変換

すべてのフォームはエクスペリエンスであるため、このヘッダーは誤称です。 しかし、すべてのフォームが優れているわけではありません。それが目標です。

フォームを持つだけでは、もはや十分ではありません。 フォームは説得力があり、魅力的で、記入しやすいものである必要があります。 ホワイト ペーパーであろうとアカウントであろうと、フォームが提供するものをユーザーが望んでいるからといって、ユーザーがフォームに入力するとは限りません。 フォームが紛らわしかったり、価値以上の労力を要したりした場合、フォームは破棄されます。

したがって、この記事のヒント。 それらを使用して、動機付けとなるマイクロコピーを使用して優れた Web フォーム デザインを作成し、コンバージョンの上昇を確認してください。

私たちの提案について質問がありますか、またはフォームについて話したいですか? 手を差し伸べる。