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

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

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

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

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

基本的項目の確認

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

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

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

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

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

ページレイアウト

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

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

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

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

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

大きい文字でわかりやすいフォームになっています。

大きい文字でわかりやすいフォームになっています。

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

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

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

コンパクトではあるが、フォントサイズが全体的に小さい。

コンパクトではあるが、フォントサイズが全体的に小さい。

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

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

efo_double_ring バンフー 必須マーク

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

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

背景のブルーと対照的な目立つ色合いを採用しています。

背景のブルーと対照的な目立つ色合いを採用しています。

ok_blue グラフィック 必須マーク

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

マークになっていたら完璧でした。

マークになっていたら完璧でした。

オファー表示の有無

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

ok_blue バンフー オファーの表示

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

キャッチが大きくてわかりやすいです。

キャッチが大きくてわかりやすいです。

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

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

写真などを大きく使い、気軽に購入できるイメージが沸きますね。

写真などを大きく使い、気軽に購入できるイメージが沸きますね。

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

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

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

efo_double_ring グラフィック フロー

アイコンとシンプルな文言でわかりやすい。

アイコンとシンプルな文言でわかりやすい。

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

soso_black バンフー バッジの表示

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

サイト下部に設置してあり、効果が薄い。

サイト下部に設置してあり、効果が薄い。

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

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

安心感が高まります。

安心感が高まります。

エラー画面の有無

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

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

soso_black バンフー エラー画面

冒頭にメッセージがない。

冒頭にメッセージがない。

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

ng_bw グラフィック エラー画面

エラーがリスト上になり圧迫感がある。

エラーがリスト上になり圧迫感がある。

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

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

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

画面下部にボタンを表示。

画面下部にボタンを表示。

専用画面で直接スタッフとチャットができ、ユーザーの不安を取り除くことができます。

専用画面で直接スタッフとチャットができ、ユーザーの不安を取り除くことができます。

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

機能名 バンフー グラフィック
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:あり

フォーカス時:なし

エラー時:なし

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

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

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

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

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

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

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

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

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

特別「すごい便利」とは感じにくいですが、ないと「なんか不便」な機能です。

特別「すごい便利」とは感じにくいですが、ないと「なんか不便」な機能です。

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

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

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

ok_blue バンフー 住所自動入力

ボタンを押すことで自動入力される。

ボタンを押すことで自動入力される。

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

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

スタンダードな入力形式。

スタンダードな入力形式。

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

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

バンフー

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

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

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

グラフィック

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

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

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

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

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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