フォーム設計の原則: 経験に裏打ちされた 13 のベスト プラクティス

フォーム デザインのベスト プラクティスに従っていない場合は、多額の費用を無駄にすることになります。

フォームはコンバージョン最適化の最も魅力的な部分ではありませんが、お金に最も近い部分であるマクロ コンバージョンになる傾向があります。 フォームの最適化に少し時間を費やすことは、実行できる最も重要な最適化作業の一部になる可能性があります。

もちろん、ベスト プラクティスがすべてのサイトで同じように機能するわけではありません。 それは文脈上のものです。 しかし、一般的には、頻繁に機能するフォーム設計戦術を実装することは、開始するのに適した方法です。

幸いなことに、フォーム デザインのベスト プラクティスに関するデータ、ケース スタディ、調査、および例が不足することはありません。 ビジネス ケース スタディ、ブログ投稿、A/B テストの例、ユーザビリティ リサーチ、アイ トラッキング スタディなど、あらゆる場所から情報が寄せられています。

この投稿では、最も一般的なフォーム デザインのベスト プラクティスの概要を説明します。 最適化を始めたばかりの場合は、それらをベースラインとして使用してください。

フォームに取り組んでいる場合、これらのガイドラインはすぐに成果を上げるのに役立ちます。

13 フォーム設計の原則とベスト プラクティス

1. Less is more (つまり、フォーム フィールドを削除する)。

ユーザーに入力を求めるすべてのフィールドは、摩擦を増加させます。 フォーム入力を改善するためにできる最善のことは、できるだけ多くのフィールドを取り除くことです。

あるケース スタディでは、11 フィールドのコンタクト フォームが 4 フィールド バージョンに置き換えられ、フォームの入力が 160% 増加しました。 （提出物の品質は同じままでした。）

別のテストでは、5 フィールドのフォームが 9 フィールドのフォームよりも 34% 優れていました。 こちらもデータやリードの質が落ちることはありませんでした。

ほとんどのフォームは長すぎます。 それは「貪欲なマーケティング担当者症候群」です。私たちはすべてのデータが必要だと考えています。

Baymard Institute は、平均的なチェックアウトに 14.88 個のフォーム フィールドが含まれていることを発見しました。 しかし、チェックアウトのユーザビリティ テストでは、ほとんどのサイトがデフォルトで表示されるフォーム フィールドの数を 20 ～ 60% 削減できることも示されました。

基本的に、平均的なチェックアウトでは、必要なフォーム フィールドの 2 倍が表示されます。

したがって、フォームフィールドの削減は、ファネルの底部のコンバージョン最適化のゼロ点です。 最速で勝利を収めることができる場所です。 必要な労力とリソースは非常に少なく、潜在的な利益は、特に大規模な場合は非常に大きくなります。

• フォームは何種類ありますか？
• それらを体験した人はどれくらいいますか？
• 各フォームで 10% の増加は、あなたにとって何を意味しますか?

特に、リードジェネレーションを行ってリードを営業チームに渡すB2B企業の場合は特に、データに関する懸念があります. あなたは彼らが適格な見込み客であることを確認したいと考えています。 そうしないと、より多くのリードが外部性になり、無駄な生産性というコストが発生します。

たとえば、割り当てられた予算の段階的なシステムを使用してリードをスクリーニングできます。 基本的に、見込み客はいくら支払うつもりですか? 最低基準を、貴重なリードに見合うと思われる最低レベルに設定すると、多くのタイヤ キッカーを排除できます。

代理店ページの例:

フォーム フィールドを最適化するときは、データについて尋ねます。本当に必要ですか? 人々の電話、ファックス、または住所が本当に必要ですか? キャンドルを販売する場合、会社名は必要ですか? 関連するものだけを尋ねます。 Expedia は、予約フォームから「会社」フィールドを削除したことで、年間利益が 1,200 万ドル増加しました。

また、特に B2B の場合、Clearbit のようなデータ エンリッチメント企業が存在することも知っておいてください。 メールと名前を収集すると、通常、残りのデータ (会社名、規模、Twitter ハンドルなど) を充実させることができます。

次のように考えてみてください。フィールドを追加するたびに、多くの見込み客を失うことになります。 フィールドから得た追加情報は、それらの人々を失う価値がありますか? すぐにすべてのデータを取得しないと、何かを失うことはありますか?

最適なサインアップ フォームは短いものです。

いつものように、例外があります。 フォーム フィールドを減らしても、必ずしもコンバージョンが増加するとは限りません。 さらに、ユーザーについて収集する情報が多ければ多いほど、より効果的なマーケティングとターゲティングを使用できます (通常)。

ただし、一般的には、次のヒューリスティックに従うのが安全です: 役に立たない、または余分なフォーム フィールドを削除します。

2. 単一列フォームは複数列フォームよりも優れています。

これは、アイトラッキング研究 (私たち自身のものを含む)、ケーススタディ、および A/B テストでよく研究されています。 単一列または複数列のフォーム デザインを決定するときは、既定で単一列に設定します。

CXL 調査では、調査参加者は、複数列フォーム (n = 346) よりも平均 15.4 秒速く、線形の単一列フォーム (n = 356) を完了しました。 これは、95% の信頼水準で大幅に高速化されました。

このガイドラインは新しいものではありません。 実際、それは何年も前から存在していましたが、私たちの研究まで、定量的な証拠はあまりありませんでした. それでも、コンバージョンの最適化に携わる人々は、1 つの列がより使いやすいことを示す多数の説得力のあるユーザー テストや A/B テストを間違いなく目にしたことでしょう。

この規則には例外があると確信していますが (すべての場合と同様)、経験的なサポートは見つかりませんでした。

3. エラーを明確に伝えます。

ユーザーは間違いを犯します。 それは避けられません。 すべてのフォーム設計のベスト プラクティスを使用しても、ユーザーは依然としてエラー メッセージを呼び出します。 エラー メッセージをどのように処理するかが重要です。

エラー メッセージをデザインすることは、ユーザーがフォームに対して感じるフラストレーションを制限することです。 ユーザーはイライラするとストレスを感じます。 コルチゾールが蓄積し始めます。 一定のしきい値に達すると、ユーザーはあきらめて競合他社のサイトに移動します。

したがって、ユーザビリティについてはご自身で調査してください。ただし、次のエラー メッセージのベスト プラクティスから始めてください。

• ユーザーを責めないでください。
• ロボットではなく、人間のように書く。
• エラーが明確で、メッセージが直感的な場所に配置されていることを確認してください。
• ユーザーが上記のエラーを修正する方法を知っていることを確認してください。
• ページの上部にすべてのエラーをリストしないでください。 インライン検証は優れたソリューションです。

4. インライン フォーム フィールド検証を使用します。

また、エラー メッセージに関連するのは、ユーザーの送信に問題がないかどうかをユーザーに伝える方法です。 フォームの検証はそれ自体のトピック全体ですが、ここでいくつかの側面をカバーできます。

インライン検証は、リアルタイムでエラーを検出、警告、および修正するための優れた方法です。 ユーザーが「送信」を押すまで待つのではなく、何が悪かったのかをすぐに知ることができます。

インライン検証の良い例を次に示します。

インライン検証には多くの経験的サポートがあります。 2009 年に Luke Wroblewski は、コントロールに対してインライン検証 (送信後検証) をテストし、サンプルが小さいにもかかわらず、インライン バージョンで次の結果を見つけました。

• 成功率が 22% 向上。
• エラーが 22% 減少。
• 満足度が 31% 向上。
• 完了時間を 42% 短縮。
• 凝視回数が 47% 減少。

私はそれらの結果を取ります。 (多くの e コマース サイトで実行された A/B テストから、同様の結果が得られました。)

明確な期待とコミュニケーションがすべてです。 ユーザーは、何が機能し、何が機能しないかを推測する必要はありません。 期待を簡単に理解できるようにすればするほど、人々が犯す間違いが減り、より多くのフォーム入力を達成できるようになります。

5. 記入が最も簡単なものから最も難しいものへとフィールドを並べ替えます。

Robert Cialdini の「コミットメントと一貫性」の原則では、誰かが何かに向かって小さな行動や一歩を踏み出すと、最後までやり遂げなければならないと感じると述べています。 このため、最も簡単なものを最初に配置することがフォーム設計のベスト プラクティスです。

後になって摩擦を導入するのを待ちます (たとえば、請求情報やあまりにも個人的なもの)。 請求前に配送情報を入力できるようにします。 (多くの場合同じなので、再度入力する必要はありません。)

これをしないでください：

6. 入力を簡単にします。

フォーム デザインのベスト プラクティスの包括的な原則が次々と浮かび上がります。

ユーザーがフォームに入力する必要がある入力の量を制限します。 1 つの方法は、オートフィルなどの機能を使用して可能な限り自動化することです。

自動入力を決定するときは、次の点を考慮してください。

• このフィールドに適したデフォルトはありますか?
• 利用可能な履歴は何ですか？
• 一般的に使用される値はありますか?
• モバイル機能または設定のブラウザを使用してフィールドにデータを入力できますか?
• フィールドを計算できますか？ (例: 郵便番号に基づいて州を自動入力)

自動フォーマットも非常に重要です (そして、イライラするほど十分に活用されていません)。 ユーザーが任意の方法でデータ (特に、郵便番号、電話番号、クレジット カードなどのフィールド) を入力できるようにします。 入力後にフォーマットを修正するには、数行のコードが必要です。 あなたの怠惰がユーザー体験を台無しにしないようにしてください。

だからこれをしないでください：

7. 各フィールドが必須かオプションかを示します (すべてが必須でない場合)。

まず、これらのオプション フィールドを含める必要があるかどうかを尋ねます。 ほとんどの場合、それらは不要です。 たとえば、私の肩書きやミドルネームが必要なのは誰ですか? なぜ 1 つのフィールドを 4 つにするのですか?

ユーザーが開始できるように、ユーザーから必要な情報に焦点を当てます。 ユーザーが家に座って「なぜこれが必要なの?!」と考えてほしくありません。

すべてが必須でない限り、各フィールドが必須かオプションかを示します。

8. 名前と電話番号のフィールドは1 つのフィールドにする必要があります。

名と姓のフィールドの代わりに、「フルネーム」と書かれたフィールドを用意します。 電話番号の 3 つのフィールドの代わりに、1 つを使用します。

複数のフィールドの問題は、相互作用の問題です。 一般に、フォーム設計のベスト プラクティスは、「フィールドが少ないほど良い」です。

モバイル デバイスを使用して、名前と番号のフィールドを 2 つではなく 5 つ (名前は 2 つ、番号は 3 つ) タップしなければならないことを想像してみてください。 不必要な摩擦。

9. ドロップダウン ボックスの代わりにラジオ ボタンを提供します。

UX Movement は、選択メニューを含むフォームは、「完了するまでにより多くの時間と労力がかかる」ため、放棄されることが多いと主張しました。

より具体的には、彼らは、ユーザー フローを中断し、読みにくく、器用なマウス操作を必要とすることで、ユーザーの動作を遅くしていると主張しました。 彼らは裏付けとなるデータを提供しませんでした。

まあ、テストするのは簡単です。 だから私たちはやった。 私たちは、オンラインの信頼の認識に関する大規模な調査を開始したばかりだったので、調査フォームを操作して、さまざまな形式 (複数選択とラジオ ボタン) で同じ質問をさまざまな人に尋ねる機会がありました。

結果？ ラジオボタン付きのフォームは、より速く完了しました。 調査参加者は、複数選択ボタンを使用したフォーム (n = 354) よりも平均 2.5 秒速く、ラジオ ボタン フォーム (n = 354) を完了しました。 これは 95% レベルで大幅に高速化されました。

10. クーポン コード フィールドを目立つようにしないでください。

「ここにクーポンコードを入力してください」という欄を見ると、特別感が薄れます。 彼らは、「なぜ私はそれを持っていないのですか？」と考えています。 彼らはFOMOを取得します。

多くの人が Google でクーポンを検索します。 サードパーティのサイトでクーポンを見つけて、利益を減らす人もいます。 多くの人は二度と戻りません。

クーポンを検索するためにサイトを離れることは、ショッピング カートを放棄する一般的な理由です。

したがって、これは良い考えではありません。

大きなバナーの代わりに、「クーポンはありますか?」というテキスト リンクを表示します。 （または同様のもの）。 ユーザーがリンクをクリックすると、入力フィールドが開きます。 テキスト リンクは視覚的に目立たないため、注意を払う人は少なくなります。

クーポン コードを既にお持ちのお客様は、その入力方法を探しますので、(あまりにも) うまく非表示にしない限り、クーポンを適用することができます。 また、顧客が (メールで) クーポンを受け取った場合は、クーポンを自動的に適用し、割引を表示します。

11. 「フィールドをクリア」ボタンは使用しないでください。

あなたのフォームに記入する人は誰もフィールドをクリアしたくありません. 記入したくない場合は、ただ離れることができます。

フォームに入力して誤ってフィールドをクリアした場合、最初からやり直さない可能性が高くなります。

モバイル固有のフォーム設計のベスト プラクティス

上記のほとんどはモバイルにも適用できますが、小さな画面で留意すべき特定の問題がいくつかあります。 モバイル ユーザーは辛抱強くなく、スマートフォンの使用はデスクトップの使用よりも困難です。

このトピックに関する投稿全体があるので、そこを深く掘り下げてください。 ただし、いくつかの開始点が必要な場合は、次のガイドラインに従ってください。

12. 分野に焦点を当てます。

複数のフィールドを持つフォームがある場合、ユーザーがフォームの中で迷子になることは望ましくありません。 これは、モバイル デバイスでは特に重要です。画面が小さいほど、フォームを視覚的に制御できなくなります。

編集中の入力フィールドを目立たせ、集中させます。

13. パスワードをマスクしないでください。

ユーザーがパスワードを入力するときにパスワードを表示することはセキュリティ上の問題のように思えるかもしれませんが、ユーザー エクスペリエンスにとってははるかに優れています。

NN/g が要約したように:

ユーザーがパスワードを入力すると、ユーザビリティが損なわれ、ユーザーが受け取る唯一のフィードバックは箇条書きです。 通常、パスワードをマスキングしてもセキュリティは向上しませんが、ログインの失敗によりビジネスにコストがかかります。

警告: 独自の実験を実行してください。

何かが「ベスト プラクティス」であるからといって、それが常に最適なソリューションであるとは限りません。 ベスト プラクティスが失敗することもあります。

ウェブサイトは文脈に依存します。 あるサイトで機能するものは、別のサイトでは機能しない場合があります。

さらに、ビジネスの状況は異なる場合があります。 もしかしたら、そのミドル ネームがデータの一部として本当に必要なのかもしれません。 判断する私は誰ですか？

ですから、すべてを一粒の塩で取ってください。 すべてがテストされ、研究されていることを理解しておいてください。しかし、結局のところ、重要なのはサイト上で、そしてビジネス コンテキストでどのように機能するかだけです。

これらはガイドラインであり、義務ではありません。

結論

優れたフォーム デザインの原則は、多くの場合機能しますが、普遍的ではありません。 特効薬の解決策はありません。これは自分でテストする必要があります。

しかし、ゼロから始める場合、これらのフォーム デザインのベスト プラクティスは適切なベースラインです。開始する場所ではありますが、最終的に到達する場所ではありません。

これに関連する何かに取り組んでいますか？ CXL コミュニティにコメントを投稿してください。