購入フォームや会員登録を含むWEBサービスなど、入力ページが複数存在するフォームは数多くあります。
ひとつひとつのページから離脱を起こしにくくするための改善もEFOとしては重要ですが、入力ページが多いフォームでは特にフォーム全体の流れを意識してユーザー・エクスペリエンスの設計を行うことも大切です。
今回はフォームの全体のステップに注目して、この点について考えていきます。
さっそくですが、まずはフォームのステップに関するよくある課題を具体的にいくつかご紹介したいと思います。
会員登録をはさみ、最初に戻ってくる
ECサイトを例にとって考えてみます。
例えば、ある商品をカートに入れ購入に進もうとしたところ、会員登録を促されるということがあります。
この流れそのものはよくあるケースですし問題ないでしょう。
しかし、問題は会員登録が完了した後。
具体的にはこんなケースが要注意です。
case1. 会員登録後、ログインを促す
会員登録後、ログインを促されるケース。
さきほど登録したばかりのメールアドレスやパスワードなど、同じ内容を再度入力しなければならないという二度手間そのものがストレスです。
このとき、フォームのステップとしては下記のようになっています。
このようなケースでは、会員登録を開始したときとまったく同じ認証ページに再び遷移することがほとんどです。
case2. トップページに遷移してしまう
登録完了後、ログインは自動的に行われているものの、遷移した先がサイトのトップページ…という例。
再度購入ページまで遷移しなくてはならず、こちらも二度手間感満載です。
ステップとしては下記のとおりです。
以上2つの例のように、以前の画面に戻ってくる、つまり画面がふりだしに戻ってしまう場合は要注意です。
実際の購入のフローとしては前進していたとしても、ユーザーにとっては、画面に対する既視感によりまったく進んでいないような印象を与えてしまう可能性があります。
case3. モーダルウィンドウなどで行き来する
次にご紹介するのは、あるページを拠点に、モーダルウィンドウで複数の登録フォームを呼び出すというケースです。
上記のAmazonの例のように、「ギフトの設定」といったオプション的なメニューであれば問題はないのですが、
たとえば「決済情報」や「住所」など購入に必須の情報をモーダルウィンドウで表示する場合は要注意です。
※このとき、ステップとしては下記のようになります
一見、送信完了までに必要なすべての情報を俯瞰できて良さそうにも思えますが、
「モーダルを開けて登録する」という行為はユーザーに委ねられているため、「どの情報を登録し終え、どの情報がまだか」をユーザー自身が見極めている必要があります。
そのため、流れに乗って情報を入力するのに比べ、ユーザーに負担がかかってしまうとも言えるでしょう。
また、好きな順番で入力に取り掛かれる反面、漏れが発生する危険性が高まります。
case4. 2つの独立したフォームを入力する
一部のウェブサービスにおいては、「あるサイトに登録していないと、あるサイトが登録できない」というように、会員登録が入れ子構造になっている場合があります。
できればひとつのフォームに統一されていることが望ましいですが、システムの関係上難しいためにそのような形をとっているということでしょう。
ステップは下記のようになります。
流れとしては一方向なのですが、「入力⇒確認⇒完了」のステップを2回繰り返すということで手間が増えます。
また、異なる2つのフォームに登録することで、本当に目的のサービスに登録しているのかという不安を感じるユーザーも少なくないのではないでしょうか。
理想的なのは、単一・直線型ステップのフォーム
ここまで、フォームのステップが問題になりうるケースについて紹介してきました。
いずれのステップも、青色とオレンジ色で示したように、ステップの分岐が存在するということにお気づきでしょうか。
(※厳密にはcase4では分岐はありませんが、別々のフォームなので異なる色で表しています)
フォームのステップに関する問題を解消するには、この「分岐」をなくし、一直線状に流れを設計することが大切です。
一直線の流れ
直線のステップのフォームは、ユーザーが以前見たことのある画面に遷移しないよう、会員登録後は自動的にログインし、なおかつ次のステップに進んでいる状態です。
また、流れに沿って入力を進めていけば、必要な情報を漏れ無く登録できるということも、直線のステップのフォームの特徴と言えるでしょう。
さらにステップを改善
上記のとおり、フォームのステップを直線上にするだけで、問題の多くは解消することができますが、
さらに理想的なステップを作るための方法についても言及しておきたいと思います。
送信のついでに会員登録を実施できる形に
ステップが多いと、そのぶんユーザーの手間も増え、離脱機会も増えることとなります。
当然、ステップは少ないに越したことはありません。
そこで会員登録を最初のステップとして設けるのではなく、初回利用時に同時に登録できたり、自動で登録してしまう流れにすることで、ステップを大幅に短縮することができ、シンプルなフォームとなります。
ページデザインを統一
どうしても会員登録のステップをあらかじめで持たざるを得ない場合や、2種類のフォーム登録が入れ子になっている場合などは、
途中でユーザーに不安を抱かせないような工夫が重要です。
たとえば、ページのロゴやヘッダー、デザイン、色使いなどがステップの途中で変化すると、それは不安の元となります。
できれば一連の流れのなかでは、サイト名、デザイン、トーン&マナー等を極力変化させないような配慮が重要です。
フロー画像を用意するだけでも大きな助けに
何よりも大きな助けとなるのは、ステップの流れを示すフロー画像です。
これまで示してきた改善策が難しい場合でも、せめてフロー画像だけは配置するようにしてください。
まとめ
いかがだったでしょうか。本日はステップの方向に着目して、フォームの改善方法について考えてみました。
まとめると、以下のようになります。
- フォームのステップは、分岐なく、一直線上に設計するべき
・会員登録後は自動的にログインし、次のステップに進んでいる状態
・一方向の流れのなかで必須の情報をすべて入力できる - その他有効施策
・送信のついでに会員登録を実施
・ページデザインを統一
・フロー画像を用意
ぜひ、「一直線のステップ」を心がけ、スムーズなユーザー体験を実現していただければ幸いです。
参考記事:http://baymard.com/blog/checkout-process-should-be-linear