勝手にEFO比較分析【ユナイテッドアローズ x ビームス】(セレクトショップEC会員登録編)

やってきました「勝手にEFO比較分析」。

新しい季節が始まり、装いも新たに…ということで、今回は有名セレクトショップのオンラインショップ会員登録フォームに注目してみました。

題材は、日本のセレクトショップを代表する、ユナイテッドアローズ様(https://store.united-arrows.co.jp/)(以下、本記事ではアローズ)とビームス様(https://shop.beams.co.jp/)(以下、本記事ではビームス)の2社をセレクトさせていただきました。

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

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

※本記事の内容は2014年4月10日時点のユナイテッドアローズ様、ビームス様、両社のサイトのフォームを分析した内容を記載しています。
なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年4月10日時点)。

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

アローズ ビームス
ページ数 利用規約の同意、入力、メルマガ選択、確認、完了の5つ 利用規約の同意、入力、メルマガ選択、確認、完了の5つ
入力項目 8種類 19種類(BEAMS CLUB IDがある場合は18種類)
必須項目入力欄の数 8個 19個
フロー なし なし
オファー なし なし
必須マーク なし(フォーム上部に記載) なし(フォーム上部に記載)
メルマガ購読 デフォルトチェックあり デフォルトチェックあり
利用規約、
プライバシーポリシー
ページ上部にあり ページ上部にあり
送信ボタンのサイズ 幅200px x 高さ30px 幅245px x 高さ42px
入力画面のレイアウト 他ページと共通 他ページと共通
入力ページへの遷移 ヘッダーの会員登録から ヘッダーの会員登録から

2社とも入力フロー多め、オファーなし

今回の2社のフォームは非常に良く似ていました。
特にフローはまったく同じで、いずれも「利用規約の確認」⇒「個人情報の入力」⇒「メールマガジン配信申し込み」⇒確認画面⇒送信と、全5画面の構成となっていました。
どちらも、フォームの上部などにフロー画像を用意してあげるとユーザーが現在地を把握でき、より親切かと思いました。

また、2社揃ってオファーの用意もありませんでした。
会員登録には、豊富な品ぞろえのオンラインショップを利用できたり、新商品やセール情報などショップやレーベルの最新情報をメールマガジンを受け取れるなど、魅力的なメリットがあると思いますので、フォーム内にオファーを配置してしっかり訴求ができるとなお良いと思います。

アローズ
すっきりとしたシンプルなデザインは見やすいですね。
アローズ フォーム上部
ビームス
同じくビームスもすっきりとしたフォーム。なぜか2社とも文言が同じ。競合との差もアピールできると良いのではないでしょうか
ビームス フォーム上部

フォーム用のテンプレートも、共になし

また、いずれもフォーム用のページテンプレートの用意がなく、全ページで共通のヘッダーとフッダーがついたままとなっていました。

余計なリンクを外すのはEFOの鉄則。
ユーザーを入力に集中させるため、フォームのページテンプレートはリンクを最低限に抑えたものを用意できると良いですね。

ビームス
ビームスのフッター。特に閲覧履歴はユーザーを誘惑してしまいそうです
ビームス フッター

違いが出た項目数!

上記のとおり、かなり似た両者のフォームですが、大きく違いがでたのは項目数。
ビームスが19種類に対して、アローズは8種類と半分以上も項目数を削っていました。
おそらく、名前や住所など商品の発送で必要な情報は、段階的に登録するような仕組みになっているのだと思います。
入力ページでは少ないスクロールでフォーム全体が見渡せ、入力へのハードルが低いと感じました。

対してビームスは名前や住所、電話番号などしっかり個人情報を要求するフォームとなっていました。
さらに、2つの会員登録(「BEAMS CLUB会員」と「BEAMS Online Shop」)を同時にさせる作りとなっているためか、IDとパスワードの欄が2種類あったり「ビームスクラブカード」所持の有無で分岐があったりなど、少し複雑な内容となっています。
内容がややこしい為、説明のコンテンツも必然的に増え、項目の多さも手伝ってかなり縦に長いフォームになってしまっています。

アローズ
項目数をぐっとおさえたアローズ。
アローズ 入力ページ
ng_bwビームス
上部の説明コンテンツは親切ですが「ビームスクラブカード」を持っていない場合ここまで長くなってしまいます。
ビームス 入力ページ

最初の項目にこだわる!

直帰を防ぐための方法として、最初の項目にこだわる、ということを、入力フォームの最初の項目を入力しやすくするだけでユーザーの直帰は減らせる  勝手にEFO分析-エントリーフォーム改善でもお伝えしていますが、
フォーム入力の一番最初の項目が頭を悩ますようなものだと、ユーザーの直帰に繋がってしまいます。

ビームスのフォームは最初に「BEAMS CLUB ID」の確認となっており、少しハードルが高いと感じました。
また、いきなり「BEAMS Online Shop」や「BEAMS CLUB」などの独特の用語を織り交ぜた注意書きが登場するため、戸惑いを感じるユーザーも少なくないのではないでしょうか。

ng_bwビームス
もうすこしやわらかい表記にするだけでもユーザーの戸惑いは軽減できるかもしれませんね
ビームス 最初の項目

送信ボタンにこだわる!

送信ボタンはEFOにおいて重要であることはこのブログで何度もお伝えしてきました。
いずれのフォームの押しやすく充分な大きさのボタン画像を用意していましたが、とくにビームスは送信ボタンの色を変えてわかりやすくする工夫が見られました。

アローズ
まったく同じボタンが並ぶと押し間違いのリスクが
アローズ ボタン
ビームス
配置や大きさ、形状、色すべてパーフェクト!
送信ボタン

入力補助機能でも両者に差が!

機能名 アローズ ビームス
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

アローズはリアルタイム・アラートを採用

背景色や必須表示などがなく、一見入力補助機能がなさそうに見えた両者のフォームですが、
アローズはひとたび入力を始めると、リアルタイムに入力内容をチェックする機能がついていました。

アローズ
必須項目には背景色が付き入力の有無をチェックしてくれるほか、かな入力制限や入力形式のチェック、サブミットブロックまで搭載されていました
必須項目の強調 アローズ

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

今回のEFO比較分析は以上となります。
前回と同じく分析に加え、こうすれば良くなるのではないかという改善案を、考えてみました。

アローズ

細かい調整でさらに良くなる!

全体的に項目数を減らしたり、リアルタイムアラートを採り入れたりと、フォームを使いやすくする工夫が散見されたアローズ。
たとえば、せっかく減らした項目数のインパクトを高めるために、「会員情報の取扱確認」の配置を変えたり、
項目ごとの注意書き・入力例について、プレースホルダーやフォーカス時のみのダイアログなど、表示方法を工夫することにより、ファーストビューに入力欄をおさめてしまうとより完了率が上がるのではないでしょうか。

ビームス

登録のフローをシンプルに。もしくは入力補助機能でカバーを

全体的な流れはアローズと同様ながら、会員カードの情報登録が同時に必要だったり、項目の数が多かったりと、ユーザーのハードルは高め。
システム側の制約上仕方がないのかもしれませんが、例えば入力画面を分けたり、ガイドやリアルタイムアラートなどの入力補助を導入することによって、項目数の多さをカバーし、ユーザーの心理的ハードルを少しでも軽減することが大切だと思います。

まとめ

いかがだったでしょうか。

WEBで入荷情報や新作をチェックしてから店舗に行ったり、店舗で試着してからECで買う…など、店舗販売をうまく組み合わせて相乗効果を産むECストア。
アパレル業界ではもはや欠かせない存在なのではないでしょうか。
会員登録のフォームがより簡単・親切になることで、ユーザーにとってさらに便利になると良いですね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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