勝手にEFO比較分析【バンフー x グラフィック】（印刷サービス 会員登録フォーム編）

ビジネスシーンやウェディング、自費出版や郵便、包装、シールにPOP、ノベルティと様々なシーンで必要となる印刷物。
実店舗に出向いたり電話で頼む方法もありますが、今はインターネットから注文する人が多いのではないでしょうか。

今回は印刷通販会社の「株式会社帆風」（http://www.vanfu.co.jp/）（以下本記事では「バンフー」）と同じく印刷通販を行っている「株式会社グラフィック」（http://www.graphic.jp/）（以下本記事では「グラフィック」）の新規会員登録フォームを比較分析していきます。

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

基本的項目の確認

それでは今回も基本項目の確認から行っていきましょう。

	バンフー	グラフィック
ページ数	お客様情報の入力、入力内容の確認、登録完了の３ページ	アカウント情報の入力、入力内容の確認、本登録メール送信、アカウント登録完了の４ページ
入力項目	31種	21種
必須項目入力欄の数	18項目	17項目
フロー	なし	あり
オファー	あり	あり
必須マーク	あり（「必須」マーク表示）	あり（「必須」文字表示）
送信ボタンのサイズ	幅212px × 高さ40px	幅189px × 高さ40px
入力画面のレイアウト	他ページと共通	他ページと共通

入力種類、必須項目ともにどちらも数が多い印象を受けますね。

また、ユーザーの使用感を重視してフォントや入力欄などのサイズを大きく調整したバンフーに対し、グラフィックでは全体的に小さく調整を行いコンパクトに収めようしています。

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

ページレイアウト

バンフーは全体的にパーツが大きく、視認性を重視しています。
しかし、その分画面は長くなってしまっています。

一方、グラフィックは各要素のサイズを小さく設定し、コンパクトにまとめています。
若干文字情報が詰まりすぎている印象を受けます。

バンフー ページレイアウト

フォントが詰まりすぎていなく、とても見やすい印象です。
ラベルの白抜き文字も見やすくてよいですね。

また、入力欄に関してもマージンを大きく取っているので入力しやすくなっています。

グラフィック ページレイアウト

ヘッダーやサイドナビゲーションなど一貫して統一されたデザインと配色です。

フォントを細かくし、余白を抑えることで、コンパクトにまとめています。
しかし、若干詰まりすぎかな、という印象を受けます。

デザインの違いがでた必須マーク

どちらも目立つ「必須」の文字を使用しています。

バンフー 必須マーク

「必須」文字を使ったわかりやすいマーキングです。
配色も背景のブルーと対照的な柔らかい赤を使用し、視線誘導効果が高いです。

冒頭に説明があれば尚よかったと思います。

グラフィック 必須マーク

必須と任意の色分けが明快です。
すべての項目にどちらかのマークが付いているのでとても分かりやすいですね。

オファー表示の有無

オファー表示はどちらも別ページに用意してありました。

バンフー オファーの表示

バンフーでは新規会員登録の流入ページにオファーを表示しています。
アイコンと大きめの説明キャッチで分かりやすいです。

グラフィック オファーの表示

こちらは完全に別ページを用意。オファー内容をランディングページで表示しています。

フローやバッジ表示で与えられる安心感

まずはフローから。
グラフィックはフローを設置。アイコンを使い目を引くデザインになっています。

遷移数が少ないとフローを設置しないフォームも少なくないですが、やはりフローがあるだけで安心感は高まりますね。

グラフィック フロー

次に注目したいのはバッジ表示。
セキュリティに関するバッジや個人情報に関する言及を表示することでユーザーの安心感が高まります。

バンフー バッジの表示

プライバシーマーク、SSLセキュリティのバッジを合わせて表記。
しかし、設置場所はサイドナビゲーションのかなり下部に位置し、普通にフォームを進めただけでは閲覧できない位置にあります。
これではせっかくのバッジ表示も形式上の設置となり、あまり効果がありません。

グラフィック バッジの表示

送信ボタン前でのバッジ表示。
また、個人情報保護方針の表示と同意を求めるチェックボックスの設置。
個人情報を送信するタイミングでこの二つが見える場所にあると、安心してボタンを押せます。

エラー画面の有無

冒頭にメッセージがあり、エラー箇所にも分かりやすい配色で注記というのがお手本です。

バンフーは冒頭にメッセージがありませんでした。エラー個所に強い配色で注記があり、気が付かないことはありませんが、少し不親切です。

バンフー エラー画面

対してグラフィックは冒頭のメッセージしかありませんでした。
エラー個所になんらかの注記や配色の変更がなければ、どこが間違いだったのかが伝わりにくいです。
さらにいうと冒頭にエラーメッセージが並び、リスト上になるのはあまりお勧めできません。
人間にとっての危険色である赤色がたくさん並んでしまうと、ユーザーへのストレスが強いためです。
メッセージは「入力エラーをご確認ください」などと一言にとどめ、各注記はエラー個所付近に添えてあげましょう。

グラフィック エラー画面

トレンドのチャットサポート

バンフーではトレンドになりつつあるチャットサポート機能を実装しています。
これはチャットで直接カスタマーセンターのスタッフからサポートを受けられるもので、ここ1～2年で取り入れる企業が増えてきています。

バンフー チャットサポート

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

機能名	バンフー	グラフィック
ガイド 未入力の残り必須項目数などをリアルタイムで表示する機能	なし	なし
離脱ブロック ページを閉じようとするとアラートを出してOKしないと閉じることができない機能	なし	なし
サブミットブロック 送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能	なし	あり
項目ごとのアラート表示 入力についての説明をリアルタイム表示する機能	フォーカス時：なし エラー時：あり	フォーカス時：なし エラー時：なし
項目ごとに入力完了後の動作	なし	なし

バンフーでは「ふりがな自動入力」「リアルタイムアラート」「住所自動入力」
グラフィックでは「サブミットブロック」「住所自動入力」
と、両社ともに入力支援機能の実装を積極的に行っています。

入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。今後ともさらなる機能の拡充に期待が持てそうですね。

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

親切さに差が出る、ふりがな自動入力機能

本機能は名前や会社名などを入力する際、別の入力欄に自動的にふりがなが入力がされるという親切な機能です。

バンフーでは採用されている一方で、グラフィックでは実装していませんでした。

バンフー ふりがな自動入力機能

4つの入力項目が2回の入力で完了し、手間が省けます。
こういった「ちょっとした便利さ」でユーザーのモチベーションを維持していきたいですね。

どちらも採用、住所自動入力機能

入力支援機能の中でもスタンダードになりつつあるのが、この住所自動入力という機能です。
一番親切なのは、郵便番号を入力した時点で住所が自動入力されるタイプです。

バンフーは自動入力ボタンを実装しています。
郵便番号を入力後、ボタンを押すことで別の入力欄に住所を自動入力することができます。

バンフー 住所自動入力

グラフィックも同じくボタンでの自動入力を採用。
こちらは7桁で入力項目を1つにまとめています。

グラフィック 住所自動入力

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

今回は印刷通販を行う企業2サイトの新規会員登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

バンフー

フローの設置と入力支援機能の拡充でさらに親切なフォームに

基本的な項目の改善としてフローの設置は最優先です。
シンプルなものでもよいので設置してあげると、分かりやすくなると思います。

また、ガイド機能やサブミットブロック、入力成功サインといった入力支援機能の拡充でより親切なフォームになると思います。

グラフィック

フォントとマージンの調整、入力支援機能の拡充が改善のカギ

気になったのはフォントサイズとマージン。全体的に一回り大きくすることをお奨めします。

最近ではディスプレイ技術が向上し、画面がどんどん大きくなってきています。
それにより、サイトにおいてファーストビューを意識するという概念も薄くなってきている傾向にあります。
よって、コンパクトさよりもユーザーにとっての見やすさ、わかりやすさを優先すべきだと思います。

また、ガイド機能や吹き出し機能、ふりがな自動入力といった機能を拡充する事で利便性が上がり、さらにわかりやすいフォームになると思います。