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

今回はスマートフォンサイトで「勝手に比較」を行いたいと思います。
取り上げるサイトは、以前もPC版フォームを「勝手に比較」取り上げた国内の2大検索エンジン「google」(https://www.google.co.jp/)(以下、google)と「Yahoo!」(http://www.yahoo.co.jp/)(以下、Yahoo)です。

※以前の比較記事はこちら
勝手にEFO比較分析【google × Yahoo!】(大手検索エンジン アカウント登録編)
https://f-tra.jp/blog/compare/4150

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

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

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

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

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

google yahoo
ページ数(新規登録の場合) 入力、写真の追加、完了の3つ 入力、T会員登録、完了の3つ
入力項目 11種類 8種類
必須項目入力欄の数 10個 7個
フロー なし なし
オファー なし なし
必須マーク なし なし
利用規約、
プライバシーポリシー
別ページ表示 記載なし
入力画面のレイアウト フォーム専用 フォーム専用

スマートフォンに最適化されたフォーム専用レイアウト

両社ともスマートフォン用に画面デザインが最適化されており、無駄なコンテンツがないフォーム専用のレイアウトを用意していました。
gogoleはもともとレスポンシブ・ウェブデザインを採用しており、どんなデバイスサイズにも対応する形をとっていましたが、いっぽうでスマートフォンユーザーには専用のソースを見せているようです。
Yahooはスマートフォン専用のページデザインを用意して最適化を行なっていました。

ok_blue google フォーム画面

googleのスマートフォン用フォーム(右)とPC向けフォーム(左)の比較。

googleのスマートフォン用フォーム(右)とPC向けフォーム(左)の比較。画面サイズが小さい際には左側のオファー部分が非表示になり、フォームが横幅いっぱいに表示される

ok_blue Yahoo フォーム画面

yahooのスマートフォン用フォーム(右)とPC向けフォーム(左)の比較。

yahooのスマートフォン用フォーム(右)とPC向けフォーム(左)の比較。

項目数の変化に差が

googleはPC用フォームと項目数は変わらず。

対してyahooは、パスワードの再入力項目とポイントカードの所持を尋ねる設問を省略し、PC向けフォームよりも項目数が減らされていました。

さらに、yahooのフォームの最後には画像認証(CAPTCHA)がありますが、この設問はその他の項目の入力を進めないと表示されないようになっていました。
画面訪問時の項目数を少なく見せる工夫なのではと推測します。

soso_black google 項目数

g

googleは項目数も変わらず。

ok_blueYahoo 項目数

y

Yahooの画面訪問時の画面。項目の削減とキャプチャを隠すことでかなり入力欄が少なく見える

項目の入力方法に変化が

さらに両社とも入力方法に少し変化が見られました。

googleでは、スマートフォンの生年月日の入力をすべてセレククトボックスに変更しています。
PCでは年と日付はテキストボックスになっていました。

soso_black google 生年月日

とても些細な変化ですが入力コンポーネントが変更に。スマートフォンでテキスト入力を減らすための配慮でしょうか。

とても些細な変化ですが入力コンポーネントが変更に。スマートフォンでテキスト入力を減らすための配慮でしょうか。ただし、iOSでは選択肢が多いセレクトボックスば選択しにくい可能性が。

またyahooではパスワード確認欄をなくすかわりに、入力内容の表示/非表示を切り替える機能を新たに設けていました。
この機能のおかげで、ユーザーは正しくパスワードを設定できそうです。

efo_double_ring Yahoo パスワード入力

「パスワードを表示」にチェックを入れると入力内容が表示でき、チェックをはずすとマスキングされる。

「パスワードを表示」にチェックを入れると入力内容が表示でき、チェックをはずすとマスキングされる。

エラー表示はPCと同じ。Yahooが親切

エラー表示はPC同様、ハイレベルな戦いに。
オーソドックスな該当箇所へのエラー表示を行うGoogleに対し、Yahooでは、エラーが起こってしまった場合、間違いがある項目のみを再入力することができるようになっており、yahooに軍配が上がりました。

ok_blue google エラー表示

googleのエラー表示は、該当箇所の枠線を赤で囲み、その下にエラーメッセージをインラインで表示する。PCと同じ形。

googleのエラー表示は、該当箇所の枠線を赤で囲み、その下にエラーメッセージをインラインで表示する。PCと同じ形。

efo_double_ring Yahoo エラー表示

yahooでは該当箇所へのマーク&メッセージ表示のほかに、画面上部へのメッセージの表示や、すでに入力完了した箇所を先に保存してくれる点で一歩リード

yahooでは該当箇所へのマーク&メッセージ表示のほかに、画面上部へのメッセージの表示や、すでに入力完了した箇所を先に保存してくれる点で親切さは一歩リード

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

機能名 google yahoo
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

キーボードの対応ではgoogleがリード

スマートフォンではメールアドレスや数字など入力内容に応じたキーボードを表示することが可能です。

googleのフォームでは「password」「tel」など専用のキーボードを表示していたのに対し、
yahooの入力項目の一部では、このキーボードの対応がされておらず、入力中に何度もキーボードを切り替える必要が生じるなど不便に感じました。

例えばメールアドレスもinput typeが通常の「text」に設定されていた。アットマークやハイフンなどの入力のたびにパネルを切り替えなくてはならず、面倒

例えばメールアドレスもinput typeが通常の「text」に設定されていた。アットマークやハイフンなどの入力のたびにパネルを切り替えなくてはならず、面倒に感じる可能性も

ともにフォーカス動作に工夫あり

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

まずは入力欄フォーカス中の工夫です。

googleでは、PCでも表示していた入力中のメッセージ表示がスマートフォンでも実装されていました。
ここで感心なのは、PCでは吹き出し型で表示していたメッセージを、スマホ向け画面ではインライン型で表示している点。レスポンシブウェブデザインとは別にスマホ向けページの用意があるのは、この入力支援機能の対応というのもひとつの理由であるように見受けました。ユーザビリティへの深い配慮を感じます。

ただ一点だけ残念なのは、項目フォーカス時のズームが効いているためにせっかくのメッセージが見きれてしまうことがある点。こちらはぜひズームをオフにしていただければと思います。

ok_blue google フォーカス中

フォーカスすると、枠線が青色に変化する他、入力に対する補足説明が現れる。

フォーカスすると、枠線が青色に変化する他、入力に対する補足説明が現れる。

の外にラベルや説明文が現れるようになっています。

soso_black google フォーカス中その2

フォーカスのズームのために、せっかく表示されたメッセージが見きれてしまう場面も。

フォーカスのズームのために、せっかく表示されたメッセージが見きれてしまう場面も。

yahooではフォーカス前にはプレースホルダーにラベルが入っていますが、フォーカスすると項目の外側にラベルと補足分が表示されるようになっています。

ok_blue Yahoo フォーカス中

フォーカスするまではラベルと補足説明は表示されない。

フォーカスするまではラベルと補足説明は表示されない。

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

また両社とも、PCと同様に指定したパスワードが強力かどうかをその場で確認できるようになっていました。

googleではリアルタイムエラーが導入されていました。

efo_double_ring google リアルタイム判定

s

必須項目を空欄のままパスしたり、必要な入力要件を満たしていない場合は枠線が赤色になり、エラー文言が表示される

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

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

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

efo_double_ring Yahoo リアルタイム判定

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

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

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

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

z

入力した郵便番号の住所を表示する

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

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

Google

必須項目の表示とスマートフォン向けに入力項目を厳選できると、さらにユーザーにとって入力しやすいフォームになるのではと思います。
また繰り返しになりますが、ぜひ項目フォーカス時のズームはオフにして、ユーザビリティを向上させてください。

Yahoo

入力内容に応じたキーボードを表示するようにすると使い勝手がかなりよくなるのではと思います。
また随所で見られる吹出し型の確認ダイアログは、スマートフォンでは直前のラベルを隠してしまうためにユーザビリティを侵しがちです。インライン型にするか、タップすると表示を消すことができるなどのオプションを設けるとさらにユーザーに優しくなります。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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