3月に入りましたね。女の子の節句の雛祭りもすぎ、雛人形を飾ったり、ちらし寿司や蛤のお吸い物などを備されたご家庭もあるのでは?
(雛人形をしまうのが遅れるとお嫁にいけない、なんて言い伝え?もありましたね。)
そこで今回は、食材の買い出しに誰もが訪れるスーパー。
自宅にいても簡単に購入出来るネットスーパーに注目してみました。
題材は、、イオングループが展開する総合スーパー(GMS)とスーパーマーケット(SM)のイオン様(http://www.aeon.info/index.html)
(以下、本記事ではイオン)と、
世界最大の小売チェーン、ウォルマートの日本における子会社の合同会社西友様(www.seiyu.co.jp)(以下、本記事では西友)を
セレクトさせていただきました。
※以下、サイト名の敬称は省略させていただきます。
いつもどおり「勝手に分析」していきましょう。今回もEFOの改善ポイントを「勝手に」指摘していきますので、どうぞお付き合い下さい。
○△×と、ユーザー視点での評価を行っていきます。
両社のサイトのフォームを分析した内容を記載しています。
なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません。
(2014年3月5日時点)
今回は、両社のオンラインショップの会員登録サイトでの比較です。
イオン | 西友 | |
ページ数 | 登録1、登録2、登録3、完了の4つ | ID作成、登録、確認、完了の4つ |
入力項目の種類 | 17種類 | 10種類 |
必須項目入力欄の数 | 22個 | 18個 |
フロー | なし | あり |
オファー | なし | なし |
必須マーク | 緑で「○」マーク | 赤で「※必須」マーク |
メルマガ購読 | デフォルトチェックあり | デフォルトチェックなし |
利用規約、 プライバシーポリシー |
なし | 登録ページの前に1ページあり |
送信ボタンのサイズ | 幅64px x 高さ22px | 幅232px x 高さ42px |
入力ページへの遷移 | トップページの会員登録から | トップページの会員登録から |
以下、個別に説明いたします。
工夫が見える入力フォーム!
両社とも、入力フォーム作りに工夫を凝らしているのが感じられました。
ともに、ファーストビューにほぼ収まるページ作りになっていて、わかりやすかったです。
ただイオンは、登録が数ページに渡る作りですが、フロー表示がないため、フォームの全体像がつかみにくかったです。
西友は、入力ページもコンパクトですし、フロー表示もあり、とても見やすいフォームになっていました。
![]() フロー表示でユーザーに現在位置を示すと、よりわかりやすいですね! ![]() |
![]() 色や空間の使い方もすっきりしていて、わかりやすいです。 ![]() |
オリジナルの住所入力!
ユーザーが買ったものを正確にお届けするために、住所入力は最重要項目になりますね。
両社とも、この部分を特に工夫をしているな、と感じました。
イオンは、フォームの初めにまず住所を入力し、どこの店舗からの配送になるのかを明確にしています。
一般的な住所入力方法とは違いますが、一番入力が手間取る部分ですし、初めに済ませてしまうことで、途中離脱を減らす効果があると思います。
西友は、住所入力枠を一部隠し、全体的にコンパクトなフォームを作り、ユーザーの心理的ハードルを下げていますね。
項目数が多いと、どうしても負担に感じてしまうユーザーも多いでしょう。
郵便番号を打ち込むと住所入力欄が出現する形で、すっきりしていて良いと思います。
![]() プルダウン式の選択方法ですが、項目数が多く、該当物を探すのが少し大変でした。 ![]() |
![]() 住所自動入力機能も付いているので、住所入力自体に負担が少なくて良いです。 ![]() ![]() |
エラー表示に差が!
イオンは、ブラウザの機能を使ったエラー表示方法でした。
エラー内容はわかりやすいですが、複数エラーが存在しても、1つ分しか表示されず、正確な入力につなげるのが難しかったです。
西友は、入力のリアルタイムでエラー表示があるので、項目ごとに正確な内容を入力することが出来ます。
エラーが多い、ということがユーザーにイライラにつながってしまうので、そもそもエラーを作らない方法は重要です。
![]() エラー内容全体を把握できる方がわかりやすいと思います。 ![]() |
![]() エラーになる前にお知らせしてくれるので、ミスが減りますね。 ![]() |
入力フォームのみのページ仕様!
イオンのページは、入力フォームのみでページが作られていました。
当たり前に感じるかもしれませんが、たくさんのフォームをチェックしていても、この仕様は少ないのです。
サイトとヘッダーフッダーを共通にしているものが一番多く、その他のリンクや情報が多く、途中離脱につながってしまう仕様のものをよく見かけます。
このブログ内でも幾度となくお伝えしていますが、ユーザーに入力に集中してもらうことが大切です。
![]() 入力に集中出来ることで、途中離脱を減らせます。 ![]() |
ボタンの違い!
イオンは、登録ページの最終部分に重要項目がまとまっており、それに入力を終えると完了となります。
ただ、OKボタンより戻るボタンの方が大きく、ユーザーが押し間違えてしまう可能性が高いな、と感じました。
西友は、同じように戻るボタンを配置していますが、はっきりと色を分け、ボタンの視認性を上げています。
せっかく最後まで入力してもらっても、登録ボタンを押してもらわないと情報を受け取ることは出来ません。
ユーザーが押したくなるボタンの作成を心がけたいですね!
![]() 隣同士に並んでいて、押し間違えた経験のある方、たくさんいらっしゃるのではないでしょうか? ![]() |
![]() 修正ボタンのないフォームもたくさんあります。視認性を上げるための工夫はたくさん考えられます! ![]() |
入力補助機能は、改善の余地あり!
機能名 | イオン | 西友 |
---|---|---|
ガイド
未入力の残り必須項目数などをリアルタイムで表示する機能 |
なし | なし |
離脱ブロック
ページを閉じようとするとアラートを出してOKしないと閉じることができない機能 |
なし | なし |
サブミットブロック
送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能 | なし | なし |
項目ごとのアラート表示
入力についての説明をリアルタイム表示する機能 | フォーカス時:なし エラー時:あり |
フォーカス時:あり エラー時:あり |
項目ごとに入力完了後の動作 | なし | なし |
項目数は多くないですが、入力にかかる手間は同じですし、なるべくシンプルに入力したい、というのはユーザー心理でしょう。
エラーは少なく、滞りなく完了までつなげたいものです。
そこで、サブミットブロック機能(送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能)などがあると、より完了へと導くことが出来ると思います。
勝手にフォーム改善アドバイス
今回のEFO比較分析は以上となります。
前回と同じく分析に加え、こうすれば良くなるのではないかという改善案を、考えてみました。
イオン
1、上記でサブミットブロックをオススメしましたが、登録ページが3ページに渡り、全体が見渡せないので、残り必須項目数をガイドとして表示するなど、ユーザーにお知らせすることで、入力のハードルを下げることが出来ると思います。
2、入力専用フォームですが、少し込み入った印象があります。
もう少しゆったりとしたフォームレイアウトにすることで、より入力しやすくなると思います。
西友
1、基本的に全項目必須項目になっていますが、必須項目の枠に色をつけるなど、より必須をアピールする方法があっても良いと思います。視認性をあげることで全体像を把握してもらうきっかけになりますし、全体像が把握できることで、入力への心理的負担を減らすことが出来ます。
2、確認ページにあるボタンが、「IDを作成して次へ」となっており、完了へつながるのかが分かりにくかったです。
ここは、完了、でも良いのかな、と感じました。
まとめ
ネットスーパーの場合、会員登録を済ませないと実際の買い物に移れません。
買い物がしたくて登録をされる方がほとんどだと思うので、会員登録は、なるべく簡単に済ませられると良いですね。
今回は、両社ともそういった工夫をされているのだろうな、と感じるフォーム作りになっていました。
もう一工夫で、さらに入力しやすいフォームになるのでは?と思っています。
このコーナーでは、2社の比較をメインにお伝えしていますが、次回は、少し違った視点で比較してみようと考えています。
お楽しみに!