勝手にEFO徹底解剖:無印良品ネットストア 購入フォーム

有名フォームを題材に「勝手に」EFO状況を徹底分析する「勝手にEFO徹底解剖」シリーズ。
今回は、無印良品ネットストア(株式会社良品計画様、http://www.muji.net/store/)の購入フォームを「徹底解剖」していきます。
※以下、敬称は省略させていただきます。

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

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

フォーム全体の特徴

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

専用レイアウトはなし

今回、すべてのフォームページにおいて、サイト共通のヘッダーとフッターがついたままとなっていました。
とくにフッターには「キャンペーン」「特集」「お買い得価格」などの魅力的なメニューが配置されており、思わずリンクをクリックしてしまうユーザーも多いのでは。

フォームでユーザーに入力に集中してもらうためには、余計なリンクは極力無くしておきたい所です。

注意 サイト共通のものとは別に、要素を削ぎ落したシンプルなレイアウトを用意しておきたい。

共通のヘッダー(上)と、共通のフッター(下)。

共通のヘッダー(上)と、共通のフッター(下)。

ボタンのデザインは一律。表現の強弱も

ボタンのデザインはすうすべてのフォームページで一貫して黒色の四角いデザインを採用。
また、前に戻るアクションはテキストリンク風の目立たないデザインとなっており、しっかりとデザインの差別化が実施されている印象でした。

efo_double_ring一貫したデザイン、さらには進退のアクションもイメージしやすいデザインと配置。

前に戻るアクションはテキストリンク風に。次へ進むボタンは黒いボタンらしいデザインにしっかりと差別化。

前に戻るアクションはテキストリンク風に。次へ進むボタンは黒いボタンらしいデザインにしっかりと差別化。

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

エラーがあった場合には、ページの上部分にその内容を羅列する形式で表示していました。
この形ですと、具体的にどの場所にエラーがあるかをユーザーが探したうえで、修正しなくてはなりません。

注意 エラーの該当箇所にも何かしら印や文言等をつけ、ユーザーが見つけやすいような配慮があるとさらに良いでしょう

エラー時の表示。

エラー時の表示。

ページごとの特徴

次にページごとの特徴をピックアップしていきます。

ログイン

カートに商品をいれた状態で購入手続きを進めようとすると、まずはログインか会員登録を促されます。

注意 できれば、会員登録は必須ではなく、登録は任意にするかゲスト購入機能を加えておきたい所です。

ログイン画面。

ログイン画面。

ログインフォームには、読み込んだ際に最初のフォーム項目へフォーカスをあてておく初期項目フォーカス機能が導入されていました。

efo_double_ring すでに会員登録をしているユーザーは、スムーズにログインを開始することができます。

あらかじめフォームの最初の項目にフォーカスがあたっている。

あらかじめフォームの最初の項目にフォーカスがあたっている。

さらに、ログインフォームにはスパムによる不正ログインを防ぐためのパズル型のキャプチャが設置されていました。
キャプチャのなかでは比較的ハードルの低いパズル型キャプチャですが、なかには手間に感じてしまうユーザーもいるかもしれません。

注意 使いやすさの観点ではキャプチャはできれば使わずにセキュリティ対策を講じたい所。

パズル型のキャプチャ(画像認証)。

パズル型のキャプチャ(画像認証)。

会員規約の確認

今回は初回利用を想定していますので、新規メンバー登録に進みます。まずは規約の確認です。

メンバー規約の確認ページ

メンバー規約の確認ページ

とくに変わったところはなさそうですが、1点気になったのは、「同意しない」のリンクの存在。
押下するとトップページに遷移するようですが、規約に同意できないユーザーはブラウザの戻る機能やその他リンクからページを離れることは可能です。わざわざこのようなリンクを用意する必要性は感じません。

注意 離脱の可能性はできるだけ排除しておきたい。

あまり目立たないものの「同意しない」リンクが用意されている

あまり目立たないものの「同意しない」リンクが用意されている

会員情報の入力

規約に同意すると、会員登録のための各種情報入力が始まります。

会員情報入力フォーム

会員情報入力フォーム

このフォームでは、必須項目を背景色を赤く色付けすることで強調していました。

efo_double_ring 最低限、どこに入力すればよいかが一目でわかるようになっています。

必須項目は赤い背景色を付けて強調。(少し、赤色が濃すぎるようにも思いますが・・・)

必須項目は赤い背景色を付けて強調。(少し、赤色が濃すぎるようにも思いますが…)

また、入力形式や入力の有無をその場で判定するリアルタイムアラートも導入されていました。

efo_double_ring 入力ミスがあった場合すぐになおせる

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

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

会員情報の確認

次は確認ページに進みます。

会員情報の入力内容確認ページ

会員情報の入力内容確認ページ

とくに可もなく不可もなく、なシンプルなページですが、その後のログインに必要となるメールアドレスの強調表示や、住所部分の入力内容をまとめてコンパクトに見せる、といったような工夫があるとより良い確認画面になりそうです。

会員登録完了

そのまま進むと、会員登録の完了ページが表示されます。
記入したメールアドレス宛てに確認メールが送られますが、とくにメールを使っての認証作業はない(なくても進めることが可能)ようです。

会員登録の完了

会員登録の完了

また、完了ページ内の「ご利用を続ける」というボタンを押下することで、ログイン済みの状態で購入の続きを開始できるようになっています。

efo_double_ring すぐに購入フローに戻ることができスムーズです。

「ご利用を続ける」ボタン

「ご利用を続ける」ボタン

お届け先の指定

会員登録およびログインを経て、あらためて購入フローが始まります。
まずは配送先の指定です。

お届け先の指定

お届け先の指定

ここからはフローが登場し、ゴール(購入完了)までの道のりが明確になります。

efo_double_ring フローの存在で現在地とフォームの全体像が明確に

フロー

フロー

ここでは、会員登録時に登録した住所を呼び出せるようになっており便利です。
いっぽうで、登録した住所と送付先が異なったり「店舗で受け取る」サービスを利用する場合は、会員登録時にわざわざ住所を記入するメリットは少ないように感じます。

注意 保存済み情報を呼び出せるのは便利ですが、必要に応じて入力する方がユーザーにとっては便利な可能性も

配送先の選択

配送先の選択

また、登録した住所への配送料は次のページで表示されますが、配送料を見て配送先を決定するユーザーの存在を考えると、この時点で表示していたほうが親切なのではと感じました。

注意 店舗で受け取る場合は送料無料。いちユーザーとしてはここに配送料も併記されていて欲しいところ…

h

配送便の設定

次は配送便の設定ページです。
複数の商品を購入する場合に、お届け日、時間、配送先などを別々に分割できるサービスのようです。

配送便の設定

配送便の設定

少なくとも今回の購入では1つの商品しかカートに入れていないため、このような機能は必要ないのですが、現状はすべての購入者にこの機能の案内が表示されているということでしょう。
どのくらい当サービスのニーズが強いかはわかりませんが、必要に応じて表示する、オプションとしての見せ方に留めるべきてはないかと感じました。

注意 配送便を分割したい人や、せざるを得ない商品ジャンルを選択した人だけがメニューを選択できる形が理想ではある

i

お支払い方法の指定

次は、支払い方法の選択です。カード、代引き、楽天ID、Yahoo!ウォレットの4種類の決済方法を選択できるようになっています。

お支払い方法の指定

お支払い方法の指定

一番最初のチェックボックス「MUJI GIFT CARD」の存在はいささか唐突です。
どうやら、ギフトカードを所持している場合、カード情報を入力・照会することで購入金額の一部またはすべてに利用することができるようです。

注意 「ギフトカードで支払う」などのわかりやすい
文言があるとより親切かもしれません。

チェックを入れると照会番号を入力するフォームが現れる

チェックを入れると照会番号を入力するフォームが現れる

いっぽう、クレジットカードの入力欄では、セキュリティコードに関する説明が親切に記載されていました。

efo_double_ring 図入りでわかりやすい説明。

?マークにマウスカーソルをあてると吹き出しが出現。

?マークにマウスカーソルをあてると吹き出しが出現。

注文内容の確認

最後に、確認画面です。
注文内容の確認

気になったのは、内容に変更がある場合、おそらく前のフローを順番に遡る形でないと修正できない点。例えば配送先の住所を変更するとなると、3つもフローを遡らなければならず少し面倒です。

注意 可能であれば、情報別に「修正する」リンクを用意できると良いですね。

現状、入力内容の修正のための手段はこの「戻る」リンクのみ。

現状、入力内容の修正のための手段はこの「戻る」リンクのみ。

最後に

いかがだったでしょうか。今回の勝手にEFO徹底解剖は以上となります。
最後にこれまでみてきたフォームの特徴をまとめて結びとさせていただきます。

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

  • 共通化されたボタンと、「前に戻る」との差別化
  • ログインフォームの自動フォーカス
  • 背景色による必須項目の強調
  • リアルタイムアラート
  • 会員登録後の自動ログイン・遷移
  • フローの配置
  • セキュリティコードの表示

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

  • サイト共通のヘッダー/フッター
  • ページ上部にまとめて表示されるエラー
  • ゲスト購入機能の導入
  • キャプチャの利用
  • 「同意しない」リンクの存在
  • 会員登録時の取得情報
  • 配送便分割機能のオプション化
  • ギフトカードの表示
  • 確認画面での修正のしやすさ

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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