勝手にEFO比較分析【テレビ朝日 x フジテレビ】(テレビ局会員制サービス 登録フォーム編)

毎日鮮度の高い情報やコンテンツを提供してくれるテレビ。
いくつもの局が存在し、各々報道・情報、スポーツ、バラエティ・音楽、映画・ドラマ、アニメ・特撮、子供向け番組などのコンテンツを放送しています。

そんなテレビコンテンツですが、各局が提供している会員制サービスを利用することで、番組に関連付いたゲームやメールサービスが受けられるのはご存知でしょうか。

今回は関東広域圏を放送対象地域としている「株式会社テレビ朝日」(http://www.tv-asahi.co.jp/)(以下本記事では「テレビ朝日」)と同じく関東広域圏を放送対象地域としている「株式会社フジテレビジョン」(http://www.fujitv.co.jp/)(以下本記事では「フジテレビ」)の会員登録フォームを比較分析していきます。

テレビ朝日は「tv asahi id」、フジテレビは「フジテレビID」という会員制サービスを展開しています。どちらも会員になることで、メールマガジンでの番組情報受信や関連したゲームなどに参加できるサービスを利用できます。

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

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

まずは基本的な項目を確認します。

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

どちらもまずメールアドレスを登録させメールを送信し、メール内のURLから本登録に進む形式をとっています。

テレビ朝日 フジテレビ
ページ数 メールアドレス入力、送信確認、URLから登録情報入力、確認、完了の5ページ 規約確認とメールアドレス入力、送信確認、URLから登録情報入力、完了の4ページ
入力項目 15種 6種
必須項目入力欄の数 7項目 7項目
フロー なし あり
オファー あり あり
必須マーク あり(「必須」マーク表示) あり(「必須」文字で表示)
送信ボタンのサイズ 幅144px × 高さ20px 幅240px × 高さ40px
入力画面のレイアウト フォーム専用 他ページと共通

入力内容は大きく違いました。
テレビ朝日が必須項目のみかなり絞ってきているのに対し、フジテレビは総項目数を絞っています。
また、どちらも入力が多少煩わしい、住所や電話番号などの優先順位は低く、テレビ朝日は任意項目に、フジテレビでは項目自体を省いています。

また、双方配色はシンプルですがマージンの取り方などに違いがあります。

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

アプローチは違うけれどユーザーの事を考えた作り

ファーストビューを意識し、必須項目をコンパクトに収めたテレビ朝日と、総項目数を絞り、任意項目を抑えたフジテレビ。
見せ方と設計思想は違えど、双方ともにシンプルで入力しやすいフォームとなっています。

ok_blue テレビ朝日 ページレイアウト

必須項目と任意項目とを区域分けし、必須項目をファーストビューにコンパクトにまとめることで、使いやすいフォームとなっています。

しかし、若干行間が詰まり過ぎている印象を受け、ユーザーに圧迫感を与えてしまう可能性があります。マージンを調整し、もう少しゆとりを持たせてあげると見やすくなると思います。

ファーストビューを意識した使いやすいフォーム

ファーストビューを意識した使いやすいフォーム

ok_blue フジテレビ ページレイアウト

フジテレビは総項目数を抑えることでとてもコンパクトなフォームを実現しています。
また、ほどよいマージン調整とフォントサイズで非常に見やすいです。

フローの青が印象に残るコンパクトなフォーム

フローの青が印象に残るコンパクトなフォーム

必須マーク

「必須」文字を使い、色背景を敷き四角にしたマークを先頭につけた状態でお手本のような必須マークを使用しているテレビ朝日に対し、フジテレビの必須マークは[必須]という文字のみで、少し印象が薄いです。

ok_blue テレビ朝日 必須マーク

お手本のような必須マークになっています

お手本のような必須マークになっています

soso_black フジテレビ 必須マーク

少し薄い印象を受けます

少し薄い印象を受けます

フローの有無で安心感に差が

フローの有無で安心感に少し差がでたのかな、という印象を受けます。

テレビ朝日にはフローがありません。
おそらくファーストビューを意識したレイアウトのためだと思います。

たしかにフローは幅をとってしまうので、ファーストビューを意識したレイアウトでは設置が悩ましいですね。
しかし、ファーストビューに収めることばかりに気を取られてしまい、使い易さや安心感を損なう結果となってしまっては本末転倒です。
まずはユーザーの視点にたって、「何があると便利に感じるか」「どうなると安心なのか」を考慮してみるのがフォーム改善の近道だと思います。

対してフジテレビでは大きくて分かりやすいフローを設置しています。
色分けもはっきりしていて、自分が今どのページにいるのかが非常に分かりやすいです。

ok_blue フジテレビ フロー

大きく、色分けもはっきりしているのでわかりやすいですね

大きく、色分けもはっきりしているのでわかりやすいですね

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

機能名 テレビ朝日 フジテレビ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:なし

フォーカス時:なし

エラー時:なし

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

入力支援機能はともに無し

ユーザーの操作にあわせ支援する機能は双方共にありませんでした。

入力支援機能はユーザーのモチベーションの向上につながる機能が多く、利便性も確実に上がります。

ぜひ今すぐにでも入力支援機能の導入をご検討いただきたいですね。

エラー画面

エラーは、冒頭にメッセージがあり、さらに該当箇所にも分かりやすい配色で注記、というスタイルがお手本です。

テレビ朝日は冒頭でメッセージを表示し、エラー箇所にも注記するという形をとっています。お手本に近い形ではありますが、注記のみなので、装飾を付け加えたり背景色を変えるなどしてあげた方がよいと思います。

それに対しフジテレビでは、送信時にエラーを検出した際、ダイアログで一番最初のエラーを指摘し、一つ一つエラーを洗っていくという方法をとっています。
総項目数が少ないこのフォームだからこそ出来る方法だとは思いますが少し不便さを感じてしまいます。

どちらも、リアルタイムアラートを実装すれば、確実にユーザーに優しい設計になると思います。

soso_black テレビ朝日 エラー画面

若干薄い印象を受けます

若干薄い印象を受けます

ng_bw フジテレビ エラー画面

一つ一つダイアログで指摘する形式になっています

一つ一つダイアログで指摘する形式になっています

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

今回はテレビ局会員制サービスの登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスをして終わりたいと思います。

テレビ朝日

フローと入力支援機能の追加でより親切なフォームへ

ファーストビューを意識した設計であるのは理解できますが、フローがないのは非常にもったいないと思います。追加することで安心感のあるフォームになると思います。

また、現状入力支援機能がありませんので、今後は機能導入を考えてみて欲しいですね。より親切な設計になることに間違いありません。

フジテレビ

エラー表示の強化と入力支援機能の導入でユーザーに優しい設計に

エラーをダイアログで表示させず、通常の表示方法にすることをお奨めします。
冒頭に装飾月のメッセージが出し、エラー箇所の背景色を変えたり注記を記載する方が現状より確実に分かりやすくなると思います。

また、ユーザーに優しいフォームを考えていく上で入力支援機能は必要不可欠です。

入力支援機能を導入することにより利便性の高いフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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