ホーム » UX Design » UX-design #Day19(Booking.com) #1

目次

UX-design #Day19(Booking.com) #1

目次

Booking.com お気に入り画面をトレースしてみた!

19日目です。今日はBooking.comの画面をトレースしました。今週はBooking.comでUIの練習をしていきたいと思います。いつも宿泊の予約はBooking.comでしているので、結構上のランクにいったのでお得に泊まることができて嬉しいですね。お世話になっています。アプリが使いやすいので使っているっていうこともあるかもしれません。一番簡単そうなリストが並んでいるお気に入り画面をトレースしました。では、気づいたことを共有していきます!

【UI/UXの観点から気づいたこと】

  • ヘッダーはシンプルですね。Booking.comのブランドカラーに染まっていて没入感がありますね!見出しがあり、タブ切り替え(リスト・通知)があります。現在、リストの方にいることがわかります。タブが選択されていることがstrokeと少し白くなっていることでわかります。非常にわかりやすいです。
  • 通知というのが、どういったものだかわかりませんでした。実際に見てみたところフライトに関する料金の変動による通知らしいです。そのため、飛行機のアイコンなのですね。海外とか、国内でもフライトに関してお気に入りの便があったら通知が来るようになっているのですかね。使う機会が今までなかったのでわかりませんでした。アイコンにちょっと工夫が必要そうです。
  • ナビゲーションバーは必要最低限で、4つしかボタンがないので間隔も広く押しやすいです。宿泊予約の時に使いそうな4つしかないですね。ものミニマルな感じがクールですね。ちなみにアイコンも割とシンプルでトレースしやすかったです。お気に入りのところが青く、アイコンもFillになっているので選択されていることがわかります!おそらく、Fillかoutlineかの違いよりも色の違いの方が認識しやすいのでメルカリよりもこちらのナビゲーションの方が個人的には好きです。
  • リストに関しては、保存済みが何件と表示されているのがとてもいいと思います。それぞれのリストの中の状態がわかるっていうのは、UXの観点からも大事だなと思います。
  • よこの3点のアイコン。よく設定などの機能を表すために使われるアイコンです。おそらくリストの削除があるのかなと思いました!予想通り、リストの「削除・名前を変更・シェア」という機能が半モーダルで表示されました。シェア機能まであるのは優秀ですね。誰かと宿泊する可能性もありますし、機能として充足していますね!
  • この画面、とにかく無駄がない!!シンプルで好きです。
 

私がトレースしたものについて気づいたことやアドバイスがあれば、コメントいただけると嬉しいです!

またみなさんがこのアプリの画面で気づいがUI/UXについて共有いただけると嬉しいです!!

コメントを送る

世界をUXデザインでより良くする
UXコピーでより良くする
明日も一緒に