勝手にEFO徹底解剖:Apple Store(1/2)

「勝手にEFO徹底解剖」シリーズ、第2回目は、Apple(Apple Japan様、http://www.apple.com/jp/)をテーマにお届けします。
※以下、敬称は省略させていただきます。

Appleといえば、スマートフォンのiPhone、タブレット型情報端末のiPad、パーソナルコンピュータのMacintosh(Mac)シリーズ、携帯音楽プレーヤーのiPodシリーズなどの開発・販売を行っている多国籍企業。「リンゴのマーク」でもおなじみですね。

製品そのものはもちろん、店舗やウェブサイト等もスタイリッシュで洗練されたイメージのあるAppleですが、その直営店であるApple Storeの一体フォームにはどのような工夫や秘密が隠されているのでしょうか。
それではさっそくEFOについて「徹底分析」していきます。

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

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

AppleにはApple IDという会員登録の仕組みがありますが、今回はID等は持たない状態でのまったくの初回利用、ということでフォームを検証していきます。

カート~注文手続きへ

カートに商品をいれた状態では、商品の情報と小計、購入する場合の合計金額が表示されている真下に注文手続きへの導線が設置されています。

efo_double_ring ボタンの色もはっきりと目立つ緑色で、決して迷うことがありません。

Appleフォーム - カート

efo_double_ring さらに関連するコンテンツがページ下部に表示されており、ユーザーにとって親切にページが設計されている印象でした。

ページ下部には、関連商品やよくある質問コンテンツが

ページ下部には、関連商品の紹介や購入に関するよくある質問などのコンテンツがある

サインイン

注文手続きに進むと、まずはサインインです。
既にアカウントを持っている人はID情報を入力することで登録情報を利用することができますが、今回は新規利用なので「ゲスト購入」を選択します。
会員登録が必須なECサイトが多い中、ゲスト購入という選択肢が用意されていることは嬉しいですね。導線もわかりやすく設計されています。

efo_double_ring アカウントの有無に応じて2つの選択肢があることが、2カラムの並列なレイアウトにより直感的に理解できます。

サインインページの全体図

サインインページの全体図

ページテンプレートは改善の余地あり

以後フォームのページ全体を通して、サイト共通のヘッダーとフッターが表示されたままとなっていました。
フッターのリンクは別窓・別ウィンドウでの表示リンクでしたが、ヘッダーのナビゲーションはクリックするとそのままページ遷移してしまうようになっており、誤操作によるフォーム離脱が懸念されます。

注意 せめて離脱ブロックを導入するなど、誤操作での離脱を減らす工夫が欲しいところ

以後、フォーム全体を通してサイト共通のヘッダーが表示されっぱなしになっている。

以後、フォーム全体を通してサイト共通のヘッダーが表示されっぱなしになっている。

リアルタイムアラートの機能は導入済み

なお、必須項目に入力しないで次の項目に進んだ場合、リアルタイムにアラートの吹き出しが出るようになっていました。

リアルタイムアラート。

リアルタイムアラート。

注文手続き(全体図)

サインインを済ませると、注文手続きが始まります。

アコーディオン型フォーム

特筆すべきは、フォームの各ステップがアコーディオン型(開閉型)となっている点。

アコーディオン型フォーム

アコーディオン型フォーム

フォームの進行状況に応じて対応するステップが拡大して表示されます。以前・以後のステップは折りたたまれた状態で、同じページ内に残っています(色も薄くなっています)。
各ステップには番号がふられており、4つのステップがあるということはわかりますが、人によっては使い慣れないUIであるため、戸惑うことがあるかもしれません。

「カート」に戻ろうとすると、確認のダイアログ(離脱ブロック)が

このフォームには先述の通り離脱ブロックが導入されていないのですが、注文手続きを開始したあとに「カート」のリンクを押下したときには確認のダイアログが表示されました。

カートへのリンクは、フォームの右上あたりに配置

カートへのリンクは、フォームの右上あたりに配置


確認できた範囲では、カートを押下した時のみこの離脱アラートが表示。

確認できた範囲では、カートを押下した時のみこの離脱アラートが表示。

離脱の際のアラートを表示することは大切ですが、その他のリンク(ヘッダーの共通ナビゲーション等)については依然として特にアラート等が表示されることもなく、通常のページ遷移が可能となっていました。
できればすべてのリンクに対してこのアラートを表示できるとより親切なのではないでしょうか。

そもそもこのページにおいては「カート」への遷移はさほど必要ないと思いますので、繰り返すようですがリンクそのものを表示しないことが望ましいとは思います。

電話番号でのサポートも記載

Appleは電話でのサポート体制が充実しているようで、電話をかけて質問することが可能なようです。
これはユーザーにとっては非常にありがたいですよね。

電話で操作方法を教えてくれる

電話で操作方法を教えてくれる

ただしこの電話のサービス、電話番号部分をクリックするとその旨の吹き出しが表示されるのですが、クリックするまでは一見何なのかがわかりません。ページ外へのリンクのようにも見えます。

電話番号部分にマウスをあてた状態。

電話番号部分にマウスをあてただけの状態。

せっかくの便利なサービス。
マウスオーバーするだけで吹き出しが表示されるようにしたり、番号意外にも補足の言葉があれば、よりユーザーに気づいてもらえ、活用されるようになるのかもしれないと思いました。

まとめ

いかがだったでしょうか。本記事は後編に続きます。

前編となる今回は、カートからサインイン、注文手続きに至るまでの流れと、フォーム全体のレイアウトについても触れていきました。
後編では、配送~支払い~完了までの流れと入力支援機能についても触れる予定ですので、お楽しみにお待ちください。

※後編はこちら:勝手にEFO徹底解剖:Apple Store(2/2)

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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