勝手にEFO徹底解剖 Expedia ホテル予約フォーム

本日の勝手にEFO徹底解剖は、旅行予約サイトのExpediaを取り上げたいと思います。

公式サイトによると、Expediaはホテル世界最大の旅行予約サイトで、米国、日本のほかにも、フランス、ドイツなどの欧州主要国、中国を含めたアジア諸国、世界31カ国でサイトを開設しているとのこと。また、年間5兆円以上の旅行予約がExpediaを通じて成立しているのだとか。

そんなグローバルなサービスであるExpedia。一体そのフォームにはどのような工夫が散りばめられているのでしょうか。
今回はホテルの予約(新規利用)に注目して、フォームを「徹底解剖」していきたいと思います。

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

フォーム全体の特徴

まずは全体的な特徴を取り上げていきたいと思います。

レイアウトはフォーム専用のものを用意

フォームのレイアウトは、サイト共通のものとは別に極力リンクをなくしたシンプルな形で構成されていました。
余計なリンクやコンテンツを配置せず、ユーザーに不要な離脱機会を与えないというのはEFOの基本です。

ok_blue シンプルな専用レイアウトを用意。

ヘッダー

ヘッダー


フッター

フッター

豊富なオファー文言あり

このフォームの最大の特徴とも言えるのは、ユーザーのフォーム送信を後押しするためのオファー文言の数ではないでしょうか。

フォームの冒頭はもちろん、フォームの中盤にもユーザーの入力へのモチベーションを保つための文言が配置されています。
内容もさまざまで、安全性をアピールするもの、手続きの簡便さを謳うもの、ユーザーを急かすもの、キャンセル料や料金に関する訴求、ソーシャルプルーフに関するもになど多岐に渡る観点でユーザーの送信を強力に後押ししています。

efo_double_ring 様々な方向性からユーザーの送信を後押しするオファー文言が散りばめられている。

フォーム上部のオファー文言。安全性、簡便さ、緊急性、キャンセル料が不要な旨を表記。

フォーム上部のオファー文言。安全性、簡便さ、緊急性、キャンセル料が不要な旨を表記。

フォーム中盤のオファー文言。フォームがあと少しであることや、ほかの利用者の存在(ソーシャルプルーフ)でユーザーを勇気づけ、残り部屋数を表示することで緊急性をアピール。

フォーム中盤のオファー文言。フォームがあと少しであることや、ほかの利用者の存在(ソーシャルプルーフ)でユーザーを勇気づけ、残り部屋数を表示することで緊急性をアピール。

また、サイドバーの注文サマリの下には「最低価格保障」の文言が。価格に対してもユーザーが納得感を得ることができる。

また、サイドバーの注文サマリの下には「最低価格保障」の文言が。価格に対してもユーザーが納得感を得ることができる。

また詳しくは後述しますが、送信ボタンの周りにも文言が配置されていました。

電話での予約も可能

ホテルの予約は電話でも行うことができ、フォームの上部に電話番号の表記がありました。フォーム以外の手段を提示し、全体としてのコンバージョン率を上げるための施策ですね。

ok_blue電話のほうが都合が良い場合、その場で実施することが可能。

電話での申し込みも可能

電話での申し込みも可能

必須マークは控えめ

必須項目へのマーク表示は、赤色のアスタリスクをラベル横に表示する形。少し控えめなので、もうすこし目立っていると良いのではないでしょうか
理想は文字で「必須」と表記されている状態です。

soso_black 必須マークはアスタリスクの表示のみ。

必須マークは控えめ。

必須マークは控えめ。

リアルタイムアラートを導入

フォーム全体を通して、入力ミスをその場で指摘するリアルタイムアラート機能が導入されています。

ok_blueリアルタイムアラートがあることで、エラー時のストレスを軽減することができる。

リアルタイムアラートを導入。

リアルタイムアラートを導入。

エラー表示も理想的な形

また、エラーページの表記も申し分なくまとめられています。冒頭にエラーの存在を表示し、該当箇所に具体的な内容が表示される形です。
なお、冒頭の「該当箇所に移動する」をクリックすると、直近のエラー項目にフォーカスが当たるようになっています。

efo_double_ring 冒頭に一言&該当箇所への具体的内容表示と理想的なエラー表示方法。

エラー表示

エラー表示された画面例

予約情報のサマリーを表示

予約先のホテルの概要が右側サイドバーに表示されており、いま自分がどんなホテルを予約しようとしているかをいつでも確認できるようになっています。

ok_blueフォームの横に予約内容のサマリーを表示し、いつでも確認できるようになっていた。

右サイドバーに予約対象のサマリーを表示

右サイドバーに予約対象のサマリーを表示

1ページ完結、確認画面なし

フォームの入力画面は1ページのみで、確認画面もなく、一切の遷移なしに予約を完了できるようになっていました。
ですが後述する任意項目の折りたたみなどの工夫により全体としてコンパクトにまとまっています。

ok_blue1ページで完結するため、ページ遷移の煩わしさがなく、全体像を把握しやすい

送信ボタンの上下にはユーザーのアクションを促進する文言が配置されている。

入力内容がそのまま送信されるようです。

入力欄ごとの特徴

今回は1ページで完結するフォームですので、入力欄ごとに詳しくフォームを観察していきます。

旅行者情報の入力

まずは、利用者の個人情報の入力です。

旅行者情報の入力欄

旅行者情報の入力欄

サインインフォームは折りたたまれた状態で用意

既に会員登録済みのユーザーは、サインインをすることで情報の呼び出しが可能です。このサインインフォームの特徴は、フォーム内に、折りたたまれて用意されている点。
別ページで用意することの多いサインインフォームですが、フォーム内に用意することで、スムーズな予約のユーザー体験を断ち切ることがありません
さらに、既に登録済みのユーザーがパスワード忘れてしまっていたとしても、その場合はサインインせずに予約を進めればよく、ログイン情報忘れによる離脱までカバーしています。
もちろん、折り畳んで表示することでサインインとは無縁の新規ユーザーの作業を邪魔することはありません

efo_double_ring その場で必要に応じて展開・利用できるサインイン。もちろん新規利用ユーザーの邪魔にもならない。

サインインフォーム展開前

サインインフォーム展開前


サインインフォーム展開後

サインインフォーム展開後

オプション項目も折りたたみ表示

また、「ベッドタイプ リクエスト」「スペシャル リクエスト」という2つの任意項目についても入力欄が折りたたまれており、必要に応じて展開し入力する形をとっていました。
オプションが不要な人にとっては、フォームをすっきりとコンパクトに見せることに成功しています。

efo_double_ring 折りたたみ表示された任意項目

オプシション項目の展開後

オプシション項目の展開後

オプション項目の展開前

オプション項目の展開前

デフォルト値を用意
国番号を選択するセレクトボックスがありますが、日本からアクセスしているためか既に日本がデフォルト値として選択されています。
小さな工夫ですが、ユーザー目線を感じます。

ただし、ラベルのわかりやすさには課題が。次の入力項目が電話番号なので、電話番号の前に付ける国番号だということがわかりますが、唐突に「国番号」というラベルは少しわかりにくいおそれはあります。

ok_blue あらかじめデフォルト値が「日本」となっている。

国番号にはデフォルト値が用意されている

国番号にはデフォルト値が用意されている

情報の利用用途を表記

電話番号の入力欄には、プレースホルダー内に情報取得の理由を表記しています。
個人情報の入力を躊躇するユーザーも安心して入力を進めることができますね。

ok_blue

電話番号の用途をプレースホルダーに表示している

電話番号の用途をプレースホルダーに表示している

お支払い情報の入力

次に、クレジットカード情報の登録です。Expediaでは、料金の支払いを前払いと現地払いの2種類から選択することができますが、そのいずれの場合もカード情報の登録が必要なようです。今回は「後払い」をすでに選択しています。

支払い情報の入力欄

支払い情報の入力欄

カード番号の入力欄に工夫が

カード番号の入力欄は、半角数字以外で入力があった場合に入力内容がクリアされるようになっていました。
例えばカード番号の間にスペースを入れた場合も自動的にクリアされるため、入力形式エラーになることがありません。

ok_blue半角数字以外(スペースなど)を入力すると自動でクリアされるようになっている。

カード番号入力欄。半角数字以外を入力すると自動でクリアされる

カード番号入力欄。半角数字以外を入力すると自動でクリアされる

セキュリティコードの説明を表記

少しわかりにくい「セキュリティコード」の文言を説明する図版が用意されていました。直感的でわかりやすいですね。

ok_blueセキュリティコードに関する図版を表示

セキュリティコードに関する図版を表示。

セキュリティコードに関する図版。

確認メールアドレスの入力

最後に、確認のメールの送信先メールアドレスを登録します。
また、希望者はここでパスワードを入力することによって、会員登録を済ませることができます。

確認メールアドレスの入力欄

確認メールアドレスの入力欄

会員登録は任意

予約に進む前に会員登録をさせる流れのサイトが多い中、Expediaではフォームの最後に任意項目として会員登録向け情報の入力欄を用意しています。
会員登録は希望した場合にのみ実施できるようになっており、ユーザー目線に設計されていると思います。

efo_double_ring 会員登録を必須にせず、「ついで」に実施できる仕様はすばらしいと思います。

アカウント作成のチェックボックス

アカウント作成のチェックボックス

メールマガジンのチェックボックスは論点

メールマガジンが必要かどうかを問うチェックボックスがあるのですが、よく見てみると「購読しない場合はチェックを入れる」と書いています。

希望する場合にチェックを入れることがほとんどだと思いますので、購読率を高めるための施策としてこのような形になっていることが予想されますが、真のユーザー目線かどうかは論点かなと思います。

注意 メールマガジンは、購読しない場合にチェックする方式。購読率は向上しそうですが…

メールマガジンは、購読しない場合にチェックする方式。

メールマガジンは、購読しない場合にチェックする方式。

送信ボタン

以上で入力は終わり、あとは送信ボタンをクリックするのみです。

ボタンにも念押しで工夫が。ボタンの上下に送信を後押しする文言を表示しています。
「現時点での支払額なし」「キャンセルは無料」ということで、ユーザーが今すぐ予約するメリットを強調しているほか、通信の安全性についてもしっかりと明記されています。まだ予約するかどうかに迷いのあるユーザーも、安心して予約を実行できます。

efo_double_ring あとひといき!の場面でのユーザーの迷いをなくす工夫が。

送信ボタンの上下にはユーザーのアクションを促進する文言が配置されている。

送信ボタンの上下にはユーザーのアクションを促進する文言が配置されている。

最後に

いかがだったでしょうか。今回の勝手にEFO徹底解剖はここまでです。
さすがは世界最大の旅行予約サイト、フォームを使いやすくするだけでなく、コンバージョン率を向上させるためのテクニックがふんだんに盛り込まれていたように思います。
ホテルの予約というと心理的障壁が高いように感じますが、不思議と予約へのハードルが下がり、むしろ「はやく予約を完了しなくては」という気持ちにさせられてしまうのには脱帽です。

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

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

  • フォーム専用のレイアウト
  • 豊富なオファー文言
  • 電話での予約手段を用意
  • リアルタイムアラートの導入
  • 理想的なエラー表示
  • 予約情報のサマリー表示
  • 1ページ完結、確認画面なしのフォーム
  • 人項目の折りたたみ表示
  • 適切なデフォルト値の用意
  • 情報の使用用途を表記
  • 特定の入力形式のみ入力可能な項目
  • 会員登録は任意で実施

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

  • 控えめな必須マーク表示
  • 購読しない場合にチェックを入れるチェックボックス
  • この記事が気に入ったら
    いいね!しよう

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

    エフトラEFO機能アイコン

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

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

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

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

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

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

    メールアドレスを入力

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