勝手にEFO徹底解剖 Uber 会員登録フォーム

本日はWEB上での自動車配車サービスを提供するUberの会員登録フォームを「徹底解剖」していきます。
Uberは米国で生まれ、世界58カ国・地域の300都市で展開しているグローバルなサービス。

配車を利用するためにはまず会員登録が必要となりますが、そのフォームには一体どのようなユーザビリティ上の工夫が凝らされているのでしょうか。さっそく「徹底解剖」していきましょう。

※なお、Uberはウェブサイトとアプリという2種類のサービスを用意していますが、今回はWEBでの会員登録(PC/スマートフォン両方)を想定して分析していきます。

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

フォーム全体の特徴

フォームの構成

Uberの会員登録は、1ページで完結する非常なシンプルな構成となっているようです。
ページ遷移の煩わしさが極力排除されているとも言えるでしょう。

efo_double_ring 確認画面はなく、そのままアカウントの作成が実行されるようです

送信ボタン

送信ボタン

レイアウト

ヘッダー/フッター双方に無駄なリンクが一切ない、理想的なフォームレイアウトです。
またレスポンシブ・ウェブデザインを採用しており、スマートフォンではほぼ共通のデザインながら、装飾を非表示にしてよりシンプルなレイアウトで表示されるようになっています。

efo_double_ring ヘッダーにもフッターにも無駄がいっさいない。

PC版のフォームの全体像。ヘッダーにもフッターにも無がいっさいない。

PC版のフォームの全体像。

スマートフォンでのレイアウト

スマートフォンでのレイアウト

リアルタイムアラート

ユーザーの入力ミスをその場で判定するリアルタイムアラート機能が導入されていました。
ただし気になったのは、エラー文言が英語のままになっている点。ユーザーが戸惑ってしまいますので、エラー文言もしっかりローカライズしておきたいですね。

注意 リアルタイムアラートの文言が英語で表示されてしまっている。

リアルタイムアラートの表示例。

リアルタイムアラートの表示例。

サブミットブロックあり

ユーザーがミスなく入力を終えるまで送信ボタンが有効化されない機能「サブミットブロック」が導入されていました。

注意 送信ボタン押下時のエラー表示を極力防ぐことができる。

サブミットブロックが導入された送信ボタン

サブミットブロックが導入された送信ボタン

離脱ブロックあり

ユーザーがページから離れようとした際に確認ダイアログを表示する「離脱ブロック」が導入されていました。

efo_double_ring ユーザーのうっかり離脱を防いでくれます。

離脱ブロック

離脱ブロック

キーボードが最適化

主にスマートフォンで見た場合に入力しやすくなる、キーボードの最適化が実施済みでした。

efo_double_ring スマートフォンからでも入力しやすい配慮が。

スマートフォンでのキーボード表示例

スマートフォンでのキーボード表示例

入力例の表示、フォーカス中の強調を実施

さらに、プレースホルダー内に入力例を表示したり、フォーカス中の入力欄に対し枠線で強調するなどの入力支援施策も見られました。

注意 ユーザーが入力をスムーズに進めるための入力支援施策が見られた。

パスワード欄のプレースホルダー内に、入力条件を表記している

プレースホルダーに入力例を表示している例(ただし上段のみ。下段については後述)

フォーカス中の項目の枠線を強調

フォーカス中の項目の枠線を強調

必須マークは△

必須マークは、青色のアスタリスクで表記しています。認識には問題ないものの、理想は「必須」を文字で表記する方法。
またアスタリスクが少し小さいこともあり、マークがしっかり目立っているとはいえない状況です。

注意 必須箇所はもう少し目立っていたほうが良いか

必須マーク

必須マーク

入力内容ごとの特徴

ここからは、具体的な入力内容とともにフォームを分析していきます。

アカウント情報の入力

まずはメールアドレスとパスワードを入力するフォームです。

気になったのは、パスワード欄の入力条件をプレースホルダーに表記している点。
プレースホルダー内のコンテンツは、入力を始めると見えなくなってしまいます。
入力の最中もユーザーが参照できるよう、欄外に表示するようにしたいですね。

注意 パスワード欄のプレースホルダー内に、入力条件を表記している

パスワード欄のプレースホルダー内に、入力条件を表記している

パスワード欄(下段)

また、実際には記載の「5文字以上」の条件で入力してもエラーとなる場合があるようです。
ユーザーがストレスを感じてしまうかもしれませんので、本当のバリデート条件に即した内容を表記したほうが良いのではと感じました。

注意 5文字以上である文字列「pssword」を入力したら下記のエラーが。数字を組み合わせたところOKでした。

リアルタイムアラートの表示例。

リアルタイムアラートの表示例。

プロフィールの入力

ここでもプレースホルダーに入力条件(ローマ字)に記述が。
ただし実際には、ローマ字で入力しなくてもエラーとはならないようです。

注意 日本語で入力してみたが、エラーは表示されなかった

日本語で入力したが、エラーは表示されなかった

名前の入力欄

電話番号の入力では、自動的にハイフンを挿入するようになっており、ユーザーがハイフンの有無を迷うこと無く、なおかつ見やすく入力できるよう工夫されていました。

efo_double_ring 自動的にハイフンが挿入される

ハイフンが自動で挿入。半角数字以外の入力を受け付けないようになっていた

ハイフンが自動で挿入。半角数字以外の入力を受け付けないようになっていた

少し気になったのは、言語については「日本語」がデフォルト値となっているのに対し、「携帯電話」の国は米国をデフォルト値としている点。
セレクトボックスから国を選択するのは煩わしい作業なので、なるべくデフォルト値が各国へ最適化されていることが望ましいでしょう。

注意 このデフォルト値もできれば日本になっていると嬉しい

携帯電話番号の、国の選択場面。

携帯電話番号の、国の選択場面。

支払い

最後は支払情報の入力です。おもにクレジットカード情報を入力していきます。

クレジットカード番号の入力欄は、さきほど紹介した電話番号のハイフンと同様、数字の区切り箇所にスペースが自動で挿入されるようになっていました。
カード番号は長い文字の羅列ですが、このスペースの存在により、ユーザーも自分の入力した文字を確認しやすくなります。

efo_double_ring スペースが自動で挿入される

スペースが自動で挿入される

スペースが自動で挿入される

また、入力された番号に応じてカード会社のロゴを自動表示する機能もありました。

efo_double_ring カード会社のロゴを自動判別して表示

カード会社のロゴを自動判別して表示

カード会社のロゴを自動判別して表示

いっぽうで、「郵便番号」という一見支払いには関係のなさそうな入力欄があるのは気になりました。
また、プロモーションコードの入力欄が大きく表示されており、コードを探すためにユーザーがフォームを離脱することが懸念されます。

注意郵便番号は別の場所へ配置するか、支払いに関連している場合はその理由を一言明記したい。プロモーションコードは目立たない配置にするとよいか

郵便番号、プロモーションコード

郵便番号、プロモーションコード

送信時

送信ボタンの下には、利用規約や個人情報保護方針へのリンクが配置されています。
これらは別窓ではなく直接リンクされており、ユーザーが離脱してしまわないか心配ではあります。

注意 リンクは別窓表示ではない。PCでは離脱ブロック機能があるので良いですが…

個人情報リンクは別窓ではない。ただし離脱ブロックあり

利用規約と個人情報保護方針の確認用リンク

最後に

いかがだったでしょうか。今回の勝手にEFO徹底解剖はここまでです。
さすがはグローバルなウェブサービス、フォームを使いやすくするための工夫がたくさん見られたフォームでしたね。とくにかなり多くの入力支援機能が搭載されている印象でした。

最後にフォームの特徴をまとめて結びとさせていただきます。

優れている、取り入れたいポイント

  • シンプルな1ページ構成のフォーム
  • 余計なリンクがないレイアウト。スマホでも見やすいレスポンシブ・ウェブデザインを採用
  • リアルタイムアラート、サブミットブロック機能の導入
  • 入力例の表示、フォーカス中の強調を実施
  • ハイフンやスペースの自動挿入
  • カード会社のロゴを自動表示

課題と思われる点、その他論点など

  • リアルタイムアラートの文言、内容
  • 控えめな必須マーク
  • プレースホルダーへの入力条件の表示
  • 適切なデフォルト値の用意
  • 一見無関係な項目を関連して配置
  • プロモーションコードの配置
  •   

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

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

    エフトラEFO機能アイコン

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

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

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

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

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

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

    メールアドレスを入力

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