フォームのユーザー体験向上のカギは、<直線方向のステップ>だった!

購入フォームや会員登録を含むWEBサービスなど、入力ページが複数存在するフォームは数多くあります。

ひとつひとつのページから離脱を起こしにくくするための改善もEFOとしては重要ですが、入力ページが多いフォームでは特にフォーム全体の流れを意識してユーザー・エクスペリエンスの設計を行うことも大切です。

今回はフォームの全体のステップに注目して、この点について考えていきます。

さっそくですが、まずはフォームのステップに関するよくある課題を具体的にいくつかご紹介したいと思います。

会員登録をはさみ、最初に戻ってくる

ECサイトを例にとって考えてみます。

例えば、ある商品をカートに入れ購入に進もうとしたところ、会員登録を促されるということがあります。

東京ディズニーリゾートのチケット購入画面。購入を進めるとログインまたは会員登録を促される

東京ディズニーリゾートのチケット購入画面。購入を進めるとログインまたは会員登録を促される

この流れそのものはよくあるケースですし問題ないでしょう。

しかし、問題は会員登録が完了した後。
具体的にはこんなケースが要注意です。

case1. 会員登録後、ログインを促す

会員登録後、ログインを促されるケース。
さきほど登録したばかりのメールアドレスやパスワードなど、同じ内容を再度入力しなければならないという二度手間そのものがストレスです。

このとき、フォームのステップとしては下記のようになっています。

ログイン後、振り出しにもどる

会員登録後、元いたページにもどる

このようなケースでは、会員登録を開始したときとまったく同じ認証ページに再び遷移することがほとんどです。

case2. トップページに遷移してしまう

登録完了後、ログインは自動的に行われているものの、遷移した先がサイトのトップページ…という例。
再度購入ページまで遷移しなくてはならず、こちらも二度手間感満載です。

ステップとしては下記のとおりです。

トップへ元通り

トップへ元通り

以上2つの例のように、以前の画面に戻ってくる、つまり画面がふりだしに戻ってしまう場合は要注意です。
実際の購入のフローとしては前進していたとしても、ユーザーにとっては、画面に対する既視感によりまったく進んでいないような印象を与えてしまう可能性があります。

case3. モーダルウィンドウなどで行き来する

次にご紹介するのは、あるページを拠点に、モーダルウィンドウで複数の登録フォームを呼び出すというケースです。

Amazonのギフトの設定

Amazonのギフトの設定はモーダルウィンドウ

上記のAmazonの例のように、「ギフトの設定」といったオプション的なメニューであれば問題はないのですが、
たとえば「決済情報」や「住所」など購入に必須の情報をモーダルウィンドウで表示する場合は要注意です。

※このとき、ステップとしては下記のようになります

モーダルウィンドウで、住所、クレジットカード、クーポンコード、ギフトの設定を行うフォームの場合

モーダルウィンドウで、住所、クレジットカード、クーポンコード、ギフトの設定を行うフォームの場合

一見、送信完了までに必要なすべての情報を俯瞰できて良さそうにも思えますが、
「モーダルを開けて登録する」という行為はユーザーに委ねられているため、「どの情報を登録し終え、どの情報がまだか」をユーザー自身が見極めている必要があります。
そのため、流れに乗って情報を入力するのに比べ、ユーザーに負担がかかってしまうとも言えるでしょう。

また、好きな順番で入力に取り掛かれる反面、漏れが発生する危険性が高まります

case4. 2つの独立したフォームを入力する

一部のウェブサービスにおいては、「あるサイトに登録していないと、あるサイトが登録できない」というように、会員登録が入れ子構造になっている場合があります。

「えきねっと」の会員登録は、「My JR-EAST ID」を登録していないと進めることができない

「えきねっと」の会員登録は、「My JR-EAST ID」を登録していないと進めることができない

できればひとつのフォームに統一されていることが望ましいですが、システムの関係上難しいためにそのような形をとっているということでしょう。

ステップは下記のようになります。

1つ目を完了させたあと、2つ目の登録が始まる

1つ目を完了させたあと、2つ目の登録が始まる

流れとしては一方向なのですが、「入力⇒確認⇒完了」のステップを2回繰り返すということで手間が増えます。

また、異なる2つのフォームに登録することで、本当に目的のサービスに登録しているのかという不安を感じるユーザーも少なくないのではないでしょうか。

理想的なのは、単一・直線型ステップのフォーム

ここまで、フォームのステップが問題になりうるケースについて紹介してきました。

いずれのステップも、青色とオレンジ色で示したように、ステップの分岐が存在するということにお気づきでしょうか。

(※厳密にはcase4では分岐はありませんが、別々のフォームなので異なる色で表しています)

フォームのステップに関する問題を解消するには、この「分岐」をなくし、一直線状に流れを設計することが大切です。

一直線の流れ

自動でログインし、入力画面へ遷移

自動でログインし、入力画面へ遷移する形に

直線のステップのフォームは、ユーザーが以前見たことのある画面に遷移しないよう、会員登録後は自動的にログインし、なおかつ次のステップに進んでいる状態です。

一方向の流れのなかで各種情報を入力する形に

一方向の流れのなかで各種情報を入力する形に

また、流れに沿って入力を進めていけば、必要な情報を漏れ無く登録できるということも、直線のステップのフォームの特徴と言えるでしょう。

さらにステップを改善

上記のとおり、フォームのステップを直線上にするだけで、問題の多くは解消することができますが、
さらに理想的なステップを作るための方法についても言及しておきたいと思います。

送信のついでに会員登録を実施できる形に

ステップが多いと、そのぶんユーザーの手間も増え、離脱機会も増えることとなります。
当然、ステップは少ないに越したことはありません。

そこで会員登録を最初のステップとして設けるのではなく、初回利用時に同時に登録できたり、自動で登録してしまう流れにすることで、ステップを大幅に短縮することができ、シンプルなフォームとなります。

会員登録のフローを省くとかなりステップが少なくなる

会員登録のフローを省くとかなりステップが少なくなる

ページデザインを統一

どうしても会員登録のステップをあらかじめで持たざるを得ない場合や、2種類のフォーム登録が入れ子になっている場合などは、
途中でユーザーに不安を抱かせないような工夫が重要です。

たとえば、ページのロゴやヘッダー、デザイン、色使いなどがステップの途中で変化すると、それは不安の元となります。
できれば一連の流れのなかでは、サイト名、デザイン、トーン&マナー等を極力変化させないような配慮が重要です。

フロー画像を用意するだけでも大きな助けに

何よりも大きな助けとなるのは、ステップの流れを示すフロー画像です。

これまで示してきた改善策が難しい場合でも、せめてフロー画像だけは配置するようにしてください。

「えきねっと」ではデザインの異なる2つのフォームに登録が必須ですが、共通のフロー画像の存在がユーザーの不安やストレスを大幅に軽減している

「えきねっと」ではデザインの異なる2つのフォームに登録が必須ですが、共通のフロー画像の存在がユーザーの不安やストレスを大幅に軽減している

まとめ

いかがだったでしょうか。本日はステップの方向に着目して、フォームの改善方法について考えてみました。

まとめると、以下のようになります。

  • フォームのステップは、分岐なく、一直線上に設計するべき
     ・会員登録後は自動的にログインし、次のステップに進んでいる状態
     ・一方向の流れのなかで必須の情報をすべて入力できる
  • その他有効施策
     ・送信のついでに会員登録を実施
     ・ページデザインを統一
     ・フロー画像を用意

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

 購読解除はいつでも可能です
  1. @hibukuro

    これはホント、そう思う。まあフォームの場合、改修するのが大変なのは理解できるんだけど、酷いフォームが多すぎるよね。「フォームのユーザー体験向上のカギは、<直線方向のステップ>だった」 https://t.co/ifZ3hRYwwx