ホーム » UX Design » UX-design #Day22(Booking.com) #4

目次

UX-design #Day22(Booking.com) #4

目次

Booking.com 予約>予約詳細画面をトレースしてみた!

22日目です。今日もBooking.comの画面をトレースしました。今回は予約詳細画面です。詳細画面って、いろんな情報、テキストも多いので理解するのに時間がかかります。ですが、デザインの力で認識負荷を抑えることができます。そのような手法もこちらの画面で取り入れられています。早速気づいたことを共有していきます。

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

  • ブランドロゴのフォントは完全にオリジナルですね。もう少しデザインが上達したら、ロゴなども忠実に再現してみたいと思います。まだまだですね。Bookimg.comのロゴは止めの部分ですかね、線の終わりの部分が特徴的です。真っ直ぐでもなく、少しとんがった形をしています。後で本物のアプリでよくみてみてください。
  • ミラーの法則によって、情報が認識しやすくなっています。まず、この画面は大きく3つのチャンクに分かれています。チャンクはこのdividerと言われる横線ですね。これで分かれていることがわかります。
  • 1番上のチャンクでは、特に重要な予約番号と暗証番号が書かれている部分がほかの要素とはちょっと違い線で囲まれていて、背景色がグレーになっているので目立っています。これで、この2つの情報が目に入りやすくなります。
  • 2つ目のチャンクでは、特にこのホテル名の下は宿泊日時・住所・ポリシーの3つのチャンクに分かれています。各チャンクはアイコンと見出しと詳細という要素が含まれていて同じパターンが繰り返されていることでチャンクだと認識できますね。
  • 3つ目のチャンクは宿泊施設への問い合わせがであることがわかります 。
  • この画面で何回も使われているアイコン。コピーのアイコンですね。これはほかのアプリでも多用されていて、ヤコブの法則にならって何ができるのかというのをすでにユーザーは学習済みなのでアイコンをたっぷすることができるでしょう。
  • このようにみやすい画面にできるようにがんばります!(すみません、最後に意気込みを)

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

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

コメントを送る

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