勝手にEFO比較分析【カシオ計算機 × オリエント時計】(時計メーカー オンラインショップ会員登録編)

腕に巻いたり壁にかけたり、日常の様々なシーンで欠かせない「時計」。
今回は時計メーカーのオンラインショップをテーマにお届けします。

今回比較するサイトは、カシオ計算機株式会社様(http://casio.jp/)(以下、カシオ)と
オリエント時計株式会社様(http://www.orient-watch.jp/)(以下、オリエント時計)です。
1983年発売依頼、落下強度10m、防水性能10m、電池寿命10年のトリプル10を守り、某国の兵士たちからはコンバットカシオの愛称で親しまれている<G-SHOCK>が代表的なカシオ、
1951年誕生以来、流行に流されずロングセラーを誇る機械式ムーブメントの「輝ける星(=オリエントスター)」のオリエント時計。
この2社を比較していきます。

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

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

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

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

カシオ オリエント時計
ページ数 会員規約、会員情報登録・修正、登録情報の確認、登録完了の4つ メンバー規約、メンバー登録、確認、送信完了の4つ
入力項目 15種類 13種類
必須項目入力欄の数 18個 42個
フロー なし なし
オファー あり(ログインページ) なし
必須マーク あり(※マーク) あり(※マーク)
メルマガ購読 デフォルトチェックなし デフォルトチェックあり
利用規約、
プライバシーポリシー
別ページ 別ページ
送信ボタンのサイズ 幅120px x 高さ44px 幅201px x 高さ20px
入力画面のレイアウト 他ページと共通 フォーム専用
入力ページへの遷移 ログイン→新規会員登録 メンバー登録

オファー、フォーム、入力欄に差

今回オファーを設けていたのはカシオのみでした。
必須項目のマークはいずれも「※」マークの表示のみでしたので、「必須」と文字で表示したいところ。ただしカシオは必須項目に背景色が施されているため、どこに入力すればよいかが明確でした。
いっぽうでオリエント時計はフォーカス中の項目に背景色がつくようになっていました。

オリエント時計は名前などの項目が1つに統一されておりはシンプルな印象。ただし必須項目のひとつに手持ちの製品について選択させる20個以上のチェックボックスが縦並びに存在していたため、かなりスペースをとってしまっていました。
初めて製品を持つユーザーは戸惑ってしまうかもしれません。

カシオ オファー
カラフルで目立つ暖色系のアイコンでユーザー招致。サプライズワード「今なら」でさらに関心を引き寄せる。
casio_01
ng_bwオリエント時計
オファーなし
soso_blackカシオ フォーム画面
必須項目は「※」マークのほかフォームに色をつけている。
こちらもシンプルではあるが氏名とフリガナの姓名欄がそれぞれ分かれている。

casio_04
soso_blackオリエント時計 フォーム画面
郵便番号以外は分かれがちな入力項目は1つにまとめられている。
ただし必須である「商品選択」欄により入力欄の数が膨れ上がってしまう。

ori_01

現在カーソルをあてている項目が水色に色づき、どこを入力しているか見やすくなっていました。
ori_05

soso_blackオリエント時計 メルマガ
今回特徴的だったのは、チェックボックスを用いることが多い「メールマガジンの受け取り」をセレクトボックスで実装していた点。
ori_03

送信ボタンに差

カシオは画像を使い戻るボタンと色を変えて表示しているいっぽうで、オリエント時計には戻るボタンがありませんでした。

カシオ 送信ボタン
精密機械メーカーらしい配色で登録を促している。
casio_03
オリエント時計 送信ボタン
シンプルなスタイル。戻るボタンがなく登録ボタンだけでユーザーを誘導する。
ori_02

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

機能名 カシオ オリエント時計
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

エラーに差

今回、エラーのアラート表示に差がありました。

カシオ エラー
該当項目の下方に表示。
casio_02
soso_blackオリエント時計 エラー
エラーページを設けて表示。わざわざ戻る手間を考えると入力ページにあるのが望ましい。
ori_04

住所検索ボタン無しでも簡単に入力できる機能が

カシオでは郵便番号の上3ケタを入力するだけで、続きをサジェストしてくれるツールチップが出現。

カシオ
下4ケタを打つ前から出現するので、上3ケタだけ入力→マウスでクリックと簡単に自動入力。
casio_05

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

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

カシオ

姓名など、項目ががひとつにまとめられそうな箇所はひとまとめにすると、より項目を少なくみせることができます。
さらに、入力画面のレイアウトは、グローバルナビ等のリンクを除いたフォーム専用のものにする事により、余計な離脱を防ぎユーザーが入力に集中できるでしょう。

オリエント時計

新規登録者の中には今回初めて製品を購入するユーザーも居ることを配慮し、戸惑いを与えないために手持ちの製品チェックを任意にすること。またチェックボックスがフォームの表示を長くさせているので、横向き複数カラムにレイアウトするなど配置に工夫をすると良いでしょう。
さらに、オファーもあるとユーザーが登録に意欲的になると思われます。
エラー表示でストレスを与えてしまう可能性が高いため、せめてエラー表示は入力ページ内に表示すると良いのではないでしょうか。

共通

必須項目の表示は「※」マークではなく「必須」と文字で表示すると良いでしょう。
ボタン押下後のエラー表示は、ユーザーに多大なストレスを与えてしまいますので、リアルタイムに判定することが理想的です。

離脱ブロック、ガイド機能は必須入力の数を見る限り導入するほうが登録数が今より違ってくると思われます。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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