勝手にEFO比較分析【ユニクロ x ZARA】(アパレルEC 会員登録編)

今回もやります「勝手にEFO比較分析」。

同シリーズ前回の「不動産ポータル 物件問い合わせ編」は、記事単位で従来の4倍ものアクセスを集めることができ、執筆者としては、感涙ものです。読んでくれた皆さん、ありがとうございます。

…さて、今回の勝手に入力フォーム分析は、「アパレルEC 会員登録編」。

前回取り扱った不動産業界は、比較的インターネットへの取り組みが早かった業界。

一方、アパレルブランドは、インターネットに対して様子見の時代が長かったように思います。とりあえずドメインだけ取って、ペラ1ページにロゴだけのブランドサイトとか、結構ありました…各ブランドが独自にECサイトを作って直販するようになったのも最近になってようやく、という感じですよね。

今回は、株式会社ユニクロ様「ユニクロ」(http://www.uniqlo.com/jp/)(以下、本記事内では「ユニクロ」)と、ZARA様「ZARA」(http://www.zara.com/jp/)(以下本記事内では「ZARA」)を題材にさせていただきます。
※以下、サイト名の敬称は省略させていただきます。

言うまでもなく、ユニクロは、皆さんご存知、日本から世界へ展開するブランド。一方のZARAは、スペイン発のグローバルSPA(「アパレル製造小売業」)の代表格ですね。

さぁ、今回も「勝手に」分析いたします。今回はさらにフォーム改善ポイントについても「勝手に」指摘してみましたので併せてご覧ください。

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

分析の前に…ECサイトの新規会員登録フォームの目的とは

今回登場する新規会員登録フォームの目的を押さえておきましょう。その目的は、潜在顧客層の開拓(=メルマガを送信したい)にあると言えるでしょう。
また、ユーザー情報の取得にあたっては、特にユーザーの住所=商品の発送先を正確に入手することが最重要課題と言えるでしょう。
従って、メールアドレス入力欄や、住所入力欄の入力しやすさ、メルマガ受信欄のありかたが、分析の注目ポイントになると思います。

なお、今回新たに、各分析項目毎に○△×をつけることにしました。ユーザー目線に立ってみたときの使いやすさを軸に、勝手に採点させていただきました。

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

どちらもシンプルなデザインにこだわったサイトでありフォームです。
入力補助まわりで言えば、ガイド離脱ブロックサブミットブロックはともに「無し」。
前回の「不動産ポータル物件問い合わせ」と比べても「控えめな」フォームという印象でした。

ユニクロ ZARA
ページ数 入力、確認、完了の3つ 入力、完了の2つ
入力項目の種類 17種類 16種類
必須項目入力欄の数 16個 10個
フロー なし なし
オファー なし なし
必須マーク あり「必須」
わかりやすい
あり「*」
ちょっとわかりにくい
新着メール希望チェック デフォルトチェック済み、ちなみに2種類のメルマガあり デフォルトチェック無し
利用規約、
プライバシーポリシー
リンクで別ウィンドウ表示 リンクで別ウィンドウ表示
送信ボタンのサイズ 幅161px x 高さ20px 幅201px x 高さ37px
入力画面のレイアウト 専用ページでシンプルだが、
共通のヘッダーフッターは存在
専用フォームを、元ページにオーバーレイ。
※スマートフォンでは別ページ。
入力ページへの遷移 ヘッダーの「会員登録」から ヘッダーの「ログイン」>「アカウント作成」から

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

フローはともに「無し」

「入力>確認>完了」などフォーム入力完了までの遷移といまどのページを見ているかを示す情報を「フロー」(ステップとも)と呼んでいますが、今回は、ともにフローがありませんでした。

ユニクロ
フローは無し
ZARA
フローは無し

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

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

今回はどちらのフォームにもオファーはありませんでした。

どちらもフォーム冒頭には説明文が記載されていました。ユニクロは、注記のテキスト量が多く、読むのに時間がかかりました。ZARAは2行の簡潔なメッセージでした。

※以下、画像については、ユニクロの画像は赤の枠色、ZARAの画像は灰色の枠色をつけます。

ユニクロ
冒頭の注意書きのテキスト量が多い
ZARA
簡潔な説明のみ

必須入力項目欄の数は、ユニクロが多かった

必須入力欄の数がユニクロの方が多いのは、お名前とフリガナで、姓名で入力欄を分けているのと、性別、生年月日があるため。性別と生年月日は「お客様お問い合わせ時のご本人様確認のために使用させていだきます」とのことです…

ユニクロ
性別と生年月日は本当に必要か?と一部のユーザーは一瞬ためらってしまうかも
ZARA
項目数は必要最低限…と言えるか。

確認/送信ボタンは、ともに中くらいのサイズ

どちらもデザイン性の高いサイトということもあるのでしょう、ボタンは中くらいの控えめなサイズでした。ユニクロのほうが若干、小さめ。
ユニクロはマウスオーバー反応は無しで、ZARAにはマウスオーバー反応ありでした。

ユニクロ
決して小さくはない。マウスオーバー反応なし。
ZARA
大きさは中くらい、マウスオーバー反応あり

入力欄がまとまっているのはともにマル!…だが

電話番号が3つの入力欄に分かれているケースはよくありますが、今回はともに1つの入力欄にまとまっており、クリックが少なくて済む点で、ユーザーにとって使いやすいでしょう。

ユニクロ
入力欄が1つにまとまっていて良い
ZARA
入力欄が1つなのは良いが「+81」に若干、戸惑う人もいるかも..あと携帯が先に来るのも少し違和感ある人もいるかも。

なぜ?どちらもポリシー同意に、必須マークが無かった

ユニクロは「ご利用規約への同意」のチェックボックス、ZARAは「個人情報保護ポリシーに同意します」のチェックボックスがフォームの最後の項目にあるのですが、必須マークがありませんでした。

必須入力項目はできるだけ少なくし、また必須入力項目はレイアウト上、まとめて配置するというのが、入力完了率アップのための鉄則ですが、その例外といえるのが、ポリシー同意の項目。

大抵は最後に配置せざるを得ず、必須マークが孤立してしまう悩ましい箇所なのですが、なんと今回はともに「必須入力なのに必須マークを表記しない」という予想外の対処でした。

ユニクロ
必須項目なのにマークなし!
ZARA
必須項目なのにマークなし!

入力ページ、ページの出現の仕方とシンプルさに違い

ZARAは、ユーザー登録ページが、ページ上にオーバーレイ。オーバーレイしたページの内容はとてもシンプルなもの。
一方のユニクロは、他ページと共通のヘッダーフッターを含む専用ページでした。強いて言えば、ZARAのほうが、多少は入力に集中できると言えるでしょうか。

ユニクロ
別ページに遷移
ZARA
ページ上にフォームがオーバーレイ

今回も大きな違いがあった、入力補助機能

入力補助機能の比較ですが、今回も大きな違いがありました。

機能名 ユニクロ ZARA
ガイド

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

なし なし
離脱ブロック

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

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

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

なし なし
項目毎アラート表示

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

フォーカス時:なし
エラー時:なし
フォーカス時:なし
エラー時:項目右にテキスト
項目毎に入力完了した際の動作 なし 項目右に緑色のチェックマークが表示される

リアルタイム入力補助機能

ともにガイドサブミットブロック離脱ブロックがない点で、「控えめな」入力フォームですが、リアルタイム入力補助では、ユニクロは「なし」、ZARAが「あり」と分かれました。

ユニクロ
リアルタイムは「無し」。「確認する」ボタンをクリックした後に、入力条件のチェックが行われ、項目下に赤字でメッセージが表示される
ZARA
リアルタイム入力補助機能あり。フォーカス時、エラー時、完了時にそれぞれメッセージ表示。動作も機敏。

郵便番号からの住所自動検索は、ユニクロが「あり」、ZARAは「なし」

ただし、ユニクロは、
・住所検索をクリック→別ページに飛ぶ
・郵便番号を入力→該当する所在地がでる
・所在地を指定→元の入力フォームにもどる
という動作が必要で、 正直言って、少々面倒なものでした。

ユニクロ
住所検索機能はあるが、画面遷移が必要で、少々面倒くさい
ZARA
無し。淡々と、各入力欄に入力する方式。項目の順番に違和感あり。

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

比較分析は以上なのですが、今回は、分析に加えて、こうすればもっと使いやすくなるはずという点を考えてみました。個別に2点ずつ、共通して2点挙げてみます。

ユニクロ1)リアルタイム入力補助機能を導入する

リアルタイム入力補助を導入すれば、 必要なときに必要な場所にアラートメッセージを出せるので、フォームの上部にある大量のテキストによる注記も減らせます。

2)「性別」にデフォルトチェックを入れる

デフォルトチェックが入っていると、少なくとも男女どちらかのユーザー操作から、ワンクリック減らせて良いと思うのですが…

ZARA

1)必須マーク「*」はわかりにくいので赤字で「必須」などにする

半角のアスタリスク「*」は確かにデザイン上、きれいなのですが小さいのでわかりにくく感じました。ここはベタに【必須】等にしたいところです。

2)住所の項目順、電話番号は、日本に最適化する

住所の入力欄の順番が上から「住所、郵便番号、市区町村、都道府県、国」の順だったり、電話番号欄に「+81」がついていたり「携帯、携帯以外」の順だったりと、あまり日本っぽくないので、もう少し日本に最適化したい。

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

3)住所自動検索機能をページ遷移なしで実装する

4)ポリシー同意には必須マークを入れる

【まとめ】
懇切丁寧に説明派のユニクロと、技術で解決派のZARA。しかしともに印象は控えめ。この勝負、引き分け!

今回は、ともにデザインコンシャスなサイト/フォームでした。
リアルタイム入力補助や送信ボタンクリック後の条件を満たしていない項目の指摘など、技術面でユーザービリティ向上を図るZARA。一方のユニクロは、リアルタイム入力補助ではなく丁寧な説明で(ページ上のテキスト量は多めになるけれど)ユーザーの迷いを減らす努力が感じられました。

【最後に】

いかがだったでしょうか?次回もアパレルECサイトを題材に、2週間後に公開予定です。ご期待ください。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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