10月半ばから既に始まっている年賀はがきの予約・注文。「もうそんな時期か」と思いつつも、年賀はがきの用意をし始めると年の瀬を感じますよね。
どんな業界であれ11月12月は忙しいのもので、年末にかなりドタバタしながら年賀の発注を経験した方も多いかと思います。
今回は2007年の郵政民営化に伴い、株式会社となった「日本郵便株式会社」(http://www.post.japanpost.jp/index.html)(以下本記事では「日本郵便」)とパンフレットや封筒、名刺やはがきに診察券と幅広い分野で印刷を請け負う「株式会社アーツ」(http://www.arts-net.co.jp/)(以下本記事では「おたより本舗」)の年賀状の注文フォームを比較分析していきます。
業種や年齢、性別を問わず様々なユーザーに利用してもらうための工夫や気配りがあるはずなので楽しみですね。
それでは「勝手にEFO分析」していきます。
今回も「勝手に」改善ポイントを指摘していきますので、どうぞ最後までお付き合い下さい。
◎○△×と、ユーザー視点での評価を行っていきます。
まずは基本的項目の確認からです。
いつも通り、基本項目の確認からはじめていきましょう。
日本郵便 | おたより本舗 | |
ページ数 | 種類と枚数、お届け先情報、ご注文内容、ご注文完了の4ページ | 商品情報入力、お客様情報の確認、配送・支払情報入力、ご注文内容の確認、ご注文完了の5ページ |
入力項目 | 18種 | 13種 |
必須項目入力欄の数 | 9項目 | 6項目 |
フロー | あり | あり |
オファー | あり | あり |
必須マーク | あり(「※」文字表示) | あり(「*」文字表示) |
送信ボタンのサイズ | 幅256px × 高さ45px | 幅250px × 高さ45px |
入力画面のレイアウト | フォーム専用 | 他ページと共通 |
入力種類は15種前後、必須項目は7項目前後とどちらも普通です。
どちらも構造はシンプルですが行間や入力欄の大きさ、マージンの取り方などに違いが出ています。
それでは以下個別に説明していきます。
ページレイアウト
日本郵便はフォーム専用のレイアウトを用いています。基本配色は薄いモノトーン。ポイントにコーポレートカラーを使うことで、統一感のあるフォームとなっています。
一方、おたより本舗は、他ページと共通のレイアウトを用いています。ヘッダーは派手ですが、フォーム内は地味な印象です。配色がばらついていて、あまり統一感はないよう感じます。
日本郵便 ページレイアウト
ページ遷移数は3つと標準的。
必須と任意アンケートとを分けて表示させ、必須項目の優先順位を上げています。
アンケートがあるため全体項目数は多めです。
横幅は狭いですが、配色の工夫やマージンの取り方もあり、すっきりとしている印象を受けますね。
全体を通してハガキを彷彿とさせるデザインは商品を意識しやすいので良いと思います。

デザインの工夫で商品を意識しやすいフォームになっています。
おたより本舗 ページレイアウト
注文ページの遷移数は4つと少し多めです。年賀状のデザインパートが別途存在していて、それを含めると画面の切り替わりが多くなり多少億劫な印象を受けます。
入力項目数は最大で13種と一般的です。入力欄や要素間のマージンが大きく設定されているため、全体を通して読みやすくなっていますが、画面が長くなってしまうというデメリットがあります。

大きく設定されているマージンが文章を読みやすくさせている。
必須マークの有無
どちらも記号によるマーキングのみで惜しい結果に。
EFOの観点では、必須マークは四角い背景色に白抜きで「必須」の文字を表記するのが望ましいです。
また、任意項目にも色違いで「任意」マークを用意できるとなおわかりやすいですね。
日本郵便 必須マーク
必須マークは※文字を使用しています。文字で表現されていないのが残念です。

必須マークにも全体と同じデザインの工夫が見られれば良かった。
おたより本舗 必須マーク
こちらも記号表示のみ。より分かりやすいマーキングを心がげたいですね。

できれば「必須」文字を使ってマーキングしてほしいところ。
フローの有無
フローはどちらもユーザーの迷いを減らすことにつながります。
今回、どちらのフォームもわかりやすいフローを用意しています。
入力後にどのような展開になるのかを把握できるため、安心して入力を進められる設計になっていますね。
日本郵便 フロー表示
全体のデザインに合わせて作られていて、見栄えが良いです。
イラストなどはなくシンプルですがわかりやすい見た目になっています。

シンプルでわかりやすい。
おたより本舗 フロー表示
ナンバリングと詳細内容の表示、矢印をモチーフにして分かりやすいデザインを採用しています。

詳細内容の表示もあり、わかりやすい。
個人情報保護に関する提示やバッジ表示で安心感を出す
日本郵便では個人情報の取扱いに関する言及があり、安心して情報送信ができるようになっています。バッジなどの表示があれば、なおよかったと思います。
日本郵便 個人情報の取扱いに関する言及

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

バッジの表示があると安心して入力できますね。
迷いを解決する質問ページリンク
日本郵便では、ユーザーが入力動作に迷った時のための「よくあるご質問」へのリンクが上部に設置されていました。
何枚から注文できるのか、電話発注はできるのか、など些細なことでも答えているページとなっています。
こういったページへのリンクが近くにあると便利でいいですね。
ただ質問ページに関しては別ウィンドウに遷移してしまうためそのまま離脱してしまう可能性があります。
こういった離脱を防ぐためにはモーダルウィンドウなどを用いた記載の仕方が好ましいでしょう。
日本郵便 リンク

リンク自体はとてもシンプル。
日本郵便 よくある質問ページ

別ウィンドウに遷移してしまい本フォームから離脱してしまう恐れが。
レイアウトで差のついたエラー画面
冒頭にメッセージがあり、エラー箇所にも分かりやすい配色で注記というのがお手本です。
日本郵便は冒頭にすべてのエラーをリスト表示させるという手法をとっています。
これではせっかくのレイアウトが台無しです。
ただ、エラー個所の赤枠はわかりやすい変化だったので良いと思います。
日本郵便 エラー画面

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

お手本のようなエラー画面です。
次に入力支援機能の比較です
機能名 | 日本郵便 | おたより本舗 |
---|---|---|
ガイド
未入力の残り必須項目数などをリアルタイムで表示する機能 |
なし | なし |
離脱ブロック
ページを閉じようとするとアラートを出してOKしないと閉じることができない機能 |
なし | なし |
サブミットブロック
送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能 |
なし | なし |
項目ごとのアラート表示
入力についての説明をリアルタイム表示する機能 |
フォーカス時:なし
エラー時:なし |
フォーカス時:なし
エラー時:なし |
項目ごとに入力完了後の動作 | なし | なし |
入力支援機能の有無
どちらも入力支援機能は住所の自動入力機能のみのようでした。
入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。ぜひ導入をご検討いただきたいですね。
最後は勝手にフォーム改善アドバイスを
今回は家庭用ゲーム機販売を行う企業2サイトの問い合わせフォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。
日本郵便
必須マークの改善と入力支援機能の導入でより優しいフォームへ
シンプルですが基本はしっかりと押さえられていました。
程よいマージンと配色でとても見やすいページだと思います。
入力支援機能が加わったらかなり優良なフォームになること間違いなしです。
おたより本舗
配色の調整と必須マークの改善、入力支援機能の導入が必要
悪いと思ったところはあまりなく、基本は押さえられていると思います。
また一つ一つの要素が丁寧に作られており、優秀なフォームに分類されるでしょう。
入力支援機能はほぼ実装されていないので、今後の拡充に期待が持てますね。