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

「勝手にEFO徹底解剖」シリーズ、第5回目は、えきねっと(東日本旅客鉄道株式会社様、https://www.eki-net.com/top/index.html)をテーマにお届けします。
※以下、敬称は省略させていただきます。

「えきねっと」は、インターネット上でのJR東日本の指定券予約サービスなどを提供するウェブサイトで、サイト上で予約した指定券をJR東日本管内のみどりの窓口や指定席券売機などで受け取ることができます。
年末が近づき帰省ラッシュが始まれば駅の窓口は大変混雑しますし、そもそも指定券が売り切れてしまったりしますので、ネット上で事前に指定券を予約できるというのは大変ありがたいサービスですね。

このように大勢の人々の生活インフラを支える「えきねっと」には、いったいどのような工夫が凝らされているのでしょうか。さっそくフォームのEFOについて「徹底解剖」していきます。

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

今回は会員登録の流れを徹底解剖していきます

えきねっとのサービスを利用するために必要な会員登録の流れに注目し、フォームを徹底解剖していきたいと思います。

フォーム全体の特徴

まずはフォーム全体の特徴をチェックしていきましょう。

フロー

えきねっとを利用するためには規約への同意・メールアドレス確認に加え「My JR-EAST情報」と「えきねっと情報」の2種類のフォームを送信する必要があり、会員登録としては少々長いものとなっていました。
ただしステップが多いものの、下記のフロー画像が一貫してフォーム画面に表示されており、ユーザーが現在地をひと目で把握できるようになっていました。

efo_double_ring 全ページにフローを配置

フロー

共通のフロー画像。現在地が一目瞭然

無駄を省いたフォーム専用レイアウト

「My JR-EAST情報」の登録フォームではは全体を通して、シンプルなフォーム専用レイアウトを採用していました。
入力の途中で気が散ったり、不意に離脱してしまうこと防ぐ、優秀なレイアウトだと思います。

efo_double_ring フォーム専用レイアウト

共通のフォーム専用レイアウト

フォーム専用レイアウト。無駄なリンクなどがないもののサービスロゴをはっきり表示しユーザーを不安にさせない作り

いっぽうで、「えきねっと」のフローに入ると、サイトの共通ヘッダー/フッターが登場してしまっていました。
こちらも同様のシンプルなレイアウトに揃えられると、より良いでしょう。

注意 レイアウト

サイト共通のレイアウトに戻ってしまう

サイト共通のレイアウトに戻ってしまう

ボタンが優秀

フォーム全体を通し、矢羽型にデザインされたボタンを採用しており、次へ進むボタンが直感的に理解できるようになっていました。
また、ボタンのラベルも具体的な文言が設定されており、ユーザーに戸惑いを与えないように配慮されていると感じました。

efo_double_ring ボタン

矢羽型のボタンで。具体的な文言に加え、戻るボタンとのメリハリもしっかりしている

矢羽型のボタンで。具体的な文言に加え、戻るボタンとのメリハリもしっかりしている

目次

では、以下画面別にEFOを「徹底解剖」していきます。
目次は下記のとおりです。
画面数が多いため、前後編に分けてお届けしていきたいと思います。

規約への同意

まず最初にサービスの規約の確認と同意のステップが用意されています。
EFOのテクニックとしては、入力ページ内にこのフローを挟んでしまうというものもありますが、今回は2種類も規約があるために別ページにフローを設けるのは妥当だと思います。

規約の確認と、同意へのチェックボックス

規約の確認と、同意へのチェックボックス

特筆すべきは、次へ進むためのボタンについて、この画面にのみサブミットブロックが用いられていたという点。
また、チェックボックスのまわりを黄色の枠線で囲むことで目立たせている点も親切だと思いました。

efo_double_ring サブミットブロック

チェックを入れると、ボタンがクリックできるようになる

チェックを入れると、ボタンがクリックできるようになる

メールアドレスの確認

同意を済ますと、メールアドレスの入力欄が現れます。
受信したメール内のリンクをクリックすることでメールアドレスを認証し、次の登録フローに進むことができるようになっています。

メールアドレス入力画面

メールアドレス入力画面。

メールアドレスとその確認用入力欄のあわせて2つの項目がありますが、個人的にはどのみちメールを確認するのであれば、入力欄はひとつにしてしまっても良いように思いました。

注意 入力欄

入力、確認の2つのフィールドが存在

入力、確認の2つのフィールドが存在

エラー

ここでのエラー画面は、下記のようにエラー内容がテキストで表示され、入力画面に戻って修正を行うというものでした。
戻るとエラー内容が確認できず、EFOとしてはあまり好ましい形とはいえません。
そのまま修正が始められるよう、入力画面内にエラー内容を表示する形が理想的です。

注意 エラー

エラー画面

エラー画面

送信完了

メールアドレスを送信すると、下記の完了画面が表示されます。
大きめのフォントで送信したメールアドレスが表示されており、なおかつ黄色の枠線で強調されており非常に確認しやすくなっていました。
万が一誤ったメールアドレスを入力してしまったとしても、高い確率で気づくことができるのではと思います。

またその後に取るべきアクションも具体的に記載されており、理想的な完了画面なのではないでしょうか。

efo_double_ring 送信完了画面

メールアドレスの送信完了

メールアドレスの送信完了

次回へ続きます

いかがだったでしょうか。
冒頭でもお伝えしたように、画面数が多いために前後編に分けてお送りさせていただきます。

次回はメールアドレス確認後の「My JR-EAST IDの取得」から引き続き「徹底解剖」していきますので、引き続きよろしくお願いいたします。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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