スマートフォン版・勝手にEFO徹底解剖 – Amazon 購入フォーム

スマートフォンの利用率がさらなる高まりを見せている昨今、当ブログやセミナーにいただくご要望もスマートフォンEFOに関するものが多くなっており、特に今年からこのブログではスマートフォンEFOに関する情報に比重を置いてお届けしております。
これからは、これまで定期的にお届けしてきたシリーズ記事でもスマートフォンに関する情報を扱って行きたいと考えています。

そこで今回は、有名フォームを題材に「勝手に」EFO状況を徹底分析する「勝手にEFO徹底解剖」シリーズの【スマートフォン版】として、以前PCサイトを取り上げたAmazon(アマゾンジャパン様、http://www.amazon.co.jp/)をテーマにスマートフォンフォームの分析をお届けしていきたいと思います。
※以下、敬称は省略させていただきます。

Amazonといえば誰もが一度は使ったことがあるであろう超巨大ECサ-ビス。様々な商品を豊富に取り揃えており、オンラインショッピングを利用する人にはもはや欠かせないサービスです。
そんな便利なAmazonのマルチデバイス対応にはどのような工夫や秘密が隠されているのでしょうか。
さっそくスマートフォンサイトのEFOについて「徹底解剖」していきます。

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

ちなみに、以前PCサイトを取り上げた時の徹底解剖記事はこちらです。

勝手にEFO徹底解剖:Amazon(1/2)
https://f-tra.jp/blog/teardown/3206

勝手にEFO徹底解剖:Amazon(2/2)
https://f-tra.jp/blog/teardown/3392

初回購入の流れを徹底解剖していきます

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

フォーム全体の特徴

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

スマホとPCは別のページを用意

サイト全体として、スマホ向けに最適化されたページが用意されていました。レスポンシブ対応ではなく、デバイス別にテンプレートを用意しているようです。

スマホでも、フォーム専用レイアウトを用意

Amazonのスマホフォームでは、サイト共通のヘッダー/フッターを用いず、極力ナビゲーションを削ったフォーム専用のページレイアウトを用意していました。

比較すると一目瞭然ですが、かなりナビゲーションの数が削られ、ヘッダーもサイトロゴのみを示すごくシンプルなものに差し替わっています。

efo_double_ring スマホでもお手本にしたい、シンプルなページレイアウト

ページ共通のレイアウトとは別に、フォーム専用のシンプルなレイアウトを用意している

ページ共通のレイアウトとは別に、フォーム専用のシンプルなレイアウトを用意している

ちなみにAmazonのフォームはPC用ページでもシンプルな専用レイアウトを用意していました。EFOとしては非常にパーフェクトです!

AmazonのPCフォームのレイアウト

AmazonのPCフォームのレイアウト

読み込みにはローディング画像を表示

フォーム間の遷移や保存などの読み込みのタイミングでは、下記のように読み込み中を示す動くローディング画像をオーバーレイ表示させていました。

efo_double_ring 読み込み時にローディング画像を表示

次に進むボタンを押下ずるとローディング画像が表示される

次に進むボタンを押下ずるとローディング画像が表示される

回線速度が遅かったりと、読み込みでユーザーがストレスを感じやすいモバイル環境ならではの配慮だと感じました。

基本フローは同じ、ただしコンテンツは絞り込んでシンプルに

サインインから配送先登録、発送オプションの選択、支払い方法の選択、確認、完了…と、購入のフローはPC版とほぼ同じでした。

しかし画面内のコンテンツには大きな差が見られました。
スマートフォン版のページからはオプション的な情報が省かれており、PCに比べ圧倒的にシンプルなページ構成となっています。

efo_double_ring 並べて比較してみると一目瞭然。スマホでは情報を可能な限り削っているのが伺えます。

配送オプション選択画面では、シンプルな2種類のラジオボタンで構成。PCにはある有料会員「Amazonプライム」の案内一式はスマホ画面では見られない。

配送オプション選択画面では、シンプルな2種類のラジオボタンで構成。PCにはある有料会員「Amazonプライム」の案内一式はスマホ画面では見られない。

お届け先住所の選択画面では、コンビニの住所登録のメニューが一切なく、住所を登録することのみに充填がおかれたページ構成となる。

お届け先住所の選択画面では、コンビニの住所登録のメニューが一切なく、住所を登録することのみに充填がおかれたページ構成となる。

支払い方法選択画面では、2種の選択肢のみを表示したシンプルな構成に。注意書きなども最低限の量にとどめているのがわかる

支払い方法選択画面では、2種の選択肢のみを表示したシンプルな構成に。注意書きなども最低限の量にとどめているのがわかる

ページごとの特徴

それではここからは各ページごとの細かい点を徹底解剖していきます。

サインイン/会員登録ページ

サインインと会員登録のページは、カート以降のフォームとは異なったデザインテンプレートになっています。

これらのページは他のフォームに比べて入力欄のサイズが小さく、ボタン等のタップエリアも小さいため少々使いにくい印象を持ちました。

efo_double_ring 入力欄、文字サイズ、ボタン、各余白など全体的に小さい印象。

新規登録ページ

新規登録ページ

いっぽう、入力内容に応じたキーボードの出し分けはきっちり対応されており、メールアドレス欄では「email」、パスワード欄では「password」でinputtypeがマークアップされていました。

efo_double_ring キーボードを出し分けるための設定は対応されていました

サインインページ

サインインページ

お届け先の入力

サインインを済ませると購入手続きの開始です。まずは商品の配送先住所の登録です。

さきほどまでのページに比べ、入力項目やボタンが大きく横幅いっぱいに設定されており、指でタップが行い易いよう配慮されています。

お届け先の登録画面

お届け先の登録画面

入力支援機能

ここではリアルタイムアラートと郵便番号からの住所自動入力機能が搭載されていました。
ただしリアルタイムアラートは、表示が見きれてしまっている箇所がありましたのでさらに改善の余地はありそうです。

efo_double_ring リアルタイムアラートの文言がセレクトボックスの下に隠れてしまっているのを偶然発見。非常に惜しい…(iOS7にて確認)

リアルタイムアラートの表示例

リアルタイムアラートの表示例

efo_double_ring 住所自動入力は、郵便番号を入力し終えた時点で自動的に住所が入力される仕様。

自動入力された瞬間。

自動入力された瞬間。

気になったのはラベル

少し気になってしまったのはラベル

プレースホルダーをラベルとして使用すると、入力を始めるとラベルを確認することができずユーザーが不便な思いをする可能性が。ラベルは入力欄の外に設置したほうが無難です。

また、「住所1」「住所2」というラベルの付け方も、どちらに何を入力すればよいかユーザーが迷ってしまう危険性がありますので、できればラベルは具体的な文言にしておきたいところです。

efo_double_ring プレースホルダーにラベルを表示。またラベルの命名も抽象的

プレースホルダーにラベルを表示。またラベルの命名も抽象的

住所の入力欄

ちなみにPC版でも同様のラベルが使われていますが、PC版にはページ内に説明書きが存在するために、少々読み込みが必要ではあるものの内容は理解できます。

PC版のお届け先住所入力欄

PC版のお届け先住所入力欄

エラー表示は

エラー表示は、ページ上部にエラー内容を表示し、該当箇所に色をつけるという方法です。

エラー表示画面

エラー表示画面

できれば該当箇所に具体的なエラー内容の記載があると、ユーザー側で照らし合わせる作業が不要となり一層理想的ですが、このフォームはさほど項目数・ページスクロール量が多くないので、大きな問題ではなさそうです。

配送方法、支払い方法

配送方法と支払方法はシンプルなラジオボタンで構成されています。2択に絞られていることでユーザーは必要以上に迷うこと無く選択できます。

efo_double_ring さらにラジオボタンはラベル全体がクリック領域になっており、指での操作が非常に容易でした。

ラジオボタンは大きく押しやすい。ただし選択不可なオプションは色を薄くするなど、もう少しわかりやすくなると良い。

ラジオボタンは大きく押しやすい。ただし選択不可なオプションは色を薄くするなど、もう少しわかりやすくなると良い。

ボタンにはサブミットブロックが

支払い方法の選択画面では、選択肢ないとボタンが押下できず次に進めないサブミットブロック機能が搭載されていました。(配送方法にはデフォルトチェックが入っているためありませんでした)

efo_double_ring サブミットブロックがあることで、不要なエラー表示を未然に防いでくれます。表現も色がかなり薄くなっているため、選択不可ということが一目で理解できます。

サブミットブロック。未選択の状態ではボタンを選択することができない

サブミットブロック。未選択の状態ではボタンを選択することができない

確認画面

確認画面では各情報が頭出しされており、タップすることで詳細を確認したり修正を実施することができます。

住所などの末尾が「…」などで省略されていますが、どこに送るかは住所の冒頭を見れば判断できるので、さほど不自由は感じないと思います。
また、商品の数量などを変更し保存するとその都度ローディング画像を表示して確認画面に戻ってくるので、画面の行き来もそこまで不便さを感じることはないと思います。

確認ページ

確認ページ

最後に

今回のスマートフォンEFO徹底解剖は以上となります。
最後にこれまでみてきたフォームの特徴をおおまかにまとめておきたいと思います。

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

  • 余計なナビゲーション・リンクが一切ないシンプルなページテンプレート
  • コンテンツが最低限に抑えられている
  • リアルタイムアラート、住所自動入力、サブミットブロックなど入力支援機能の搭載
  • 読み込み中を表すローディング画像の表示
  • 入力内容に合わせたキーボードの表示

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

  • 入力欄、ボタンサイズが小さい箇所がある
  • プレースホルダーにラベルを表示している
  • ラベルの内容が不明瞭な箇所がある
  • リアルタイムアラートの微調整

Amazonのスマートフォンフォームは、総合的に見てかなり最適化されている印象でした。
もちろん細かい点では惜しい部分もありますが、基本的にはスマートフォンユーザーのことがよく考慮されている、お手本のようなフォームだと思います。

これからスマートフォン向けに購入フォームを設計される方は、Amazonのフォームも研究されてみることをおすすめいたします!

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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