勝手にEFO比較分析【日経新聞 x 読売新聞】(新聞購読申込みフォーム編)

皆さんは日頃どんな形で情報収集しているのでしょうか。
昨今ではインターネットとスマホの普及率の高さもあり、大手検索エンジンのポータルサイトや新聞社・通信社公式サイト、テレビ放送局公式サイト、情報配信系スマホアプリから情報を得ている、という方も多くなってきていると思います。各新聞社・通信社が徐々に新聞の電子化を進めるなか、やはり昔ながらの紙媒体の新聞が一番、という方もいるかもしれませんね。

今回は全国紙のひとつであり、経済と産業関連の記事を基軸とした新聞を発行する「株式会社日本経済新聞社」(http://www.nikkei.com/)(以下本記事では「日経」)と日本国内で最大販売部数を誇る「株式会社読売新聞東京本社」(http://www.yomiuri.co.jp/)(以下本記事では「読売」)の購読申し込みフォームにスポットを当て比較分析していきます。

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

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

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

いつも通り、基本項目の確認から始めていきます。

日経 読売
ページ数 商品の選択、お届け先などの入力、アンケート、お申し込み内容の確認、お手続き完了の5ページ 個人情報の入力、お支払方法などのご入力、入力内容などのご確認、申し込み完了の4ページ
入力項目 10種 19種
必須項目入力欄の数 5項目 6項目
フロー あり あり
オファー あり あり
必須マーク あり(「*」文字表示) あり(「※」文字表示)
送信ボタンのサイズ 幅120px × 高さ19px 幅114px × 高さ27px
入力画面のレイアウト フォーム専用 フォーム専用

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

ページ数に違いが

日経では項目群を細かく切り分け、商品の選択を最初のページとして入力ページと分けています。対して読売ではフォーム上部に商品の選択項目をおき、その後入力部分が現れるという形をとっています。

切り分けるメリットは、それぞれの入力ページの縦幅が短くなる事です。
デメリットは遷移数が多くなるため、ユーザーのストレスになるという可能性があります。

すべてをひとつの画面にまとめる形のメリットは、ページ遷移を少なくしユーザーの手間を少なくする事ですが、フォームページが縦に長くなってしまうというデメリットがあります。

ページレイアウト

どちらも余計なナビゲーションやサイドエリアのない、1カラムでシンプルなフォーム専用レイアウトを採用しています。

また、どちらも入力項目を表形式にしているので各ラベルと入力欄の関連付けがはっきりして分かりやすいですね

ok_blue 日経 ページレイアウト

所々にイラスト装飾をいれることで、ページの印象を和らげています。
ページ内容に優先順位をつけ遷移数を多くすることで、1ページ毎の内容がコンパクトにまとまっています。
入力項目をできるだけファーストビューに入れるということもフォームの基本ですので、良い作りだと思います。

項目種類をページ毎に分割することでコンパクトに収まっています。

項目種類をページ毎に分割することでコンパクトに収まっています。

ok_blue 読売 ページレイアウト

読売は商品選択を入力ページの上部に持ってくることでページ遷移数を抑えています。
各項目に説明文がついており、ユーザーの迷いを排除しておく工夫がされていますが、少しテキストが多すぎるようにも感じます。

入力項目に対する説明がわかりやすい。

入力項目に対する説明が細やか。

どちらも少し残念だった必須マーク

どちらも必須マークはありましたが、印象が薄いです。

soso_black 日経 必須マーク

冒頭でしっかりと*印についての説明をいれ、該当するラベルの後ろに印を入れる形でマーキングしています。
しかし、若干印象が薄く感じられます。

やはり四角の色背景に白抜きで「必須」と書かれた画像を一つ用意するのが良いでしょう。
画像にすることでより必須項目を目立たせることができます。

また、必須項目の背景色や入力欄の枠色を変更するなどすると効果的です。

*印では少し印象が薄いです。

*印では少し印象が薄いです。

soso_black 読売 必須マーク

こちらも冒頭でしっかりと説明をいれているものの、「※」になっており印象が薄いです。

日経と同じく、必須マーク画像を用意し、必須項目付近の配色を変更することをお奨めします。

必須文字の入ったマーク画像がほしいところです。

必須文字の入ったマーク画像がほしいところです。

親切なフローや力の入ったオファー表示

どちらもシンプルですが分かりやすいフローで次の動作が予測でき、安心して入力に集中することができます。
特に注目したいのは読売のフロー。
上部に設置しているだけではなく、送信ボタン下部にも設置しており、送信後どのような流れになるのか、わかりやすくなっています。

efo_double_ring 日経 フロー

内容がステップ化されていてイラストをあしらった分かりやすいフローになっています。

内容がステップ化されていてイラストをあしらった分かりやすいフローになっています。

efo_double_ring 読売 フロー

シンプルなので入力の邪魔になることもありません。

シンプルなので入力の邪魔になることもありません。

送信ボタンを押す段階で、今後の流れを再確認できるので安心ですね。

送信ボタンを押す段階で、今後の流れを再確認できるので安心ですね。

また、オファー表示では表示方法に大きく違いが出ました。
日経では初期流入ページで大きくスペースを設けています。
一方、読売では入力フォームの上部にリンクを設け、表示させる方法をとっています。

フローの中で必ず通過するページにオファーを入れていく能動的な手法はオファーを確実に訴求できるのが良い点ですね。
対して、ユーザーが求めた時に別ウィンドウなどで訴求する受動的な手法はスペースをとらずに、知りたいユーザーにはきちんとまとまった内容を訴求できるのが利点です。

efo_double_ring 日経 オファー表示

自分にあった商品が選べそうです。

自分にあった商品が選べそうです。

efo_double_ring 読売 オファー表示

リンク形式なので入力の邪魔になることもありません。

リンク形式なので入力の邪魔になることもありません。

ユーザーの疑問を解消する説明文

次に注目したいのは読売の入力項目に対する説明文です。
あらかじめ説明しておくことで、ユーザーの迷う時間を短縮できますね。

efo_double_ring 読売 説明文

入力前にミスの多い部分をあらかじめ説明することでユーザーの迷いが少なくなります。

入力前にミスの多い部分をあらかじめ説明することでユーザーの迷いが少なくなります。

アプローチで差のついたエラー画面

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

日経はエラー箇所に対し、一つ一つダイアログで指摘する方法をとっています。
ダイアログのOKを押すと直接エラー箇所にフォーカスされるシステムにはなっているものの、これでは複数同時にミスしているときに、何回も同じ動作を繰り返すことになってしまいます。

ng_bw 日経 エラー画面

一つ一つダイアログで表示します。

一つ一つダイアログで表示します。

対して読売ではスタンダードなエラー画面を設けています。
きちんと冒頭で説明をいれ、エラー箇所に詳細を注記をしています。

エラー箇所の背景色を変更したり、冒頭のメッセージにアイコンなどを付ければ、なお良かったと思います。

ok_blue 読売 エラー画面

お手本に近いすっきりとしたエラー画面です。

お手本に近いすっきりとしたエラー画面です。

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

機能名 日経 読売
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:なし

フォーカス時:なし

エラー時:なし

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

入力支援機能の有無

どちらも入力支援機能は住所自動入力機能のみ。少し残念な結果となりましたね。

ガイドやフォーカス時の補足吹き出しは、入力時のユーザーのモチベーションを向上させますし、送信ブロックの機能使うことでユーザーのエラー入力を予め防ぐ事が出来ます。

ユーザーのフォーム入力時のストレスを緩和させ、心地よく入力を完了してもらうためにも、支援機能の導入・拡充を強くお奨めします。

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

今回は新聞社2サイトの購読申し込みフォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

日経

基本項目の改善と安心できる環境作り、入力支援機能の拡充でより分かりやすいフォームに

基本項目の改善として文字で表記している必須マークを画像に変更することと、新たにエラー画面を設けることの2点があげられます。

また、近年では一般的なユーザーもセキュリティへの意識が高まりつつあります。
セキュリティバッジ等を表示することでフォームへの安心感が高まると思います。

また、入力支援の機能を拡充することでより分かりやすくフォームを利用してもらうことが可能になるかと思います。

読売

必須マークの改善とエラー画面の改良、入力支援機能の拡充が必要

現状の「※」文字の必須マークを画像化し印象強くすることで、ユーザーの視線を自然と必須項目へ向ける事が出来ると思います。

また、エラー画面に関しては入力エラー時の背景色の変更やアイコンなどを使用することで、より分かりやすく解決に導くことが出来ます。

また、住所自動入力以外の支援機能を拡充していく事で、さらに利便性が上がり、入力完了率にも良い効果が期待できると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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