勝手にEFO比較分析【タワーレコード×HMV】(レコードショップEC 会員登録フォーム編)

みなさんは音楽をどのように聴いていますか?
最近はダウンロード配信や定額制ストリーミングサービスなど、音楽の視聴環境はどんどん多様化していますが、やはり”昔ながら”のCDやレコード形式で手元においておきたいという音楽ファンの方はまだまだ多いのではないでしょうか。

本日は、豊富なラインナップのCD・レコードを購入できるレコードショップのオンラインサイトに注目。アメリカ生まれ、黄色に赤字の看板がトレードマークの「TOWER RECORDS ONLINE」(http://tower.jp/)(以下本記事では「タワレコ」)と、英国生まれ、ピンクのロゴとシックな内装が特徴の「HMV ONLINE」(http://www.hmv.co.jp/)(以下本記事では「HMV」)を比較分析していきます。

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

※本記事の内容は2015年1月20日時点のタワレコ、HMV、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2014年1月20日時点)。

基本的な項目を確認していきます。

いつも通り、まずは基本項目の確認から。

タワレコ HMV
ページ数 仮登録、本登録、確認、完了の4ページ 仮登録、ログイン、Pontaカード所有確認、本登録、確認、完了の6ページ
入力項目 12項目 18項目
必須項目入力欄の数 7項目 17項目
フロー なし あり
オファー なし なし
必須マーク あり(「必須」文字) あり(「必須」文字)
送信ボタンのサイズ 幅126px × 高さ36px 幅210px × 高さ48px
入力画面のレイアウト 他ページと共通 専用レイアウト

両社とも、最初にメールアドレスによる仮登録を実施し、その後に本登録を実施する形をとっています。
以下個別に説明していきます。

差の出た項目&ページ数

項目数の少なさでは、必須項目欄がたった7つと、タワレコが圧倒的な差をつけました。
とくに最初のフローである仮登録時の入力項目はメールアドレス1つのみと非常にシンプルで、会員登録のハードルをぐんと下げています。

一方HMVは仮登録時でも必須項目が5つもあり、なかにはCAPTCHAも含まれており少し入力ハードルが高い印象です。
さらに仮登録の後にログインを実施する必要があるなど、最低限の画面数におさえているタワレコに比べフローも多めです。

HMVの会員登録は、ローソンが運営する複数のサービスを包括した「ローソンWEB会員」として実施する形をとっているのですが、その点が項目数の多さにも関係しているのかもしれません。

efo_double_ring タワレコ 項目数

仮登録時の項目は、メールアドレス1つのみと非常にシンプル。ボタンの下にオファー文があるのもGOOD。

仮登録時の項目は、メールアドレス1つのみと非常にシンプル。ボタンの下にオファー文があるのもGOOD。

soso_black HMV 項目数

仮登録時点でCAPCHAを含めた5項目は少し多すぎる印象。

仮登録時点でCAPCHAを含めた5項目は少し多すぎる印象。

レイアウトではHMVに軍配!?ただし注意点も

今回、サイト共通のヘッダ、フッター、サイドバーを残したままのタワレコに対し、登録フローを用いたシンプルな専用レイアウトを採用しているHMVは大きくリード。

しかし油断は禁物。無彩色+ピンク色基調のHMVのサイトデザインから一転、フォームはローソンのテーマカラーである青色基調のものに急に切り替わってしまいます。
おそらくその他のサービスと共通の登録フォームなのでしょう。タイトルも「ローソンWEB会員登録」となっているため、「HMV」だと思って利用しているユーザーの多くが戸惑ってしまう可能性があります。

soso_black タワレコ ページレイアウト

共通のヘッダー、サイドメニュー、フッターからユーザーが離脱してしまう恐れが。

共通のヘッダー、サイドメニュー、フッターからユーザーが離脱してしまう恐れが。

soso_black HMV ページレイアウト

余計なリンクを排したレイアウトに、フローも設置してあり一見完璧!と思いきや、前画面とのギャップから生じる離脱には注意したい

余計なリンクを排したレイアウトに、フローも設置してあり一見完璧!と思いきや、前画面とのギャップから生じる離脱には注意したい

両社とも、画面をスッキリ見せる工夫が

タワレコでは、任意で会員情報とポイントカードをひもづけることが可能です。
そのカード上の印字に関する説明を、モーダルウィンドウのなかに表示することで、必要な人のみが確認できるようにするという工夫が見られます。

またHMVでは、会員規約が折りたたみ表示されており、必要なときにのみ開閉することが可能です。
これらの工夫はいずれも、画面をスッキリと見せてくれています。

efo_double_ring タワレコ 補足説明

ポイントカードとの紐付けは任意なので、必要のない人は見なくても良いようになっている

ポイントカードとの紐付けは任意なので、必要のない人は見なくても良いようになっている

efo_double_ring HMV 会員規約

規約各種はすべて折りたたみ表示になっており、フォームを小さく見せてくれる

規約各種はすべて折りたたみ表示になっており、フォームを小さく見せてくれる

両社ともに、離脱をまねくうっかりなポイントを発見

最後に細かい指摘になはりますが、ユーザーの離脱を招く危険なポイントを双方に発見しました。

まずタワレコでは、確認画面に罠が。送信ボタンの直前にある、利用規約の確認を促すリンクを押下すると、そのままリンク先に遷移してしまいます。
このままユーザーが戻ってくるという保証はありません。
このようなリンクは別窓表示かインライン表示にしておきたいもの。

ng_bw タワレコ 会員規約

てっきり別窓で開くのと思いきや、まさかの通常リンク!

てっきり別窓で開くのと思いきや、まさかの通常リンク!

対してHMVの罠は一番最初の登録ページに。ここには「戻る」というボタンが設置されています。
ブログ読者の皆様はもうお気づきですね。「キャンセルボタン」です。
キャンセルボタンはフォームにとってほぼ何のメリットももたらさないことは明白ですので、削除することをおすすめします。

ng_bw HMV キャンセルボタン

入力内容を修正するためのボタンは必要ですが、最初のページに「戻る」は必要ありませんよね。

入力内容を修正するためのボタンは必要ですが、最初のページに「戻る」は必要ありませんよね。

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

タワレコ HMV
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:あり

エラー時:あり

フォーカス時:なし

エラー時:なし

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

いずれも入力支援機能を搭載。しかし「惜しい」ポイントが

タワレコにはリアルタイムアラートとプレースホルダー、HMVにはサブミットブロック、住所自動入力機能が搭載されていました。
しかし両社とも「惜しい!」という場面が。あともう少しの工夫でよりいっそう使いやすくなるはずです。

まず、タワレコのリアルタイムアラートは非常に便利です。しかし、ひとつの項目に複数入力欄がある場合には上部にエラーがどんどん追加されてしまい、対応がわかりにくくなってしまっていました。
せめてどの項目にどのエラーが出ているのかはわかるようにできると良いですね。

soso_black タワレコ リアルタイムアラート

どのエラーがどの項目に対応しているのががわかりにくく、なおかつどんどん行数が増えていくので「惜しい!」

エラーを起こすとどんどん行数が増えていく。どのエラーがどの項目に対応しているのががわかりにくく、同じ文言が数行に並んだりも。

また、HMVのサブミットブロックは、必須項目を入力し終えるまで、次に進むボタンの色が薄くなってクリックできないようになるという仕様です。しかし、見た目上変化が小さいため、ユーザーがサブミットブロックだということに気づかない危険性が。
文言を変えるなど見た目上の変化を大きくすると、よりわかりやすいサブミットブロックになるでしょう。

ok_blue HMV サブミットブロック

色が薄くなり、「☓」のアイコンがつくのですが、これだけで仕様を理解できるユーザーは少ないかも…

色が薄くなり、「☓」のアイコンがつくのですが、これだけで仕様を理解できるユーザーは少ないかも…

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

今回はオンラインレコードショップの会員登録フォームについて分析を行いました。いつも通り、最後に勝手なアドバイスで締めくくりたいと思います。

タワレコ

項目数やページ数が厳選され、リアルタイムアラートや補足文なども充実しており、親切で入力しやすいフォームだと思います。

本文中で述べたとおり、レイアウトとリアルタイムアラートの表示方法には課題が見られます。
アラートと項目の対応をわかりやすくするためには、アラートを吹出し型に表示することで解決できるかもしれません。

さらに、フォーム最後尾のメール配信のチェックボックスは、もう少し見やすく工夫できるかもしれません。
例えば「ニューリリース情報」をひとくくりにし、ジャンル名のみチェックボックスにするだけでもかなり選択しやすくなりそうです。

HMV

最も気になるのは、フォームに遷移した瞬間、別サイトのように感じてしまう点。
ローソン会員という大きなシステムのなかにあり、さまざまな制約があるのかもしれませんが、例えばロゴと簡単な説明を表示しておくだけでもかなりユーザーの不安を軽減できるでしょう。

フォーム単体で言えば、レイアウトは完璧ですし、入力時にもとくに不自由を感じませんでした。

本文中で触れたように、キャンセルボタンの削除やサブミットブロック中の見た目についてはぜひご検討いただきたいところです。
特にサブミットブロックは、文言を変更(例えば「未入力の項目があります」など)するだけでもかなりわかりやすく改善されるのではないでしょうか。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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