事例と改善率付き!フォーム改善で試すべき、ABテストの検証テーマ7選

EFO向けの改善施策にはさまざまなものがあります。必ず何らかの成績改善につながると思われる施策があるいっぽうで、必ずしもこれといった正解がない改善ポイントも存在します
EFOへの初期段階では当然前者が取り組みやすく、すぐに効果も感じることができると思います。しかし、いつか改善効果が頭打ちになる可能性が高く、さらに深くフォーム改善に取り組むためには後者に目を向ける必要が出てきます。

正解がない改善施策では、ABテストによる検証が効果的です。
今回はABテストの題材にしたい、そのフォームによって最適解が異なる改善ポイントを7つをご紹介したいと思います。

入力ページ数

EFOの観点では、ページの遷移数が多いことがユーザーに負担を与え、そのためできるだけフォームの入力ページ数は少ないほうが良いと考えるのが一般的です。

以前の記事でも紹介しましたが、Charmandisingという音楽系Eコマースサイトの事例では、複数ページの購入プロセスを単一ページにまとめたところ、売上が67%増加したという事例があるそうです。

しかし、その逆の事例も存在します。
Crazy EggというWebサービスのトライアルフォームの例では、
(1)プランの選択(2)アカウント作成と決済情報 という構成の2ページのフォームでしたが、この2ページ目をさらに分割し、
(1)プランの選択(2)アカウント作成(3)決済情報 という3ページの構成に変更するという、あえてページ数を増やす施策を実施しました。

現在の「Crazy Egg」のプラン選択画面。

現在の「Crazy Egg」のプラン選択画面。

現在の「Crazy Egg」のアカウント登録画面

現在の「Crazy Egg」のアカウント登録画面

この改善により、フォームのコンバージョンは10%増加したとのことです。

(2)の時点では決済情報を入力することに躊躇してしまうユーザーも、比較的ハードルの低いアカウント情報から「徐々に」登録を進めてしまうことで、心理的障壁が低くなる効果を生み出しているようです。

このように、「入力ページ数は少ないほどよい」とは一概に言えないため、ぜひ複数のパターンを検証してみてはいかがでしょうか

確認ページの有無

確認ページの有無も同様に、コンバージョン率に変化をもたらします。

当社メディアの事例では、確認画面を省略したところ、フォームの送信完了率が1.2倍となりました。

いっぽうで、送信ボタンの文言などとの兼ね合いもありますが、確認ページをなくすことで完了率が逆に悪化する例や、完了率は上がったけれども引き上げ率が悪化するという可能性も考えられます。
ご担当のフォームでどの方法がベストかはぜひABテストを実施して確かめましょう。

ボタンの色(形状、大きさ)

hubspotでは、下記のように緑色と赤色のボタンを用意してABテストを実施しました。

緑色と赤色のボタンのフォーム2種類を用意してABテストを実施。 引用元:http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx

緑色と赤色のボタンのフォーム2種類を用意してABテストを実施。
引用元:http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx

テストの結果は、なんと赤色のボタンのフォームが、緑色に比べ21%も高いクリック率を記録しました。

「赤」というと警告やエラーの色、「緑」といえば安心安全や成功を連想するため、なんとなく緑色のほうがクリック率が高くなりそうに思えますが、結果は逆となりました。
もちろん、世の中には緑のほうが調子が良いというフォームもあるでしょう。
あなたのフォームに最適な色を、ABテストを繰り返すことで見つけてみてはいかがでしょうか。

弊社サイト(寒色系デザイン)の例でも、ボタンを寒色系から暖色系に変えたところ入力完了率が1.9倍増加した事例があります。

ボタンの色だけでも完了率にインパクトが

ボタンの色だけでも完了率にインパクトが

その他、色以外にも形状、大きさなどのボタンの改善方法は下記に詳しくまとめています。

【EFO施策】フォーム最適化・最大の要<送信ボタン>を攻略する、9つの掟
https://f-tra.jp/blog/column/1862

ボタンの文言

ドライフラワーなどの装飾製品を扱うECサイト「Curious Country Creations」では、購入フォームのボタンの文言を「submit(送信)」から「支払いオプションに移動」という文言に変更したことで、そのボタンのクリック率が88%向上したという結果が報告されているそうです。

このように、ボタンは色や形状だけではなく文言を変更するだけでもクリック率やコンバージョン率に影響を与える可能性があります。
さまざまな文言で検証されてみてはいかがでしょうか。

オファー文言

フォーム入力の前に送信のメリットを訴求するコンテンツをオファーと読んでいます。
このオファーの訴求方法によって、ユーザーのフォーム送信へのモチベーションは大きく左右されます

当社運営メディアでは、オファーの文字を大きくしたり、モデル写真の挿入、デザインををポップな色合いに変更した結果、フォーム送信完了率は1.3倍に増加しました。

当社運営メディアでの、オファーコンテンツのBefore&After

デザインをキャッチーにしたり、わかりやすくするだけではなく、訴求方法そのものを大きく変えてみるのも手法のひとつです。

別の当社運営メディアでは、免許合宿の予約フォームに対して「空き枠の確認」という側面に大胆にフォーカスした訴求を実施しました。

通常の予約フォーム(Before)と、空き枠の確認にフォーカスした例(After)

通常の予約フォーム(Before)と、空き枠の確認にフォーカスした例(After)

この改善では、フォーム完了率は飛躍的に改善したもものの、ライトなユーザーのコンバージョンが増加したことにより引き上げ率も大きく低下し、最終的な成約数としてはあまり変わらない結果となりました。
結局、コールセンターの負担等も考慮し、この改善施策は打ち切り以前のクリエイティブに戻すという判断を行いました。

このように、フォームの訴求を変えることでコンバージョンの数や質が大きく変化するということはおわかりいただけたのではと思います。
あなたのフォーム、そしてビジネスに最適な訴求を行うことが大切です。

項目の順番

フォーム内の項目は、最終的な入力量は変わらなくても、登場する順番によりユーザーが感じる心理的ハードルは大きく変化します。
詳しくは下記の記事で説明しているのですが、ユーザーにとって入力内容の自由度が高い項目や、エラーが出やすい入力内容、決済情報などとくに入力に慎重になりやすいもの、固有名詞が登場するラベルなどが最初に位置していると、ユーザーはフォーム入力をためらいがちです。
順番を変えるだけで成績アップ!?フォームの1つ目に[OK][NG]な項目とは?【EFO】
https://f-tra.jp/blog/column/2404

Kissmetricsのブログでは、5%のコンバージョン率の改善に貢献した施策事例のひとつとして、入力内容の順序の改善例が紹介されています。
具体的には、Eコマースサイトの「配送情報」と「決済情報」の入力順について、「決済情報」の順番をを後ろにすることでカート放棄率の改善が見られたとのことです。


この場合、配送先よりも決済情報のほうがユーザーの心理的ハードルが高かったということでしょうか。
もちろん対象とする商材やフォームの種別に依っても結果は変わるでしょう。ぜひ項目の配置や順番でもABテストを実施してみましょう。

項目の数

neilpatelの例では、4つの入力項目のうちのひとつを削除し、3つの入力欄にしたところ、コンバージョン率が26%上昇した事例を紹介しています。

このように項目の数は少ないほど完了率が高まるのは多くの場合事実ですが、引き上げ率まで考えた場はまた別の話。ただやみくもに項目を減らぜばよいというわけではありません
ぜひ項目が多い場合と少ない場合の両方を試して、ビジネスに最終的に良い影響を与える方法をチョイスしたいですね。

最後に

いかがだったでしょうか。本日はEFOに取り組む際のABテストにおすすめの題材を7つ、ご紹介しました。
今回はたくさんの改善事例を紹介しましたが、ここで紹介した施策があなたのフォームでも効果を発揮するとは限りません。
ぜひ地道なABテストを通して、ご担当のフォームの最適解を見つけてみてください。

参考記事:
http://www.quicksprout.com/2013/01/14/11-obvious-ab-tests-you-should-try/
http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx
http://uxmag.com/articles/shopping-cart-usability
https://blog.kissmetrics.com/first-step-of-checkout/

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です