勝手にEFO徹底解剖:楽天市場・購入フォーム

「勝手にEFO徹底解剖」シリーズ、第4回目は、楽天市場(楽天株式会社様、http://www.rakuten.co.jp/)をテーマにお届けします。
※以下、敬称は省略させていただきます。

楽天市場といえば、日本国内最大級のインターネットショッピングモール。日用品から食品、家電、スポーツ用品など、生活を営むために必要なあらゆるものが楽天市場で手に入れることができますね。会員数は9,000万人超、国内インターネットユーザーにおける楽天会員の比率が93%(ともに2014年6月時点)ということですから驚きです。
そんな巨大サービス楽天市場のフォームにはいったいどんな工夫が凝らされているのでしょうか。さっそくEFOについて「徹底解剖」していきます。

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

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

今回は楽天の提供するサービスのひとつ「楽天市場」での購入フォームを分析していきます。今回も事前の会員登録などがない初回利用を前提で検証していきたいと思います。

フォーム全体の特徴

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

無駄を省いたフォーム専用レイアウト

楽天市場のフォームは全体を通して、シンプルなフォーム専用レイアウトを採用していました。購入の途中で気が散ることなく入力を進めることができます。

ただし、企業ロゴさえも取り去られているため、途中でユーザーが不安を感じないように考慮する必要はあります。
楽天のフォームの場合、一貫して同じえんじ色を使ってページがデザインされているため、さほど不安は感じにくいのではとう印象です。

efo_double_ring 無駄なリンクは極力排除されている。

無駄なリンクは極力排除されている。

フォーム共通のグローバルメニュー一式・フッターのリンク類もすべて排除。

シンプルなフロー表示

フロー表示も採用。無駄なくシンプルな形で表示していました。

efo_double_ring 縦幅も節約できるデザインとなっていました。

フロー表示

フロー表示

エラーは上部にまとめて表示

エラー表示はページ上部にまとめて表示する形をとっていました。
できれば、該当箇所に修正すべき内容を表示できると良いですね。

注意エラー時の表示はページ上部に赤文字で表記

エラー表示

エラー表示

住所入力以外の入力支援機能は、とくになし

また、今回のフォームには郵便番号からの住所の自動入力以外にはとくに目立ったEFOの入力支援機能は導入されていないようでした。

注意背景色の変化やリアルタイム判定のメッセージ、
プレースホルダー等の機能はとくになし

郵便番号からの住所自動入力のみ搭載

郵便番号からの住所自動入力のみ搭載

注文者情報の入力

それではページを個別に観察していきます。まずは注文者の情報入力画面です。

会員登録をしなくても買い物が可能

注文者情報入力画面では、一般的な購入フォームのように会員登録の有無により導線をふりわけていました。
新規利用者はそのまま入力を開始でき、かつ会員登録をしなくても購入が可能な点は、ユーザーに選択肢を与えてくれており良い印象を持ちます。

efo_double_ring 会員登録をついでに行うかどうかをオプション的に選択できる

会員登録をしたい場合はパスワード等をその場で設定できる

会員登録をしたい場合はパスワード等をその場で設定できる

全角・半角どちらも可能な入力項目

住所の番地や電話番号の入力欄は、全角で入力してもエラーとなることはありませんでした。
このように、入力形式の縛りをゆるくできるとユーザーに優しいですね。

efo_double_ring 全角でもOK!

全角で入力した内容も、確認画面で見ると自動的に半角に変換されていました。

全角で入力した内容も、確認画面で見ると自動的に半角に変換されていました。

支払い/発送方法の入力

次に、支払い方法と発送方法の選択に移ります。

かなり細かく説明を記載

デフォルトではクレジットカードが選択されていました。クレジット決済をするユーザーが多いのかもしれません。
インターネットでのクレジット決済に不慣れでも理解できるよう、かなり細かく入力方法に関する説明が記載されていました。

efo_double_ring 説明量は多いが、不慣れな人でも理解できる

一般のECフォームに比べかなり丁寧に説明されている

一般のECフォームに比べかなり丁寧に説明されている

開閉する配送方法の説明

また、その他の支払い方法についても細かな説明が記載されていますが、開閉式のインターフェースを用いることでスペースを削減する工夫がされていました。

efo_double_ring 必要に応じて説明を表示/非表示にできる

開閉式の説明コンテンツ

開閉式の説明コンテンツ

フォームは縦に長くなりがち

説明コンテンツを開閉式にするなどで工夫がなされているものの、ショップ特有の入力項目が設定されている場合などは、さらに入力項目がその下に増えるようで、全体的に縦長のフォームになってしまっていました。
これは仕方ないのかもしれませんが、レイアウト上の工夫やガイド表示などを導入することで、スクロールのストレスを軽減できるかもしれないと思いました。

注意 ページが縦に長い

少々長め。

少々長め。

入力情報の確認

最後に、入力内容の確認ページを観察していきます。

メリハリ・一覧制がある確認画面

確認画面は、金額や確認箇所の重要な部分のみに強調色を用いたり、文字サイズの大きくする、太字にするなどの工夫が見られました。
その他の部分は主張の少ないシンプルな表現となっており、確認すべき部分に自然に目が行くようなメリハリのあるデザインでした。

efo_double_ring 強調すべき箇所のみ目立っている

強調

メールマガジン登録はしっかり

また、メールマガジンの登録チェックボックスはフォーム下部にしっかりとデフォルトチェックありで用意されていました。
デフォルトチェックすること自体は販売促進の観点からおすすめはしているのですが、チェックボックスが送信ボタンより下に位置していることと、この注文の場合は7種類ものメールマガジンが自動的に選択されていたので、ユーザーが入力欄を見落とす可能性が高く、結果不満に感じる可能性が高いのではと感じました。

注意 一応送信ボタンの横にメールマガジンについて記載はあります。

メールマガジンの選択欄

メールマガジンの選択欄

まとめ

いかがだったでしょうか。今回の分析は以上です。最後にフォームの特徴をまとめたいと思います。

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

  • 無駄を排したレイアウト
  • えんじ色の一貫性のあるデザイン
  • 親切な説明文
  • メリハリのある確認画面

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

  • 各種入力支援機能の導入
  • 縦に長いレイアウト
  • メールマガジンのデフォルト選択数の多さ

楽天市場のフォームは、さすが日本最大のECショッピングモールというだけあって、インターネットに慣れていない人でも決済が行えるよう、かなり親切に説明が書かれている点が印象的でした。
逆に普段インターネット決済に慣れている人からすると文字情報が多すぎると感じるかもしれません。
しかし、この見る人によっては過剰にも思える説明の多さこそが、ここまで多くの会員数をカバーできる秘訣なのかもしれないですね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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