Daily UI 022 / Search 검색

22번째 과제: Search 검색 UI

 

- 숙소 예약 서비스의 검색 UI를 주제로 잡았다. 그에 따라 Booking.com, Airbnb, Expedia, Agoda, Hotels.com의 uxui를 분석하였다.

- 공통된 부분은 장소 선택 - 날짜 선택 - 인원 선택의 3가지 카테고리 순으로 진행된다는 것이다.

- 장소 선택에서는 인기 여행지나 최근 검색 내역이 먼저 뜬다. 또한 에어비앤비의 경우 유연한 검색이라고, 즉 전세계 어디든 상관없다는 선택지가 있다. 근데 '유연한 검색'은 직관성이 떨어진다. 클릭해보기 전까지는 무슨 뜻인지 잘 모르겠었다.

- 날짜 선택은 캘린더에서 정확한 날짜 클릭 / 유연한 일정(기간만 정해짐) 이렇게 두가지 옵션이 있었다. 전자의 경우 캘린더에서 정확한 날짜를 찍더라도 앞뒤로 쁠마 1~7일 정도 작은 유연성을 줄 수 있었다. 후자의 경우에 기간 중심에 대략적인 달의 선호도정도를 고를 수 있었다. 에어비앤비는 캘린더에서 날짜 클릭할 때 다음달과 걸쳐있으면, 그라디언트를 줘서 연속성을 표현했다.

- 에어비앤비만의 강점으로 장기 숙박이 용이하다보니 아예 개월 단위로 기간을 선택할 수 있었다.(최장 12개월) 다만 여기서 개월을 고르는 휠에 입체감이 들어가있어서 디자인이 기존의 톤이 맞지 않는 느낌이 살짝 들었다.

- 인원 최소 옵션 개수는 성인, 어린이, 객실 3가지였다. 이에 추가로 어린이/유아 구분(만 2세 기준), 반려동물의 옵션까지 제공하는 경우도 있었다. 또한 객실은 각 객실마다 인원을 구분하여 선택할 수 있는 서비스도 있었다.

 

- 디자인 모티브는 여행시 끊는 티켓이다. 펀칭기로 뚫은 구멍과 절단선 요소를 넣어 '여행' 관련 서비스라는 정체성을 드러냈다.

- 장소/날짜/인원 각 카테고리를 설정할 때, 현재 어느 카테고리를 진행 중인지를 나타내기 위해 비진행중인 카테고리에는 dim을 주었다.

- 장소에서는 최근 검색 내역과 인기 여행지를 추천해준다.

 

- 날짜 선택에서는 캘린더 날짜 지정 / 유연한 일정 두가지 옵션을 제공한다.

- 캘린더의 경우 '오늘'은 날짜 위에 점을 찍어 표시했다.

- 선택된 기간이 다음달과 걸쳐있는 경우, 그라디언트를 주었다.

 

- 마지막으로 인원 선택의 경우 객실을 단위로 인원을 지정할 수 있게 하였다.