勝手にEFO比較分析【 ミキハウス× プチバトー】(子供服EC 会員登録編)

本日は”勝手に”セレクトしたフォームのEFO状況をに比較する「勝手にEFO比較分析」シリーズです。

街に出かけると、自分の買い物をよそについつい目が行ってしまうのがかわいらしい「子供服」。私たちが幼かった頃よりデザイン性、機能性の高い子供服が確実に増えていると思います。
そんな子供服ですが、なかなか外出ができないお母さんにとって、インターネット上で注文し、自宅まで商品を配達してくれるECサイトはとてもありがたい存在なのではないでしょうか。
今回は大手子供服メーカーの会員登録フォームを対象にお届けいたします。

題材は「MIKI HOUSE」を冠する三起商工株式会社様(http://www.mikihouse.co.jp/jp/)(以下、本記事ではミキハウス)と、Petit Bateau Japan 株式会社様(http://www.petit-bateau.co.jp/shop/c/c)(以下、本記事ではプチバトー)をセレクトさせていただきました。
※以下、サイト名の敬称は省略させていただきます。

いつもどおり「勝手にEFO分析」していきます。今回も改善ポイントを「勝手に」指摘していきますので、どうぞお付き合いください。○△×と、ユーザー視点での評価を行っていきます。

※本記事の内容は2014年6月26日時点のミキハウス様、プチバトー様、両社のサイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年6月26日時点)。

まずは基本項目の確認です。

ミキハウス プチバトー
ページ数 会員登録規約、お客様情報の入力、入力内容の確認、登録完了の4つ ご利用規約、会員登録、会員登録確認の3つ
入力項目 17種類 25種類
必須項目入力欄の数 23個 15個
フロー あり なし
オファー なし なし
必須マーク あり(ビックリマークのアイコン) あり(アスタリスク)
メルマガ購読 デフォルトチェックなし デフォルトチェックあり
利用規約、
プライバシーポリシー
お客様情報の入力画面の前にあり 会員登録画面の前にあり
送信ボタンのサイズ 幅114px × 高さ24px 幅148px × 高さ24px
入力画面のレイアウト 他ページと共通 他ページと共通
入力ページへの遷移 ヘッダーの初めての方へ→新規会員登録 ヘッダーの会員登録から

入力項目数、必須項目入力欄数に差

入力項目数に関してはミキハウスが少なく、全体としてすっきりまとまって見えます。それに対してプチバトーはやや入力項目が多いようです。
一方で必須項目入力欄の数はプチバトーの方が少なくなっています。必須項目を必要最小限に抑えられているのではないでしょうか。


ミキハウス フォーム画面
入力時情報の区分がしっかりされ、またフローも表示されている。
子供服や出産祝いはミキハウスciao
soso_blackプチバトー フォーム画面
フロー表示がほしいところ。
会員登録 [PETIT BATEAU プチバトーオンラインブティック  (1)

項目の表示スタイル、フローの有無にも差が

どちらのフォームも、お客様に関する情報欄とお子様に関する情報欄を分けて表示しています。とくにミキハウスは枠で囲ってある分、キッチリとカテゴリー分けされている印象を受けます。
以前の記事でもお伝えしたように、ECサイト会員登録のようにどうしても入力項目が多くなってしまう場合、カテゴリー別に区分することでユーザーのストレスを軽減させることができるので、デザイン面でも区切りを明確にできるといいですね。

また、必須項目の表示方法にも差が。
ミキハウスの必須表示は項目名の頭に「!」(ビックリマーク)を表示するというもの。あまり見慣れない表現であるうえ、赤色の背景色も相まってマークそのものの主張もイマイチ。
いっぽうでプチバトーはシンプルなデザインのフォームにオーソドックスな「※」マークを使用しており、わかりやすさでは一歩上回る印象でした。

フローに関してはミキハウスは表示あり、プチバトーは表示なしとなっております。「この先どれだけページが続くのだろう」というユーザーの不安をなくすためにもフロー表示は是非導入してほしいですね。

次に、入力支援機能について見ていきます

機能名 ミキハウス プチバトー
ガイド

未入力の残り必須項目数などをリアルタイムで表示する機能

なし なし
離脱ブロック

ページを閉じようとするとアラートを出してOKしないと閉じることができない機能

なし なし
サブミットブロック

送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能

エラー時にブロックあり エラー時にブロックあり
項目ごとのアラート表示

入力についての説明をリアルタイム表示する機能

フォーカス時:なし
エラー時:なし
フォーカス時:なし
エラー時:なし
項目ごとに入力完了後の動作 なし なし

機能は引き分け

ミキハウス、プチバトーの両社ともほぼ同機能でしたが、ミキハウスのフォームには住所自動入力補助がついていました。
住所は入力に時間のかかる項目ですので、郵便番号を入力することで自動的に住所をほぼ完成させてくれるのはとても助かりますね。

また、プチバトーは半角数字で入力する箇所を全角で入力した際、自動的に半角に変換されました。

エラー時の表示はプチバトーの勝利

エラーがある状態で登録ボタンを押してしまった場合、ミキハウスは入力画面に戻りエラーのある項目に★印がつくのに対し、プチバトーはどのように修正するべきかが表示されます。理由がわからないと、何度もエラーを繰り返してしまうので、プチバトーのように具体的に説明されると良いですね。

soso_blackミキハウス
エラー送信時、★マークのみの表示

子供服や出産祝いはミキハウスciao (1)
プチバトー
間違いを具体的に指摘。
会員登録 [PETIT BATEAU プチバトーオンラインブティック

最後に、勝手にフォーム改善アドバイス

今回のEFO比較分析は以上となります。
それでは個別で改善案を勝手に提案していきましょう。

ミキハウス

フォーム上部【よくあるご質問】の記載によってフォームが長くなってしまっているので、文章を簡潔にする、あらかじめ隠しておくといった対策をとるとよいかもしれません。
同様に、項目ひとつひとつに対する説明が多く、親切ではあるのですが、縦に長くならないようレイアウトを工夫するとより使いやすくなるのではと感じました。

必須項目の表示は「!」マークですとわかりづらいため、「必須」と文字であらわすか背景色を変化させるなどの工夫を行うとよいでしょう。

また、エラーの際、どのように修正すれば良いかの表示をすることでエラー発生時の離脱率を減らすことができるのではないでしょうか。

プチバトー

やや入力項目が多い印象を受けますので、必須以外の項目についても精査するとよいのではないでしょうか。
必須項目がフォーム上部に固まって配置されているのは非常に使い勝手が良いですが、1つだけ下部にある必須項目「このサイトをどこで知りましたか?」を見落とさないかが心配なところ。
※マークではなく「必須」と文字のアイコンを使用したり背景色を用いると目立って良いでしょう。

住所入力の際に結構手間がかかる印象でしたので、住所の自動入力をぜひ導入してほしいと感じました。

またさらに、「ログイン情報」「お客様に関する情報」「お子様情報」「その他」など、デザイン上の区切りをしっかりするとなおユーザーのストレスを緩和できるかと思います。

まとめ

いかがだったでしょうか。
ECサイトの会員登録は必要な情報が多くなる分、入力項目が本当に必要なものかを十分に検討し、さらに入力補助機能をつけてできるだけユーザーの負担を減らしたいですね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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