勝手にEFO比較分析【snowpeak x coleman】(アウトドアブランドEC会員登録フォーム編)

夏真っ盛り、アウトドアに最適なシーズンですね。すでに家族や友人とキャンプに出かけたという人も多いのではないでしょうか。
そんなキャンプの必需品となるのが様々なアウトドアギア。テントやタープを始め、ランタンなどの照明、シュラフ・マット等の寝具、テーブルや椅子などの家具、キッチングッズ…などとなかなか奥深く、シーズンごとに少しずつギアを揃えていくのも楽しみのひとつですね。

本日はそんなアウトドアギアを多数販売するメーカー2社のフォームを比較です。取り上げるのは、snowpeak(https://store.snowpeak.co.jp)とcoleman(https://ec.coleman.co.jp/onlineshop/)それぞれオンラインショップの会員登録フォームに注目していきます。

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

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

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

いつも通り、基本項目の確認から始めていきます。

snowpeak coleman
ページ数 入力、確認、完了の3ページ 規約への同意、入力、確認、仮登録、本登録の5ページ
入力項目 17種 11種
必須項目入力欄の数 20項目 18項目
フロー あり なし
オファー なし あり
必須マーク あり(「※」文字表示) あり(「※」文字表示)
送信ボタンのサイズ 幅240px × 高さ55px 幅182px × 高さ36px
入力画面のレイアウト サイト共通 サイト共通

それでは以下個別に説明していきます。

ページレイアウトは両社ともサイト共通

今回、2つともサイト共通のヘッダーやフッターがついたままとなっていました。
余計なリンクやコンテンツは離脱の要因となりますので、できれば取り除いておきたいところです。

soso_black snowpeak ページレイアウト

サイト共通のヘッダーやフッターがついたままとなっている

サイト共通のヘッダーやフッターがついたままとなっている


soso_black coleman ページレイアウト
サイト共通のサイドナビ、フッターがついたまなとなっている

サイト共通のサイドナビ、フッターがついたまなとなっている

必須マークは「※」で表示

また両社とも必須項目の箇所には赤色の「※」マークを付けて表示していました。
これでも良いのですが、「必須」という文字のアイコンにしたり、枠線や背景色などで必須箇所のデザインを強調すると、より認識しやすくなるでしょう。

soso_black snowpeak 必須マーク

※マークで必須と表示

※マークで必須と表示


soso_black coleman 必須マーク
同じく、※マークを使用

同じく、※マークを使用

どちらも、戻るボタン(キャンセルボタン)を装備

どちらもフォームの最初のページに「戻る」という文言のボタンが用意されており、押下するとトップページなどのフォーム外のページに戻るようになっています。いわゆるキャンセルボタンです。

キャンセルボタンは、EFOの観点ではデメリットはあってもとくに設置するメリットはありませんので、削除されることをおすすめします。

ng_bw snowpeak キャンセルボタン

「同意しない」を押下するとTOPページへ遷移する

「同意しない」を押下するとTOPページへ遷移する


ng_bw coleman キャンセルボタン
前のページに戻ってしまうボタン。

前のページに戻ってしまうボタン。

snowpeakにはフロー表示が

snowpeakのフォームにのみ、フロー表示が設置されていました。登録までのステップが5つと少し多めですので、スローがあることでユーザーは安心して登録を進めることができます。
いっぽうcolemanはフローが3つしかないこともあってか、フロー画像の用意はありませんでした。

ok_blue snowpeak フロー表示

フォームの開始から登録完了までの流れを簡潔に示している

フォームの開始から登録完了までの流れを簡潔に示している

いっぽう、オファーが充実していたcoleman

colemanの入力ページには、会員登録することで得られるメリットを簡潔に示したオファー表示が用意されていました。
少しオファーが大きくフォームがページ下部に追いやられているのが気になるものの、様々な魅力をアピールすることで登録への意欲を後押ししてくれています。

ok_blue coleman オファー

メリットを3つのポイントにまとめ、簡潔に表示している

メリットを3つのポイントにまとめ、簡潔に表示している

差のついたエラー表示

エラー表示はいずれも赤字で強調して表示されています。ここではさらにフォームの冒頭や赤枠で該当箇所のでザインを強調してエラー箇所を見つけやすくしているsnowpeakに軍配です。

efo_double_ring snowpeak エラー表示

フォームの上部でエラーがある旨を、該当箇所にを赤枠で強調したうえでエラー文言を表記。

フォームの上部でエラーがある旨を、該当箇所にを赤枠で強調したうえでエラー文言を表記。


soso_black coleman エラー表示
エラーのあった箇所に赤字でエラーが表示される

エラーのあった箇所に赤字でエラーが表示される

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

機能名 snowpeak coleman
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

両社とも、住所の自動入力機能を用意

いずれも郵便番号から住所を自動で入力する機能を用意していました。snowpeakがボタンを押下するタイプなのに対し、colemanはなにも押下しなくても自動で入力するようになっています。

ok_blue snowpeak 住所の自動入力機能

郵便番号を入力したあと、横のボタンを押下することで自動入力されるオーソドックスな形。

郵便番号を入力したあと、横のボタンを押下することで自動入力されるオーソドックスな形。


efo_double_ring coleman 住所の自動入力機能
何も押下しなくても勝手に住所が入力されるため、ユーザーにとってはさらに一手間省けてHAPPY

何も押下しなくても勝手に住所が入力されるため、ユーザーにとってはさらに一手間省けてHAPPY

colemanは確認ダイアログで念押し確認

colemanのフォームには、入力画面から確認画面に移動する際に下記のダイアログが表示され、とくに住所を念入りに確認するよう促しています。

ok_blue coleman 確認ダイアログ

ボタンを押下すると表示されるダイアログ。ただしエラーがあり、確認画面に進めない場合でも毎回表示される

ボタンを押下すると表示されるダイアログ。ただしエラーがあり、確認画面に進めない場合でも毎回表示される

全角と半角の縛りはゆるめ

意味のない全角や半角の縛りは極力なくし、ユーザーの負担をなくしておきたいもの。今回どちらのフォームも、フリガナの入力欄に半角で入力した場合に、フォーム側で全角に変換するようになっていました。

さらにsnowpeakのフォームでは、電話番号欄に全角入力した場合は送信時に半角に変換するようになっており、たいへん親切な設計です。

efo_double_ring snowpeak 全角と半角

snowpeakは確認画面に遷移した際にフォーマとを自動で揃えるため、フリガナも電話番号も半角全角どちらで入力して大丈夫。

snowpeakは確認画面に遷移した際にフォーマとを自動で揃えるため、フリガナも電話番号も半角全角どちらで入力して大丈夫。


ok_blue coleman 全角と半角
フリガナについては、半角で入力しても確認画面で全角に切り替わるようになっている

フリガナについては、半角で入力しても確認画面で全角に切り替わるようになっている

labelタグには注意

最後に、大変細かい点ですが気になったことが1点…。colemanのフォームでは、最後にメルマガ購読の有無を選択するラジオボタンがあるのですが、このラジオボタンがラベルをクリックできず。少し不便を感じました。

ng_bw coleman ラジオボタン

ラベル(文字部分)がクリックできないようになっていた

ラベル(文字部分)がクリックできないようになっていた

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

今回はアウトドアブランド2社のオンラインショップの会員登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

snowpeak

わかりやすいエラー表示や必須のみで構成されたフォーム項目など、ユーザビリティに配慮を感じるフォームでした。さらに使いやすく親切なフォームにするために、キャンセルボタンの削除、フォーム専用のシンプルなページレイアウトの採用、必須マークの改善などが有効でしょう。
さらにエラーをその場で判定するリアルタイムアラートなどの入力支援機能の拡充も効果的です。

coleman

素敵なオファーが簡潔に表示されており良いのですが、かなりスペースを大きくとっていますので、ページレイアウト含め配置を検討するとさらに良くなりそうです。
住所という重要な入力箇所にミスが無いように喚起するのは素晴らしいスタンスです。ただし少し表示がわかりにくいので、確認画面での表示を強調するなどの別の手法を取り入れてもいいかもしれません。
また、細かい点ですが、ラジオボタンのlabelタグの存在は、意外とフォームのユーザビリティを左右する部分です。ぜひクリックエリアを広げると良いのではないでしょうか。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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