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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アスクル 必須マーク

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

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

たのめーる 必須マーク

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

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

どちらもフローあり

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

アスクル フロー

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

たのめーる フロー

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

キャンセルボタンに注意

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

アスクル ボタン

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

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

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

アスクル オプトイン

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

たのめーる オプトイン

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

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

入力支援機能の有無

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

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

リアルタイムアラート

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

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

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

エラー画面

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

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

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

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

アスクル エラー画面

ユニークなエラー表示。

たのめーる エラー画面

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

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

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

アスクル

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

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

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

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

たのめーる

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

気になったのは項目数。

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

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

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