Pages Navigation Menu

For Creative Communication

Booking.comのUI/UXが、楽天トラベルより遥かに優れている理由

最近ちらほら出張があって、よくインターネットホテル予約サイトを利用しています。最近はポイント狙いの楽天トラベルから、Booking.comに完全に乗り換えました。Webアプリケーションもスマホアプリも、Booking.comは本当によくできていて、全くノーストレスで利用できるのが良いところ。この記事では、UI/UXを設計する者の視点と、一ユーザーとしての視点から、二つのサービスを比べてみます。

【本記事で想定するシーン】出張先のホテルを検索し、予約する(ビジネス利用、単身、1泊)

(1) 日程と場所が決まっている時(PC/Webアプリ版)

例えば、来週金曜に広島出張があって、市中心部の客先の近くに宿を取りたい、というシーンを考えます。ビジネス利用なので、オフィスのPCから操作する想定で、Web版で解説します。

Booking.comを開くと、その時点で「都市、地域、住所などを入力」の欄にフォーカスが当たっていて、そのまま入力を始めることができます(フォームのinputに初期値を設定するのはわりと基本的な設定)。ここに「広島」と入力すると、自動的にサジェストが出てきました。今回は駅から少し離れた市街地なので、「広島市」を選択します。「広島市の大人気エリア」ってどこだろう。気になる。この辺りは、「探したいエリアの範囲」を、きわめて的確な粒度で区切っている感じがします。

01_input

続いて日程、目的などを選びます。出張目的か旅行目的かで、「おすすめ」の出力が変化します。

02_input

「検索」を押した結果。かなりいろいろな属性が乗っかって賑やかなリストですが、「スコア」「星の数」「本日の予約数」「残室数」「割引率/額」など、比較検討に効きそうな情報がすべてコンパクトにまとまっています。これだけの情報が凝縮されてもそこまで見にくく感じないのは、細かなデザイン調整のなせるわざ。詳細ページを見比べなくても、一覧ページでだいたいのあたりを付けられるのは、ユーザー価値が高いと感じます。特に「今日だけ」「今だけ」「残り○室」といったお得感を煽る情報、「本日○件の予約がありました」という、他のユーザーの行動事実による間接的な評価が、判断に大きく影響してきます。心理学的な仕掛けをすごく盛り込んでいそう。

03_list

「すべての空室を見る」を押すと、プランの一覧に遷移し、「部屋数を選択」して予約します。この画面でも、プランごとの割引率や条件などがもりもりに表示されています。Booking.comは、リアルタイム更新で「はやく予約しないと埋まっちゃいそう!」と焦らせる機能が非常によくできていると感じます(それが嫌いな人も少なからずいるでしょうけど)。

04_detail

ちなみに、Webアプリ限定ですが、この「部屋数を選択」は、出張時には特に便利で、「3人で行くから1室1名で3部屋分まとめて予約しとくね!」というのが非常にスムーズにできます。会計は分けてもいいし、3人分まとめて1つの領収書にもできます(Booking.comは現地払いなのでチェックイン時に相談する)。Booking.comはネット決済ではなく現地決済なので、「とりあえず仮予約」がしやすく、「とりあえず3部屋押さえておいたけど、別の宿がいい人は言ってね。キャンセルしとくし」というコミュニケーションが容易にできます。そう言うとだいたいキャンセルしないんですけど。おそらくBooking.comのキャンセル率は相当高い(その分は金額に織り込まれているはず)だけど、それが後述する「今、ここで」のニーズに応えやすかったりと、絶妙なバランスのもとに成り立っていそうです。

05_price

少し戻って、「地図表示」を見てみます。実際の話として、「取引先のオフィスから徒歩で行ける範囲で、予算内で、評価のいいとこ」という条件での比較は、とても重要な動作です。GoogleMaps APIを使った地図表示で、コンパクトなピンの中に最低限の情報が詰まっています。レーティング、星、最安金額があれば、比較するには十分。リンク先の詳細ページは、上と同一です。

06_map

さて、ここからは同じことを楽天トラベルでやってみます。楽天トラベルでも、まずはキーワード検索で「広島」とやってみますが…

07_rakuten1

キーワード検索の結果は、なんと「日程」を反映していません。この画面では泊まりたい日に空いているかどうかわからず、詳細画面→プラン選択→空室カレンダー と進んで一つ一つ確認しないといけないので、特に繁忙期で空室が少ない場合、この遷移では使い物になりません。オートコンプリートで「広島市」を選んでいるのに、エリアが「全国」、サイドバーが全国から地域で絞り込むインターフェースなのも不満です(サジェストの項目に属性を紐づけているかどうかの差)。この「キーワード検索」の使えなさは、乗り換えの大きな理由の一つです。この機能は「日程が決まっていない旅行で、宿を選んでから日を決める」みたいなユーザーを想定しているのでしょうか…。

08_rakutenlist

一方、日程と予算、そして「都道府県」(なぜプルダウンで県を選ばないといけないのか…)を入力して「検索」を押すと、下記の地図画面が表示され、ここから地域を選ばないといけません。広島の場合は「広島市内」を選べばいいんですが、東京都内は「東京23区内」を選んだ後、さらに「渋谷・青山・恵比寿・目黒」「品川・蒲田・羽田空港」といった、ビジネスユーザーの行動圏に合わない非常に気の利かないエリア区分から選んで絞り込まねばならず、この粒度の噛み合わない感じもストレスのもとです。「渋谷が一杯だから横浜で」といった探し直しも大変不便です。

09_rakutenpref

地図表示画面は同等か、プランが出ているだけ若干楽天の方が早いっちゃ早いくらい。

10_rakutenmap

以上見てきたように、「出張先のホテルを検索し、予約する」というごくごく基本的なユーザージャーニーを見ても、歴史のある楽天トラベルには致命的なペインポイントが複数あると感じます。一方、Booking.comは、ごくわずかな画面遷移と、購買行動を後押しする情報掲示で、大変スムーズな利用経験を得ることができます。同僚の話では、「予約完了したらレンタカー情報をおすすめしてくれる」といった、気の利いたクロスセル施策も良い感じとのことです。

とはいえ、楽天トラベルの方が圧倒的に金額は安く(同じホテルでも2000円以上違うのはザラ)、Booking.comに出てないホテルもたくさんあります。候補のホテルが決まっているか、探しやすい条件(駅指定など)で安く済ませたい時は、楽天トラベルを選ぶこともあるでしょう。

(2) 「今夜、いま、ここ」で探すとき(スマホアプリ版)

続いて。

yabai

といったケースで急遽宿を探すシーンを想定します。ここではスマホアプリ(iOS)で比較してみます。家の鍵を忘れたまま深夜に帰宅して家には入れない時とか。

Booking.comのスマホアプリは、初期設定が「現在地周辺」で「本日」になっているので、そのまま人数だけを変更して検索をタップします。(スマホで探すってことは、「今ここ」だよね、というのは妥当な前提だと思います)

11_b-sp1

検索結果画面。一瞬で候補リストが表示されます。これ北のはずれにある自宅でやっているので、4.8kmってけっこう距離がありますが、でも京都市内の移動は実際は全然考慮できるので、現在地検索で市中心部の候補が入ってくるのは全然アリ。

12_b-sp2

詳細画面に遷移し、「客室選択」して予約が完了します。一安心です。全体的に文字は小さめですが、日本語UIでも「ダサさ」のない整った画面構成です。

13_b-sp3

一方の楽天トラベルですが…同じく現在地周辺で検索をかけてみると…

15_r-sp1

0件(涙)

16_r-sp2

エリアを「京都市内>京都駅周辺」と選ぶと選択肢が出てくるので、使えなくはない。おそらく「現在地」の半径距離の設定が大きく違うのでしょう(確かに2km圏内で16000円以下だったら該当しない)。このあたりは「現在地」を選ぶ状況の解釈が、サービス設計に影響する部分です。一覧〜詳細〜予約の流れは、まあ良いのではないでしょうか。

17_r-sp3

以上、完全にBooking.comをえこひいきする批評記事をお送りしましたが、楽天トラベルに限らず、「ごく普通の使い方」をしてみたときに、基本的なユーザー価値がスムーズに提供できていない(フローが切れている、ひっかかる、違和感を与える、ノイズが多いなど)サービスは少なくないような気がします。これを避けるには、明白なユーザーの姿の共有(そのためのユーザーを知る活動・調査)、「ユーザージャーニー」の言語化と設計、ユーザーニーズに対する「ソリューション」としてのデザイン、コンテンツ、実装を丁寧にしていくこと。一方で、こうした「ごく普通の使い方」の経験を「コア価値」として突き詰めるのは、サービス全体の評価を高めることにつながると思います。どのような進め方をすれば「ぶれずに」高精度のUI/UXを提供できるか、研究するべき点は多くありますね。

コメントを残す