TOP デザイン・情報設計・UI ZOZOSUITSの注文体験を改善してみた

ZOZOSUITSの注文体験を改善してみた

UX DAYS TOKYOのスタッフのイケダマリカです。都内でデザイナーとして主にWebアプリのUIデザインをしています。

みなさんは先日話題になったZOZOSUIT(ゾゾスーツ)をご覧になりましたか?私は150cm台と背が小さく服を見つけることにいつも手間をとっているので、自分にぴったりの洋服が買えるのではないかという期待でZOZOSUITをすぐに注文しました。発送はこれからのようですが届くのを楽しみにしています。

ZOZOSUITはネット通販の問題解決なるか?!

ネット通販は「自分にサイズが合うかわからない」という心理的不安が存在します。ZOZOSUITはその不安を取り払い、ネット通販の利点である検索や一覧性、リコメンド機能、ファッション系サービスとの連携でもっと服をネット上でも安心して購入できるようになるのでは?と、凄く期待しています。

ZOZOSUITサイトトップ

出典:http://zozo.jp/zozosuit/

到着が楽しみで期待しているプロダクトのZOZOSUITですが、注文中・注文完了後のUIで困ってしまった箇所があったため、遭遇した問題点と改善案をご紹介します。

注文時に入力した身体データを見返せない

ZOZOSUITを注文する様子

とても期待しているZOZOSUITなので自分の分だけではなく家族の分も注文しました。

カートに入れるところまではスムーズにできました。

2着同時注文ができない図 しかし、注文するためカート画面からレジ画面に進もうとすると「ZOZOSUITは初回注文では1着までしか購入できない」という内容のアラートが表示され注文画面に進めません。

キャンペーンなので仕方がないと思い、1着ずつ購入することにしました。

どれが誰のスーツかわからなくなった図

カート画面を改めて確認したところ、入力したサイズが表示されておらず誰のスーツなのかわかりません。

ZOZOSUITの注文の流れ

実際の画面と合わせて流れを箇条書きにしてみました。

7)変更ボタンを押してもサイズがわからない

7)変更ボタンを押してもサイズがわからない

  1. カートに入れる
  2. 自分のサイズを入れる
  3. 家族の分を追加しようと「+」ボタンを押したけど、追加されないので、サイズ違いだからプラスでできないのだと思い、スーツの詳細ページに戻ってカートに追加した
  4. 2着目も追加できたので、新規登録してレジに行く
  5. 新規登録してレジボタンをポチ
  6. アラート出現
    申し訳ございません。 
    ZOZOSUITの初回購入時は1着までしか購入出来ません。
    複数購入したい場合は、一度決済を済ませた後、再度カートに入れてください。
  7. サイズがFREEでわからないので、確認画面の「変更」ボタンで確認したができない

入力サイズがわからないという最大の問題点

最終的に複数は購入できないのはわかったのですが、サイズがわからないので結果的に全てを削除して同じことを繰り返し行わなくてはならないという自体になりました。

これらも面倒ですが、万が一自分のサイズが間違って入力していたらと思うと、すべての人がFREEではなく入力した数値が入るべきだと感じました。

注文確認画面の問題点

注文確認画面

注文確認画面では、先ほど選んだ身体データが表示されず、サイズはFREEと表示されているのみです。

注文履歴画面

注文確認メールにも記載がない

どこかに表示されていないかと探してみたのですが、注文完了メールでも入力した身体データが確認できませんでした。

注文完了の自動返信メールの内容

注文完了の自動返信メールの内容

せっかくワクワクした気持ちで注文したものの、自分で入力した身体データが間違っていて間違ったサイズのものが届いてしまったらどうしよう…と不安な気持ちで到着を待っています。

1アカウント、1サイズにしたかったのか?

今回のZOZOSUITはZOZOTOWNのオリジナルブランド「ZOZO」の購入のための事前計測ツールとして誕生したという経緯があります。
(参考: http://zozo.jp/pb/

1アカウントのデータに1つのサイズでコントロールしたい意図があったのかも知れませんが、家族の分も購入する想定はあっても良いかも知れません。その場合には、家族アカウントとして追加できればよかったのですが、データベース上簡単ではなかったのかも知れません。

ただ、FREEとしか表示されないのはあまりにもユーザーを無視した設計になっているのでサイズはしっかり表示する方がいいと思います。この辺りは表示問題なだけなので比較的容易にできると考えられます。

ユーザーが入力したデータがみられるようにする改善案

ユーザーは開発側の事情を理解しようとするとは限らず、直面している「自分の入力したデータが確認できない」という問題に不安になりイライラにつながってしまいます。

商品詳細から受け取りまで

ECサイトでの注文タスクの一連とZOZOSUITの注文の流れを比較してみました。

タスクの整理

ECサイトで商品を購入するタスクは「商品を受け取る」という結果に到るまでは商品の注文のタスクの途中と言えます。

少なくとも注文完了までの一連のタスクまではユーザーが入力した注文内容がいつでも確認できる状態で表示しておくことが必要です。

ZOZOSUITの場合は、カートに入れた後も入力した身体データが見返せないため入力の誤りがあるかどうかも気づくことができません。複数人分のスーツを注文したときも誰めのスーツか確認できません。

注文履歴からも自分の入力したデータが確認できないため、商品が届いた時に自分の意図するサイズと違っていてもユーザーの身体データ入力ミスなのか配送ミスなのかがわかりません。ユーザーへは不安を与えてしまいます。

問題のまとめ

  • ユーザーの入力したデータがその後見返せないため入力の誤りに気づけない
  • 同じ商品をサイズ違いで複数購入した際に誰のための商品かわからない
  • 届いた商品が想定と違っても入力した注文が正しいかどうか確認できない

ランディングページでは最初の1着だけと気づきにくい

ランディングページでは無料配布中という文字が目立ちます。ユーザーは単純に無料で配布しているのだと思うのですが、実際の販売ページでは括弧で初回無料と記載されていました。

販売ページの「初回無料」という言葉も意味不明なので、始めに記載している文章も含めて、初回の1着のみ無料と明示的に記載すべきです。

ランディングページの問題点

無料でない場合の値段は注文後でないとわからない

ユーザーは初めに見た印象を強く持つのでランディングページでの印象は強く持ってしまいます。販売ページの括弧で記載されている(初回無料)の文字を読み飛ばしてしまうと、続けて2着目も購入してしまいます。

無料でないことに驚く様子

私も家族の分も購入しようと2着目もカートに入れました。がんばって入力した後に3,000円の金額を目にした時はビックリしました。

1着限りの無料配布仕様から予想するZOZOの背景

1アカウントにつき1着の無料配布と限定している要因はいくつかあると思います。例えば、大量注文して転売されてしまうことの防止などです。

アカウントを増やすのもマーケティングのひとつなので、アカウントを増やしたいということだったのかも知れませんが、先程も説明したように、1つのアカウントでも家族という括りをつける手法は必要になるかと思います。なぜなら、男性は洋服を奥さんに購入してもらうことがあるからです。

1アカウントにつき1着を無料配布をしていることから将来的には、ZOZOブランドでは1アカウントに1人の身体データと購入情報を紐づけてサービスを展開したいのはわかりますが、いくつかのUX設計のもとにシステム構築とデザインの必要性を感じました。

今回は緊急のことで、単純にリソースがなくUX設計からのシステムやデザイン構築ができなかったのかもしれません。しかしながら、せっかく素晴らしい企画なので、せめてランディングの設計、キャンペーンページにはUX設計してほしかったと思いました。

背景を踏まえたUI改善案

条件付きの無料配布であることをランディングページにも明示する

ランディングページの改善案

ランディングページの改善案

このような背景予想をもとにZOZOSUITの現段階で抱えている問題を改善する注文UIを考えてみました。

無料配布の配布条件をランディングページの時点で「1アカウント1点限り」と無料配布の条件を明示することで、ユーザーは割引条件について理解したうえで注文でき、ZOZOTOWNは個人のアカウント・服の購入情報に結びついた体型情報を収集できます。

ZOZO会員情報に身体データも記録する

会員情報の改善案

ZOZOSUITの注文時に入力したサイズが表示されるのに加え、ZOZOSUITのサイズは会員情報からも確認・変更ができるようになります。

2つめのカートに入れた時点でアラートを出す

上記の改善がベストですが、どうしても出来ない場合は、2つ目がカートに入った時点でアラートに出してくれれば、例え「FREE」としか表示されていなくても後で追加したものがどちらかかわかります。最悪これだけの処理をしてくれればユーザーの心的ダメージは少ないです。

追加したものがアラート表示されるようにする

追加したものがアラート表示されるようにする

まとめ:ユーザーがいつでも情報を確認できるUIにする

自分がユーザーとして感じた不安と改善案を考えてみて「ユーザーが見るだけで現在の状態やこれから起きることがわかるUIになっているか」が重要なポイントだったと感じました。

商品選択から注文した商品を受け取るまでが一連の流れなので、ユーザーから提供された情報はタスクの完了時までは確認できるようにする必要があると言えます。

  • ユーザーはUIからサービスの状態を確認している
  • タスク終了後までユーザーが入力した情報は確認・修正できるようにする
  • ユーザーは初めに見た印象を強く持つ

スタートアップでデザイナーとして調査、UX設計、UIデザインとフロントエンド実装をやっています。UXも技術も日々勉強中!趣味は片付け、インテリア小物とゲームです。

まずは言葉を覚えよう

「UX用語」のカテゴリー

UXを取り入れるためのマインドセット

「UX格言」の新着

UX格言 一覧

現場の声をリアルで届ける

動画で学ぶUX 「You X Tubo(ゆーえっくすつぼ)」の新着

You X Tubo(ゆーえっくすつぼ) 一覧