勝手にEFO比較分析【東急百貨店 x 近鉄百貨店】(鉄道百貨店EC 会員登録フォーム編)

季節の変わり目には洋服やアクセサリー、バッグやシューズといったファッション商品や生活家電などが欲しくなりますよね。

そんな時、買いたいモノの多くを揃えているのが百貨店です。
百貨店は鉄道グループが経営している場合がほとんどで、大きな駅の近くに各百貨店が並ぶ光景も珍しくありません。

ネットショッピングサイトを持つ百貨店も増えてきており、利用している方も多いのではないでしょうか。

今回は東急グループの中核企業である「東急百貨店」(https://shop.tokyu-dept.co.jp)(以下本記事では「東急」)と近鉄グループの主要企業である「近鉄百貨店」(https://shop.d-kintetsu.co.jp)(以下本記事では「近鉄」)のECサイトの新規会員登録フォームを比較分析していきます。

それでは「勝手にEFO分析」していきます。
今回も「勝手に」改善ポイントを指摘していきますので、どうぞ最後までお付き合い下さい。
◎○△×と、ユーザー視点での評価を行っていきます。
※比較する際の並びは順不同です。

※本記事の内容は2015年04月06日時点の東急、近鉄、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2015年04月08日時点)。

まずは基本的項目の確認からです。

いつも通り、基本項目の確認からしていきましょう。

東急 近鉄
ページ数 利用規約、お客様情報の入力、登録内容の確認、登録完了の4ページ 利用規約・お客様情報の入力、登録内容の確認、登録完了の3ページ
入力項目 14種 21種
必須項目入力欄の数 13項目 13項目
フロー なし あり
オファー なし なし
必須マーク あり(「必須」マーク表示) あり(「*」文字表示)
送信ボタンのサイズ 幅304px × 高さ54px 幅128px × 高さ26px
入力画面のレイアウト 他ページと共通 他ページと共通

入力内容はどちらもあまりかわりなく「住所」や「性別」「生年月日」の優先度が低いです。

以下個別に説明していきます。

レイアウト

ページ幅を大きく使い、見やすさに重点を置いた東急。

フォントと入力欄のサイズを小さく設定し、コンパクトなフォームを目指した近鉄。

双方ともにアプローチは違いますが、ユーザーへ配慮した作りになっています。

ok_blue 東急 ページレイアウト

若干文字情報が多いですが、フォントサイズやマージンの調整で見やすいレイアウトになっています。

配色やフォントサイズ、マージン調整が上手です。

配色やフォントサイズ、マージン調整が上手です。

ok_blue 近鉄 ページレイアウト

フォントとマージンを小さくすることで、コンパクトなフォームを目指しています。

ラベルの配色をグレーにしていますが、背景もグレーなので少し見辛いかもしれません。

また、フォントを小さめにしたことで、文字間行間がつまって見えるので「会員種別」「会社情報」「お客様情報」「ログイン情報」「クレジット情報」などといった形で入力項目をまとめ、中見出しを作ってあげると入力のテンポが良くなると思います。

コンパクトなフォームを目指しています。

コンパクトなフォームを目指しています。

フォームタイトルの見やすさ

フォームタイトルの分かりやすさは、ユーザーの安心感の向上につながる要素です。
フォントサイズや装飾で他項目見出しとの強弱を付け「自分が今、何のフォームに入力しているのか」を明確にしてあげましょう。

ok_blue 東急 フォームタイトル

東急はロゴカラーを使い、太く黒い帯に白抜きのタイトル表記です。
非常にシンプルですが、黒い帯は存在感があり、分かりやすいフォームタイトルといってよいでしょう。

シンプルですが存在感のある良いフォームタイトルです。

シンプルですが存在感のある良いフォームタイトルです。

ok_blue 近鉄 フォームタイトル

近鉄は特に装飾などは無いですが、文字も大きく、シンプルなタイトルになっています。

文字が大きくシンプルなタイトルです。

文字が大きくシンプルなタイトルです。

必須マークの有無

下記の条件がお手本となる必須マークの形です。

・「必須」文字を使っている
・色背景を敷いた四角いマーク
・マークは先頭につける
・冒頭でのマーク説明
・必須入力欄の背景色変更

ではそれぞれ見ていきましょう。

efo_double_ring 東急 必須マーク

ほぼ満点と言えるような必須マークです。
冒頭で必須マークに関する記載があればなお良いと思います。

ほとんど満点に近い良い必須マーク。

ほとんど満点に近い良い必須マーク。

soso_black 近鉄 必須マーク

「*」文字のみで少し残念ですね。
入力欄の背景も任意項目と変わらないので、必須との見分けがつきにくいです。

少し残念な必須マークです。

少し残念な必須マークです。

フローの有無

東急にはフローがありません。

対して、近鉄は矢印型の目立つフローを設置しています。

ng_bw 東急 フロー

フローがないのは遷移数が少ないフォームにありがちです。
しかし、ユーザーに安心して入力を進めてもらうためにもフローは設置した方が良いでしょう。

ok_blue 近鉄 フロー

背景が矢印型になっており、分かりやすいです。

背景が矢印型になっており、分かりやすいです。

次に入力支援機能の比較です

機能名 東急 近鉄
ガイド

未入力の残り必須項目数などをリアルタイムで表示する機能

あり なし
離脱ブロック

ページを閉じようとするとアラートを出してOKしないと閉じることができない機能

なし なし
サブミットブロック

送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能

あり なし
項目ごとのアラート表示

入力についての説明をリアルタイム表示する機能

フォーカス時:あり

エラー時:なし

フォーカス時:なし

エラー時:なし

項目ごとに入力完了後の動作 ピンク背景から白背景へ なし

入力支援機能の有無

東急では多くの支援機能を導入しています。

一方で近鉄では同機能がほとんどありません。
ユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がりますので、導入と機能拡充はすぐにでもお奨めしたいです。

エラー画面

本来であれば冒頭にメッセージがあり、さらにエラー箇所にも分かりやすい配色で注記というのがお手本です。

ですが東急はユニークなエラー表示方法を使用しています。
未入力がある状態で送信ボタンを押すと、ダイアログが表示されエラーが箇条書きで注記されます。

一方近鉄では、冒頭でエラー注記が箇条書きになっていて圧迫感がでています。
エラー箇所の背景色は変化していますが、各箇所に注記が無いのも残念です。

上部には一言メッセージのみにし、エラー箇所に注記を表示するとエラー画面でも見やすいレイアウトを保つことができます。

ok_blue 東急 エラー画面

ユニークなエラー表示。

ユニークなエラー表示。どの箇所がエラーかが表示されているとさらにGOOD

soso_black 近鉄 エラー画面

冒頭のエラー表示箇条書きが圧迫感を出してしまいます。

冒頭のエラー表示箇条書きが圧迫感を出してしまいます。

最後は勝手にフォーム改善アドバイスを

今回は百貨店 NetShopping の会員登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

東急

フローの設置と入力支援機能の拡充でさらに親切なフォームへ

項目数やレイアウト、必須マークなどは言うことなしです。

入力支援機能も基本的なモノは導入しているので、あとは機能の拡充でしょうか。

ガイドでの残り項目数の表示や離脱ブロックなどの拡充でより親切なフォームになると思います。

近鉄

必須マークの変更や入力支援機能の導入をお奨めします

分かりやすい必須マークや背景色で必須項目を目立たせると分かりやすくなります。

また、エラー画面時にエラー文言をリスト状にするのはどうしても圧迫感を出してしまい、ユーザーのストレスになってしまいます。一言メッセージのみにし、各エラー箇所に注記しましょう。

また、親切なフォームを考えていく上で入力支援機能は必要不可欠です。
特に項目数も20種類以上あるので、ガイド機能などが無いとユーザーは「いつ終わるんだ・・・」という気になってしまいます。

支援機能を導入することでよりユーザーに優しいフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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

    どっちのフォームも文字情報が多いなぁ
    フォーム上部の部分は、画像使った方がよいのでは
    勝手にEFO比較分析【東急百貨店 x 近鉄百貨店】(鉄道百貨店EC 会員登録フォーム編) https://t.co/Zji8LYUXy4