勝手にEFO比較分析【百貨店4社比較】(ECサイト会員登録編)

恒例になってきましたこのコーナーですが、今回は、少し違った視点で分析していきたいと思います。
普段は、同業界の二つのサイトを比較し、良い点・改善点等を「勝手に」指摘していましたが、今回は、同業界4社のフォームを比較し、それぞれのフォームでの気付いた点をまとめていきたいと思います。

少しずつ春が近付き、新生活の準備のためにいろいろと買い揃えたい、と思っている方も多いのでは? ということで、今回は、新宿にある大手百貨店4社に注目してみました。

題材は、株式会社伊勢丹様(http://www.isetan.co.jp/)(以下、本記事では伊勢丹)、
株式会社小田急百貨店様(http://www.odakyu-dept.co.jp/)(以下、本記事では小田急)、
株式会社京王百貨店様(http://info.keionet.com/shinjuku/index.html)(以下、本記事では京王)、
株式会社高島屋様(http://www.takashimaya.co.jp/)(以下、本記事では高島屋)をセレクトさせていただきました。
(五十音順)

※以下、サイト名の敬称は省略させていただきます。

いつもどおり「勝手にEFO分析」していきましょう。
○△×と、ユーザー視点での評価を行っていきます。どうぞお付き合いください。

※本記事の内容は2014年3月12日時点の伊勢丹様、小田急百貨店様、京王百貨店様、高島屋様各社のサイトのフォームを分析した内容を記載しています。
なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません。
(2014年3月12日時点)

今回は、各社のオンラインストアの会員登録サイトでのEFO比較です。

伊勢丹 小田急 京王 高島屋
ページ数 規約、登録1、登録2、確認、完了の5つ 規約、登録、確認、完了の4つ 規約、登録、確認、完了の4つ メールアドレス入力、登録フォーム送信、
入力、確認、完了の5つ
入力項目の種類 15種類 18種類 17種類 24種類
必須項目入力欄の数 23個 16個 22個 14個
フロー なし なし なし あり
オファー なし なし なし なし
必須マーク 赤字で「※」マーク 赤字で「必須」マーク オレンジで「必須」 赤字で「必須」マーク
メルマガ購読 あり デフォルトチェックあり あり デフォルトチェックあり
利用規約、
プライバシーポリシー
登録画面前に1ページあり 登録画面前に1ページあり 登録画面前に1ページあり 登録画面前に1ページあり
送信ボタンのサイズ 幅153px x 高さ27px 幅200px x 高さ46px 幅169px x 高さ46px 幅166px x 高さ32px
入力ページへの遷移 トップページのWeb会員サービスから トップページの会員登録から トップページの会員登録から トップページの会員登録から

以下、個別に説明いたします。

伊勢丹

海外指向の伊勢丹!

住所入力欄に、「海外の住所を表示する」という欄がありました。
これまで多くのフォームを見てきましたが、なかなか珍しいタイプです。
海外指向の強い伊勢丹ならではの気配りだな、と感じました。
実際、海外に住んでいる知人も「伊勢丹のサイトは確認している」と言っていました。

伊勢丹
ボタンを押すと、「国名」「住所」の欄に変更されます。

文字サイズに工夫を!

アドバイスや文字制限など、文章が多く記載されているフォームでした。
ただ、文字サイズが小さめなので、パッと見た時にストレスを感じてしまうユーザーもいるかもしれません。
左側に空間のあるフォームなので、全体のレイアウトと文字サイズを工夫することで、より入力しやすいフォームになると思います。

伊勢丹
入力枠とアドバイス文章のサイズにメリハリがあると良いですね。

小田急

法人登録も可能な小田急!

昨今、EC市場が広がり、個人での買い物以外に法人での登録も増えてきていることでしょう。
小田急は、法人登録も可能で、担当者名と会社名を記入出来るようになっていました。
小さなことかもしれませんが、様々な状況に対応して行こうという思いが感じられる内容で、必要としているユーザーにとってはとてもありがたいことだと思います。

小田急
今後、このようなフォームも増えてくるかもしれませんね。

入力したくなるフォーム作りを!

フォーム全体を確認すると、項目数が多いので入力中に何回かタテ方向にスクロールします。そして、ヨコ幅いっぱいに入力枠が広がってるので、目線をタテにもヨコにも動かす必要がありました。
一度に飛び込んでくる情報が多く、全体像の把握も難しいので、ユーザーにストレスを与えかねません。
サイドに空間を空けたり枠を統合するなどして流れるフォーム作りを意識すると入力しやすくなり、ユーザーを意識したフォームに近付くと思います。

小田急
流れるように入力出来るフォームは、好印象を与えることが出来ると思います。

京王

丁寧サポートの京王!

パスワード入力欄に、入力の際のアドバイスが記入されていました。
入力制限がかかれていなく、エラーになってしまった。みなさんも一度は経験があるのではないでしょうか?
こうしたユーザーのイライラは、離脱につながる要因です。
パスワード項目はフォームの最後の方にあることが多く、せっかく入力してもらったのに、エラー→離脱ではもったいないですね。
そういったイライラを減らすためのアドバイス表記ですが、これは他のフォームでも導入されており、実際、伊勢丹・小田急にもありました。
京王はさらに一歩先へ!
万が一パスワードを忘れてしまったときのための、パスワードリマインダ欄があり、手厚いサポート精神を感じました。

京王
そもそも忘れないように、メモすることも大切ですね。

項目内容の精査を!

数種類のカード情報登録欄がありますが、「登録しない」にデフォルトチェックが入っているため、入力しない人も多いのでは?
カードのイラスト入りでわかりやすいですが、スペースをとっているのも事実です。
そのため、実際の入力項目数よりも多い印象を持たれてしまい、離脱につながってしまうかもしれません。
入力枠を折りたたむなど、工夫をすることで、一歩進んだレイアウトになると思います。ユーザー目線を意識したフォームに近付くと思います。
過去記事ファーストビューを制するものはEFOを制す!スクロールを減らして直帰を防ぐ最新テクニック3選でも詳しく触れていますので、ぜひご確認下さい。

京王
カード情報を登録するユーザーにはありがたい機能だと思います。

高島屋

サービス精神満載の高島屋!

4社で唯一、フロー表示がありました。
過去記事でも取り上げていますが、フロー表示は、フォームの全体像把握とユーザーの現在位置把握に役立つ機能です。
これがあることで、ユーザーに完了までのイメージを持ってもらうことが出来、入力完了までの心理的ハードルを下げる効果があると思います。

高島屋
デザインはシンプルですが、とてもわかりやすいフロー表示だと思います。

また、メルマガ希望の項目で、「サンプルを見る」ボタンがありました。
クリックすると実際に配信されているメルマガのサンプルを確認することができ、具体的なイメージが湧きました。
メルマガ配信をするためにも、具体的なイメージを湧かせるというのはとても大切な要素だと思います。
多くのサイトに「メルマガ希望」の項目はありますが、文章だけでの表示も多いので、高島屋のサービス精神を感じました。

高島屋
ぜひメルマガ読みたい!という気持ちになりました。

入力補助機能は、改善の余地あり!

機能名 伊勢丹 小田急 京王 高島屋
ガイド

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

なし なし なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし
エラー時:あり
フォーカス時:なし
エラー時:あり
フォーカス時:なし
エラー時:あり
フォーカス時:なし
エラー時:あり
項目ごとに入力完了後の動作 なし なし なし なし

各社とも、入力補助機能に関しては、ほとんど導入されていませんでした。
項目数が多いので残り必須項目数の表示や、うっかりページから離れようとした時に思いとどまらせるための離脱ブロック機能など、ぜひ導入をオススメしたいと思います。
過去記事<アンケート調査結果Vol.3好印象編>使いやすいフォームがサイト全体に与える印象ほかにもありますが、これらの入力補助機能があることで、ユーザーに好印象与え、使いやすい!と思ってもらえるようです。

まとめ

同業界の同種のフォームでも、考え方やデザインによって、たくさんの違いがありました。
しかし、根本的に必要とする情報に大きな違いはないと思うので、各社の良い部分を自社のサイトに活かせると良いと思います。
百貨店という数多くのものを扱う場所だからこそ、様々な方が訪れると思います。
より多くの方に好印象を持ってもらえるフォーム作りが出来ると良いですね!

普段は、同業種の2社での比較ですが、今後も不定期で様々な比較をご紹介していければと思います。
今後もお付き合い下さい!

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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