勝手にEFO比較分析【東急ハンズx コメリ】(ホームセンターEC会員登録フォーム)

やってきました「勝手にEFO比較分析」。

太平洋側を中心に大雪になった本日。ホワイトバレンタインですね。
先週末の大雪で、雪かきにおかげで腰が痛い。。。なんて方も多いのかもしれません。
このままの天気が続くと、今週末も雪かきの必要が出てくるかもしれませんね。
そこで今日は、雪かき道具のスコップを買うにはどこ?ということで、
ホームセンターに注目してみました!

題材は、ホームセンターの業態で大都市を中心にチェーン展開する企業である株式会社東急ハンズ様(http://www.tokyu-hands.co.jp/)(以下、本記事ではハンズ)と、
農業・園芸資材の取り扱いに強く、国内最多の店舗数を誇る株式会社コメリ様(http://www.komeri.bit.or.jp/)(以下、本記事ではコメリ)をセレクトさせていただきました。

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

いつもどおり「勝手に分析」していきましょう。
今回も改善ポイントを「勝手に」指摘していきますので、どうぞお付き合い下さい
。○△×と、ユーザー視点での評価を行っていきます。

※本記事の内容は2014年2月14日時点のハンズ様、コメリ様、両社のサイトのフォームを分析した内容を記載しています。
なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年2月14日時点)。

今回は、オンラインショッピングサイトの会員登録フォームに注目してみました

ハンズ コメリ
ページ数 メールアドレス入力、登録フォーム送信、入力、完了の4つ メールアドレス入力、登録フォーム送信、入力、確認、完了の5つ
入力項目の種類 11種類 27種類
必須項目入力欄の数 14個 26個
フロー あり なし
オファー なし なし
必須マーク 緑で「必須」マーク 赤で「*」マーク
メルマガ購読 なし メール情報配信あり
利用規約、
プライバシーポリシー
リンクで別ウィンドウ表示 メールアドレス入力前に
1ページあり
送信ボタンのサイズ 幅180px x 高さ35px 幅180px x 高さ30px
入力画面のレイアウト 専用ページ
ヘッダーフッダー共通
専用ページ
ヘッダーフッダー共通
入力ページへの遷移 メールアドレス入力後、フォームが送信されてくる メールアドレス入力後、フォームが送信されてくる

同業種の会員登録フォームですが、内容にかなりの差が見られました。
共通点があまりなく、それぞれの気になったところを上げています。

項目数、必須項目数に大きな差が!

ハンズは、項目数、必須項目ともにかなり絞られている印象でした。
また、前回の比較分析のコーナーでもお伝えしましたが、項目のほとんどがファーストビューにおさまっていて、項目の全体像が一目でわかるのがとても良いと思いました。
全体のカラーも統一されていて、見やすく登録しやすいフォームだと思います。

コメリは、ハンズに比べるとかなりの項目数でした。
ただ、フォームは、まず大分類に分けられていたり、空間もしっかり取られていて、入力はしやすい印象でした。
必然的に必須項目個も多くなっているので、氏名欄や電話番号など、まとめれるものは1つの入力枠にする方がユーザーのストレスを減らせると思いました。

ハンズ
登録ボタンまでファーストビューに入っているとなお良し!
ハンズ項目数
コメリ
入力枠をなるべく統合し、入力数を減らすことも必要かもしれません。
コメリ項目数

入力フォームはリズム感!

音楽の話ではありません。(笑)
良いテンポとスムーズな入力フォームは、完了につながる大切な要素です。
一目でわかる全体像と、フォーム上部にあるフロー表示が、「この入力が終われば完了だ!」とユーザーへの後押しになります。
ハンズのフォームは、確認ページのないもので、この流れをより加速させていると思います。

ハンズ
リズムと勢い。そんなものも少しは関係しているのです!
東急ハンズフォームフロー

パスワード設定に差!

両社ともにパスワードの入力項目がありました。
コメリは、パスワード入力以外に、パスワードを忘れてしまった時のための質問と答えの項目がありました。
誰しも、「あれ?パスワードなんだっけ?」という経験はあると思いますが、その時にはとても役に立つと思います。
ただ、この分、全体の項目数が増えてしまうことになるので、離脱につながる可能性が出てきてしまいます。

そもそも完了まで到達していただけないことには、この項目自体、全く意味がないのでバランスが難しいところですが。。。

コメリ

コメリフォームパスワード

即入力開始できます!

コメリは、フォームを開いたときに、カーソルが氏名入力項目の「姓」の部分に合わせてありました。
すぐに入力を開始することができますし、マウスでカーソルを合わせるひと手間が必要なくなるので、ユーザーにはありがたい機能だと思います。

コメリ
項目数が多いので、減らせる手間は減らしたいですよね!
コメリフォーム初期カーソル

離脱防止機能も比較していきましょう

機能名 ハンズ コメリ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

・エラー表示はリアルタイムにこだわる!

両社とも、登録ボタンを押したときにのみ、エラー表示が出るタイプでした。
リアルタイムで表示することで、間違っているそのタイミングで修正することができますね。
ユーザーは、登録ボタンを押すと、終わった、と感じてしまいます。その時にたくさんのエラーが出ると、ユーザーはがっかりして離脱につながってしまいます

ハンズ
緑を基調にしたレイアウトに、赤のエラー表記はとても目立ちますね。
東急ハンズフォームエラー表示
コメリ
項目数が多いので、エラー数も多くなりがちですね。
コメリフォームエラー表示

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

今回の比較分析は、以上となります。

いつもと同じように分析に加え、こうすれば良くなるのではないかという改善案を、考えてみました。

ハンズ

せっかくのレイアウトをよりすっきりと見せるために、入力例を入力項目内に表示することをオススメします。
省スペースでユーザーにもわかりやすく、一石二鳥です。

コメリ

  1. 項目数が多いので、入力例を表示することでユーザーの心理的ハードルを下げることができると思います。
    入力項目内に表示することで、レイアウトを崩さず、すっきりと表現することができますよ。
  2. メールにて新企画案内などのメール情報配信を希望しますか?との項目がありますが、デフォルトは「希望しない」にチェックが入っていました。
    せっかくお客様に企業の情報をアピールする機会ですから、ぜひ「希望する」にデフォルトチェックを!

まとめ

みなさんの生活にも身近なホームセンター。
ぜひ、入力しやすいフォームで、たくさんのお客様に安心をお届けしていただきたいものです。

雪かき、がんばりましょう!(笑)

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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