勝手にEFO徹底解剖:リクナビ 会員登録フォーム

早いもので今年ももう6月となりました。
ところで、6月の1日といえは、新卒向け就職ポータルサイト各社がグランドオープンする日でもあります。
2017年卒向けの大学生の方は、すでにこれらのサイトを使ってサマーインターンや就活イベント・セミナーなどの情報を探し始めている人も多いのではないでしょうか。

今回は数ある就職サイトのなかでも代表的な存在である、リクルートキャリア様運営の「リクナビ(https://job.rikunabi.com/2017/)」の会員登録フォームに注目し、「勝手に徹底解剖」していきます。

※本記事の内容は2015年6月4日時点のリクナビのフォームを分析した内容を記載しています。なお今回ご紹介したフォームには当社エフトラEFOの入力補助機能は導入されていません(2015年6月4日時点)。

今回も初回登録を想定して、購入に至る流れについてフォームを検証していきたいと思います。

フォーム全体の特徴

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

すっきり、フォーム専用レイアウト

入力ページ全体を通して、サイト共通のものとは別に、すっきりと無駄がないフォーム用のレイアウトを採用しています。

efo_double_ring レイアウトには無駄なコンテンツがなく、ロゴを配したシンプルなもの。

フォームページのレイアウトは、サイト共通のナビゲーション類を削除したスッキリしたもの

フォームページのレイアウトは、サイト共通のナビゲーション類を削除したスッキリしたもの

ただし一点気になるのは、フッター部分に用意された「閉じる」のリンク。
押下することで、ブラウザのタブが閉じてしまいます。「キャンセル」ボタンよりは誤って押下するケースは低そうではありますが、当然離脱をうむためあえて用意しておく必要はないように思います。

注意 離脱への誘導はあえて用意する必要はないか。

フッター。

フッター。

現在地が明確なフロー表示

冒頭の会員規約への同意から先のページについては、共通のフロー画像が用意されていました。
今回のフォームでは入力ページが複数続きますが、ゴール(送信完了)まであとどのくらいなのかユーザーはつねに把握することができ安心です。

efo_double_ring フロー画像の存在で、フォームの全体像と現在地が明確になる

フロー画像

フロー画像

とにかく大きなボタン!

フォーム全体として、ボタンが大きく強調されていました。これなら、ユーザーが迷うことがありませんね。

efo_double_ring 大きなボタン

大きく目立つボタンが中央に配置されている

大きく目立つボタンが中央に配置されている

エラーは◎

さらに、エラーはページ上部+該当箇所に赤字で表示、という理想的な形でした。

efo_double_ring エラーのある項目は背景色が赤く変化するため、どこがエラーかが一目でわかります。

エラーがある旨を冒頭で把握でき、なおかつどこにあるかも認識できる。該当項目の背景色を赤色に変化させているのもポイント

エラーがある旨を冒頭で把握でき、なおかつどこにあるかも認識できる。該当項目の背景色を赤色に変化させているのもポイント

ページごとの特徴

次にページごとの特徴をピックアップしていきます。

会員規約の確認と同意

まずは、会員規約を確認し、それに同意するというステップから会員登録がスタートします。

フォームページのレイアウトは、サイト共通のナビゲーション類を削除したスッキリしたもの

会員規約の確認ページ

注目したいのは「同意する」というボタンの真横に、「Pマーク」ロゴを表示している点。
ボタンの下にも「プライバシーマーク」使用許諾事業者として認定されています。という文言を配置し、個人情報の安全性をアピールしています。

efo_double_ring ロゴの存在がユーザーの安心感を醸成し、次のステップへの後押しをしてくれています

Pマークロゴを表示

Pマークロゴを表示

プロフィール登録

次はプロフィール登録のページです。

プロフィール登録ページ

プロフィール登録ページ

必須項目の強調

必須マークと背景色で、入力必須の項目を強調しています。

必須マークは「■」=四角マークで示されています。「※」マークはよくありますが、これは珍しい形です。
珍しいが故に、わかりにくく感じるユーザーもいるかもしれませんので注意が必要です。

注意 珍しく「■」で必須を示すタイプ。「※」もしくは「必須」と文字で表すのがもっともわかりやすいか

必須項目

必須項目

また必須箇所は黄色の背景色で強調され、入力を終えるとその背景色が消えるようになっています。
ぱっと見で必須項目量の把握できたり、ユーザーが入力漏れに気付くなどメリットが多そうです。

efo_double_ring どこが必須か一目瞭然です。

入力すると消える背景色

入力すると消える背景色

必要に応じて表示される入力欄

このフォームでは、ユーザーの入力内容に応じて必要な項目を表示するつくりになっています。

例えば、PCか携帯のいずれかが必須の「メールアドレス」欄では、入力欄にフォーカスすることではじめて、確認用の入力欄が表示されるようになっています。

あらかじめどちらも表示しておくよりも、フォーム全体の入力項目を少なく見せることができますね。

efo_double_ring 必要ないユーザーにはその項目は見せない

PCのメールアドレス欄にフォーカスした時に、確認用の入力欄があらわれる

PCのメールアドレス欄にフォーカスした時に、確認用の入力欄があらわれる

また、メールアドレスの確認欄では、ペーストができないほか、入力内容の一致をリアルタイムに判定する機能がありました。

efo_double_ring もしメールアドレスを誤入力した場合は即座に修正することが可能です。

アドレスが一致しない場合、その場でアラートを表示してくれる

アドレスが一致しない場合、その場でアラートを表示してくれる

ちなみに、入力形式についてはとくにリアルタイムのエラー判定は実施していないようでした。

注意 ほかのリアルタイム判定もあるとGOOD

全角カナの欄に全角かな、メールアドレス欄にメールアドレス形式以外で入力してみたがエラーは表示されない

全角カナの欄に全角かな、メールアドレス欄にメールアドレス形式以外で入力してみたがエラーは表示されない

学校情報の登録

次は学校の情報を登録するページです。

学校情報の登録

学校情報の登録

学校の種類を選択し、頭文字から順に選択することで、徐々にセレクトボックスがアクティブになり、順番に選択していく仕様となっています。
おそらく、登録内容がそのまま履歴書となるため、存在しない大学や入力の誤りを防ぐためにこのような仕様となっているのでしょう。

ただし、膨大な選択肢から該当の大学名や学部名を選択するのは使いやすさの観点からは理想的ではありません。
セレクトボックスのユーザインターフェースを工夫するか、サジェスト機能を使うなど、なにか工夫があるとぐんとユーザビリティがアップしそうです。

注意 すべてセレクトボックスなので、膨大な選択肢から該当の大学名などを探すのは少し大変です

すべてセレクトボックスから選択させる形式。項目は徐々にアクティブになる

すべてセレクトボックスから選択させる形式。項目は徐々にアクティブになる

確認ページその1

フォームはまだ続きますが、学校の登録が済んだ時点で、いったんこれまでの入力内容の確認画面が表示されます。

確認画面

確認画面

すっきり整理されれ確認しやすいことに加え、特に重要な情報を強調している点には注目です。

efo_double_ring 特に重要なメールアドレス、電話番号の欄が、大きなフォント、太字、赤色で表されており、入念な確認を促しています。

重要な情報を強調

重要な情報を強調

IDとパスワードの登録

次はサイトで利用するIDとパスワードを登録していきます。

IDとパスワードの登録に1ページ分割くのは珍しいと思いましたが、実際にはメール配信などの多種多様なサービスの登録を選択するほうに多くのスペースが割かれていることがわかります。

IDとパスワードの登録

IDとパスワードの登録

ぱっと見た印象は、テキストが多い点。
どうしても各種サービスの説明を載せるためにどうしても説明のテキストが入ってしまうようです。
ある程度は仕方ありませんが、とくにラベルの文言が長いと、理解しにくく感じるユーザーもいることでしょう。
簡潔なラベル+補足文という形にすると、もう少しわかりやすくなるかもしれませんね。

注意 ラベルの文言は簡潔に。

チェックボックスのラベルが非常に長く、少し見づらく感じてしまう

チェックボックスのラベルが非常に長く、少し見づらく感じてしまう

また、「女子学生・外国人留学生向けサービス」の選択のみ、異常に強調されている点が気になりました。
強調するのは良いのですが、他の必須項目に比べて異常に目立たせている理由が不明瞭だったので、少し違和感を感じました。

注意 異様に強調されている。デフォルト値のない必須項目なので、入力忘れることはないと思うのですが…

この項目だけ特別に「必ずチェックしてください」の注意書きが登場。

この項目だけ特別に「必ずチェックしてください」の注意書きが登場。


ボタンの直前にも、念押しで強調がある。「ご注意下さい」とまで記載されている‥

さらに、ボタンの直前にも念押しで強調がある。「ご注意下さい」とまで書かれている‥

確認ページその2

最後の確認ページです。

確認ページ

確認ページ

ここでも、重要な情報(ID)が強調されており、理想的な確認ページとなっています。

最後に

いかがだったでしょうか。今回の勝手にEFO徹底解剖は以上となります。
最後にこれまでみてきたフォームの特徴をまとめて結びとさせていただきます。

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

  • すっきりとしたフォーム専用レイアウト
  • フロー画像の表示
  • 大きく目立つボタン
  • エラー画面の表示
  • プライバシーマークの表示
  • 必要に応じて表示する入力欄
  • 必須項目の強調
  • メールアドレス一致のリアルタイム判定
  • 重要な情報を確認画面で強調

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

  • 「閉じる」リンクの存在
  • 必須マークの改善
  • 入力形式のリアルタイムアラートがない
  • セレクトボックスの選択肢が多すぎる
  • チェックボックスのラベルが長い
  • 理由を明記しない項目の強調

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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