勝手にEFO比較分析【ブックオフオンライン x ネットオフ】(宅配本買取申込みフォーム編)

読書の秋。最近は電子書籍のタイトルのも豊富になってきましたが、やはり本は紙で読みたい!という人も多いのではないでしょうか。そんな読書家にとって悩みのたねは、本の置き場所。とくに沢山の本を読む人は、ご自宅の本棚から溢れてしまうことも。

そんなときには読まなくなった本を宅配で買い取りしてくれるサービスを利用すれば、一度に沢山の本が処分でき便利ですね。本日はそんな宅配買取サービスをインターネット上で簡単に申し込める、ブックオフオンライン様運営のブックオフオンライン(http://www.bookoffonline.co.jp/)とリネットジャパングループ様運営のネットオフ(http://www.netoff.co.jp/)2社のフォームを比較分析してみたいと思います。

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

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

基本的項目の確認

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

ブックオフオンライン ネットオフ
ページ数 申込み、確認、完了の3ページ 本人確認情報、買取情報、確認、完了の4ページ
入力項目 6種 23種 ※ただし7項目にはデフォルト値あり
フロー あり あり
オファー なし なし
必須マーク あり なし
入力画面のレイアウト フォーム専用 フォーム専用

いずれも会員登録が必須

どちらも買い取りの申し込みに進む前に会員登録を案内されます。
単純に面倒に感じるだけでなく、一度しか利用するつもりのないユーザーにとって特に大きな心理的障壁となることでしょう。
登録がないと利用できない、という見せ方よりは、申し込みしながら登録できるようにするか、もしできれば登録しなくても使用できるフローを用意できると良いと思います。

△ ブックオフオンライン 会員登録

ログインと会員登録が案内される

ログインと会員登録が案内される


△ ネットオフ 会員登録
同じく、ログインか会員登録が表示される

同じく、ログインか会員登録が表示される

専用レイアウトを採用

両社とも、サイト共通のテンプレートとは別にシンプルなフォーム用のページレイアウトを用意していました。
ブックオフオンラインに比べ、ネットオフはリンクの数を最低限に抑えており、入力に集中しやすい理想的なレイアウトとなっています。

○ ブックオフオンライン レイアウト

シンプルなレイアウト

シンプルなレイアウト


◎ ネットオフ レイアウト
さらにリンクが少ないシンプルレイアウト

さらにリンクが少ないシンプルレイアウト

いずれもフローあり

どちらのフォームもフォームの上部に、今後の流れを表示するフロー画像を用意していました。
買取申し込みでは、まず申込みを送信したあと、ユーザーが郵送で商品を発送する流れとなっており、初めて使用する人にとっては馴染みのない流れ。
フローを配置しておくことで、フォーム送信後の手続きもイメージできるので非常に良い施策と言えるでしょう。

○ ブックオフオンライン フロー

フロー表示

フロー表示

○ ネットオフ フロー

フロー表示

フロー表示

必須マークは両社イマイチ

必須マークの表示方法には両社課題が見られました。
ブックオフオンラインでは、アスタリスクを必須マークとして使用しています。この形でも良いのですが、できれば「必須」と文字で表示したいところ。また「任意」の表記もあると親切です。
ネットオフでは、必須と任意に関して一切表記がなく、一度送信してみないとどこが必須項目なのかを判断することができません。
ユーザーはどこまで入力して良いのか分からず、ストレスを感じる原因になります。ぜひ必須マークを配置していただきたいですね。

△ ブックオフオンライン 必須マーク

っs

赤色の「*(アスタリスク)」で必須項目を表現しています。


☓ ネットオフ 必須マーク
必須マークは表示されていません

必須マークは表示されていません

エラー画面はネットオフに軍配

エラーでは、該当箇所にしか文言がないブックオフオンラインに対し、ネットオフは冒頭と該当箇所の両方に文言を配置しており、わかりやすい表示となっていました。

△ ブックオフオンライン

該当箇所への赤字の文言表示のみ。エラー箇所があまり目立たない気が…

該当箇所への赤字の文言表示のみ。エラー箇所があまり目立たない気が…

○ ネットオフ

冒頭にもエラー文を表示。ただし、エラーがある旨をひとこと表示してあれば良いか。 このほか、該当箇所の強調と文言表示も行っている

冒頭にもエラー文を表示。ただし、エラーがある旨をひとこと表示してあれば良いか。
このほか、該当箇所の強調と文言表示も行っている

ラジオボタン・チェックボックスのクリックエリアに注意

両社とも、ラジオボタンやチェックボックスについて、ラベル部分をクリックすることができませんでした。
(ネットオフは一部例外あり)
このことはユーザビリティを著しく低下させてしまいます。改善はlabelタグを付けるだけですのでぜひ対応いただきたいところです。

安心感を醸成していたネットオフ

ネットオフの最初のページでは、SSLのログインシールやプライバシーマークなどを表示し、ユーザーに安心を与える工夫が見られました。

◎ ネットオフ

各種マークの表示

各種マークの表示

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

機能名 ブックオフオンライン ネットオフ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

ここからは、会員登録時も含めて入力支援機能をピックアップしていきます。

住所の入力機能を導入

どちらも郵便番号から住所を自動入力する機能を設けていました。もはや必須の機能ですね。

○ ブックオフオンライン 住所の入力機能

別画面に遷移して住所を検索する機能

別画面に遷移して住所を検索する機能

○ ネットオフ 住所の入力機能

ボタンを押すと、その場で住所が入力される

ボタンを押すと、その場で住所が入力される

リアルタイムアラートはブックオフオンラインのみ実装

ブックオフオンラインには、メールアドレスの一致をその場で判定する機能がありました。

○ ブックオフオンライン リアルタイムアラート

リアルタイムアラート

リアルタイムアラート

全角と半角の自動変換対応はまちまち

全角と半角のフォーマットのしばりはできるだけ無くしておきたいところ。
両社とも対応できている点と、そうでない点が見られました。

△ ブックオフオンライン 全角と半角の自動変換

住所は全角半角どちらもOKだった

住所は全角半角どちらもOKだった

△ ネットオフ 全角と半角の自動変換

住所の番地は全角に自動変換。いっぽうで電話番号の全角入力はNG

住所の番地は全角に自動変換。いっぽうで電話番号の全角入力はNG

ネットオフのラジオボタンには工夫が

ネットオフの一部のラジオボタンには、イラストが添えられクリックしやすく工夫されているものや、選択している内容を強調し認識しやすくするといったアレンジがありました。

◎ ネットオフ ラジオボタン

ラジオボタンが押しやすい

ラジオボタンが押しやすい

選択中の内容を強調するラジオボタン

選択中の内容を強調するラジオボタン

ブックオフオンラインではフォーカス時の背景色を設定

いっぽう、ブックオフオンラインには、フォーカス中の入力欄の背景色を黄色で色付けするようになっており、今どこに入力しているかをわかりやすくする工夫が見られました。

○ ブックオフオンライン フォーカス時の背景色

フォーカス時の背景色

フォーカス時の背景色

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

今回は本の宅配買い取りサービス2社の申し込みフォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

ブックオフオンライン

ラジオボタンのラベルをクリック可能にすることは、さほど難しい改善ではありませんので、今すぐご対応いただきたいことろです。
項目数をかなり絞っているフォームは非常に好印象です。ただし、フォームの見た目が非常にシンプルなだけに、無骨な印象があります。オファーの挿入や色使いなどの変更、文字サイズや行間・余白の調整だけでもイメージががガラリとかわるのではないでしょうか。

ネットオフ

デザインはとても見やすく入力しやすいフォームだと思います。
ですが、わかりやすい必須マークの表示が最優先です。必須箇所には必須と文字で、また任意箇所にも表記があることが理想的です。
また項目数が多いので、任意の入力項目はフォームの下部などに固めて表示するとユーザーに親切でしょう。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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