勝手にEFO比較分析【MoMA x Francfranc】(雑貨通販サービス 会員登録フォーム編)

今夜はクリスマス・イヴですね。

夜の街並みはクリスマスカラーできらびやかに彩られ、楽しげな音楽で盛り上がりを見せます。

仕事終わりに仲間内でパーティをしたり、普段よりちょっと豪華な食事を楽しむという方も多いのではないでしょうか。

さて、クリスマスといえばやはりプレゼントです。

今回はプレゼントに最適な雑貨や、インテリアを扱う雑貨通販サービスを行っている「MoMA STORE」(http://www.momastore.jp/)(以下本記事では「MoMA」)と「Francfranc」(http://www.francfranc.com/shop/)(以下本記事では「Francfranc」)を比較分析していきます。

「MoMA」は商品購入ごとの3%ポイントバックや定期的なweb会員限定セール、「Francfranc」はお得なクーポンのお知らせやメンバーズ限定のシークレットセール、といようにどちらも会員特典が充実しています。

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

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

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

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

MoMA Francfranc
ページ数 お客様情報入力と規約、確認、完了の3ページ 利用規約、お客様情報入力、確認、完了の4ページ
入力項目 7項目 9項目
必須項目入力欄の数 4項目 8項目
フロー なし あり
オファー あり あり
必須マーク あり(「必須」文字だが控えめ) あり(「※」で控えめ)
送信ボタンのサイズ 幅253px × 高さ40px 幅288px × 高さ35px
入力画面のレイアウト 他ページと共通 他ページと共通

入力項目の内容の違いはほぼ見られず、お気に入り店舗の登録とお客様IDの登録の有無の差くらいでした。
また、ともに会員登録の時点では住所入力項目はなく、初期購入時に登録させる仕組みです。

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

ストレスの少ない項目数

どちらも厳選された項目数です。ストレスを感じさせないように作られていますね。

efo_double_ring MoMA ページレイアウト

真っ先に目に付くのが「新規Web会員登録」の文字。
このフォームが何のためのフォームなのか一目瞭然です。
また会員サービスをまとめることで「この登録をするとどんな結果に結びつくのか」がユーザーにわかりやすくなっています。

シンプルな見出しでわかり易いフォーム。

シンプルな見出しでわかり易いフォーム。

soso_black Francfranc ページレイアウト

まず見て気がつくのがデザインのシンプルさです。しかし「メンバーズ登録」の文字が控えめすぎて何のフォームなのか気がつきにくいところとフォントのサイズが極端に小さいことが少し残念ですね。

関連した情報が散らばっており、ややわかりにくいです。

関連した情報が散らばっており、ややわかりにくいです。

必須マークはともにあり

必須マークはMoMAが「※必須」、Francfrancが「※」でどちらも赤色の文字のみ。
とても控えめな印象を受けます。

お手本は冒頭でマークの説明をいれ、四角い色背景に「必須」と書かれた状態。
必須項目の枠に色をつけるのも効果的です。

soso_black MoMA 必須マーク

冒頭での説明もなく控えめな印象ですね。

冒頭での説明もなく控えめな印象ですね。

soso_black Francfranc 必須マーク

こちらは※のみでもっと控えめな印象を受けます。

こちらは※のみでもっと控えめな印象を受けます。

フローの有無

どのページでもフローを置いていないMoMAに対し、Francfrancでは初期表示ページにフローを設置しています。

ページ遷移の少ないフォームにフローが無いのはありがちなことですが「これからどういう流れで登録が終わるのか」また「登録後はどうなるのか」がわかっているとユーザーも安心感して入力をしようと思うのではないでしょうか。

ok_blue Francfranc フロー

初期ページにフローがあると安心できますね。

初期ページにフローがあると安心できますね。

オファー文の表示

どちらのページもメールマガジンの配信に関するオファー文を表示させていますが、表示しているページが異なっています。

入力項目内に1行で簡潔に記載したMoMAに対し、Francfrancは初期ページでのみ説明しています。

初期ページで大きくスペースを取り、イラストを入れて説明するのはわかりやすくて結構なことですが、入力項目でメールマガジン受信の有無が選択できないのは不安につながる恐れがあります。

ok_blue MoMA オファー

短い文章で簡潔に収まっています。

短い文章で簡潔に収まっています。

ok_blue Francfranc オファー

初期ページで詳しく説明を行っています。

初期ページで詳しく説明を行っています。

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

MoMA Francfranc
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:あり

フォーカス時:なし

エラー時:なし

項目ごとに入力完了後の動作 必須マークが消える なし

入力支援機能の有無

支援機能はMoMAのリアルタイムアラートとサブミットブロックのみとなりました。

ok_blue MoMA リアルタイムアラート

ラベル(項目名)の横に注記を表示させています。

リアルタイムアラート。必須や入力形式をその場でチェックしてくれます。

リアルタイムアラート。必須や入力形式をその場でチェックしてくれます。

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

今回は雑貨通販サービスの会員登録フォームについて分析を行いましたが、いつも通り、最後に勝手なアドバイスで締めくくりたいと思います。

MoMA

フローの設置と入力支援機能の拡充でより使いやすいフォームに。

入力項目については◎。とても厳選されていてシンプルです。

必須マークに関しては四角い色背景を用いて表記してあげるともっと認識しやすくなるのではないでしょうか。

フロー設置はぜひご検討ください。ユーザーに安心感を与え、入力に対するモチベーションを上げることが出来ると思います。

また、入力支援機能の拡充もお奨めします。ガイドや入力完了後にチェックマークなどを表示させることで、ユーザーにより優しい設計になりますね。

Francfranc

情報のグループ化と入力支援機能の導入をお奨めします。

入力項目のシンプルさはいいですが、フォントサイズをもう少し上げるとより認識しやすくなると思います。

フロー設置は初期ページのみですが、全ページに簡易版フローを設置するのも良いでしょう。

また、何も見出しがない状態なので、散らばっている項目をグループでまとめましょう。
生年月日やお気に入り店舗は「お客様情報」、お客様IDやメールアドレス、パスワードを「ログイン情報」などにしてあげると入力もしやすくなりますね。

今後はぜひともガイドや離脱ブロックといった入力支援機能を導入してください。
親切さは格段にあがります。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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