勝手にEFO比較分析【Twitcasting x Ustream】(ライブ配信サービス 会員登録フォーム編)

本日は動画のライブ配信サービスの会員登録フォームに注目し、「勝手に比較分析」していきます。
取り上げるのは、米国生まれで、2010年に日本語版が提供開始、今では6カ国語でサービスが提供されているライブビデオサービスの先駆け的存在のUstreamと、
質よりも手軽に配信が出来ることを目的とし、スマートフォンにフォーカスしたことで24歳以下の若年層を中心に人気を集めている通称「ツイキャス」、TwitCasting(以降ツイキャス)の2サービスです。

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

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

基本的項目の確認

それでは今回も基本項目の確認から行っていきましょう。

ツイキャス Ustream
ページ数 1ページ 1ページ
入力項目 6種 3種
必須項目入力欄の数 6項目 3項目
フロー なし なし
オファー なし なし
必須マーク なし なし
入力画面のレイアウト 他ページと共通 フォーム専用

ソーシャルログイン機能が充実

ツイキャスはTwitter、Facebook、mixiの3種類ものSNSアカウントでのログイン機能を搭載しています。さすがは「手軽さ」にフォーカスしたサービスですね。
UstreamではFacebookのみ、アカウントログイン機能を搭載していました。

◎ ツイキャス ソーシャルログイン機能

Twitter、Facebook、mixiのアカウントによるログインと独自アカウントの作成の4種類のパターンから選べる。

Twitter、Facebook、mixiのアカウントによるログインと独自アカウントの作成の4種類のパターンから選べる。

○ Ustream ソーシャルログイン機能

Facebookのアカウントででログインすることが可能。

UstreamではFacebookのアカウントででログインすることが可能。

レイアウト

ページレイアウトについては、ツイキャスは共通のヘッダー・フッターがついたままでした。フォームからの離脱を防ぐという観点では、余計なリンクやコンテンツはなるべく配置しないほうが吉です。
Ustreamはモーダルウィンドウによる表示を行っていたので、余計なコンテンツが排除された状態となっていました。

△ ツイキャス レイアウト

ページレイアウト。サイト共通のヘッダーとフッターがついている

ページレイアウト。サイト共通のヘッダーとフッターがついている

○ Ustream レイアウト

モーダルウィンドウを使って表示された、シンプルな構成。

モーダルウィンドウを使って表示された、シンプルな構成。

入力項目、必須マーク

入力項目数には差が。ツイキャスはユーザー名、名前、メールアドレス、パスワード、同意チェックボックス、キャプチャの5つであるのに対し、Ustはメールアドレス、パスワード、同意のチェックボックス(デフォルト値あり)の合計3項目のみというシンプルさ。
ただしいずれも必須項目のみで構成されており、必要最低限に項目を絞っていることは伺えます。

また、どちらにも必須マークの表示はありませんでした。すべて入力必須であったとしても、なにか表示をしておいたほうが親切です。

○ ツイキャス 入力項目、必須マーク

ツイキャスの入力項目の構成。

ツイキャスの入力項目の構成。キャプチャにはgoogleの「reCAPTCHA」を採用している。

○ Ustream 入力項目、必須マーク

シンプルな入力欄の構成。

シンプルな入力欄の構成。

ラベルと補足

ラベルの表示方法には差がありました。
ツイキャスはフォーム全体がオーソドックスな表組みの形でデザインされており、入力項目ごとの補足もかなり充実しています。
いっぽうUstreamはかなり簡潔な構成で、わかりやすさに少し不安が。特にプレースホルダー内にラベルを配置している点は要注意です。

○ ツイキャス ラベルと補足

入力欄ごとに細やかな補足がある

入力欄ごとに細やかな補足がある

△ Ustream ラベルと補足

プレースホルダーをラベル代わりに使うと、入力の最中にユーザーがラ別を参照できず不便な思いをすることも。

プレースホルダーをラベル代わりに使うと、入力の最中にユーザーがラ別を参照できず不便な思いをすることも。

ボタンに注意

ボタンは両社ともあと一歩という印象です。
まず、ツイキャスにはキャンセルボタンがありました。キャンセルボタンはEFOの観点では百害あって一理なしですので、配置しないほうが無難。また、配置も要注意です。フォームでは右側に次に進むボタンを配置することが多いので、押し間違えてしまうユーザーがいるかもしれないためです。

Ustreamでは一見問題なさそうですが、文言が「サインアップ」となっているのは注意が必要です。海外発のウェブサービスに多いこのような文言は、すべてのユーザーがスムーズに理解できるとは限りませんので、「アカウントを作成」などの日本語に置き換わっていることが理想的です。

△ ツイキャス ボタン

キャンセルボタンは今すぐにでも削除したい

キャンセルボタンは今すぐにでも削除したい

△ Ustream ボタン

文言は誰もが直感的に理解できるものにするとベター。

文言は誰もが直感的に理解できるものにするとベター。

エラーはどちらもいまひとつ

ツイキャスはページ上部にエラーを1つずつ表示する形。
Ustreamは該当項目の背景色を変化させ、なおかつ吹き出しで内容を表示する形。ただし吹き出しは1つずつしか表示されないようです。

理想は、ページ上部にエラーがある旨を表記しつつ、該当箇所すべてに具体的な修正内容が表記されている状態です。

△ ツイキャス エラー

複数エラーがあっても、1つずつしか内容が表示されないようになっている

複数エラーがあっても、1つずつしか内容が表示されないようになっている

△ Ustream エラー

1つずつではなく、一度にエラーの内容を確認したい。

1つずつではなく、一度にエラーの内容を確認したい。

モバイルでの比較

どちらもモバイル向けに表示最適化が行われていましたので、モバイル向けページについても簡単に触れておきます。

ツイキャスはPC版と同様の構成で、スマートフォン用に画面が見やすく最適化されています。スマートフォンではキャプチャの内容が数字入力になっている点は差があります。
Ustreamもモバイル向けに最適化されたデザインを用意しています。ただしモバイルではパスワードの確認用入力が必要となり、項目がひとつ増える形となります。

PCと同様に補足が充実したフォーム。

PCと同様に補足が充実したフォーム。

こちらもPC同様、かなりシンプルな構成のフォーム。

こちらもPC同様、かなりシンプルな構成のフォーム。

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

機能名 ツイキャス Ustream
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし
エラー時:一部あり
フォーカス時:なし
エラー時:あり
項目ごとに入力完了後の動作 なし なし

初期項目フォーカス

Ustreamには、フォームの最初の項目にあらかじめフォーカスしておくことでユーザーの手間を省く「初期項目フォーカス機能」がありました。

○ Ustream 初期項目フォーカス

ページを読み込んだ時点で、最初の入力項目であるメールアドレスに自動でフォーカスがあたっている

ページを読み込んだ時点で、最初の入力項目であるメールアドレスに自動でフォーカスがあたっている

パスワードの表示機能

また、Ustreamにはパスワードのマスキング表示を切り替える機能がありました(PCのみ)。
この機能があることで、たとえパスワード入力欄がひとつでも、ユーザーが誤ったパスワードを登録してしまう可能性を低くできます。

○ Ustream パスワードの表示機能

目のマークのアイコンをクリックすることで、マスキングの有無を切り替えることができる。

目のマークのアイコンをクリックすることで、マスキングの有無を切り替えることができる。

リアルタイムアラート

どちらのフォームにも、エラーをその場で判定するリアルタイムアラート機能が搭載されていました。

ツイキャスでは後述するユーザー名の項目にのみリアルタイムアラートが搭載されています。
Ustreamではエラーがあった箇所の背景色と文字色がリアルタイムに変化し、その後フォーカスを戻すとエラーの内容が吹き出しで表示されるという具合です。

○ ツイキャス リアルタイムアラート

リアルタイムアラート(アカウント名のみ)

リアルタイムアラート(アカウント名のみ)

○ Ustream リアルタイムアラート

まずはエラー箇所の色が変わり、

まずはエラー箇所の色が変わり、


その後フォーカスをもどすと内容が表示される

その後フォーカスをもどすと内容が表示される

ユーザー名の重複チェッカー

ツイキャスには入力したアカウント名がすでに登録されているかどうかを判定する機能がありました。
ただし、エラーがある場合と重複がある場合のどちらもエラー文言が「正しくありません」と表示されるため、エラーの場合の文言は具体的になっているとより親切でしょう。
○ ツイキャス ユーザー名の重複チェッカー

重複がない場合の表示。

重複がない場合の表示。


エラーの場合の表示。文言が具体的になっているとより良い。

エラーの場合の表示。文言が具体的になっているとより良い。

モバイルでの比較

Ustreamでのみ、入力内容に応じてキーボードが最適化されていました。

○ Ustream モバイル

メールアドレスでは、メールアドレスに最適化されたキーボードを表示する

メールアドレスでは、メールアドレスに最適化されたキーボードを表示する

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

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

ツイキャス

ツイキャスはTwitterをはじめとするSNSアカウントとの連携で利用するユーザーが多いサービスなのではと想像しますが、そんな中でも会員登録フォームが親切に使いやすく設計されていた印象です。
スマホサイトのキーボード表示を最適化させたり、リアルタイムのバリデーションの文言や種類を充実させれば申し分ないフォームになるのではと思いました。

Ustream

海外発のサービスに多いかなりシンプルな構成のフォームでした。ただシンプルすぎてユーザビリティが落ちる心配がありますので、補足やラベルの表示を工夫するとさらに良いでしょう。
入力支援機能が豊富に搭載されているのは良いですね。ただしリアルタイムアラート機能の使い勝手が少し悪いようです。エラーの瞬間に吹き出しを表示すると改善されるのではないかと思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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