Amazon Prime Now のUIデザイン
最近は渋谷にオフィスを移し、毎日坂を登っているからか痩せてきました、大堀です。（ほんのちょっとですよ）
千葉大デザイン学科での授業もひと段落したので、久々にブログを書きます。
人に教えるというのはやはり中途半端に知っていてもできないものだなぁと痛感したので、今度このあたりも書いてみようと思います。
今回はタイトルの通りUIデザインについて書くんですが、まずはUIデザインとは何を指すのか解りやすい図を引用しておきます。
Design + UI Design: Injecting a brand persona! -Jayan Narayanan
どうしてもDribbbleにあがっているようなビジュアル的な側面が捉えられがちですが、目に見える部分（Surface）の下には何倍もの意図が存在します。
なぜこのUI（Surface）になったのか、単一のレイヤーでは語らず、より下層のレイヤーから考察できないかなと。
なのでタイトル通りiOSのAmazon Prime Now(ver 3.0.1)を解剖・考察をして、その設計思想や意図を考えてみたお話です。
ちなみにこのPrime Nowはご存知の通り「即日お届け」という体験自体が素晴らしいのですが、やはりアプリもよくできていると感じたので検体に選びました。
———————————————————
まずはざっくりPrime Nowで達成できる大まかな行動を書きます。（アプリを触ればだいたいわかりますね）
・商品を探す
・購入する
・確認/設定
この行動別に、まずはドロワーナビとヘッダー共通メニューを分類してみましょう。
アプリ起動の目的が「探す→購入する」と明確なため、メニュー間の行き来しやすさは捨ててほとんどのメニューをドロワーに収納したようです。
ユーザー行動に明確な重要度と頻度の差がつけづらいときは、Facebookアプリのように下部固定のタブバーを採用するアプリも多いですね。
fbはそろそろメッセンジャーアプリへのリンクを移動してほしいですが
さらにナビからアプリマップの第一階層まで作ると以下の通り
この図で見ると遷移しやすさを優先している画面は★印をつけた3画面
・トップページ
・検索
・カート
面白いのは、通常ドロワーメニューで行き来する画面は並列な関係なのですが、このアプリでトップ以外のページに行くと
ヘッダーにトップへのショートカットがあるんですよね。
つまりドロワーで並列関係に見せていても、トップページだけは1つ階層が上なようです。
これは新しい・・・けどヘッダーがごちゃごちゃするなぁ。。
ではまずトップぺージを見てみます。
■トップぺージ
初見の感想は「ロゴでかい！」ですが、これスクロールしていくと小さくなります。
ヘッダーの下は
・検索バー（検索ボタンはヘッダーから除外）
・購入履歴への遷移
・kindleバナー
・特集（商品まとめ）×29!
のようなコンテンツです、
kindleバナーだけ余計ですが、
・買うものが明確な人 →検索バー
・買うものが明確な人（再購入） →購入履歴への遷移
・買うものが定まっていない人/面倒くさい人 →特集（商品まとめ）
という盤石の布陣です。初期バージョンでは購入履歴への遷移はなかったので
リピーターが多いのでしょう、僕もよくティッシュを買ってしまいます。
上記の通りコンテンツを見る限りトップ画面は「商品を探す」ことに特化した画面と言えます。
ではその遷移先、商品一覧画面も見てみましょう。
ファーストビューでほぼ1商品しか見られないとは粋なレイアウトですが商品が全て切り抜きされており、画像サイズが大きくても圧迫感は少ないよう感じます。
また、商品をタップしても画面遷移はせず、詳細情報と関連商品が表示されるだけなのでザッピングと注視が途切れません。
さらにもう一度商品をタップすると詳細画面へ遷移しますが、そこでやっとレビューなどすべての情報が見られます。
そして比較・検討に関するお気に入りのような機能もありません。
そもそもこのアプリが最初に郵便番号を登録させるのは、即日配送を実現するために基地局を作って、最寄りの局で注文を受けるためと思われます。
Prime Nowって本家のAmazonと比べると商品数がすごく少ないんですよね。
選択肢は少なく、売れ筋だけ置いてる印象を受けます。
結局ほとんどのユーザーはヘッダーのメニューには触れずに、トップ画面から商品にたどり着きカートに入れることができます。
配送状況や各種設定などの利用頻度の低い機能はすべてドロワーメニューへ収納しても問題はなさそうです。
カートに入れたらトップへ戻り、同じ行動を繰り返せばOKです。
もう十分となればヘッダーに常に表示されているカートアイコンから購入手続きに進みます。
———————————————————
■カート画面
では試しに脚立（きゃたつ）を購入します。
これはver2.9くらいのキャプチャです
カート画面
・商品の数量選択/削除
・金額のチェック
・年齢確認（お酒の時）
・内容の承認
あとは2500円以上の購入でないと配送してもらえません。
無料配送は回数分だけコストがかかるので、極力単価を上げるためでしょう。
現在のバージョン（3.0.1）では「追加で商品を購入」の導線が追加されています。
でもこれ本当に儲かってるのかな。。誰か詳しい方がいたら計算してみてください。
有料1時間以内を希望するユーザーが一定割合いれば賄えそうですが、やってみないと割合なんてわからないですよねぇ。
配送日時選択画面
・時間を選択（特急料金）
・時間を選択（通常料金）
・宅配ボックスか否か選択
・内容の承認
宅配ボックスへの希望をとっておけば、ブザーを押して不在を確認する時間が不要になります。
何かしら選択しないと次へ進めない仕様も、バリデーションを兼ねていて良いですね。
サービスの利用者が急ぎ前提なので選択肢も少なく、1時間以内もしくは直近2つしか表示されません。ほかならば別画面での選択になります。
これはver2.9くらいのキャプチャです
注文確認画面
・配送時間確認→編集へ
・お届け先住所確認→編集へ
・注意点編集へ
・支払い方法確認→編集へ
・請求先住所確認→編集へ
・クーポンコード入力
・電話番号確認→編集へ
・注文を承認
商品と配送日時は注文ごとに違いますが、それ以外の項目がすべて一覧で表示されています。
ほとんどのユーザーは支払い方法や住所を都度変えたりはしないので、変えたい時だけ編集してねという意図でしょうか。
実際このあたりを変えることは稀なのでスマートだと思います。
上下に確定ボタンを配置して急ぎのユーザーに配慮しているようですが、これは流行るかな。
コンテンツが少ないと画面に同じボタンが2つ表示されるので考えたいところです。
配送状況確認画面
・配送状況の確認（位置がプロットされます）
・注文のキャンセル
スムーズに進むと3画面で購入は終了し、配送状況の確認画面へ遷移します。
このタイミングでSMSが送信され、以降の実況はPrime Nowアプリではなく純正メッセンジャーアプリに移ります。
確かSMSも1通送るのにも20円くらいかかります。それでもSMSにしたのは
・アプリ内Push通知はOFFにされている可能性がある
・「配達員からの通信を受け取る→アプリ内で通知」よりも、SMSの方が早くて確実
あたりでしょうか、後はセキュリティ観点とか？
———————————————————
まとめ
サービス設計に関わるUIデザイナーはアプリ画面から下のレイヤーを想像していくと面白いと思います。
実際にビジネスモデルを聞いてアプリを設計しようと思うと、このあたりのボキャブラリーが必要です。
様々な制約を強みに変え、最適解を見つけるパズルのような楽しさがアプリ設計の醍醐味でしょうか。
今回Amazon Prime Nowについて書いてみて、
・ビジネス的制約
・技術的制約
・インターフェイス上の制約
これらをうまくコントロールしているなと感じました。あとは配達員用アプリもぜひ見てみたい。
即日配達という圧倒的な価値のために不要な機能を落とし、弱みを強みに変え、ユーザーに価値を届けるという素晴らしいサービスでした。
やっぱり良いアプリの裏側には素晴らしいビジネスモデルとスコープ設定、そして情報設計/アプリ構造が隠れているんですよね。
それでは
///////////////////////////////////
Webサービスの新規立ち上げ、UI/UX改善にお困りの方はお気軽にお問い合わせください。
また、株式会社DenDesignではサービスデザインに興味があるWebクリエイターを募集しています。求人情報はこちらからご覧ください。