勝手にEFO比較分析【Dospara x mouse computer】(パソコン通販 会員登録フォーム編)

ご自宅のパソコン選び、皆様はどうしているでしょうか。
家電量販店などでアップルやソニー、ヒューレットパッカード、富士通やパナソニックといったメーカーのパソコンを購入しているという方が一般的だと思いますが、自分で必要パーツを購入し自作する方も少なくないでしょう。

ここ数年ではBTO(Build to Order)いわゆるカスタマイズ特注という買い方も増えているようで、自分の好みに合わせた設定やスペックをブラウザ上で見積もりし、購入できるというメリットがあるようです。

今回はパソコン通販の「Dospara」(http://www.dospara.co.jp/)(以下本記事では「ドスパラ」)と同じくパソコン通販の「mouse computer」(http://www.mouse-jp.co.jp/)(以下本記事では「マウスコンピュータ」)の新規会員登録フォームを比較分析していきます。

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

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

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

いつも通り、基本項目の確認からしていきましょう。

ドスパラ マウスコンピュータ
ページ数 会員説明、会員規約、メールアドレス入力、メール送信完了、登録開始、登録、確認、登録完了の8ページ お客様情報の入力、登録内容の確認、受付完了の3ページ
入力項目 16種 16種
必須項目入力欄の数 12項目 13項目
フロー あり なし
オファー あり なし
必須マーク あり(「*必須」文字表示) あり(「必須」欄表示)
送信ボタンのサイズ 幅225px × 高さ54px 幅56px × 高さ19px
入力画面のレイアウト 他ページと共通 他ページと共通

項目種類は同数。どちらも必須項目を絞っています。

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

レイアウト、デザイン

ドスパラ、マウスコンピュータ共に、シンプルな配色と小さめの入力欄で情報をコンパクトに収めています。
ただしいずれも他ページと共通のグローバルナビがついたままになっている点は気になります。

ok_blue ドスパラ ページレイアウト

フォントサイズ、入力欄は若干小さめです。

しかし配色とマージンの調整で情報が詰まり過ぎている印象は受けません。
視認性や可読性は十分だと言えます。

うまくマージン調整がなされたフォーム。

うまくマージン調整がなされたフォーム。

ok_blue マウスコンピュータ ページレイアウト

こちらも同じくコンパクトさに重点を置いた作りになっています。

小さくまとまったフォーム。

小さくまとまったフォーム。

フォームタイトルの見やすさ

分かりやすいフォームタイトルはユーザーの安心感につながります。
フォントサイズや装飾などで他の項目見出しとの強弱を付け「今、何のフォームに入力しているのか」を明確にしてあげましょう。

efo_double_ring ドスパラ フォームタイトル

ドスパラはブランドカラーに近い派手なシアンを帯に使い、白抜きでタイトルです。
さらにその下には大きめのサイズでしっかりと詳細タイトルを表記し、メリハリのある分かりやすいフォームタイトルを使っています。

強弱がついていて分かりやすいです。

強弱がついていて分かりやすいです。

efo_double_ring マウスコンピュータ フォームタイトル

マウスコンピュータもブランドカラーに近いオレンジを選択。
グレーの帯に白とオレンジを組み合わせたフォントを使っています。アイコンで分かりやすいマーキングもされていて良いですね。

アイコンと大きなフォントサイズで分かりやすいです。

アイコンと大きなフォントサイズで分かりやすいです。

必須マークの有無

・「必須」文字を使っている
・色背景を使った四角いマーク
・先頭に配置
・冒頭にマークに関する注記を表示

以上が理想的な必須マークです。

soso_black ドスパラ 必須マーク

ドスパラは「*必須」という文字を赤い配色で使用しています。
文字だけでは印象が薄いので、お手本の様なマーク形式にしましょう。

文字だけでは印象が薄いです。

文字だけでは印象が薄いです。

ok_blue マウスコンピュータ 必須マーク

一方マウスコンピュータは必須項目を上部にまとめ、マークではなく、表形式にしています。
必須がまとまって配置されているのは非常に良いですね。もう少し「必須」の表示が目立っているとさらにGoodです。

表形式になっています。

表形式になっています。

フローの有無

ドスパラはかなり控えめなフローを使っています。

対して、マウスコンピュータにフローはありません。

soso_black ドスパラ フロー

もう少し凝ったフローでも良いかもしれません。

もう少し凝ったフローでも良いかもしれません。

ng_bw マウスコンピュータ フロー

フローはユーザーにとってみればサイト内での現在地を表してくれる地図の様なものです。
たとえ短いフォームであったとしても用意してあげた方が親切です。

メールマガジンのオファー

ドスパラは会員説明という専用ページをフォーム遷移の1ページ目に持ってきており、そこで分かりやすく説明があります。また、入力ページでも配信の際のサービス特典の説明を短くまとめ、記載しています。

一方、マウスコンピュータには説明がありません。

efo_double_ring ドスパラ オファー

専用ページで分かりやすいですね。

専用ページで分かりやすいですね。

ng_bw マウスコンピュータ オファー

登録するメールアドレスにどういった情報が届くのか定かではなく、ユーザーを不安にさせてしまうことがありますので
短い文言でも良いのでメール内容と、受信の有無のチェックボックスを用意してあげることを強くお奨めします。

送信ボタン

送信ボタンは必ず右に。
また、フォントは大きくし、「内容を確認する」「次のステップへ」などの分かりやすい文言を使って着実にユーザーを誘導してあげましょう。

「戻る」「キャンセル」「リセット」ボタンは間違って押してしまった時、ユーザーのストレスを大きく上昇させます。
また、離脱にもつながりかねない要素なので出来れば削除することをお奨めします。
やむを得なく設置する場合には、必ず左に配置する、送信ボタンより小さくする、地味な配色にするなどの工夫で誤押下を防ぐ必要があります。

ok_blue ドスパラ 送信ボタン

ボタン自体が大きめで分かりやすいです。
しかしこの場合、戻るボタンの配色をグレーにするなどして送信ボタンの方を目立たせて上げたほうが良いかもしれません。

大きく内容も明確です。

大きく内容も明確です。

ng_bw マウスコンピュータ 送信ボタン

フォームデフォルトの送信ボタンを使っているので非常に小さいです。
また、「戻る」を右に配置しているので、「進む」つもりで誤押下してしまう可能性が高いです。
削除することをお奨めしますが、まずは配置を逆にして、大きいボタンを使用しましょう。

少し残念な送信ボタンです。

少し残念な送信ボタンです。

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

機能名 ドスパラ マウスコンピュータ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

入力支援機能の有無

ユーザーのモチベーションを大きく向上させてくれるのが入力支援機能です。
ガイドやアラート表示などをリアルタイムで更新し、サポートすることでユーザーの疑問を消化し、テンポの良い入力環境を作りましょう。

どちらも少し残念だったエラー画面

どちらもエラー注記を箇条書きでリスト表示してしまい圧迫感があります。
これではユーザーにストレスを与えてしまう恐れがあるので、改善が必要です。

上部には一言メッセージのみにし、エラー箇所にそれぞれ注記を表示させ背景色を変えるなどするとエラー画面でも見やすいレイアウトを保つことができます。

soso_black ドスパラ エラー画面

リスト状の圧迫感のあるエラー表示。

リスト状の圧迫感のあるエラー表示。

soso_black マウスコンピュータ エラー画面

同様に上部のエラーリストが残念です。

同様に上部のエラーリストが残念です。

キャプチャ(画像認証)の長所短所

ドスパラでは入力項目にキャプチャを用意しています。

soso_black ドスパラ キャプチャ

スパムを除外してくれる優れ物ではありますが、フォームの入力完了率にはあまりいい影響を与えません。

スパム対策でよく使用されます。

スパム対策でよく使用されます。

ロボットが解読できない様に文字を見えにくくする処理がされた画像は、我々人間からしてもスムーズな解読はできません。

画像の文字がわかりづらくイライラした経験をお持ちの方も多いのではないでしょうか。

入力ミスでエラー画面になり、まったく違った画像がリロードさせる、なんてこともよくありますね。

その時ユーザーが感じるストレスはかなり大きいものですし、それをきっかけに離脱してしまうことも消して少なくはありません。

とはいうものの、スパム対策を考え、やむを得なく使用する場合もあることでしょう。

そういった場合には、当ブログで以前にご紹介した記事をご参考頂ければ、よりユーザーに優しいフォーム設計を行えると思います。

海外EFO情報: CAPTCHA(画像認証)を使うべきでない理由と、ストレスを軽減する10の方法
https://f-tra.jp/blog/overseas/4683

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

今回はパソコン通販サイトの会員登録フォームについて分析を行いました。
それではいつも通り、最後に勝手なアドバイスをして締めくくります。

ドスパラ

キャプチャに要注意。入力支援機能の導入でさらに使いやすく

画像認証はスパムを抑制する一方で、離脱率が上がります。
ユーザーの入力には関係のないスパム対策を用いるなどして改善できます。

基本的には使いやすく親切な設定となっています。複数項目をまとめたり、グローバルナビの削除などでさらに使いやすいフォームへと磨きをかけていきたいですね。
また、入力支援機能の導入でより親切な設計になると思います。

マウスコンピュータ

フロー設置や入力支援機能の導入でユーザーに優しいフォームへ

まずはフローの設置です。
イラストなどを用いメリハリのあるフローを用意することでユーザーも安心して入力に集中できるようになります。

次に送信ボタンです。
デフォルトのボタンを利用しているのでとにかくサイズが小さく控えめな印象です。
送信ボタン用のイメージを作り、正しく配置することで離脱率を少しでも下げましょう。

また、親切なフォームを考えていく上で入力支援機能は必要不可欠です。

入力支援機能を導入していくことでよりユーザーに優しいフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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