勝手にEFO徹底解剖:Amazon(2/2)

今回の記事は、先日お届けした勝手にEFO徹底解剖:Amazon(1/2)の後編としてお送りします。
引き続き、Amazon(アマゾンジャパン様、http://www.amazon.co.jp/)をテーマに「勝手に」フォームを徹底解剖してまいりますので、どうぞお付き合い下さいませ。

前編では、新規登録から住所の登録までの流れと、フォーム全体のレイアウトや入力支援機能についても触れました。
今回の後編では、配送~支払い~完了までの流れを一気に追っていきます。

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

配送オプションの選択

配送オプションの選択

配送オプションの選択

配送先住所を登録した次は、配送オプションの選択画面となっています。
Amazonでは通常の配送方法のほか、日時指定やより商品が早く到着する有料オプションがあるようです。

注文内容と発送先の確認

efo_double_ring 直前までの入力内容を途中の段階で一旦確認することができるのは良いですね。入力直後に確認できると内容に誤りがあった場合も修正がスムーズです。

ここまでの入力内容をいったん確認しながら進めます。

ここまでの入力内容をいったん確認しながら進めます。

配送方法の選択

efo_double_ring いつ商品が届くかが緑色の文字で明示されているため、どの配送方法を選ぶべきかの検討がしやすくなっていますね。

いつ届くかが明確です

いつ届くかが明確です

注意 「Amazonプライム」「お急ぎ便」などの固有名詞は、初めてのユーザーが戸惑う要因となるため注意が必要です。

「お急ぎ便」の説明はあるものの、「プライム」については説明がない

「お急ぎ便」の説明はあるものの、「プライム」については説明がない。

注意 さらに、通常/日時指定/お急ぎ便の3種類の配送方法に対して「Amazonプライム」という有料会員登録が並列に並んでいるため、少し違和感を感じます。

厳密には並列ではない情報が並んでいるため、違和感を覚える可能性も

厳密には並列ではない情報が並んでいるため、違和感を覚える可能性も

支払い方法の選択

支払い方法の選択画面

支払い方法の選択画面

次に支払い方法の選択画面です。

クリック領域に注目

efo_double_ring ラジオボタンのクリック領域はしっかりと確保されており、選択済みの項目が明確に強調される仕様に。これなら間違えることはありません。

選択すると背景がオレンジ色に変化

選択すると背景がオレンジ色に変化

表記に違和感

注意 説明の文言では3ステップのアクションが必要なように感じますが、実際にはクリックのみ。簡潔な表記方法にできると良いのではないでしょうか。

実際は希望の支払い方法をクリックするのみ。

実際は希望の支払い方法をクリックするのみ。

注意 さらに唐突に「クレジットカード以外の」という文言が現れ違和感。本来並列な選択肢であるカードとそれ以外が区別されているのも不明です。

さらにクレジットカートの登録はオプション欄に記載されている

さらにクレジットカートの登録はオプション欄で行うようになっている

カードを登録済みのユーザーは問題なし

ok_blue いっぽうでクレジットカード情報を登録したユーザーにとってはとくに違和感がない様子。リピートかつカード利用者に寄り添ったUIとなっているようです。

クレジットカードを既に登録している場合はとくに違和感がない

クレジットカードを既に登録している場合はとくに違和感がない

注文の確認

注文内容の確認画面。

注文内容の確認画面。


いよいよ、注文の確認画面です。
これまで入力した内容の確認と修正が行えるようになっています。

修正やオプション選択はモーダルウィンドウを活用

efo_double_ring注文内容の修正やギフトなどのオプション選択時はモーダルウィンドウが開き、ページ遷移のストレス無く変更可能です。

お届け先の変更。変更後はモーダルを閉じるだけで確認画面に戻れるので離脱リスクが少ない

お届け先の変更。変更後はモーダルを閉じるだけで確認画面に戻れるので離脱リスクが少ない

規約はポップアップウィンドウで表示

efo_double_ring利用規約は別ウィンドウ(ポップアップ)表示になっており、読み終わったらウィンドウを閉じるだけ。こちらもページからの離脱を防ぐ工夫が見られます。

利用規約の表示

別ウィンドウで表示された利用規約。

「ギフト」はフローに現れず

soso_black フローにある「ギフト」の項目には触れること無く確認画面へ。会計後に利用を選択できることはわかって良いのですが、少々扱いが大きすぎる気も。

確認画面に辿り着いたものの、ギフトの行程は現れなかった

確認画面に辿り着いたものの、ギフトの行程は現れなかった

ギフトへの導線


ギフトへの導線は確認ページ内に小さく表示されていた。もちろん必須ではない ギフトへの導線は確認ページ内に小さく用意されていた。そのままモーダルウィンドウで表示される。

送信完了

注文完了画面。

注文完了画面。

最後に、完了画面など注文確定後のユーザー体験を見て行きましょう。

ユーザーに親切なコンテンツの案内

efo_double_ring完了ページには、注文の内容や到着日が再確認できるだけでなく、注文内容詳細やよくある質問など便利なコンテンツへのリンクがあるなど親切な作りに。

注文内容や到着日の確認、FAQへの導線がある

注文内容や到着日の確認、FAQへの導線がある

サンクスメールも丁寧な作りに

efo_double_ringサンクスメール(HTMLメール)では、注文内容が写真付きで詳細に記載。サンクスメールからいつでも確認できるのはうれしいですね。

サンクスメール

サンクスメール

さらなる購買を促す工夫も

efo_double_ringこれまでのシンプルレイアウトから一転、グローバルナビが復活。サイトの回遊を再び促す工夫といえますね。

完了ページヘッダ

完了ページヘッダ

efo_double_ringさらに同カテゴリや購入商品に基づくおすすめ商品や閲覧履歴、ほしい物リストの内容など、ユーザーが求めているであろう商品のリンクがズラリ。

関連商品や履歴に基づくおすすめ、新商品なをが続々レコメンドされます。

関連商品や履歴に基づくおすすめ、新商品なをが続々レコメンドされます。

拡散の導線も

ok_blue 完了ページでは商品情報をシェアする導線も設けられていました。SNSの投稿から新たな購買が生まれることもあるかもしれません。

facebook、twitterなどで購入商品のリンクをシェアできるようになっている

facebook、twitterなどで購入商品のリンクをシェアできるようになっている

まとめ

いかがだったでしょうか。
最後に、前半と後半含めこれまでみてきたフォームの特徴をまとめてみたいと思います。

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

  • 余計なナビゲーション・リンクが一切ないシンプルなページテンプレート
  • 入力項目や画面遷移の数が最低限に抑えられている
  • 別ウィンドウ表示やモーダルウィンドウの活用で、ページ離脱を防ぐ工夫が見られた
  • 完了ページは親切に作りこまれており、お手本にしたい。リピート利用を意識したつくりになっている印象。

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

  • リピート利用の場合は感じないが、初回のユーザーのみが感じる使いにくさ、違和感がある。
  • ところどころわかりづらく感じる言い回しや固有名詞が登場。文言は改善の余地がある
  • エラー表示や入力支援は充分使いやすいものの、まだ伸びしろはありそう

Amazonのフォームは繰り返し利用するのに最適化されている印象でした。
リピート利用が多いサービスでは特に参考になる点が多いのではないでしょうか。
また、入力途中離脱を防ぐための工夫はさすがといったところ。ぜひ、お手本にしたいですね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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