複数ページのフォームは、一つ一つの入力ページをスッキリと見せることができますが、その半面遷移の手間が増えたり、全体を俯瞰しにくいという欠点があります。
対して単一ページのフォームは、遷移の手間こそないものの、ページ内の項目数が多くなることで直帰の増加や項目の記入漏れなどを引き起こす可能性があります。
このように、とくに入力項目数が多いフォームについては、フォーム入力を複数ページに分けるべきか、もしくはひとつの画面のなかにすべての項目を収めてしまうかのいずれかでしばしば議論や検証が実施されます。
今回はそんなフォームの画面数による検証結果をいくつか集め、ご紹介していきます。
目次
複数ページ⇒単一ページへの検証
まずご紹介するのは、Elastic Paths社によるABテストのケーススタディです。
検証は、バンクーバー五輪のグッス等を販売する公式ウェブショップの決済フォームで実施されました。
検証内容
改善前のフォームは、下記の通り複数のステップで構築されていました。
- サインインor会員登録
- 配送先の入力
- 決済情報の入力
- 完了
そして改善後のフォームは、いきなり配送先の入力、決済情報の入力から始まります。サインインは省略されています。
会員登録は完了ページ内から任意で行うことができます。
結果
上記の2種類のフォームでスプリットランを実施したところ、改善後のフォームが、21.8％上回る結果となったようです。
これは非常に驚くべき結果ですね。
しかしこの検証の場合、フォームを単一ページにしたことによる改善効果か、サインインの省略および会員登録のオプション化によるものなのかを判断することが難しいように思います。
記事も下記のように締めくくっています。
この改善率は非常に印象的ですが、すべてのフォームで効果的な指標とするべきではありません。
検証結果は製品やターゲットの市場によって異なります。すべてのビジネスモデルに最適な特効薬ではないのです。
独自のABスプリットテストを行うことが、改善のより良いアイデアを与えてくれるでしょう。
複数ページ⇒単一ページへの検証
もう一つ似たような例を紹介しましょう。
UX MAGAZINEで紹介されていたCharmandisingという音楽系Eコマースサイトの事例でも、同様に複数ページの購入プロセスを単一ページにまとめるという
施策を実施しています。
検証内容
改善前のページはこちら。
カート、配送先、支払い、という3ステップのフローが表示されており、複数ページのフォームということが確認できます。
改善後のスクリーンショットです。
カートの中身、住所等や決済情報の入力がすべて1ページにまとまっています。
結果
単一ページのフォームに改修後、なんと売上が67％増加したとのことです。
この例では、もともと各ページの入力項目数が少ないことあり、1ページにまとめた場合もそこまで項目数が多くありません。その点もこの優れた検証結果に寄与しているようにも思います。
ステップを増やした検証
お次に紹介するのは、逆にフォームの入力ページ数を増やした改善例です。
Crazy EggというWebサービスのトライアルフォームの例をご紹介します。
検証内容
もともとのフォームは、まずはプランを選択し、そのあとアカウント情報と決済情報を入力するという構成の全２ページのフォームでした。
「Crazy Egg」のプラン選択画面。
改善後のフォームは、2ページ目部分をさらに分割し、
- プランの選択
- アカウント作成
- 決済情報
という３ページの構成に変更するという、あえてページ数を増やす施策を実施しました。
現在の「Crazy Egg」のアカウント作成画面。これらを入力してからその先で初めて決済情報が現れる
結果
この改善により、フォームのコンバージョンは10％増加したとのことです。
このフォームはアカウントの作成だけでトライアルが利用できるようにも思えます。が、それがおそらくこの改修の狙いなのではと思います。
決済情報を入力することに躊躇してしまうユーザーも、比較的ハードルの低いアカウント情報から「徐々に」登録を進めてしまうことで、心理的障壁が低くなる効果を生み出しているように思います。
さらに言うと、もしユーザーが決済情報の時点で離脱してしまった場合でも、アカウント情報は登録されているので、Eメールマーケティングなどで需要を喚起するような施策も実施できますね。
アコーディオン型フォームによる検証
続いて紹介するのはLuke Wroblewski氏によるアコーディオン型フォームの検証です。
検証内容
下記A～Dの4種類の形態での同じ入力項目を持つフォームについて、標準的なユーザビリティ検証とアイトラッキング調査が実施されたようです。
- 複数ページのフォーム
- 1画面にまとめたフォーム
- アコーディオン型1
- アコーディオン型2
結果
ユーザビリティ調査の結果、いずれのフォームの形態でも、コンバージョン率には重大な影響を与えないという結論になったようです。
入力の速さはアコーディオンフォームが最速だったものの、入力箇所以外の見出し類にユーザーは関心が無いとの結果となったようです。
http://static.lukew.com/InputBeyondForms_07132010.pdf （35P～）
http://www.lukew.com/ff/entry.asp?1579
番外編：検証の観点
最後に、単一画面のフォーム＝「ワンページチェックアウト」の考え方について示唆する記事を紹介して終わりたいと思います。
Baymardの記事では、「ワンページチェックアウト」について、巷に溢れている改善のケーススタディについて、必ずしも画面数が与えた影響ではないことなど示唆しつつも、
それでもこの概念が非常によく議論されてくることについて下記の「非常に重要な２つの理由」があるとしています。
話題にするのが簡単
複数ページを単一にする、という検証アイデアはものすごくシンプルであり、誰が聞いても理解しやすく説得力があるため。
厳しい決断が容易になる
大規模な組織などでは、入力項目の削減ひとつをとっても意思決定が困難な場合がある。
しかし「フォームを1ページにまとめる」という目的がある場合、その意思決定が容易になる場合があるため
そして最後は以下のように結論づけています。
単一ページのフォームは必ずしも最適化された複数ページのフォームよりも優れた働きをしませんが、
EFOのプロジェクトの議論や実装をスムーズするためには依然として重要な考えかたです。
最後に
いかがだったでしょうか。本日は海外の記事から、フォームの画面数の増減に関するケースステディをまとめてご紹介しました。
さまざまなケーススタディを見てきましたが、結論として、改善のためには単一または複数ページのフォームのいずれかの形をとるべき、と述べた例はひとつもありませんでした。
むしろコンバージョン率に与える影響はあまりないといった結論もいくつか見受けられました。
確かにフォームのページが幾つかにわかれているかまとまっているかのそれそのものには、あまり意味がないのかもしれません。
成功しているケースをよく見ると、フォームの画面数を変えることに伴って項目数が減っていたり、ユーザーの心理的障壁を軽減するなどの副次的な改善ポイントが生まれ、そのことが実際の改善につながっているような印象を受けます。
最後のBaymardの記事が触れているように、そういった意味では「単一ページVS複数ページ」の議論は、フォーム改善に新しい視点を与えてくれる重要な考え方ということなのかもしれませんね。
どちらが正解？複数ステップのフォームVS単一ページのフォーム https://t.co/ASY97Mbw58 @ftraEFOさんから
正解はない、というのが正解ということが分かる良記事 | どちらが正解？複数ステップのフォームVS単一ページのフォーム | EFO・フォーム改善ブログ https://t.co/Chn1gBMQij
Web Form Design – Single page VS Multiple page (Only JP)
https://t.co/I2mrdwin4c