勝手にEFO比較分析【カゴメ × 大塚食品】(食品メーカー EC会員登録編)

そろそろ夏本番。水分を多く採り、食べ物で夏バテを防止できたらいいですね。
今回は飲料・食品メーカーのオンラインショップをテーマにします。

今回比較するサイトは、カゴメ株式会社様(http://www.kagome.co.jp/)(以下、カゴメ)と大塚食品株式会社様(http://www.otsukafoods.co.jp/)(以下、大塚食品)です。
トマトケチャップや野菜ジュースなど野菜を原料とした調味料、飲料で知られるカゴメ。
昔から愛されるレトルトカレーの元祖・ボンカレーの大塚食品。
この2社を比較していきます。

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

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

※本記事の内容は2014年7月18日時点のカゴメ様、大塚食品様、両社のサイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年7月18日時点)。

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

カゴメ 大塚食品
ページ数 会員情報の入力・会員規約確認、登録情報の確認、登録完了の3つ 会員登録、登録情報の確認、送信完了の3つ
入力項目 16種類 14種類
必須項目入力欄の数 22個 23個
フロー あり なし
オファー なし なし
必須マーク あり(必須マーク) あり(※マーク)
メルマガ購読 デフォルトチェックなし デフォルトチェックあり
利用規約、
プライバシーポリシー
フォーム内 フォーム内
送信ボタンのサイズ 幅131px x 高49px 幅195px x 高さ26px
入力画面のレイアウト フォーム専用 フォーム専用
入力ページへの遷移 ログイン→登録手続きへ進む 新規会員登録

フォーム、入力欄はほぼ変わらず

カゴメも大塚食品も入力項目と必須入力欄の数は特に差が見られませんでした。
またメールアドレス入力欄がシンプルに一つにまとめられているのに対し、電話番号や姓名、フリガナ、郵便番号入力や生年月日が別れているなど入力欄の数が減らせそうな所も共通して散見されました。

そして、両者とも余計なリンク表示が少なく、デザインもシンプルで非常に入力に集中しやすいレイアウトとなっていました。

カゴメ フォーム画面
企業カラーの赤を中心に構成されたフォーム。フローも表示されていますね
カゴメ

大塚食品 フォーム画面
両者、名前やフリガナ、電話番号、住所入力の入力欄は統一したいところ
大塚食品

カゴメは重要な情報を強調

カゴメのフォームでは、メールアドレスの入力欄をひとまわり大きく表示していました。
オンラインショップにおいてログインIDにもなるメールアドレスは、他の入力情報に比べて特に重要なのでしょう。また、半角の英数字は入力内容がどうしても見難くなりますから、ユーザーにとってもうれしい工夫ですね。

efo_double_ringカゴメ フォーム画面
よくよく見てみるとメールアドレスの入力欄が少し大きめ。
大きく表示されたメールアドレス欄

必須表示、ボタンに差が

いっぽう、ボタンと必須表示には両者に差が。

まずは必須表示。カゴメは文字で「必須」と表示するいっぽうで、大塚食品はアスタリスク(*)でマーク。

カゴメ 必須表示
文字でしっかり「必須」と書かれておりわかりやすいですね。
カゴメ必須表示

大塚食品 必須表示
アスタリスクではありますが、緑背景に赤色が目立ち認識しやすい。
大塚食品必須表示

そして送信ボタンは、いずれも次へのステップを目立たせてデザインしている点は良かったのですが、文言の親切さという点ではカゴメが一歩リード。

efo_double_ringカゴメ 送信ボタン
戻るボタンは少し小さく距離もあり色も白いため登録ボタンがより目立ちます
カゴメ_04

soso_black大塚食品 送信ボタン
実際にはこの後確認画面に遷移するのですが、このまま送信されてしまいそう
大塚食品_02

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

機能名 カゴメ 大塚食品
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

エラーに差

エラー表示には両者に差があり。それぞれアイコンや背景色などで工夫しているようです。

ok_blueカゴメ エラー
該当フォーム上部に表示。!マークのアイコンが付いているためさらにわかりやすい。
カゴメ_02

ok_blue大塚食品 エラー
該当フォーム上部に表示。そして入力欄も赤くして場所を誘導している。
大塚食品_03

補足文ではカゴメがリード

カゴメのフォームには便利な機能が。?マークのアイコンを押すと詳しい補足説明文が表示されるようになっています。
これらの補足をすべてフォームにベタ書きすると文字量が多すぎてしまうので、これは適切な工夫なのではないでしょうか。

ok_blueカゴメ
例文の後ろにある?アイコンを押すと説明が表示される。
カゴメ_03

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

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

カゴメ

フォームがまとめられそうな入力項目はひとまとめにし、項目間の移動が少なく済むようにしましょう。
飲料・食品メーカーの利点を活かし、何かオファーがあるとより登録心理に働きかけられるのではないかと思います。

大塚食品

実際には確認ページヘ遷移するものの、設置されているボタンでは「規約に同意して会員登録」となっているため、ユーザーが戸惑わないよう文言の修正をしたいですね。
また、フロー表示を設けて自分が遷移しているページが今どこかはっきりさせるというのも手です。

共通

フォームはシンプルに出来る箇所は最小限にまとめること、またオファーを設けることによって登録すると何がメリットになるか明示するといいでしょう。
入力項目数が多いので、離脱ブロックとガイド機能があるとさらに便利ですね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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