勝手にEFO比較分析【google × Yahoo!】(大手検索エンジン アカウント登録編)

今回比較するサイトは、国内の2大検索エンジンである、google様提供の「google」(https://www.google.co.jp/)(以下、google)と、ヤフー株式会社様の「Yahoo!」(http://www.yahoo.co.jp/)(以下、Yahoo)です。
googleとYahooについては普段インターネットを利用する方ならもはや説明不要ですね。googleやYahoo!の提供する検索エンジンサービスは、私たちの生活に欠かせない存在です。また両社とも検索サービスを礎にしつつも、メールやカレンダー、ブログ、ショッピング、SNSなど多岐に渡るサービスを展開していることでも知られていますね。

今回は、そんな2社の豊富なサービスを利用するための基礎となる「アカウント登録」に注目して比較を行なっていきたいと思います。

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

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

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

いつもどおり、EFOの基本項目からチェックしていきます。

google yahoo
ページ数(新規登録の場合) 入力、写真の追加、完了の3つ 入力、T会員登録、完了の3つ
入力項目 11種類 10種類
必須項目入力欄の数 10個 8個
フロー なし なし
オファー あり なし
必須マーク なし あり(*マーク)
利用規約、
プライバシーポリシー
別ページ表示 別ページ表示
送信ボタンのサイズ 約幅88px x 高30px 約幅182px x 高さ38px
入力画面のレイアウト フォーム専用 フォーム専用

ともに確認画面なし。実質1画面完結のフォーム専用レイアウト

そして両社アカウント登録フォームの最大の特徴は、確認画面がない点。
メール認証などもありません。ともに完了画面に至るまでにオプション情報の登録導線を設けていますが、スキップ可能。
つまり実質入力画面1ページのみでフォームがほぼ完結しています。

会員登録フォームについては会員登録フォームで気をつけたいEFO(フォーム最適化)のポイントで。確認画面の省略については確認ページをなくせば、完了率は上がる?②~そのメリットとは?~などで取り上げた通りですが、このようなアカウント登録フォームでは、初回登録後にほとんどの情報を修正することが可能であるため、確認のステップを省略してしまっても大きな問題はなと思います。

また両社とも無駄なコンテンツがないフォーム専用のレイアウトを用意していました。

ok_blue google フォーム画面

Google アカウントの作成画面。後述するオファーとフォームの2カラムレイアウトで無駄なく配置

Google アカウントの作成画面。後述するオファーとフォームの2カラムレイアウトで無駄なく配置

ok_blue Yahoo フォーム画面

Yahoo! JAPAN ID登録画面。余計なものがなくスッキリとしている

Yahoo! JAPAN ID登録画面。余計なものがなくスッキリとしている

キャプチャによるスパム対策あり

1画面のみで完結するため、また巨大企業のサービスということもあり、スパム対策もしっかりと実施されていました。
両社ともスパム(ロボット等による自動登録)を防ぐためにキャプチャ画像の文字入力欄を用意していました。

フォームのユーザビリティを著しく低下させるこのキャプチャ画像。できれば無くせると良いですが、その他の入力欄ではしっかりと入力支援が対策されていることも考えると、やむなく配置しているのでしょうか。

soso_black google キャプチャ画像の入力

googleはキャプチャ入力の代替方法も用意。電話音声による確認という方法が取れる

googleはキャプチャ入力の代替方法も用意。電話音声による確認という方法が取れる

soso_black Yahoo キャプチャ画像の入力

Yahooはその場で音声と画像をチョイスできる

Yahooはその場で音声と画像をチョイスできる

オファーとレイアウトはgoogleが一歩リード

オファーなしのYahooに対し、Googleは魅力的なオファーを用意していました。
目を引くイメージ画像とともにメリットを簡潔に、3点にまとめてアピールしています。オファーについてはユーザーの心をとらえて離さない!良いオファー表示、5つの条件でも紹介した通りですが、このgoogleのオファーはばっちり条件を満たしていますね。

また、レイアウトにも注目です。
フォームの入力項目は縦方向に配置しないとユーザビリティを損なうという点はフォームでは、複数カラムのレイアウトを極力避けるべきでもお伝えしたとおりですが、縦に配置することで左右にデットスペースが生まれてしまうのが悩みの種。googleはこの余白にオファーを配置することで、ページ全体をすっきりと見せつつも、オファーのアピールもフォームの使いやすさも損なわないという良いとこどり。これはぜひ、真似したいテクニックですね。

efo_double_ring google オファー

登録のメリットを3点に絞って表示。

登録のメリットを3点に絞って表示。

エラー表示ではYahooが差をつける

魅力的なオファー表示を見せつけたgoogleですが、エラー表示ではYahooが一枚上手。

オーソドックスなGoogleに対し、Yahooでは、エラーが起こってしまった場合、間違いがある項目のみを再入力することができるようになっていました。

ok_blue google エラー表示

Googleのエラーは、オーソドックスなタイプ。項目ごとにエラー内容を知らせてくれるので充分親切です

Googleのエラーは、オーソドックスなタイプ。項目ごとにエラー内容を知らせてくれるので充分親切です

efo_double_ring Yahoo エラー表示

エラー箇所だけ修正できるので、かなり修正がスムーズ

エラー箇所だけ修正できるので、かなり修正がスムーズ

ちなみに、入力画面上ではチェックを外したはずのメールマガジンの配信に、この画面で再びデフォルトチェックが入っていました…。
ここでこの再チェックを見落とす人は多そうですね。

次に、入力支援機能について見ていきます

機能名 google yahoo
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

ともにフォーカス中の表現、入力形式の指示に工夫あり

両社ともかなり入力支援には力を入れている印象でした。

まずは入力欄フォーカス中の工夫です。ともにフォーカス中の項目は枠線や背景色の色が変化し、ひと目でどこにいるかを認識することができるほか、
入力形式などの補足文もフォーカス時に表示するような工夫がありました。

入力形式などの補足がフォーカスした瞬間に現れると、普通に表示しているよりも目を引くため効果的なのではないでしょうか。

ok_blue google フォーカス中

フォーカス時、枠線が青くなるほか、ヒントが必要な項目にはふきだしで表示

フォーカス時、枠線が青くなるほか、ヒントが必要な項目にはふきだしで表示


さらに情報が必要な背景を表示したりも。ユーザーの心理的ハードルを下げることにつながりますね

さらに情報が必要な背景を表示したりも。ユーザーの心理的ハードルを下げることにつながりますね

ok_blue Yahoo フォーカス中

フォーカスすると、背景色が黄色に変化し、項目の真下に入力形式が表示される

フォーカスすると、背景色が黄色に変化し、項目の真下に入力形式が表示される[/caption
[caption id="attachment_4166" align="alignnone" width="394"]さらに、Yahooでも情報の使用用途を表示していました。 さらに、Yahooでも情報の使用用途を表示していました。

]

入力内容のリアルタイムの判定も

両社とも、指定したパスワードが強力かどうかをその場で確認できるようになっていました。
googleではリアルタイムエラーが導入されていました。

efo_double_ring google リアルタイム判定

必須項目を空欄のままパスすると枠線が赤色になり、エラー文言が表示

必須項目を空欄のままパスすると枠線が赤色になり、エラー文言が表示

パスワードの強度をその場でチェック

さらにパスワードの強度をその場でチェック

いっぽうYahooではアカウントがユニークかどうかや郵便番号が適切かどうかをリアルタイムに判定する機能が備わっていました。

efo_double_ring Yahoo リアルタイム判定

入力しながらパスワードの強度を確認できる

入力しながらパスワードの強度を確認できる

IDが利用可能かどうかもその場で通信して称号することが可能。

IDが利用可能かどうかもその場で通信して称号することが可能。

入力した郵便番号がどの住所のものかを表示してくれる

入力した郵便番号がどの住所のものかを表示してくれる

サジェストが充実

さらにYahooではアカウントのサジェスト機能が充実していました。
記入した自分のメールアドレスの文字列から、自動的にユニークな文字列を作成して提案してくれる機能がありました。
また、生成されるメールアドレスのサンプルも自動表示してくれるようになっていました。

ok_blue Yahoo 入力サジェスト

メールアドレスにある「ftra」の文字列と、本寺の日付けである9/5を利用してID候補を自動生成してくれた

メールアドレスにある「ftra」の文字列と、本寺の日付けである9/5を利用してID候補を自動生成してくれた

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

今回は両社とも使いやすいフォームでたいへんハイレベルな比較となりました。
最後にいつもどおり、「勝手」にアドバイスをして終了したいと思います。

Google

どこが必須項目なのかがわかるようになっていると、さらに会員登録のハードルが下がると感じました。
また細かい点ですが、利用規約とプライバシーポリシーのリンクがチェックボックスのラベル内に配置されているのが気になります。
できればラベルとは別にリンクを用意すると、ユーザーの操作ミスを減らせるのではと思いました。

Yahoo

サービスの魅力を伝えたりユーザーの入力を促すためのオファーが少しでもあると、より魅力的なフォームになるでしょう。
また、エラー時にも外したはずのメールマガジンのチェックがオンになってしまう動作は、ユーザーが意図しない送信内容となってしまう可能性が高いため、できれば修正できると良いのではないでしょうか。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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