アプリUI研究#17 ホテル直前予約アプリならではのUIとは?

こんにちは!デザイナーのヒロコです(@hiroko___design

今回はホテル直前予約アプリの「Hotel Tonight」についてです。Hotel Tonightは、人気ホテルと契約を結び売れ残っている部屋をユーザーに安く提供するサービス。現在は当日予約だけでなく100日前から予約可能になっていて、Airbnbの競合でもある。

今回はそのHotel Tonightの直前予約アプリならではのUIを考察しました。注目した点は...

* 特別価格で提供するホテル情報をアニメーションで表示(注目させるデザイン)
* いくら値下げされたのかを可視化
* 詳細ページの1ページでホテル情報をすべて表示(ページ移動は必要なし)
* レビューは3つまで表示
* ホテル公式写真だけでなく、ユーザーが撮った写真も公開
* 予約するとクレジットが貯まり、次回ディスカウントも
* アプリ内コンシェルジュがいるホテルもあるので、色々と質問が可能

上記の中からいくつかまとめておきます。

検索結果一覧画面

まず場所、日付、その他詳細を設定して検索。100日前から予約でき、14連泊まで可能。マップでホテルの場所を表示しているその下には、プッシュ通知をオススメする表示が。かなり幅をとって表示している。「他のホテル予約サイトだと一泊$349だが、Hotel Tonightは$320も安いよ」と伝え、通知許可設定に誘導している。

その下には「Today's Daily Drop」というその日限りのセール情報が表示されている。ここをスライドすると15分だけ情報が表示されるようになっている。

アニメーションを用いることによってユーザーの視線を集めることができる。

値下げ前の価格も表示されているので、どれくらいお得に予約できるか確認できるのが良い。全体的なデザインは誇張しすぎず、洗練されている。


ホテル情報の詳細ページ

その他ホテル予約アプリBooking.comや Hotels.com等は、アメニティや口コミなど「詳細を表示」を押して次のページに移動しないと詳細を確認できないことが多い。Hotel Tonightはそれをせずに、詳細ページ1ページで上記の情報を確認することができる。

例えばアメニティ一覧。アイコンだけでなく文字でも表示することによってわかりやすく。


ユーザーの口コミ。他の予約サイトでは全ての口コミを表示できるようになっているが、Hotel Tonightは最新3つの口コミのみ表示している。他の口コミが見れない代わりに、評価数と全体的評価をパーセンテージで表示している。

「もっと多くの口コミを確認して予約するか否かを決めたい」という人もいると思うが、この部分こそ直前予約アプリならではのUIになっていると思う。


また他のユーザーが撮ったホテルの写真をアップしてくれているのも嬉しい。ホテルの公式写真のみだと「イメージと違った」ということも多々ある。


予約

また予約時には会員登録の必要がないので、3クリックで予約まで完了することができる。


ホテル詳細画面1ページで完結するようなデザイン、予約完了までの簡潔さなど直前予約アプリならではのUIになっていました。

フィードバックなど何でもお待ちしています〜(@hiroko___design


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます🤗
11

Hiroko

都内在住、フリーランスのUIデザイナーです。1時間を目安にアプリを触りその考察について書いています✍️

UI勉強

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。