コンバージョンにつながるフォームのデザインを調査する

エクスペリエンスデザインの基礎知識

サイトやアプリのUIの中でも、おそらくフォームほどミスが紛れ込みやすいものは無いでしょう。そして、フォームはほとんどのサイトで見かけるありふれたものです。しかし、その小さな領域は大きな力を秘めており、それだけに、効率的にフォームをデザインすることは重要です。

フォームは顧客の獲得につながるデーターを収集する鍵です。名前やメールアドレスや携帯番号をはじめ、特定の好みもフォームから得られます。こうしたデータがあれば、マーケティングチームはより自信を持って、顧客をコンバージョンへと導けるようになるでしょう。

つまるところ、フォームの役割は、可能な限り多くのコンバージョンを得ることです。そこで、気の利いたフォームデザインに役立つ、いくつかのデータを見ていきましょう。

少ないことは本当により多くの結果につながる

Webページ上で、人々が集中している時間はごく僅かです。要点にすぐにたどり着けなければ、訪問者はコンテンツから離脱してしまうでしょう。マイクロソフトのChao Liuとその同僚による研究によれば、ユーザーがページから離脱するまでの時間は10秒から20秒ということです。訪問者に特定のアクションを促すために使える時間は、ごくわずかです。従って、UX調査企業ニールセン・ノーマン・グループは、10秒以内に明確に価値を伝えることができなければ、訪問者を失うリスクがあると警告しています。

ページの価値を明確に伝えるための基本的な方策は、コンテンツを減らし、ユーザーを圧倒しないことです。

それを実現する最善の手段のひとつは、フォーム内のフィールド数を減らすことです。フォーム内に数多くのフィールドを並べて、訪問者にその意味を把握するよう強要する代わりに、基本的な情報だけを問うようにするのです。

そこで気になるのは、フィールド数がいくつなら少ないと言えるかです。ここでデータの助けを借りましょう。

Marketing Experimentsが行った、マーケティングの自動化プラットフォームMarketoに関する研究によると、見込み客の獲得は、5つのフィールドのフォームが、7つや9つのフィールドのフォームを上回りました。具体的には、それぞれ、13.4 %, 12 %, 10 %です。

このデータを根拠に、HubSpotは、短いフォームほどより多くの人にフォームの入力を完了させやすく、より多い見込み客の獲得につながると結論付けました。

しかし、そのマイナス面は、見込み客の質と入力されたデータの質がどちらも低くなりがちなことです。基本的な情報しか知らない時は、より深い情報を知っている時ほど効果的にフォローすることはできないでしょう。

そこで、次の考慮点が浮かび上がってきます。

より長いフォームは質の高さを意味する

もし既に数多くの見込み客をフォームから獲得しているWebサイトで、質の良いリードを見つけるためにデータの選別に苦労しているならば、上で紹介したデータは気にせずに、長いフォームに変更しても良いかもしれません。フォームの完了率が下がり、獲得できる見込み顧客の数が減るのは確かだとしても、長いフォームを埋めるのに時間を費やした、つまり明らかにより高い興味を持った質の高い見込み客を得られる可能性があります。

見込み客についてのより詳細なデータを得られれば、マーケティングチームはより適切な対応を行えます。調査結果の中には、フィールド数の多い、長いフォームの使用を後押しするものも存在します。

先述のMarketing Experimentsによる大手の報道機関のケーススタディは、フォームのフィールド数を11から15に増やすことにより、コンバージョンを109％増加させることに成功した様子を詳しく伝えます。続く検証では、フィールド数を11から10に減らしたところ、コンバージョンは87%増加しました。これらのデータからは、フィールド数を15から10に減らすとコンバージョンが20％減るという結論になります。

このケーススタディを解説するビデオは大変長く、41分以上あります。そこで、覚えておくべき重要な考慮点を、読者の皆さんのために、以下に記述しておきます。

フォームデザインの注意点

これまでに示した相反するデータが提示しているのは、常にテストを行い、何回も繰り返して検証することの重要性です。

言い換えれば、効果的な（コンバージョン率が高い）フォームかどうかを決めるのはフォームの長さだけではなくて、それ以外にも沢山の要素があるということです。以下は、結果につながるフォームをデザインするために行うべき項目です。

読みやすいように、大きなフォーム、フィールド、テキストを使用する
説得力があり明快なアクションへの誘導により混乱を減らす
モバイルとデスクトップのどちらでも機能するフォームにする
フォーム入力を行う価値を見込み顧客に提供する
目的に合わせて調整したフォームを用意する（例えば、新規アカウント登録とメール配信の登録フォームは異なるはず）
自動入力を適切に使う

最後の項目は、さらに詳しい説明が必要です。

自動入力の使い方

自動入力は、数限りないフラストレーションの原因になるものです。フォームの最も使いこなすのが難しい機能の一つであり、フォーム体験の良し悪しを決める要素になることもあります。

以下は、自動入力を設計するする際に考慮すべき項目です。

ChromeやFirefoxのようなブラウザでは自動入力を有効にする。その際、ブラウザが理解できるタグ（名前、電話番号、メールアドレス等）をフィールドに関連付けること
ユーザーが最初の文字を入力したら、すぐにドロップダウンリスト内に候補を表示して、素早く自動入力が使える状況を確実に
ユーザーの履歴やプロフィールに合った意味のある候補を表示する

次に、ユーザーのフォーム入力を邪魔しないための注意点です。

カーソルを次のフィールドへ自動的に移動させない。それを期待していないユーザーを困惑させることになる
自動入力の候補の間に、大きく間隔を開けたり視覚的な区切りを表示しない（色を交互に変えるのは論外）
フィールドに何のデータを入力しているのか、一目では分かない不明確なラベルをつけない

フォームデザインに関わる多くの要素

フォームは見込み客を呼び込む窓口です。サイトやアプリがビジネスの継続に必要なコンバージョンを獲得するための、必須の要素です。

フォームのデザインは、決して単純な理論で決まるものではありません。フォームの体験とコンバージョンに影響する要素は数多く存在します。デザイナーは極めて注意深く、フォームとフィールドすべての可能性に配慮し、長さやテキストや自動入力が与えるプラスとマイナスの影響を確認すべきです。

フォームを確実に最適化するには、繰り返しデザインしてテストを行い、結果を比較することです。

この記事はWhen Less Is More: The Dos and Don’ts of Designing Web Forms（著者:Marc Schenker）の抄訳です