ECサイトの購入フォームなどはどうしても必要とする情報量が多くなります。
そのように入力画面が複数ページ存在するフォームでは、当然入力途中での離脱リスクが高まります。
本日は複数の入力ページがあるフォームにおいて、とくに気をつけておきたいEFOのポイントをまとめたいと思います。

目次

  • 項目の登場する順番は適切か?
  • フロー表示は挿入されているか
  • 余計なリンクはないか
  • 最適なコンテンツをあらかじめ案内する
  • 離脱ブロックは導入しているか?
  • リアルタイムアラートは導入しているか?
  • 画面遷移が多すぎ/少なすぎないか

項目の順番は適切か?

自然な流れで入力項目を表示させましょう。
たとえば購入フォームならば、商品選択し、発送先なとの個人情報を入力、最後に決済、という流れが一般的です。
また会員登録を挟む場合は、冒頭に挿入するのが自然です。
この順番にするべき、という明確なルールがあるわけではないのですが、一般的に多い流れや、使ってみて不自然にならないような画面遷移を設計しましょう。

フロー表示は挿入されているか

入力画面が複数ある場合は、フロー表示は必須です。

Amazon.co.jpのフロー
Amazon.co.jpのフロー

このフロー表示がないと、完了までにあといくつ画面があるのかわかりません。
ゴールが見えないとユーザーは不安になってしまいますので、必ずフロー表示をフォーム上部に設置するようにしましょう。

余計なリンクはないか

余計なリンクを排除したフォームの例
余計なリンクを排除したフォームの例

ユーザーをフォーム入力に集中させるために、余計な情報は排除しましょう。
画面が複数あると、そのぶんだけユーザーの興味が移ったりなどの離脱のリスクが高まります。

最適なコンテンツをあらかじめ案内する

配送料について詳しく知りたい、配達期間は?決済方法は何があるのか?予約のキャンセル料は?等、フォームの入力を進めるうちにユーザーが疑問をいだくことがあります。
その都度ユーザーをフォームから逃がさないよう、極力ヘルプや関連項目など、画面に応じて想定される必要コンテンツへのリンクをあらかじめ用意し、ユーザーが探しに戻らなくても良いようにしましょう。
もちろんリンクは別ウィンドウなどで表示させるような形が理想的です。

離脱ブロックは導入しているか?

離脱ブロック
もちろん、操作ミスでの離脱を防ぐために離脱ブロックの導入は忘れずに行いたいところです。

リアルタイムアラートは導入しているか?

画面が多い分、各画面でエラーが出てしまうと、画面遷移がかなりの数に。ユーザーがストレスを感じる原因となります。
URLのエラーダイアログ
なるべく遷移時のエラーを出さないよう、リアルタイムにエラー判定を実施する機能を導入しておくと良いでしょう。

画面遷移が多すぎ/少なすぎないか

画面遷移が多すぎるとストレスになりますし、逆に僅かな画面に詰め込みすぎるのも入力ミスの元。
入力確認のタイミングを適度にまとめて画面数をおさえつつ、1ページあたりの情報量も適切なボリュームを心がけましょう。

まとめ

いかがだったでしょうか。
本日は複数の入力画面のあるフォームで特に気をつけたいポイントについてお伝えしました。
上記のポイントを採り入れ、少しでも途中離脱を減らし、送信完了に至るフォームに改善していきたいですね。