勝手にEFO徹底解剖【ZOZOTOWN 初回購入フォーム】

季節は晩春。
そろそろファッションも初夏を見据え、春物の売りつくしやセールなども多くなってきますね。

有名フォームを題材に「勝手に」EFO状況を徹底分析する「勝手にEFO徹底解剖」シリーズ。
今回は昨年10周年を迎え、先日も2万点2億円分の商品をこっそり0円で販売するというサプライズイベントを行っていたZOZOTOWN(スタートトゥデイ様、http://zozo.jp/)の初回購入フォームを「徹底解剖」していきます。
※以下、敬称は省略させていただきます。

※本記事の内容は2015年4月23日時点のZOZOTOWNのフォームを分析した内容を記載しています。なお今回ご紹介したフォームには当社エフトラEFOの入力補助機能は導入されていません(2015年4月24日時点)。

今回も初回購入を想定して、購入に至るまでの流れについてフォームを検証していきたいと思います。

フォーム全体の特徴

まずはフォーム全体の特徴をチェックしていきます。

統一されたデザインの専用レイアウト

フォームはすべてのページで専用のレイアウトを採用していました。
配色やマージンなどはECサイトと同様のデザインで統一されています。

efo_double_ring 余計なリンクやナビゲーションは一切なく、フォーム入力に集中することができます。

非常にシンプルなヘッダーとフッター

非常にシンプルなヘッダーとフッター

フローで現在地をわかりやすく

入力画面数は少ないですが、ログイン方法が複数ある場合や、購入ルートが複数ある場合には、フローを設置することで少しでもユーザーの迷い、不安を取り除きましょう。

採用されていたフローは横型で縦幅を節約できるデザインです。
イラストを用いて各工程がどのようなモノなのかもイメージしやすいですね。

efo_double_ring フローのおかげで現在地が明確になりますね。

イラストを使った分かりやすいフロー

イラストを使った分かりやすいフロー

大きく目立つ送信ボタン。配置も◎

ユーザーを次のステップへとつなげるのが送信ボタンです。
いくら入力がスムーズに行われたとしても、送信ボタンを押してもらわないと意味がありません。
「どういう形、色が正しいのか」はサイトによって異なるモノなのでA/Bテストを重ねる必要もあり、実は奥深いパーツです。

ZOZOTOWNのボタンは目立つだけでなく、すべてのフローにおいて右上に固定配置し、さらに迷いがなくなるよう設計されています。

efo_double_ring ZOZOTOWNではかなり大きめの押しやすいボタンを採用。
配色もECサイト側でポイントカラーとして使われている濃い青系を選んでいます。

大きく、色背景に白抜きのシンプルな送信ボタン

大きく、色背景に白抜きのシンプルな送信ボタン

印象の薄かったエラー画面

エラーの表示は画面上部に一言メッセージを表示させ、該当箇所に修正内容を注記するのが理想的な形です。

しかし今回のフォームは、エラー時にもページ上部には何も表示されておらず、一瞬エラーかどうかを気が付かないかもしれません。また、エラー箇所には枠線と欄内の配色変更のみで注記もありません。

注意 できれば、該当箇所には修正すべき内容を表示できると良いですね。

かなり印象の薄いエラー表示

かなり印象の薄いエラー表示

親切なリアルタイムアラート表示

送信ボタンを押した後のエラー画面はユーザーのストレスを向上させてしまいがち。
今回、フォームには入力エラーをその場で伝えるリアルタイムアラートが導入されていました。リアルタイムでエラーを表示することでスムーズに修正できますね。

efo_double_ring 分かりやすい吹き出し表示でリアルタイムアラートを実装しています。

支援機能はリアルタイムアラートのみ実装

支援機能はリアルタイムアラートのみ実装

分かりやすいラベル表記と項目のまとめ方

ラベルの意味が分からないとユーザーは意外に大きなストレスを感じてしまいます。
分かりやすいラベルを使うことで、ユーザーの疑問点を無くしていきましょう。

efo_double_ring 分かりやすいラベルを関係のある項目ごとにまとめてあげることでテンポよく入力を進める事が可能になりますね。

一般的な用語が使用され分かりやすいラベル

一般的な用語が使用され分かりやすいラベル

ページごとの特徴

次にページごとの特徴をピックアップしていきます。

以下、購入する商品を選んだうえで、ショッピングカートから「レジへ進む」を選択した場合の購入の流れについて紹介していきます。

カートページ。商品一覧の右横に「レジへ進む」のボタンが

カートページ。商品一覧の右横に「レジへ進む」のボタンが


今回もいつもどおり会員登録は行っておらず、初回購入の場合を想定して進めていきます。

ログイン・情報入力ページ

まずはログイン・情報入力ページに遷移します。

ページの全体像

ページの全体像

レジへ進んでいるわけではない

ひとつ気になったのは、「レジへ進む」をクリックした後に表示される当ページに、再び「レジへ進む」という文言のボタンが存在する点。
ユーザー体験としては、レジに進んだつもりが進めていないという状況になり、2度手間に感じるユーザーもいるかもしません。
できればレジという言葉以外の文言にすると良いのではないでしょうか。

注意 「レジへ進む」をクリックした後に、再び「レジに進む」という文言。二度手間のような印象を与える可能性も

また「レジへ進む」・・・

また「レジへ進む」・・・

ログイン方法の選択

まず、既に「ZOZOID」を所持しているユーザーは、ログインすることで情報入力の手間を省いたり、ポイントを取得することが可能です。さらに外部サービスのアカウントを使ってログインすることでポイントの溜め方を変更することが可能なようです。

フォーム冒頭では、どのIDでログインするとどのポイントがどれだけ還元されるのかを表示しています。ログイン方法を選択するごとに右側のログインエリアが切り替わり、サービスごとの詳細が表示されるようになっています。

各IDのログイン詳細は分かりやすいのですが、ZOZOIDを所持していないがYahooまたはmixiのアカウントを持つユーザーはどのように振る舞うべきかが不明瞭で、ユーザーが迷ってしまう可能性があると思います。
こちらはフォームの一番初めの項目でもあるので、ユーザーがスムーズなスタートを切るために、わかりやすさには特に慎重になっておきたい部分です。

注意 まずはZOZOIDの有無だけでシンプルにユーザーを振り分けてしまうほうがシンプルなのかもしれませんね。

ZOZO IDでのログイン

ZOZO IDでのログイン

Yahoo! JAPAN IDでのログイン

Yahoo! JAPAN IDでのログイン

mixi IDでのログイン

mixi IDでのログイン

会員登録は任意

その下にあるお客様情報入力画面では、新規利用者はそのまま入力を開始でき、なおかつ会員登録をしなくても購入が可能な点は、ユーザーに選択肢を与えてくれており良い印象を持ちますね。

efo_double_ring 会員登録をついでに行うかどうかをオプション的に選択でき、メリットデメリットを記載してくれています。

会員登録をしたい場合はパスワード等をその場で設定できる

会員登録をしたい場合はパスワード等をその場で設定できる

見やすい配送・支払い方法と合計金額

配送や支払い方法が選択しにくい時や、結局すべての合計金額がいくらかかるのか分かりにくい時もユーザーはストレスを感じてしまいます。

ZOZOTOWNの配送方法・お支払い方法の入力箇所は分かりやすさ、見やすさともにすばらしい作りとなっていましたので、ぜひお手本にしたいフォームです。

efo_double_ring 最短だといつ頃なのか、指定がなければいつ頃届くのかが一目で分かり、安心して注文できそうです。

配送方法とお届け予定日

配送方法とお届け予定日

efo_double_ring 表示はクレジットカードを選んだ場合です。インターネットでのクレジット決済に不慣れでも理解できるよう、イメージ画像を使って説明が記載されていました。

補足イメージで分かりやすい

補足イメージで分かりやすい

efo_double_ring 配送・支払い方法を変更した場合の送料と手数料をリアルタイムで計算し常に合計金額が更新されます。

まとめていくらかかるのか、一目でわかりますね

まとめていくらかかるのか、一目でわかりますね

次は、確認画面

次に進むともう確認画面です。今回、フォームの入力画面数はたったの1画面でした。

すっきりと見やすい確認画面

入力確認画面はフォームの締めであり、ここでユーザーに離脱をされては困る部分です。
デザインの強弱などでメリハリをつけ、ユーザーの目線を誘導しましょう。

efo_double_ring 情報を適度にまとめ、一覧性のある良い確認画面になっていますね。

スクロールが少ない見やすい確認画面

スクロールが少ない見やすい確認画面

最後に

いかがだったでしょうか。今回の勝手にEFO徹底解剖は以上となります。
最後にこれまでみてきたZOZOTOWNのフォームの特徴をおおまかにまとめて結びとさせていただきます。

優れている、取り入れたいポイント

  • シンプルなフォーム専用レイアウト
  • イラストを用いて分かりやすいフロー
  • 購入者が一番把握したい配送・支払い・合計金額情報の見やすさ
  • 会員登録の自由度
  • 明快で分かりやすい注文内容の確認画面

課題と思われる点、その他論点など

  • エラー画面のわかりにくさ
  • 縦に長い入力ページ、エラー箇所へのスクロール
  • 印象の薄い必須項目
  • ボタンの文言
  • ログイン時の振り分けの複雑さ

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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