勝手にEFO比較分析【ビックカメラ x ヨドバシカメラ】(家電量販店 会員登録フォーム編)

皆さん、家電はお好きですか?
家電量販店へ行くとなんだかワクワクして、買わないのにもかかわらずついつい立ち止まって最新の家電を物色してしまう人も多いのではないでしょうか。
一方、家電を見に行きたいけど時間が無い、ゆっくり調べたい、値段を把握・比較してみたい、とお考えの人はまずはウェブで調べるという方も多いでしょう。

今回はそんな家電のオンライン通販を行っているご存知大手家電量販店「ビックカメラ.com」(http://www.biccamera.com/)(以下本記事では「ビックカメラ」)と「ヨドバシ.com」(http://www.yodobashi.com/)(以下本記事では「ヨドバシ」)の会員登録フォームを比較分析したいと思います。

それでは早速「勝手にEFO分析」を行っていきます。今回も、○△×で、ユーザー視点の評価を行い、最後に改善ポイントを「勝手に」指摘してしまいます。

※本記事の内容は2014年10月28日時点のビックカメラ、ヨドバシカメラ、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2014年10月28日時点)。

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

いつも通り、EFOの基本項目からチェックしていきます。

ビックカメラ ヨドバシ
ページ数(非ログイン時の場合、プラン選択後より) 会員情報入力×2、確認、完了の4ページ 会員情報入力、確認、完了の3ページ
入力項目 11項目(住所登録等も合わせると18項目) 8項目
必須項目入力欄の数 7項目(住所登録等も合わせると14項目) 8項目
フロー あり なし
オファー あり なし
必須マーク あり(「★」で控えめ) なし
送信ボタンのサイズ 幅200px × 高さ35px 幅185px × 高さ36px
入力画面のレイアウト フォーム専用 フォーム専用

入力項目数に差が

ビックカメラは入力完了まで2ページもの入力ページがあり、ヨドバシに比べ2倍以上の項目数となっています。
また、最初の項目が「会員ID」となっていますが、フォームの最初の項目はユーザーがスムーズに入力開始できるかどうかのカギ。できればあまり考えずに入力できるようなハードルの低い内容を最初に配置したいですね。

soso_black ビックカメラ 入力項目

1ページ目の入力項目。

1ページ目の入力項目。

レイアウトに差が

ビックカメラはかなり目を引くオファーや登録手順の動画を付けるなどユーザーにやさしい一面も。
しかし目に入る情報が多い分、入力着手まで時間がかかったり、関心がそれて離脱を産んでしまう可能性は否定できません。

一方ヨドバシは項目数が少なく実にシンプル。余計なコンテンツが無く入力に集中できるのですが、シンプル過ぎて入力条件などの表示が無く、少し不親切な印象を与えてしまう可能性もありそうです。

soso_black ビックカメラ ページレイアウト

大きく表示されたオファー。入力開始に至るまでにユーザーに与える情報が多い

大きく表示されたオファー。入力開始に至るまでにユーザーに与える情報が多い

ng_bw ヨドバシ ページレイアウト

余計なコンテンツがなくシンプル

余計なコンテンツがなくかなりシンプル

必須表示に差が

ビックカメラはメルマガ登録以外はほぼ全て★マークで必須、ヨドバシは全ての項目が必須ですがとくに必須の表示はありませんでした。

ok_blue ビックカメラ 必須表示

必須マーク

赤色のマークでどこが入力必須なのかがわかりやすい

ng_bw ヨドバシ 必須表示
全てが必須項目だとしてもやはり必須表示があった方がユーザーに対して親切ですね。

必須マーク

必須マークは一律でついていない

ビックカメラにはフロー表示有り

やはりフロー表示があると入力の流れが把握できるので便利です。
逆にフロー表示が無いヨドバシではメールアドレス登録もあるのにどこで完了になるのか分からないのでユーザーが不安になってしまいますね。

ok_blue ビックカメラ フロー
これがあるだけでユーザーが安心して入力できます

フロー表示

フロー表示

キャンセルボタンは危険

「戻る」とは別に「キャンセル」の操作にあたるボタンがビックカメラのフォームでは表示されていました。
特に登録内容の確認ページに配置されている利用規約に「同意しない(キャンセル)」ボタンを押下すると、まさかのビックカメラ.COMのトップページへ遷移してしまうという仕様。
ユーザーががっかりしてそのまま離脱してしまう懸念が考えられます。

ng_bw ビックカメラ ボタン

キャンセルボタンは今すぐ廃止するべき!

キャンセルボタンは今すぐ廃止するべき!

次に入力支援機能を比較していきます

ビックカメラ ヨドバシ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

今回、2社とも目立った入力支援機能は搭載されていませんでした。
(郵便番号からの住所自動入力機能のみ)

エラー表示に違いが

入力ミスがあった時に表示されるエラー表示。ビックカメラは入力フォーム上部にまとめて表示、ヨドバシは各項目ごとに表示されています。
どちらも赤字や赤枠で目立つものになっていますが、どこに表示されるかがユーザーの入力修正のしやすさにつながります。

ng_bw ビックカメラ エラー

エラー内容はフォーム上部にまとめて表示されている

エラー内容はフォーム上部にまとめて表示されているため、都度照らし合わせる作業が必要

ok_blue ヨドバシ エラー

エラーのある箇所にエラー内容が書かれていると、直感的に修正にとりかかることができる

エラーのある箇所にエラー内容が書かれていると、直感的に修正にとりかかることができる

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

いかがでしたでしょうか。最後はいつも通り、勝手にアドバイスして終わりたいと思います。

ビックカメラ

余計なものは外せばより親切に

オファーを表示するのは良いのですが、情報量が多いためユーザーの注意を逸らしてしまう可能性が。メリットはポイントをおさえて簡潔に表示したいですね。
全体の項目数が多いので、削れる情報がないか検討してみても良いかもしれません。

また、キャンセルボタンはすぐにでも外したいところ。
親切な姿勢を感じるフォームですので、あとひといきでより良いフォームへ生まれ変わるのではないかと思います。

ヨドバシ

シンプルから卒業を

シンプルイズベストとは言いますが、要素を削りすぎたためにユーザーが困惑しそうな箇所も。
必須表示やフローの追加、入力支援機能の追加を行うとより良いフォームになるかと思います。

いっぽうで、メリハリのある配色や無駄のないレイアウト、セキュリティシステムに関する言及など、EFOのお手本となりそうな箇所もいくつかありましたので、今後が楽しみなフォームです。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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