notitie

日々感じたことをメモ書き

【Sketch】Booking.comのUIデザインをトレースして気がついたこと

 f:id:rindarinda5:20160710144245p:plain

第二回目のトレースはBooking.comです。Booking.comは、ぼくが旅行をする時には絶対に欠かせないウェブサービスで、安いホテルを探すのにかなり重宝しています。今回トレースをした画像は以下にあるホテル検索欄とホテル一覧ページの2枚です。それぞれ気がついたことをまとめてみました。

f:id:rindarinda5:20160710141352p:plain

検索欄をトレースして気がついたこと

f:id:rindarinda5:20160710151607p:plain

 

 1.ラベル要素について

f:id:rindarinda5:20160710153044p:plain

白色のラベル要素はどれも高さ44.5pxと幅349pxで同じでした。二列目のチェックインとチェックアウトの部分だけなぜか2つの項目に分かれていますが、自分なりに考えた答えは以下となります。

  1. 背景がオレンジ色のため、白色ラベルを2つの項目に分けることで視認性が高まる。
  2. 視認性を高めることで、仮にチェックイン・チェックアウトの日付入力を間違えたとしても入力後に間違いに気が付きやすい。
  3. チェックイン・チェックアウト項目をひとつ下の段にある客室・大人・子供の項目のように、薄い灰色線を引くことで区別させる方法も確かにある。しかしチェックイン・チェックアウトに関わることは客室・大人・子供の人数に関することよりも重要(チェックイン・チェックアウトで入力間違えがあれば、ホテル側の手配にも問題が出る)であるから、2つの項目に分ける形式をとっている。

以上の考えから、結論としてチェックイン・チェックアウトの項目を2つに分けている理由はユーザーの入力間違いを防ぐためであると考えました。

 

参考になった記事

1.分かりやすいWeb入力フォームのための十戒 | デザイン | POSTD

2.フォームはラベルの配置場所で使いやすさが全然変わる!ユーザーが利用しやすいフォームを徹底考察 | コリス

 

2.タブバーについて

(Booking.comのタブバー)

f:id:rindarinda5:20160710153812p:plain

タブバーは一見、上下の間隔が同じだと思っていたのですが、わずかに下の方が短い間隔で配置されていることに気が付きました。同様にTwitterとFacebookのタブバーを確認したところ、こちらもBooking.comのタブバーと同様に上下の間隔が異なっており、下の余白の方がやや上と比べて短かったです。

(Instagramのタブバー)

f:id:rindarinda5:20160710163342p:plain

 そこで、Instagramのタブバーを確認したところ、こちらでは上下共に同じ13pxで配置されていました。これらの違いが起きるのはおそらく外見上における、バランスの問題だと思いました。 アイコン+文字の場合、上下同じ長さにしてしまうと見た目的に少し下段に空間が生まれてしまい、バランスが整っていないように見えるため、あえて文字を下に詰めているのではないかと考えます。それに対して、アイコンのみであれば当然、上下の高さを均等に揃えたほうがバランスも良い配置になるというのは言うまでもないことでしょう。

 

ホテル一覧を検索して気がついたこと

f:id:rindarinda5:20160710151637p:plain

 1.右端が揃っている

f:id:rindarinda5:20160710184259p:plain

一番上の”地図”から値段、通貨変更カテゴリにかけて、全て右端が揃っていました。

 

2.各コンテンツのマージンは同じ

f:id:rindarinda5:20160710183946p:plain

 それぞれのホテル情報は区切られているのですが、縦横のマージン(外側の余白)が共に5px取られていて同じでした。

 

3.角丸の違いについて

f:id:rindarinda5:20160710173952p:plain

それぞれ抜粋してみたのですが、わずかに角丸の違いがありました。角丸を使うことで、どういった効果があるのかを調べてみました。

角丸を使う理由

  • 印象を柔らかくする
  • モダンなデザインにする(ただし時期によって陳腐化する)
  • スタイルの変化の一つの種類として
  • 角丸の物体をモチーフにしている(メタファー)
  • 触れる(クリックやドラッグできる、タップ出来る)ことを示す
引用元:[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した - WEBCRE8.jp

また角丸は原則6px以内が無難できれいに見えやすいようです。

デザイン時に注意したい角丸の使いかた | Design Color

 

まとめ 

旅をする時にはいつもBooking.comを使っていたのですが、トレースでじっくり細部を見ることで、今まで気が付かなかった点が多くありました。今回は少しアイキャッチ画像、見出しに用いる画像を加工しました。まだまだ知らないIllustratorやSketchの機能が多いのですが、調べることで出来ることも増えてきた実感があるので楽しいです。時間はかかりますが、これからはブログの画像編集にも力を入れていきたいと思います。