勝手にEFO徹底解剖:えきねっと・会員登録フォーム(2/2)

今回の記事は、勝手にEFO徹底解剖:えきねっと・会員登録フォーム(1/2)の後編としてお送りします。
引き続き、えきねっと(東日本旅客鉄道株式会社様、https://www.eki-net.com/top/index.html)をテーマに「勝手に」フォームの使い勝手やEFO状況について徹底解剖してまいりますので、どうぞお付き合い下さいませ。

前編では、フォーム全体のレイアウトについてと、規約の同意、メールアドレス登録までの流れについて触れました。
後編となる今回は、その後に続く2種類の入力情報の登録フローについて「徹底解剖」していきます。

※本記事の内容は2014年12月16日時点のえきねっとのフォームを分析した内容を記載しています。なお今回ご紹介したフォームには当社エフトラ EFOの入力補助機能は導入されていません(2014年12月16日時点)。

My JR-EAST IDの取得

到着したメールに記載のURLより、以降のステップに進むことができます。
次に待っているのは「My JR-EAST ID」の登録フォームで、全体のなかでも最も入力内容が多いフォームとなります。

入力項目が多いながらも、「お客様情報」「ご連絡先」といった情報の種類にあわせてグループにしてレイアウトしているため、文脈が理解しやすく入力がスムーズでした。

入力ページ全体図

入力ページ全体図

また、オレンジ色でひときわ目立つ「必須」の表示や、テキストボックスのフォントサイズを大きく設定していることで、ユーザーの入力をしやすくする工夫も感じられました。

efo_double_ring 入力欄

入力したテキストの大きさがひとまわり大きくなっており、非常に見やすく入力しやすい

入力したテキストの大きさがひとまわり大きくなっており、非常に見やすく入力しやすい

入力支援機能について

ここでの入力支援機能は住所の自動入力のみでした。
項目数が多いため、その他の入力支援機能も拡充することでユーザーの利便性が向上するでしょう。

郵便番号からの住所自動入力

郵便番号からの住所自動入力

エラー画面

ここでのエラー画面は、フォーム上方にエラーの概要を、該当の項目の文字色・項目背景色を変化させて強調しています。
エラー時に都度パスワードがリセットされ、再入力を強いられる点だけは残念ですが、その他は概ね理想的なエラー表示だと思います。

efo_double_ring エラー

エラー表示

エラー表示

確認画面

次に確認画面です。

確認画面は無駄なくシンプルなレイアウトで、入力内容が確認しやすいようになっていました。
なお、ここでも「入力内容を修正」を行うたびにパスワードがリセットされてしまうという難点はありましたが、それ以外は優れた確認画面といえるのではないでしょうか。

確認画面

確認画面

完了画面

完了画面も、無事登録できた旨と次に行うべきアクションが明記されており、問題はないように思います。

完了画面

完了画面

1点、完了画面と次の入力を兼ねることができれば、よりユーザーとしては手間が経るのではないでしょうか。

えきねっと情報入力

次に、「えきねっと情報入力」のフローに入っていきます。

前編でも触れたとおり、ここからのフローではサイト共通のヘッダー/フッターが表示されてしまい、ユーザーの離脱リスクを高めます。

また、ここでの入力は任意登録のクレジットカード情報とメールマガジンの設定のみと。入力する内容はかなり少ないにもかかわらず、説明書きがかなり多いために、項目数に対しページがかなり縦に長くなってしまっています。
もう少しコンパクトに収められると良いのではと思いました。

注意 ページ全体図

ページ全体図。かなり縦に長い

ページ全体図。かなり縦に長い

確認画面

次に確認画面です。

今回、クレジットカード情報と登録せずに進んだのですが、下記のようにカード情報欄が空欄の状態で表示されています。
これではユーザーが不安を感じてしまいますので、「今回は登録しない」などの文言を表示すると親切でしょう。

その他は、文字サイズにメリハリがあったり、ボタンが大きく作られていたりと申し分ない確認画面です。

注意 確認画面

惜しい確認画面!

惜しい確認画面!

まとめ

いかがだったでしょうか。今回の分析は以上です。最後にフォームの特徴をまとめたいと思います。

優れている、取り入れたいポイント

  • 無駄を排したレイアウト
  • 緑色の一貫性のあるデザイン・フロー表示
  • 親切な説明文・確認・完了画面
  • 具体的なボタン文言
  • 見やすい文字サイズ

課題と思われる点、その他論点など

  • エラー表示
  • 専門用語の多さ
  • ステップの多さまたはレイアウトの共通化
  • 入力支援機能の導入
  • パスワードのリセット

乗車券の予約システムというような大規模なインフラを抱えるサービスでは、システムとしての制約も多くなり、どうしてもフォーム登録のフローも複雑になりがちです。
しかし今回とりあげた「えきねっと」では、入力のステップが多くなってしまいながらも、一貫したフローや親切な画面表示で、その使いにくさをカバーしようとする意図が感じられました。

もちろんまだまだ伸びしろはありますが、ステップの多いフォームでも工夫次第でユーザーのストレスは軽減することができると思わせてくれるフォームでした。
特に複雑なフローのフォームをお持ちの方は、ぜひ参考にしてみてくださいね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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