勝手にEFO比較分析【日本郵便 x おたより本舗】(年賀状注文フォーム編)

10月半ばから既に始まっている年賀はがきの予約・注文。「もうそんな時期か」と思いつつも、年賀はがきの用意をし始めると年の瀬を感じますよね。
どんな業界であれ11月12月は忙しいのもので、年末にかなりドタバタしながら年賀の発注を経験した方も多いかと思います。

今回は2007年の郵政民営化に伴い、株式会社となった「日本郵便株式会社」(http://www.post.japanpost.jp/index.html)(以下本記事では「日本郵便」)とパンフレットや封筒、名刺やはがきに診察券と幅広い分野で印刷を請け負う「株式会社アーツ」(http://www.arts-net.co.jp/)(以下本記事では「おたより本舗」)の年賀状の注文フォームを比較分析していきます。

業種や年齢、性別を問わず様々なユーザーに利用してもらうための工夫や気配りがあるはずなので楽しみですね。

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

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

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

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

日本郵便 おたより本舗
ページ数 種類と枚数、お届け先情報、ご注文内容、ご注文完了の4ページ 商品情報入力、お客様情報の確認、配送・支払情報入力、ご注文内容の確認、ご注文完了の5ページ
入力項目 18種 13種
必須項目入力欄の数 9項目 6項目
フロー あり あり
オファー あり あり
必須マーク あり(「※」文字表示) あり(「*」文字表示)
送信ボタンのサイズ 幅256px × 高さ45px 幅250px × 高さ45px
入力画面のレイアウト フォーム専用 他ページと共通

入力種類は15種前後、必須項目は7項目前後とどちらも普通です。
どちらも構造はシンプルですが行間や入力欄の大きさ、マージンの取り方などに違いが出ています。

それでは以下個別に説明していきます。

ページレイアウト

日本郵便はフォーム専用のレイアウトを用いています。基本配色は薄いモノトーン。ポイントにコーポレートカラーを使うことで、統一感のあるフォームとなっています。

一方、おたより本舗は、他ページと共通のレイアウトを用いています。ヘッダーは派手ですが、フォーム内は地味な印象です。配色がばらついていて、あまり統一感はないよう感じます。

efo_double_ring 日本郵便 ページレイアウト

ページ遷移数は3つと標準的。
必須と任意アンケートとを分けて表示させ、必須項目の優先順位を上げています。
アンケートがあるため全体項目数は多めです。

横幅は狭いですが、配色の工夫やマージンの取り方もあり、すっきりとしている印象を受けますね。
全体を通してハガキを彷彿とさせるデザインは商品を意識しやすいので良いと思います。

デザインの工夫で商品を意識しやすいフォームになっています。

デザインの工夫で商品を意識しやすいフォームになっています。

ok_blue おたより本舗 ページレイアウト

注文ページの遷移数は4つと少し多めです。年賀状のデザインパートが別途存在していて、それを含めると画面の切り替わりが多くなり多少億劫な印象を受けます。

入力項目数は最大で13種と一般的です。入力欄や要素間のマージンが大きく設定されているため、全体を通して読みやすくなっていますが、画面が長くなってしまうというデメリットがあります。

大きく設定されているマージンが文章を読みやすくさせている。

大きく設定されているマージンが文章を読みやすくさせている。

必須マークの有無

どちらも記号によるマーキングのみで惜しい結果に。

EFOの観点では、必須マークは四角い背景色に白抜きで「必須」の文字を表記するのが望ましいです。
また、任意項目にも色違いで「任意」マークを用意できるとなおわかりやすいですね。

soso_black 日本郵便 必須マーク

必須マークは※文字を使用しています。文字で表現されていないのが残念です。

必須マークにも全体と同じデザインの工夫が見られれば良かった。

必須マークにも全体と同じデザインの工夫が見られれば良かった。

soso_black おたより本舗 必須マーク

こちらも記号表示のみ。より分かりやすいマーキングを心がげたいですね。

できれば「必須」文字を使ってマーキングしてほしいところ。

できれば「必須」文字を使ってマーキングしてほしいところ。

フローの有無

フローはどちらもユーザーの迷いを減らすことにつながります。

今回、どちらのフォームもわかりやすいフローを用意しています。
入力後にどのような展開になるのかを把握できるため、安心して入力を進められる設計になっていますね。

efo_double_ring 日本郵便 フロー表示

全体のデザインに合わせて作られていて、見栄えが良いです。
イラストなどはなくシンプルですがわかりやすい見た目になっています。

シンプルでわかりやすい。

シンプルでわかりやすい。

efo_double_ring おたより本舗 フロー表示

ナンバリングと詳細内容の表示、矢印をモチーフにして分かりやすいデザインを採用しています。

詳細内容の表示もあり、わかりやすい。

詳細内容の表示もあり、わかりやすい。

個人情報保護に関する提示やバッジ表示で安心感を出す

日本郵便では個人情報の取扱いに関する言及があり、安心して情報送信ができるようになっています。バッジなどの表示があれば、なおよかったと思います。

efo_double_ring 日本郵便 個人情報の取扱いに関する言及

安心して送信できそうです。

安心して送信できそうです。

また、おたより本舗ではセキュリティに関するバッジを表示しています。
こういったバッジも見た目で安心感を出せるので、積極的に表示していきましょう。

efo_double_ring おたより本舗 バッジの表示

バッジの表示があると安心して入力できますね。

バッジの表示があると安心して入力できますね。

迷いを解決する質問ページリンク

日本郵便では、ユーザーが入力動作に迷った時のための「よくあるご質問」へのリンクが上部に設置されていました。

何枚から注文できるのか、電話発注はできるのか、など些細なことでも答えているページとなっています。

こういったページへのリンクが近くにあると便利でいいですね。
ただ質問ページに関しては別ウィンドウに遷移してしまうためそのまま離脱してしまう可能性があります。
こういった離脱を防ぐためにはモーダルウィンドウなどを用いた記載の仕方が好ましいでしょう。

ok_blue 日本郵便 リンク

リンク自体はとてもシンプル。

リンク自体はとてもシンプル。

soso_black 日本郵便 よくある質問ページ

別ウィンドウに遷移してしまい本フォームから離脱してしまう恐れが。

別ウィンドウに遷移してしまい本フォームから離脱してしまう恐れが。

レイアウトで差のついたエラー画面

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

日本郵便は冒頭にすべてのエラーをリスト表示させるという手法をとっています。
これではせっかくのレイアウトが台無しです。
ただ、エラー個所の赤枠はわかりやすい変化だったので良いと思います。

soso_black 日本郵便 エラー画面

エラーリストが残念です。

エラーリストが残念です。

対しておたより本舗のエラー画面は非常に優秀でした。
冒頭に大きくエラーの文字とメッセージを提示。エラーが出ている入力欄の背景は黄色くなり、かなり目立ちます。
各エラー箇所に文言を注記していて、エラー画面としてパーフェクトな仕上がりになっていると思います。

efo_double_ring おたより本舗 エラー画面

お手本のようなエラー画面です。

お手本のようなエラー画面です。

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

機能名 日本郵便 おたより本舗
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:なし

フォーカス時:なし

エラー時:なし

項目ごとに入力完了後の動作 なし なし

入力支援機能の有無

どちらも入力支援機能は住所の自動入力機能のみのようでした。

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

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

今回は家庭用ゲーム機販売を行う企業2サイトの問い合わせフォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

日本郵便

必須マークの改善と入力支援機能の導入でより優しいフォームへ

シンプルですが基本はしっかりと押さえられていました。
程よいマージンと配色でとても見やすいページだと思います。
入力支援機能が加わったらかなり優良なフォームになること間違いなしです。

おたより本舗

配色の調整と必須マークの改善、入力支援機能の導入が必要

悪いと思ったところはあまりなく、基本は押さえられていると思います。
また一つ一つの要素が丁寧に作られており、優秀なフォームに分類されるでしょう。
入力支援機能はほぼ実装されていないので、今後の拡充に期待が持てますね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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