勝手にEFO比較分析【ASKUL x たのめーる】(オフィス用品通販サービス 登録フォーム編)

日頃から何気なく使っているオフィス用品ですが、皆さんどこで購入していますか。
自分専用のモノに関しては独特なデザインにこだわりを持つ方も多いと思います。

ですが、ファイルやペンなどの筆記用具、ティッシュなどの掃除用具、印刷に必要な専用用紙、といった消耗品は法人向けのオフィス用品カタログなどでまとめて注文するのが一般的ですよね。

昨今ではカタログ注文だけでなくインターネットからの発注もできるようになり、その利便性の高さからサイトからの注文を利用している企業も多いのではないでしょうか。

今回はオフィス・現場用品通販の「ASKUL」(http://www.askul.co.jp/)(以下本記事では「アスクル」)と同じくオフィス用品通販の「たのめーる」(https://www.tanomail.com/)(以下本記事では「たのめーる」)の新規会員登録フォームを比較分析していきます。

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

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

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

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

アスクル たのめーる
ページ数 お客様情報の入力、ご登録内容の確認、ご登録お申込完了の3ページ お客様情報の入力、登録内容の確認、受付完了の3ページ
入力項目 17種 32種
必須項目入力欄の数 15項目 15項目
フロー あり あり
オファー あり あり
必須マーク あり(「必須」文字表示) あり(「必須」マーク表示)
送信ボタンのサイズ 幅280px × 高さ51px 幅167px × 高さ43px
入力画面のレイアウト 他ページと共通 他ページと共通

入力項目種類ではたのめーるがアスクルの約2倍となり、かなり項目数が多い印象を受けました。

また、配色はシンプルですが行間や入力欄の大きさ、マージンの取り方などに違いが出ています。

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

カラム数とマージンの取り方で印象に違いあり

説明用のカラムを用意した構成にし、小さめのフォントサイズで情報をぎゅっと収めているアスクル。
いっぽうでフォントと入力欄のサイズを大きめにし、ゆとりある余白で見やすさに重点を置いた、たのめーる。
どちらも項目を整理し、入力項目を区分けすることで、ストレスを軽減しようとする工夫が感じ取れます。

ただし気になったのはページレイアウト。いずれもサイト共通のヘッダー/フッターがついたままとなっています。

ok_blue アスクル ページレイアウト

各項目に丁寧な説明を設け、フォーム内でユーザーの疑問をできるだけ解消しようと試みています。
また、入力内容をジャンルごとに整理し特徴的な見出しをつけてあげることで「今どういった内容を入力しているのか」が分かりやすくなっています。

しかし、フォントサイズや行間が小さいために、情報が詰まり過ぎていて少し読み辛さを感じました。余白やフォントを調整して視認性と可読性を上げていきたいですね。

丁寧な説明と特徴的な見出しで分かりやすいフォーム。

丁寧な説明と特徴的な見出しで分かりやすいフォーム。

ok_blue たのめーる ページレイアウト

フォントと余白を大きくとることで、読みやすさ・入力しやすさに重点を置いています。
本来フォームはできるだけ縦長にならないように収めるのが好ましいものの、入力の心地よさを考慮するとその限りではないということを感じさせてくれます。

ただしページ上部ににナビゲーション類が多く、ディスプレイサイズによってはファーストビュー内に1つ目の項目が収まらない場合がありそうな点は気になります。

視認性、可読性が高く読みやすいフォーム。

視認性、可読性が高く読みやすいフォーム。

必須マークは両社ともあり

お手本は「必須」文字を使い、色背景を敷くなどして目立たせた状態です。

soso_black アスクル 必須マーク

アスクルは入力項目の表部分に専用の列を設け、必須と任意を文字で表記しています。
文字だけでは印象が薄いので、色背景をしいたアイコンのような形にするとより目立たせることができます。
ただしアスクルではマークだけでなく、必須項目のみ背景色をピンク色に変化させていることから、どこが必須なにかが一目瞭然でした。

専用列を設けていますが、少し印象が薄いです。

専用列を設けていますが、少し印象が薄いです。

ok_blue たのめーる 必須マーク

一方たのめーるはお手本のような必須マークを使用しています。
ただ入力欄の背景色が任意項目と変わらないので、必須項目のみ目立つ色に変えてあげると、より入力しやすくなると思います。

お手本のような必須マークです。

お手本のような必須マークです。

どちらもフローあり

いずれもフロー画像を配置しており、現在地が明確になるような工夫がされていました。
アスクルはかなりシンプルなフローです。
対して、たのめーるはイラストなどの装飾を利用した目立つフローになっています。

soso_black アスクル フロー

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

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

ok_blue たのめーる フロー

イラストを使って安心感を出しています。

イラストを使って安心感を出しています。

キャンセルボタンに注意

今回アスクルのボタンには、前のページに戻るボタン(=キャンセルボタン)が搭載されていました。
デメリットはあれどもとくにメリットはないこのキャンセルボタン。できればすぐにでも外されることをおすすめします。

ng_bw アスクル ボタン

「同意しない」を選択すると前のページに戻ってしまう

「同意しない」を選択すると前のページに戻ってしまう

両社ともオプトイン項目あり

いずれのフォームもメールマガジンのオプトイン項目を設けていました。
アスクルは一見シンプルにまとめていますが、説明分が長く少し読みづらいです。
一方、たのめーるは複数あるメールマガジンを項目分けし、分かりやすくまとめています。

soso_black アスクル オプトイン

右側の説明文が長く、文字も細かいので読みづらい印象を受けます。

右側の説明文が長く、文字も細かいので読みづらい印象を受けます。

ok_blue たのめーる オプトイン

イラスト等も使い、分かりやすく説明しています。

イラスト等も使い、分かりやすく説明しています。

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

機能名 アスクル たのめーる
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なしエラー時:あり フォーカス時:なしエラー時:なし
項目ごとに入力完了後の動作 ピンク背景から白背景へ なし

入力支援機能の有無

ユーザーの操作にあわせてリアルタイムで動作する機能はアスクルのリアルタイムアラート機能のみ。住所自動入力機能はどちらも実装していました。

入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。
ぜひ今すぐにでも入力支援機能の導入・拡充をご検討いただきたいですね。

リアルタイムアラート

アスクルのフォームには搭載されていたリアルタイムアラート。
項目が多いフォームほど、あとからエラーが出るとうんざりするもの。起こしたエラーはその直後にアラートされたほうが気が楽です。

ok_blue アスクル リアルタイムアラート

エラーを出したそばから知らせてくれるアラートは、とくに項目の多いフォームでは効果を発揮

エラーを出したそばから知らせてくれるアラートは、とくに項目の多いフォームでは効果を発揮

エラー画面

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

ですがアスクルはユニークなエラー表示方法を使用しています。
送信時にエラーがある場合、送信ボタンの上部に専用吹き出しを設け、エラーを箇条書きで注記するという方法です。
注記部分がリンクになっていて、クリックでエラー項目がフォーカスされます。

一方たのめーるでは、冒頭でエラー注記を箇条書きリンクにし、クリックでエラー箇所へ遷移させる形式をとっています。エラー箇所にも注記があって丁寧ですね。

しかし、エラーが多い場合に冒頭にエラー文言がズラーっと並んでいる姿は、ユーザーをうんざりさせて離脱へ向かわせてしまう危険性が。
上部には一言メッセージのみにし、エラー箇所の背景色を変えるなどすると、エラー画面でもいっそう見やすいレイアウトを保つことができます。

ok_blue アスクル エラー画面

ユニークなエラー表示。

ユニークなエラー表示。

soso_black たのめーる エラー画面

冒頭のエラー表示箇条書きが圧迫感を出してしまいます。

冒頭のエラー表示箇条書きが圧迫感を出してしまいます。

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

今回はオフィス用品通販サイトの会員登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

アスクル

文字間、フォントカラーの調整と入力支援機能の拡充を

今のままではサイドエリアと説明部分の文章が読み辛いです。
文字間を広げる・フォントサイズや色を変えるだけでも大きく改善が期待できそうです。

そして、ユーザーの離脱を助長してしまうキャンセルボタンは今すぐ外すことをおすすめします。

また、現状の入力支援機能はリアルタイムアラートと住所自動入力のみです。機能を拡充することで、より親切な設計になると思います。

たのめーる

項目数の見直しと入力支援機能の導入をお奨めします

気になったのは項目数。

30種類前後の項目数があるので、ガイド機能などが無いとユーザーは「いつ終わるんだ・・・」という気になってしまいますよね。
また、フォームを入力する前に「どのくらい項目があるのだろう」と、一通り画面をスクロールするユーザーも少なくありません。入力項目が多いというだけで離脱につながる可能性は増えてしまいます。

改めて項目を見直し、任意項目数を出来るだけ抑えていただきたいですね。
難しい場合、余計なナビゲーションを削除するだけでもかなり画面がすっきりすると思います。

また、親切なフォームを考えていく上で入力支援機能は必要不可欠です。
ガイドや背景色、リアルタイムアラートなどの入力支援機能を導入していくことで、よりユーザーに優しいフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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