勝手にEFO比較分析【ABCマート x チヨダ】(アパレルEC 会員登録編 2)

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

前回、予告した通り、アパレルECサイトのエントリーフォーム分析・第2弾をお送りします。

さて、突然ですが、街はすっかり秋めいており、長袖姿の方たちを見かけるようになりました。
空気も冷たく、冬に近づいてきましたね。

となると、秋冬ファッションに合わせ、そろそろ買い換えたり増やしたりするものといえば…シューズです(これが言いたかった)

今回は、株式会社ABCマート様「ABCマート」(http://www.abc-mart.com/)(以下、本記事では「ABCマート」)と、株式会社チヨダ様「チヨダ」(http://www.chiyodagrp.co.jp/)(以下本記事では「チヨダ」)を題材にさせていただきます。
※以下、サイト名の敬称は省略させていただきます。

日本全国はもとより、台湾と韓国にも店舗を置く靴販売の大手ABCマート。
一方、都内近郊では東京靴流通センターでお馴染みチヨダ。(西の方だとザ・シューズという店名がメジャーだそうです。)

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

※本記事の内容は2013年10月7日時点の株式会社ABCマート様、株式会社チヨダ様、両社のサイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2013年10月7日時点)。

入力ページ、共通点は、あまりなかった

ABCマート チヨダ
ページ数 利用規約、会員登録、確認、完了の4つ ログイン、会員登録、完了の3つ
入力項目の種類 17種類 16種類
必須項目入力欄の数 15個 14個
フロー なし なし
オファー なし なし
必須マーク あり「必須」
わかりやすい
あり「*」
若干わかりにくい
メルマガ購読 デフォルトチェック済み デフォルトチェックなし
利用規約、
プライバシーポリシー
1ページ目として表示 ページ下部、インラインフレーム表示
送信ボタンのサイズ 幅160px x 高さ40px 幅79px x 高さ20px
入力画面のレイアウト 専用ページ。
ヘッダー、フッターあり
専用ページ。
ヘッダー、フッターなし
入力ページへの遷移 専用ボタンorヘッダーのログイン>「新規会員登録」 マイページ>「新規会員登録はこちらから」

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

フローは、ともに「なし」

前回も説明しましたが、「入力 > 確認 > 完了」のように、ページ遷移と現在そのユーザーがどこにいるかを示す情報のことをフローと呼んでいます。

が、今回、ABCマートとチヨダは、ともにフローがありませんでした。

オファー、ともに「なし」

オファーはメールマガジン登録なら「旬な情報を週1通お送りします」といったメッセージ、
会員登録なら、「登録者にはもれなくXXXを差し上げます」といった約束など、入力完了した結果、
ユーザーが得られる特別なメリットを説明する情報。

チヨダの方は特別なメリットではありませんが「買い物の際に情報を登録していると手間がかからない」点を控えめに説明。

ABCマートは1行、チヨダは2行と、説明文はいたってシンプルに書かれています。

必須項目入力欄の数、フリガナを必須にするか、電話番号を別欄にするかの違いはあるが、数はほぼ同じ。

ABCマート
お名前、フリガナで姓名を分けている。入力欄の横幅が小さくて入力しづらい。
チヨダ
必須項目の「必需」項目メールアドレス確認入力、ふりがなを省いている。その一方、電話番号入力フォームを3つに分ているため、結局ABCマートと入力欄の数はほぼ一緒。

ポリシー同意をはじめに持ってきたABCマート、入力項目の1つとして配置した従来型のチヨダ

ポリシー同意欄を入力ページの前に持ってくるフォームは、筆者の感覚ではECサイトだと比較的多いように思います。
フォームフローにおいて1ページ増えてしまうデメリットはありますが、ポリシー同意を先に持ってくる(済ませてしまう)ことで、入力ページにおける必須入力項目数を1つ減らせますし、ポリシー文章を入力ページに表示しなくていいので、入力に集中できるというメリットがあるでしょう。

ABCマート
1ページ目にポリシー同意を持ってくる
チヨダ
一方、従来型のチヨダ。しかしなぜ必須マークをつけないのか。

確認/送信ボタンの大きさに差異

ABCマートのボタンは中くらいのサイズなのに対して、チヨダのボタンは細くて小さかった。

ABCマート
押しやすい一般的なサイズ。サブミットブロック機能あり。
チヨダ
淡いロールオーバー反応あり。もう少し大きければ・・・

半角入力か、全角入力か、およびその切替回数

ABCマートの入力欄の文字種別を上から辿ると、全角~半角~全角~半角と、必要な切替回数が多め。
一方、チヨダは、半角で入力する必要があるログインID、パスワード、メールアドレスの入力欄をフォーム上部に持ってくることで、半角~全角と、切替回数が少なめ。

ただ、実を言うと、ABCマートのほうは、半角で入力すべきとされているメールアドレスや電話番号、郵便番号の入力欄は、全角で入力するとその場で強制的に半角に変換されるという隠れた機能が動作していて、実は見かけよりも切替の回数は少なくて済むようになっていました。

チヨダのほうは、リアルタイムではないが、送信ボタンをクリックして他の項目の入力エラーで戻ってくると全角で入力していた電話番号が半角になりました。

わかりやすくするために、半角入力エリアを黄色、全角入力エリアを緑で図示します。

ABCマート
パッと見は、全角半角の切替回数の多いフォームですが、全角を半角に強制的に切り替える機能が動作。
チヨダ
半角入力の会員ID、パスワード、メアドをまとめる工夫。

入力項目はシンプルに

タブキーで次の項目に移動できることを知っているユーザーは決して多くないと思うので、
項目移動のたびに、マウスに手を持っていくことになりますから、入力項目数は極限まで減らしたいもの。

ABCマートは郵便番号と電話番号がまとまっていて、一気に入力できる=楽、な一方で、氏名とふりがなの項目が2つに分かれていました。

チヨダは、氏名もふりがなも、郵便番号も電話番号も項目が分かれていました。

ABCマート
氏名、カナもまとめれば「○」。
チヨダ
項目数が多い…もっとまとめたほうが..

入力補助機能、あるのとないのとでは大きな違い

ABCマートは「あり」、チヨダは「なし」という結果。

機能名 ABCマート チヨダ
ガイド

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

あり なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし
エラー時:あり
フォーカス時:なし
エラー時:なし
項目ごとに入力完了後の動作 背景色が、ピンクから白に なし

入力エラー機能

入力の条件がはずれていたり空欄にしていると出てくるエラーメッセージ。
ABCマートとチヨダそれぞれ出現箇所が異なっていました。

ABCマート
該当項目の真下に出現するので、エラー箇所がどこかはすぐわかる。
チヨダ
上部に出現。これではいちいち探さなくてはならない。

郵便番号から住所を検索する機能は、ともにあり

前回と異なり、画面遷移もなかった住所検索機能
両者とも利便性の高い仕様でしたが、ここで小ワザを出したのがABCマート。

上3桁を入力すれば該当しそうな地域の一覧を吹き出しで出してくれました。
引越ししたての場合だと、覚えるのも面倒な郵便番号ですが、これならあっさり入力できるので便利ですね。

また、チヨダも小窓で郵便番号検索結果を出してくれるので、決定ボタンを押せば自動で入力してくれます。

ABCマート
こちらが3桁入力しただけで出てくるリスト。
チヨダ
ポップアップ表示される別ウィンドウで住所を検索。

勝手にフォーム改善アドバイス…こうすれば、もっと使いやすくなるはず

今回の比較分析は以上となりますが、前回と同じく分析に加え、こうすれば良くなるのではないかという改善案を、ABCマートとチヨダ、共通して2つ考えてみました。

ABCマート

1)ガイド位置が残念、ぜひ調整を

ガイド機能を実装していたABCマート。一定のサイズまではウィンドウ右からの固定位置で、ウィンドウを広げると左からの固定位置に切り替わる仕様になっているようですが、ウィンドウサイズが大きいときは、フォームがウィンドウに対して中央配置なため、ガイドが説明書きにかぶってしまうという残念な結果に。
設定の調整がうまくいっていないのでしょうか? ここはシンプルに、ウィンドウ右からの固定位置だけにすることでいかがでしょうか?

2)姓名、ふりがなの入力欄の幅はもっと広く

確かに姓名は、それぞれ全角で数文字なので、文字数からいえば足りないわけではないのですが、
それでも項目をマウスで選ぶ人にとっては、項目は大きいほうが嬉しい…
細かい話なんですが、そんな細かいところが重要だったりします。

チヨダ

1)離脱ブロック、入力アラート、ガイド機能を導入する

チヨダはいわゆるリアルタイム入力補助機能が入っていないので、いれたらどうでしょうか?

誤って離脱するのを防止するために離脱ブロックはしっかり導入したいところ。
入力アラート機能とガイド機能を導入すれば必須項目も一目瞭然となります。

2)メールアドレス確認項目追加、ふりがなと規約同意は必須に

チヨダは確認ページがないため、「メールアドレスの確認」欄はあったほうがいいのではないでしょうか?また、ふりがなは顧客の名前を読み間違えないためにも必須とすべきかなと思いました。

また、共通しては、下記を挙げておきます。

3)氏名、ふりがな共に1項目にまとめる

4)ガイド機能を導入するなら、文中に入力残数を表示する

【まとめ】
入力補助機能、ガイド機能、離脱ブロックが導入されているABCマート。
一方、郵便番号検索機能のみ導入されていたチヨダ。

フォームの内容はほぼ共通していましたが、機能性を考えるとABCマートのほうが優勢でした。
チヨダもリアルタイム入力補助機能を入れ、必要な項目などを改善すれば、良い勝負になったはずです。

【最後に】

いかがだったでしょうか?
次回は、2週間後に公開予定です。ご期待ください。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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