勝手にEFO比較分析【クロネコヤマト x 佐川急便】(宅急便WEBサービス 会員登録編)

やってきました「勝手にEFO比較分析」。

インターネットや深夜のテレビ通販、ネットオークションなど、自宅にいながら手軽に何でも買える昨今。購入した品物をおうちに届けてくれる宅配業者さんはとってもありがたい存在です。大手宅配業者様のサイトでWeb会員になると集荷や受け取りに便利なサービスが受けられるとのこと。今回は、大手宅配業者様の会員登録フォームを対象にお届けいたします。

題材は、ヤマト運輸株式会社様(http://www.kuronekoyamato.co.jp/)(以下、本記事ではヤマト運輸)と佐川急便株式会社様(http://www.sagawa-exp.co.jp/)(以下、佐川急便)をセレクトさせていただきました。
※以下、サイト名の敬称は省略させていただきます。

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

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

まずはEFO基本項目の確認です。

ヤマト運輸 佐川急便
ページ数 メールアドレス・パスワードの入力、仮登録完了、お客様情報入力、サービス利用登録、入力内容確認、本登録完了の5つ メールアドレス入力、利用規約、お客様情報ご登録、各種メール通知サービス設定、アンケート、ご登録内容確認の6つ
入力項目の種類 12種類 35種類
必須項目入力欄の数 16個 24個
フロー あり なし
オファー なし なし
必須マーク オレンジで「必須」マーク 赤で「必須」マーク
メルマガ購読 あり あり
利用規約、
プライバシーポリシー
メールアドレス・パスワード入力画面内にあり お客様情報ご登録画面の前にあり
送信ボタンのサイズ 幅58px x 高さ28px 幅98px x 高さ29px
入力画面のレイアウト 専用ページ 専用ページ
入力ページへの遷移 メールアドレス登録後にメール内のリンクから入力画面に遷移 メールアドレス登録後にメール内のリンクから入力画面に遷移

どちらもまず、メールアドレスで本人確認

まず、フォーム遷移に着目しますと、どちらの場合も、一旦メールアドレスを送信して、受信したメール内のリンクからその先の入力ページに進む、本人確認が必要なタイプのフォームです。宅配業者にとっては荷物を届けるための本人確認、および後述の住所入力はフォームにおいて最も重要な情報のため、当然の対応と言えるでしょう。

ヤマト運輸
メールアドレスの入力から開始。フローをちゃんと用意。
20140411_y_mail
佐川急便
こちらもメールアドレスの入力から開始。
20140411_s_mail

重要な住所入力欄。さすがに住所入力機能は用意されていた

大切なお届け物を正確にお届けするため、住所入力は最重要項目になりますね。
まず両社とも郵便番号から住所を自動入力できるボタンがあるのは良いです。両社とも住所が自動入力された後、番地を入力する欄にカーソルが移動されているのでスムーズに入力できます。

ヤマト運輸は郵便番号が分からない場合の住所選択画面へのリンクが用意されており親切です。また、郵便番号を打ち込むと住所入力欄が出現する形で、すっきりしていて良いと思います。

ヤマト運輸
ページ表示時の状態。
20140411_y_address

郵便番号を入力すると、入力欄が表示される。
20140411_y_address2
佐川急便
郵便番号入力後の住所自動入力機能はあり。
20140411_s_address

ともにヘッダー・フッターにリンクを作らないことで離脱防止

両社とも、余分なリンクのないヘッダー・フッターを使用されていました。以前もお伝えしましたが、サイトとヘッダーフッダーを共通にしているものが一番多く、その他のリンクや情報から途中離脱につながってしまう仕様のものをよく見かけます。ユーザーに入力に集中してもらうことが大切です。

エラー表示はどちらもまとめて表示、カーソルで佐川急便が一歩先

両社ともエラー内容がページ上部にまとめて表示されるようになっていました。
ユーザーにとっては、上部のメッセージと入力項目を行ったり来たりしなければならず、あまりいい伝え方とは言えないと思います。

どちらの場合も、エラー項目の入力枠が色付けされて、どこを修正すべきかはわかりますが、やはり、エラーとなった項目のそばにメッセージを出すべきでしょう。

比較すると、エラーになった項目のうち、レイアウト上一番上のの入力欄にフォーカスがあたった状態になり、スムーズに修正作業へ移ることができるという点で、佐川急便が一歩先を行っています。

ヤマト運輸
ページの上部にエラーがまとめて出るパターン
20140411_y_error
佐川急便
こちらも同様でした。
20140411_s_error

項目数に大きな差がありました

同業種、同様のサービスに対する登録フォームなので、項目内容としては両社ともほぼ同じでしたが、項目数に大きな違いがありました。
ヤマト運輸は個人と法人でサービスを分けているのに対し、佐川急便はどちらも同じフォームで登録するようになっているために項目が多くなり、入力項目が詰まったレイアウトになっていました。ご利用区分の選択に合わせてレイアウトが変わるようにすると、すっきり見せられると思います。

フロー表示の有無で分かれた

両社とも登録ページが2ページにわたっているので、現在位置がどこなのか、一目でわかるようにしておくと親切です。ヤマト運輸のようにページ上部などにフロー表示を出し、ユーザーの位置を常に示しておくことでユーザーの心理的負担を軽減することができます。

ヤマト運輸
しっかり完了までのページと現在地を見せている。これなら迷わない。
20140411_y_header
佐川急便
残念ながらフローはなし。
20140411_s_header

入力補助機能は、検討の余地大いにあり

機能名 ヤマト運輸 佐川急便
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし
エラー時:あり
フォーカス時:なし
エラー時:あり
項目ごとに入力完了後の動作 郵便番号のみエラーチェックあり なし

ユーザーの入力に合わせてリアルタイムに反応する機能は皆無。
入力補助機能については、もっと積極的に取り組むべきでは?と思いました。
実際、どのくらい途中離脱しているのでしょう..非常に気になるところです。

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

今回の比較分析は、以上となります。いつもと同じように分析に加え、こうすれば良くなるのではないかという改善案を考えてみました。

ヤマト運輸

エラーの出た項目を分かりやすく示すべし

エラーへの対処にもう少し工夫があると良いと思います。エラーとなった項目の背景色を変えるなど視認性をあげることで入力への心理的負担を減らすことが出来ます。

佐川急便

ゆったりしたレイアウトに

ページのレイアウトが少し窮屈な印象を受けました。項目数の多いフォームなので、もう少し空間をあけたレイアウトにすることで、より見やすくなると思います。また、フローも用意した方が良いと思います。

(共通して)入力補助機能を入れよう

全体的に項目数が多めなので、リアルタイムなエラーチェックをすることでユーザーへの精神的負担を軽減できると思います。

まとめ

いかがだったでしょうか?

どちらも一度メール送信が必要だったり、入力完了までに遷移するページの数が多かったりと、パッと入力完了できるエントリーフォームではありませんでした。
フローの用意や、住所入力欄が後から表示される点などで、今回はヤマト運輸に軍配をあげたいと思います。

次回もご期待ください。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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