勝手にEFO比較分析【Panasonic x SHARP】(総合家電メーカー 会員制サイト 登録フォーム編)

乾電池やアダプター、リモコンといった消耗品から冷蔵庫やエアコン、電子レンジなどの白物家電、映像・音響機器や家庭用ゲーム機などの娯楽家電に至るまで、私たちは日々さまざまな家電を使っています。
生活家電も含めると、掃除機や照明器具、健康・美容器具と生活をより豊かにするためには家電製品は必要不可欠といってもよいでしょう。

家電を販売しているメーカーにも複数分類があり、その中でも生活にかかわる全ての分野を網羅しているのが総合家電メーカーと呼ばれる企業です。

今回取り上げるのは、総合家電メーカーのひとつである「Panasonic」(http://panasonic.jp/)(以下本記事では「パナソニック」)と「SHARP」(http://www.sharp.co.jp)(以下本記事では「シャープ」)の2サイトです。

パナソニックは「CLUB Panasonic」、シャープは「SHARP i CLUB」という会員登録制のサイトを提供していて、どちらのメインコンテンツもログイン情報に購入家電を紐付けて一元管理できるシステムです。
また、会員限定のSNSや製品に関する情報配信サービス、製品を購入・登録して溜まるポイントサービスなどといった様々なサービスを提供しています。
どちらもコンテンツ豊富な大手総合家電メーカーの会員サイトですが、その登録フォームはどのような思想の元、設計されているのでしょうか。

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

※本記事の内容は2015年03月26日時点のパナソニック、シャープ、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2015年03月30日時点)。

基本的項目の確認。

それではいつも通り、基本項目の確認からしていきましょう。

パナソニック シャープ
ページ数 会員利用規約の確認、個人情報取り扱いの確認、登録情報の入力、登録情報の確認、メールマガジン登録、仮登録完了(仮登録完了メールを受信)、本登録完了の7ページ 会員利用規約の確認、登録情報の入力、登録情報の確認、本登録への手続き(メールのURLをクリック)、本登録完了の5ページ
入力項目 18種 21種
必須項目入力欄の数 18項目 20項目
フロー あり あり
オファー あり あり
必須マーク あり(「必須」文字表示) あり(「必須」マーク表示)
送信ボタンのサイズ 幅174px × 高さ36px 幅158px × 高さ37px
入力画面のレイアウト 他ページと共通 フォーム専用

入力項目数、ページ遷移数はどちらも若干多めです。

また、ともにフォントやマージンを大きくとり、幅広い世代が利用することを前提に設計しているのがわかります。

以下個別に説明していきます。

両社ともに大きく余裕のあるレイアウト

どちらもフォントと入力欄のサイズを大きめにし、程良いマージンで見やすさに重点を置いたフォームとなっています。

年代を問わず幅広い世代が利用することを想定した設計、ということがわかりますね。

また、どちらも項目を整理し、入力項目を区分けしており、ユーザーのストレスを軽減する作りになっています。

ok_blue パナソニック ページレイアウト

項目数が少し気になりますが、文字サイズ、マージンともに程良く、見やすいレイアウトになっています。
サイトのグローバルナビが残っている点は気になります。

程良い文字サイズとマージンでシンプルかつ分かりやすいフォーム。

程良い文字サイズとマージンでシンプルかつ分かりやすいフォーム。

程良い文字サイズとマージンでシンプルかつ分かりやすいフォーム。

ok_blue シャープ ページレイアウト

入力項目をA~Eまで5つに分類することで、ユーザーが迷うことなく必要な情報を入力できる作りになっています。
さらにユーザーがフォーム入力に集中できる専用のページテンプレートを用意しているのもすばらいです。

情報を整理し、小分けにする事でユーザーの一瞬の迷いを解消しています。

情報を整理し、小分けにする事でユーザーの一瞬の迷いを解消しています。

情報を整理し、小分けにする事でユーザーの一瞬の迷いを解消しています。

フォームタイトルの見やすさ

フォームを見て、まずユーザーが確認する要素は何か。
やはり一番最初はフォームタイトルです。

「自分が今どういうフォームに入力をしようとしているのか」を分かりやすくしてあげることでユーザーの安心感につながります。

フォントサイズや装飾で強弱を出し、他項目見出しとの区分けをはっきりさせましょう。

ここでは両社に差が出たように感じます。

ok_blue パナソニック フォームタイトル

パナソニックはブランドカラーであるブルーのグラデーションを背景に大きめのフォントでタイトルを表記しています。シンプルですが分かりやすくクールなイメージが伝わりますね。

ブランドカラーのブルーで知的な印象を受けますね。

ブランドカラーのブルーで知的な印象を受けますね。

ブランドカラーのブルーで知的な印象を受けますね。

soso_black シャープ フォームタイトル

対して、シャープでは特に装飾などは無く、サイズに関してはかなり控えめです。

新規会員登録という文字はかなり控えめな印象をうけます。

新規会員登録という文字はかなり控えめな印象をうけます。

新規会員登録という文字はかなり控えめな印象をうけます。

必須マークは両社ともあり

必須マークは目立つ色で四角いマークを作り、「必須」文字を白で抜いた画像を使用すると良いです。
文字のみの表記で「*」「※」「(必須)」を表示している事例をよく見かけますが、印象は薄いので出来る限りマークで表示させましょう。

soso_black パナソニック 必須マーク

パナソニックは「(必須)」を赤字で表記しています。
文字だけでは印象が薄いので、マーク形式をお奨めします。

文字だけでは少し印象が薄いです。

文字だけでは少し印象が薄いです。

文字だけでは少し印象が薄いです。

ok_blue シャープ 必須マーク

一方シャープはお手本のような必須マークを使用しています。
ただ入力欄の背景色が任意項目と変わらないので、必須項目のみ目立つ色に変えてあげると、より入力しやすくなると思います。

お手本のような必須マークです。

お手本のような必須マークです。

お手本のような必須マークです。

どちらもフローあり

ok_blue パナソニック フロー

パナソニックはサイドエリアに縦型のフローを設置しています。
一つ一つの工程が大きく表示され、見やすいです。
遷移数が多い場合で、且つサイドエリアに余裕がある場合には良い方法だと思いました。

文字も大きく、分かりやすいですね。

文字も大きく、分かりやすいですね。

文字も大きく、分かりやすいですね。

ok_blue シャープ フロー

シャープも同様で、サイドエリアに縦型のフローです。
入力中の工程はブランドカラーのオレンジで表示され、それ以外は濃いグレーを使っています。また、完了したページに関しては薄いグレーで表示されます。

シンプルで、ダークグレーにポイントカラーが映えて見やすいです。

シンプルで、ダークグレーにポイントカラーが映えて見やすいです。

シンプルで、ダークグレーにポイントカラーが映えて見やすいです。

オプトイン

efo_double_ring パナソニック オファー

パナソニックは専用のページを設け、複数あるメールマガジンについて詳しく説明しています。

イラストや画像が多く詳細がわかりやすいです。

イラストや画像が多く詳細がわかりやすいです。

イラストや画像が多く詳細がわかりやすいです。

ok_blue シャープ オファー

一方、シャープは中見出しの一つとして「メールマガジンの受信設定」という項目を配置、分かりやすくまとめています。

短く簡潔に説明されています。

短く簡潔に説明されています。

短く簡潔に説明されています。

次に入力支援機能の比較です

機能名 パナソニック シャープ
ガイド

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

なし なし
離脱ブロック

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

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

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

なし なし
項目ごとのアラート表示

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

フォーカス時:なし

エラー時:あり

フォーカス時:なし

エラー時:あり

項目ごとに入力完了後の動作 なし なし

入力支援機能の有無

入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。

今すぐにでも入力支援機能の導入や拡充をご検討いただきたいです。

パナソニックは住所自動入力機能と使用可能ログインIDのチェックなどといったデータベースを参照する機能が実装されていました。

シャープはエラー時のリアルタイムアラートのみの実装となっています。

エラー画面

エラー画面でのポイントは3つ

・冒頭のエラーメッセージは一言だけに留める
・エラー箇所に丁寧な注記を記載する
・エラー時、該当箇所の背景を赤系統の配色に変更する

上記を踏まえ、見ていきましょう。

soso_black パナソニック エラー画面

パナソニックは惜しいエラー画面です。
丁寧な注記を該当箇所に載せ、エラー時の入力欄の背景色を変更しています。
しかし、冒頭のエラーメッセージが箇条書きでリストになってしまい、圧迫感を出しています。

ユーザーにとってこの圧迫感はストレスになりかねないので、「エラー箇所の注記に従って正しく入力を行ってください」などといった文言のみの表示が良いでしょう。

冒頭でエラーがリストになっているのが残念。

冒頭でエラーがリストになっているのが残念。

soso_black シャープ エラー画面

シャープも少し残念な画面に。

送信ボタン押下時にエラー項目があるとメッセージをダイアログで表示。
その後フォームに戻り、エラー箇所に注記が表示され、該当入力欄の枠の配色が変わる、という設定になっています。
しかし、冒頭にはエラーに関するメッセージがないため、ダイアログが消えてしまっている状態ではスクロールして該当箇所を参照するしか方法がありません。

冒頭には一言、エラー項目に関する文言を表示させると良いでしょう。

冒頭には一言、メッセージがほしいですね。

冒頭には一言、メッセージがほしいですね。

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

今回は総合家電メーカーサイトのクラブ会員登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

パナソニック

遷移ページの削減と入力支援機能の導入を

フローを見れば一目瞭然ですが、現状遷移ページが多いです。
入力項目が多かったり、遷移ページ数が多いとユーザーのストレスとなり、離脱率は上がってしまいます。
利用規約と個人情報の取り扱いをチェックボックスにし、「登録情報の入力」ページの送信ボタンの直前にまとめて表示させるか、別画面で表示させるようにすれば、ページ数は抑えられます。

また、入力支援の導入で、より親切なフォームになると思います。

シャープ

入力支援機能の導入をお奨めします

基本的な項目はほぼ満点に近いフォームです。
21種という項目数の割に、入力時のテンポは軽快だと思います。

より親切なフォームに近づけていくには入力支援機能の拡充が必要不可欠です。

入力支援機能を拡充していくことでより一層ユーザーに優しいフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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