勝手にEFO比較分析【ゴディバ × リンツ × カカオサンパカ】(海外チョコレートブランド EC会員登録編)

ここ数年都心ではで海外のチョコレートショップが目立つようになりました。
皆さんはどこのお店がお気に入りですか?

今回比較するサイトは、ゴディバジャパン株式会社様運営のGODIVA(http://www.godiva.co.jp/layout/gdv/)(以下、ゴディバ)と
リンツ&シュプルングリージャパン株式会社様運営のLindt(http://www.lindt.jp/)(以下、リンツ)、
CSJ株式会社様運営のカカオサンパカ(http://www.cacaosampaka.jp/home.html)(以下、本記事ではカカオサンパカ)です。
1926年にベルギー・ブリュッセルにて家族運営で産声を上げたゴディバ。1845年にスイス・チューリッヒにてチョコレートを固形化する製造を始めた新風のリンツ。
チョコレート文化発祥地スペインはバルセロナに本店を構えるスペイン王室御用達のカカオサンパカ。
果たしてこの3社で最も使い勝手がいいのは?

※以下、サイト名の敬称は省略させていただきます。

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

※本記事の内容は2014年5月7日時点のゴディバ、リンツ、カカオサンパカのサイトのフォームを分析した内容を記載しています。
なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年6月6日時点)。

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

ゴディバ リンツ カカオサンパカ
ページ数 利用規約の同意、基本情報の入力、登録情報の確認、登録完了の4つ ログイン、会員登録、会員情報の確認、完了の4つ ご利用規約、会員情報入力、会員情報登録の3つ
入力項目 15種類 14種類 18種類
必須項目入力欄の数 19個 18個 21個
フロー あり なし なし
オファー あり(オンラインショップ会員専用ページ) あり(新規会員登録入り口、会員登録右部) あり(オンラインショップ会員「初めての方はこちら」、ご利用規約上部)
必須マーク あり(必須マーク) あり(必須マーク) あり(●マーク)
メルマガ購読 デフォルトチェックなし デフォルトチェックあり デフォルトチェックなし
利用規約、
プライバシーポリシー
別ページ 別ページ 別ページ
送信ボタンのサイズ 幅145px x 高さ30px 幅180px x 高さ40px 幅145px x 高さ31px
入力画面のレイアウト 他ページと共通 他ページと共通 他ページと共通
入力ページへの遷移 会員様専用ページ→会員登録 マイアカウント→会員登録 会員登録/修正→新規会員登録はこちら
or 新規会員登録

オファー、フォーム画面、フローに差

ゴディバ、リンツ、カカオサンパカ、3社ともオファーを設けていました。
表示や内容に差があり、それぞれ会社のカラーにそっているかと思われます。

またフォーム画面はチョコレートブランドということもあり【茶系・暖色】が共通で利用されているものの、
フォームの大きさやボタンの大きさなど各所には違いが見られました。

ゴディバ オファー
アイコンももちろん茶系。画面全体がチョコレートカラーで統一されている。
ゴディバ オファー
soso_blackゴディバ フォーム画面
画面は縦に長く表示。お名前とフリガナ、電話番号、誕生日はよりシンプルにまとめられるはず。
セルや必須項目フォームの中、ボタンがシンボルカラーの茶色にまとめられていてGood!

go_02
ゴディバ フロー表示
ゴディバは唯一フロー表示がありました。万年筆のアイコンがワンポイントとなっています。
go_05
リンツ オファー
こちらは文字のみ(新規会員登録入り口)。チョコレートブランドは茶色がお好き?
li_01
soso_blackリンツ フォーム画面
ゴディバとほぼ同じ内容だが、余分な空白もなくファーストビューでほぼ入力が完了する。
ただこちらも氏名、フリガナ、郵便番号と電話番号のフォームが分かれている。

li_02
soso_blackカカオサンパカ オファー
こちらも文字のみ(新規会員登録入り口)。ただいまいち効果的な文言が見当たらず。
cs_01
soso_blackカカオサンパカ フォーム画面
名前の後に会員IDとパスワード入力が。お名前とフリガナがシンプルだが、電話番号が分かれていた。
cs_02

送信ボタンに差

今回三者三様の特色がボタンの方でもよく表れていました。

ゴディバ 送信ボタン
トーンを変える事によりズーム図に誘導。ゴディバはとにかくポイントとなるようなチョコレート色の使い方をしていました。
go_03
リンツ 送信ボタン
確定ボタンと戻るボタンは同じ色、大きさなのですが、離すことによって誘導しています。リンツは基本ベージュカラーを使用していました。
li_03
soso_blackカカオサンパカ 送信ボタン
大きさはリンツのものを横に長くした感じ。戻るボタンがないので会員情報登録のボタンのみ。
ca_04

次は入力補助機能を見ていきます

機能名 ゴディバ リンツ カカオサンパカ
ガイド

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

なし なし なし
離脱ブロック

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

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

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

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

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

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

エラーに差

今回はエラーのアラート表示に差がありました。
三者三様。それぞれの個性が光ります。

ゴディバ
該当フォーム上部に表示。
go_06
soso_blackリンツ
フォーム画面上部に出現。
li_05
soso_blackカカオサンパカ
ブラウザのダイアログによるメッセージ。エラー項目のうち1つ目についてのみ指摘するタイプです。
cs_05

入力完了動作に差。

ゴディバとリンツは入力完了動作を導入。
一方、カカオサンパカは入力完了動作はありませんでしたが、便利なID重複確認機能や住所自動入力機能が備わっていました。

ゴディバ
茶色のフォーム内が入力完了すると白く変わる。
go_04
soso_blackリンツ
こちらはフォームの中が黄色。同じく入力が終わると白に変わる。

li_04
soso_blackカカオサンパカ
一方カカオサンパカにはID重複確認機能が。他にも、郵便番号を入れるだけで勝手に住所が入力されるなど細かい所で便利な機能がついていました。
メールアドレスではなくIDでログイン管理をしているため、こちらの重複機能は大変便利。
ca_03

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

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

ゴディバ

まとめられるフォーム項目を統一するなどそてシンプルに。
また、余計な余白を省く事により、見た目としても画面をよりシンプルにみせることが可能かと思います。
また製菓ブランドなので誕生日に関するオファーもあれば、生年月日入力が必須なのも納得できるでしょう。

リンツ

こちらも項目を統一することでよりフォームをシンプルにできます。
左上のガイド表示では、単に必須項目の入力を促すだけではなく、項目の残数表示もさせるとより良いでしょう。
さらに、フロー画像を入れることにより、ユーザーが今どこにいるのか確認できるようにすると良いですね。

カカオサンパカ

オファーがそっけない印象ですので、魅力的な一文を添えてみましょう。
電話番号など分かれている項目を統一するとともに、もう少し項目同士の余白をあけることで、文字が詰まって見づらい点が解消されます。
注意書きや便利な機能がついた親切なフォームではあるのですが、入力完了後に動作を入れるとなお親切です。

共通

いずれも必須の入力項目が多いため、ガイドや離脱ブロックを導入して工夫することで大きな効果が得られるのではないでしょうか。

まとめ

いかがだったでしょうか。
贈り物や差し入れに、または自分へのご褒美に。美味しいチョコレートは私たちの生活を彩ってくれる存在です。フォームが使いやすくなり、より気軽に手に入れられると良いですね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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