실전 UI/UX - 호텔객실검색시스템은 어떻게 다를까?
고객이 OTA 서비스가 아닌 호텔 홈페이지에 접속하는 이유는 무엇일까요? 호텔 정보를 얻기 위해서? 호텔 위치를 확인하기 위해서? 아마도 열에 아홉은 객실을 검색하고 예약을 하기 위해서일 것입니다. OTA 서비스에 대항하기 위해 공홈족의 중요성이 점점 커지고 있는 요즘, 얼마나 빠르고 편리하게 고객이 원하는 객실 정보를 검색해서 예약을 이끌어낼 수 있느냐가 호텔 홈페이지의 핵심 경쟁력이 되어가고 있습니다.
이번 시간에는 국내외 주요 호텔들의 호텔 객실 검색시스템을 분석하여 각 호텔들은 얼마나 편리한 검색 시스템과 고객 친화적인 UI를 제공하고 있는지, 각 호텔의 객실 검색시스템의 UI/UX를 분석해볼까 합니다.
1) 신라호텔
위 이미지는 신라호텔의 메인 객실 검색 화면입니다. 뭔가 어디서 많이 본듯한 느낌이 든다면? 당신의 눈썰미를 칭찬합니다! 이건 롯데호텔의 객실 검색 기능을 베꼈습니다. (관계자분들에게는 죄송합니다) 제가 아무 근거 없이 말을 하는 건 아니고 (소송당할 수 있으니까...) 저도 나름대로 근거가 있습니다.
롯데호텔과 신라호텔의 객실 검색 기능 비교맨 위가 롯데호텔 가운데가 신라호텔의 객실 검색 기능입니다. 한눈에 보기에도 비슷해 보이죠? 여기서 특히 주의해서 봐야 될 부분이 체크인/체크아웃 영역입니다. 체크인과 체크아웃 사이에 박을 넣는 건 제가 알기로는 롯데호텔과 신라호텔밖에 없습니다. 굉장히 독특한 레이아웃이죠. 롯데호텔이 2018년 10월 홈페이지 리뉴얼을 해서 현재까지 저 UI를 사용하고 있습니다. 그런데 신라호텔의 2018년 9월 모습을 보면 현재와 전혀 다른 UI인 것을 알 수 있죠. 베낀 건 뭐 그럴 수 있습니다. 모방은 창조의 어머니라고 저도 많이 베낍니다. 아쉬운 건 베끼더라도 좀 제대로 했으면 좋겠는데... 사소한 디테일이 좀 아쉽습니다.
신라호텔의 객실 검색 기능은 전체적으로 평이한 UI이나 아쉬운 부분이 두 가지 있습니다.
바로 호텔 선택과 인원 선택 부분입니다.
신라호텔과 롯데호텔의 호텔 선택 레이어신라호텔과 롯데호텔의 호텔 선택 부분을 비교해보면 신라호텔 UI에 어떤 문제가 있는지 알 수 있습니다. 권역별로 나누어 놓은 건 좋았는데 같은 권역 내에서 호텔끼리 구분이 직관적으로 되지 않죠. 예를 들어 '서울 신라호텔을 선택하고 싶다'라고 한다면 한 번에 딱 봤을 때 서울 신라호텔을 찾기 쉬운 구조는 아닙니다. 텍스트 나열형이기 때문이죠. 권역별은 최소한 아이콘을 붙인다거나 배경색으로라도 구분했다면 신라호텔과 신라스테이의 구분이 한눈에 가능했을 텐데 말이죠.
반대로 롯데호텔은 텍스트 나열형인데도 체인별 구분이 확실하게 됩니다. 체인별로 정렬을 해놓은 것도 있지만 체인을 수직으로 나열했기 때문에 위에서 아래로 쭉 훑어보는 것만으로 체인이나 지역 구분이 가능한 구조죠.
인원 선택 레이어에서 +- 를 사용하는 것은 동일한데 사소한 것에서 디테일의 차이가 있습니다. 롯데호텔은 인원을 더 줄이거나 늘릴 수 없는 경우 해당 버튼이 그레이톤으로 비활성화되는 것에 비해 신라호텔은 한계치까지 인원을 줄이거나 늘려도 버튼의 기능만 없앨 뿐 시각적으로 비활성화에 대해 표시하지 않습니다.
2) 롯데호텔
개인적인 첫인상을 먼저 말하자면 비주얼로 글로벌적인 이미지를 잘 표현하면서 딱 필요한 기능만 갖춘 군더더기 없이 깔끔한 메인 페이지라고 생각합니다. 이렇게 말하면 제가 롯데호텔 찬티같아 보이겠지만 롯데호텔도 엄연히 단점이 있습니다. 그것도 매우 크리티컬한 단점이요.
보편적으로 많이 사용하는 1920*1080 해상도에서 롯데호텔과 신라호텔의 비교입니다. 롯데호텔을 보면 검색 영역 하단이 살짝 잘린 것을 볼 수 있죠. 이건 원래 1080에 딱 맞춰서 객실 검색 영역을 만든 건데 상단에 코로나 관련 안내 팝업이 붙으면서 아래쪽으로 살짝 밀려서 저러한 형태가 된 겁니다. 롯데호텔이 상단 팝업을 적극적으로 사용한다는 걸 생각해보면 하단 부분에 살짝 여유공간을 줘야 저런 사태를 방지할 수 있는데 조금 안일했습니다.
반면 신라호텔은 동일한 해상도에서 검색 영역이 잘림 없이 모두 잘 보일뿐만 아니라 아래에 약간의 여백까지 있는 것을 알 수 있죠. 이건 의도적인 디자인입니다. 사용자의 브라우저 환경(툴바나 즐겨찾기 등)을 고려해 하단에 약간 여유공간을 줘서 어떠한 환경에서도 검색 영역이 잘림 없이 표시되도록 만든 거죠.
신라호텔에서 잠깐 설명했던 체크인/체크아웃 UI입니다. 롯데와 신라호텔에서만 볼 수 있는 독특한 UI인데 이 UI는 전형적으로 디자인의 아름다움을 위해 UI의 편의성을 일부 포기한 디자인입니다. 보통 체크인/체크아웃을 표시할 때는 체크인 - 체크아웃 (박수)와 같은 구조가 됩니다. 위 이미지의 워커힐과 메리어트 같은 구성처럼요. 이런 구성은 사용자의 시선 이동방향이 하단 또는 우측으로 일관성 있게 흐르는 구조가 됩니다. 그런데 롯데호텔처럼 박수를 체크인과 체크아웃 사이에 위치시키면 시선이 좌측에서 우측으로 갔다가 다시 좌측으로 돌아오는, 시선 흐름을 역행하는 구조가 되죠. (사용자가 체크인 날짜와 체크아웃 날짜를 선택해야 정확한 박수가 표시되니까) 왜 이런 구조가 됐냐? 간단합니다.
박수를 가운데에 뒀을 경우 체크인과 체크아웃 사이에 디자인 밸런스가 맞지만 박수를 뒤에 두면 뭔가 어색한 디자인이 됩니다. 체크인과 체크아웃 사이에 균형을 맞추기 위해 의도적으로 박수를 가운데에 배치한 거죠. 이게 뭐가 문제가 되냐고요? 한두 번은 괜찮지만 이런 문제가 중첩되면 우리가 모르는 사이에 눈과 뇌는 이렇게 생각할 겁니다. 아 피로하다...
3) 조선호텔
사람들은 가끔 다른 사이트와 달라야 되는 생각에, 디자인적으로 아름다워야 된다는 압박감에 혁신적이지만 때로는 무리한 UI를 선보이곤 합니다. 그리고 그 예에 가장 부합하는 것이 바로 조선호텔입니다. 이미 타이틀부터 그런 느낌이 팍팍 들죠. DIFFERENCE / 나는 달라
비주얼은 정말 기가 막히게 예쁘고 고급스러운 느낌이 들죠. 그런데 예약 기능이 비주얼에 묻히는 느낌이 듭니다. 비주얼과 기능은 항상 50:50을 유지해야 합니다. 적당히 보여주고 싶은 아이덴티티를 표현해야 하지만 기능을 묻어버릴 정도로 비주얼이 화려한 것은 곤란합니다. 원페이지 스크롤링이 비주얼이 강조될 수밖에 없는 레이아웃이긴 하지만 호텔 홈페이지의 핵심 기능이 객실 예약인 것을 생각하면 원페이지 스크롤링을 쓰더라도 객실 검색 기능은 어느 정도 부각해줘야 했습니다.
고스트 버튼의 올바른 사용 예배경색에 묻혀서 폰트의 가독성이 떨어지는 것은 둘째치고 가장 최악은 고스트 버튼입니다. 고스트 버튼을 쓸 때는 정말 신중해야 됩니다. 저 위에 롯데호텔과 조선호텔을 비교해보면 검색 버튼은 포인트 컬러를 써서 어떻게든 강조하고 누르고 싶게 만들어 놨는데 조선호텔은 디자인을 살리자고 가장 중요한 검색 버튼을 고스트 버튼으로 처리했습니다. 누가 봐도 버튼이라고 인식하기 어렵게 누르고 싶지 않게 생겼죠? 사용자가 버튼이라고 인지하기 어려운 디자인입니다.
문제점은 이뿐만이 아닙니다. 조선호텔에는 다른 호텔에는 없는 특이한 기능이 하나 있는데요. 바로 검색 구분입니다. 호텔 이외에도 다이닝과 멤버십을 조회해서 예약 또는 가입 페이지로 이동할 수 있는 기능이죠. 객실 조회와 멤버십은 성격이 다른데도 억지로 강조하려고 기능에 욱여넣은 겁니다. (아마도 고객의 요청이겠지만...) 고객님들 멤버십 활성화는 기능을 막 욱여넣고 노출한다고 되는 것이 아닙니다.
다이닝도 마찬가지입니다. 우리는 여기서 의문을 하나 가져봐야죠. 다른 호텔은 홈페이지에서 다이닝 예약기능이 없어서 메인에 노출하지 않는 걸까? 놀랍게도 롯데호텔 홈페이지에는 라세느 예약기능이 있습니다. 롯데호텔은 다이닝 예약기능이 있는데도 메인 페이지에서 객실 예약에 집중하고자 다이닝 예약을 과감히 뺀 거죠.
호텔 선택에도 문제가 있습니다. 호텔을 누르면 레이어에 표시된 8개 호텔 중 여기서 실제로 선택 가능한 호텔은 몇 개일까요? 답은 그랜드 조선 부산과 제주 2개입니다. 5개 호텔은 클릭하면 새창으로 해당 호텔 홈페이지로 이동. 그래비티 판교는 클릭 시 오픈 예정이라는 알럿 메시지 출력... 계열사 호텔을 노출시켜야 되는 니즈는 알겠지만 여기서 예약도 할 수 없는 호텔을 노출해서 그걸 클릭했을 때 고객이 어떤 생각이 들지는 생각을 안 해본 걸까요? 백번 양보해서 최소한 그라피티 판교는 클릭을 못하게 투명 레이어로 덮고 오픈 예정이라는 문구라도 써줘서 클릭이 안되게 하는 성의 정도는 보여줘야 했습니다.
4) 워커힐호텔
잘 만들고 못 만들고를 떠나서 신선하고 화끈한 UI인 것은 분명합니다. 이런 도전정신 저는 높이 삽니다. ㅎ
신선하고 화끈하다고 해서 문제가 없는 것은 아닙니다. 워커힐도 역시 크리티컬 한 문제가 있죠. 호텔과 객실, 성인, 아이 클릭 시에는 레이어 팝업이 상단에 표시되는데 숙박 기간을 클릭했을 때는 레이어가 하단에 표시됩니다. 이게 왜 문제가 되냐? 사람들이 나열된 순서대로 기능을 클릭한다는 습성을 생각해볼 때 호텔 → 숙박 → 객실 → 성인 순으로 옵션을 선택하게 될 겁니다. 호텔을 선택했을 때는 레이어가 위쪽으로 표시되니 문제가 없지만 숙박 기간을 클릭하면 레이어가 아래로 표시되니 날짜를 선택하기 위해서는 스크롤을 아래로 내려줘야 합니다. 다시 객실이나 성인을 클릭했을 때는 레이어가 올라가니 스크롤을 올려줘야 하죠. 숙박 기간 레이어가 아래쪽으로 표시되는 문제 때문에 예약 옵션을 선택하기 위해서는 스크롤을 내렸다가 올리는 부자연스러운 행동을 해야 된다는 거죠.
5) 리츠칼튼
리츠칼튼은 홈페이지에 들어가면 객실 검색 기능이 하단에 표시됩니다. 최초에는 로케이션과 날짜 2개의 필수 정보만 표시되다가 클릭하면 객실 검색 영역이 올라오면서 세부 검색 옵션이 표시되는 방식이죠. 구조 자체를 필수 정보(상단 1행/호텔, 날짜)와 부가정보(하단 1행/룸, 인원, 프로모션 코드 등) 2가지 영역으로 분할해놓았는데 이런 구조는 해외호텔에서 일반적으로 사용되는 UI입니다. 최소한의 정보를 표시하면서 인터렉션을 이용해 사용성을 저해하지 않는 좋은 UI의 표본이라 불릴만한 사례입니다.
국내 호텔과 해외호텔 객실 검색 UI의 가장 큰 차이는 바로 '인원'에 대한 인식입니다. 국내 호텔은 인원을 호텔과 날짜의 동일 선상에 두고 중요도를 강조하는데 비해 해외호텔들은 호텔과 날짜는 상단의 호텔 검색 필수 값으로 인원과 객실은 하단에 선택 옵션으로 필수와 선택 값이라는 영역별로 구분해서 표시합니다. 우리나라가 해외 호텔에 비해 유독 인원을 강조하는 이유는 호캉스때문입니다. 해외에서는 부부 또는 커플 2인으로 호텔을 이용하는 것이 일반적인 형태이지만 국내에서는 1인 혹은 3인 이상 다중 형태로 호텔을 이용하는 비율이 높기 때문에 이용 방식에서 오는 우리나라 호텔의 특수성이 반영된 UI인 거죠.
6) 메리어트
메리어트는 언뜻 보기에는 평이하고 별것 없는 UI처럼 보입니다. 하지만 별거 없어 보이는 이 UI에도 사실은 중요한 기능이 하나 숨어있습니다.
메리어트는 날짜 클릭 시 다른 호텔과 다르게 일정 조정이 가능하신가요 라는 기능이 있습니다. 이 기능은 호캉스와 가격비교에 특화된 기능입니다. 일반 숙박이 숙박일을 특정하여 조회하는 것에 비해 이 기능은 박수와 월만 선택하고 호텔 찾기 기능을 누르면
일정 조정이 가능하신가요로 숙박 조회 시위와 같이 해당 월의 전체 요금표가 표시되는 구조입니다. 원래 호텔은 성수기/비수기, 날짜, 요일별로 요금 차이가 심해 고객들이 최저가를 검색하기 어려운 구조입니다. 하지만 시대가 변하면서 호텔도 고위층이나 자산가의 전유물이 아닌 일반인들도 접근이 가능할 정도로 대중화되어 변화하는 트렌드에 맞춰 이런 기능을 제공하기 시작한 거죠. 이 기능은 전 세계 호텔 중 메리어트 계열 체인에서만 제공하는 특화 기능입니다. 트렌드에 맞춘 발 빠른 변신인지, 살기 위한 몸부림일지는 앞으로 두고 봐야겠죠?
7) W Hotel
W Hotel은 최초에 호텔 선택과 날짜 선택 2개의 필수 정보만 표시하고 영역을 클릭하면 레이어 팝업으로 객실 검색 세부 옵션이 표시되는 구조입니다. 이러한 구조는 객실 검색에 대한 사용자의 시선 집중 효과를 유발할 수 있지만 (레이어 팝업으로 정중앙에 객실 검색 정보가 표시되니까) 반대로 불필요한 클릭을 유발하기도 합니다. 예를 들어 내가 호텔과 날짜 정보만 입력해서 객실을 검색하고자 할 경우 레이어를 띄우지 않고도 현재 창에서 검색이 가능한데 W Hotel 은 무조건 레이어를 띄워버리니까요.
W Hotel은 타 호텔들과 비교해 봤을 때 날짜 선택 UI가 조금 독특한 편입니다. 타 호텔과 비교해보면 명확한 차이를 알 수 있는데요. 리츠칼튼의 경우 체크인과 체크아웃을 하나의 입력창에서 선택할 수 있는 구조로 처음 선택한 날짜가 체크인, 두 번째 선택한 날짜를 체크아웃 날짜로 인식하여 체크인과 체크아웃 날짜를 선택하면 선택한 날짜가 입력창에 적용되고 날짜 선택 레이어가 자동으로 닫히는 방식입니다. 롯데호텔이나 신라호텔 등 국내 호텔에서 많이 사용하는 보편적인 날짜 선택 UI 스타일이죠. 그런데 W Hotel은 체크인과 체크아웃 날짜 선택창이 각각 분리되어 있습니다. 체크인 날짜를 선택하면 자동으로 +1박으로 계산되어 체크아웃 날짜가 자동으로 선택되며 (예를 들어 체크인 날짜를 11일을 선택하면 다음날인 12일이 체크아웃 선택창에 자동 선택) 포커스가 체크아웃으로 이동됩니다. 글로만 보면 잘 이해가 안 가죠? 몇 가지 예를 들어 두 호텔의 날짜 선택 UI를 비교해보도록 하겠습니다.
예제 1) 현재 선택된 기간 12.08 ~ 12.09 / 선택하고 싶은 날짜 12.15 ~ 12.16
리츠칼튼
① 체크인/체크아웃 선택창을 클릭하여 날짜 선택 레이어를 염
② 체크인 날짜 선택
③ 체크아웃 날짜 선택 (체크아웃 날짜 선택과 동시에 선택한 날짜 적용, 레이어 닫힘)
W Hotel
① 체크인 선택창을 클릭하여 날짜 선택 레이어를 염
② 체크인 날짜 선택 (+1일이 자동으로 체크아웃 날짜로 선택, 포커스가 자동으로 체크아웃으로 이동)
③ 체크아웃 날짜 선택
④ 레이어를 수동으로 닫음
예제 2) 현재 선택된 기간 12.08 ~ 12.09 / 선택하고 싶은 날짜 12.15 ~ 12.16
체크인 날짜를 잘못 선택하여 다시 선택해야 하는 경우
리츠칼튼
① 체크인/체크아웃 선택창을 클릭하여 날짜 선택 레이어를 염
② 잘못된 체크인 날짜 선택
③ 날짜 선택 레이어를 닫거나 혹은 아무 체크아웃 날짜를 선택하여 레이어를 닫음
④ 체크인/체크아웃 선택창을 클릭하여 날짜 선택 레이어를 다시 염
⑤ 올바른 체크인 날짜 선택
⑥ 올바른 체크아웃 날짜 선택 (자동으로 레이어 닫힘)
W Hotel
① 체크인 선택창을 클릭하여 날짜 선택 레이어를 염
② 잘못된 체크인 날짜 선택 (포커스가 자동으로 체크아웃으로 이동)
③ 하단 Reset 버튼을 눌러 초기화하거나 체크인 선택창을 클릭하여 체크인 선택창으로 이동
④ 올바른 체크인 날짜 선택
⑤ 올바른 체크아웃 날짜 선택
⑥ 레이어를 수동으로 닫음
이제 좀 이해가 되시나요?
보편적으로 많은 호텔들이 체크인/체크아웃이 통합된 리츠칼튼의 날짜 선택 UI를 사용하기 때문에 W Hotel과 같은 날짜 선택 방식이 익숙하지 않은 사용자들은 큰 혼란을 느끼게 됩니다. 자칫하면 불편해 보일 수 있는 W Hotel의 날짜 선택 UI에도 사실 큰 장점이 하나 있습니다. 바로 클릭 미스에 의한 날짜 선택 오류에 대응이 용이하다는 점이죠.
리츠칼튼과 같은 날짜 선택 UI는 체크아웃 날짜를 선택하는 동시에 날짜가 적용되고 날짜 선택 레이어가 닫히는 방식이기 때문에 체크아웃 날짜를 잘못 선택했을 경우 체크인 날짜부터 다시 선택해야 하는 불편함이 있습니다. 체크인/체크아웃이 하나의 몸통처럼 움직이는 구조이기 때문에 체크아웃 날짜를 잘못 선택했다고 하더라도 체크아웃 날짜만 변경이 불가능하여 체크인 날짜부터 다시 선택해야 하는 구조인 거죠. 하지만 W Hotel은 체크인/체크아웃 선택창이 분리되어 있어 체크아웃 날짜를 잘못 선택했다면 체크아웃 날짜만 따로 변경이 가능합니다. 이런 구조는 2개월 이상 장기투숙 시 큰 장점을 발휘합니다. 리츠칼튼은 2달치 캘린더를 넘겨서 체크아웃 날짜를 선택했는데 잘못 선택했으면 다시 체크인부터 선택해야 하는데 W Hotel은 클릭 두세 번만으로 체크아웃 날짜를 쉽게 변경할 수 있거든요. 장기 투숙객이 많은 비즈니스호텔의 경우 고려해볼 만한 가치가 있는 구조입니다.
8) Conrad
다른 호텔들이 객실 검색 기능을 메인 페이지 하단이나 가운데에 배치하는데 비해 콘래드는 객실 검색 기능을 GNB 바로 아래인 상단에 배치하였습니다. 이 구조는 사실 굉장히 장점이 많은 구조입니다. 호텔, 일정 등의 옵션 클릭 시 레이어가 아래로 떨어지는 구조이기 때문에 워커힐 같은 부자연스러운 시선 이동이 발생하지 않고 사용자의 시선 흐름이 가장 먼저 도달하는 상단 영역에 기능을 배치해서 기능에 대한 주목도도 높일 수 있죠. 그런데 많은 호텔들이 객실 검색 기능을 상단에 배치하지 않는 이유는 간단합니다. 디자인적으로나 기능적으로 상단 GNB와 충돌이 발생하기 때문이죠. 콘레드 호텔만 봐도 GNB 메뉴와 객실 검색 기능의 폰트와 컬러가 동일하여 영역 구분이 명확하게 되지 않는다는 문제점이 있거든요. 디자인적으로 GNB는 흰색 배경 / 객실 검색은 그레이톤 같은 형식으로 시각적인 영역 구분이 가능하더라도 기능적인 문제점이 있습니다. 1 Depth 메뉴에 마우스를 오버하거나 클릭해서 2Depth 메뉴를 열 경우 내비게이션이 검색 기능을 가리거나 객실 검색을 클릭하다가 클릭 미스로 GNB 메뉴를 클릭할 수 있는 불편함이 생기거든요.
그런데 콘레드는 왜 상단에 검색 기능을 넣을 수 있느냐? 콘레드 GNB에는 2Depth 메뉴가 없기 때문에 저러한 구조가 가능한 겁니다. 1Depth를 클릭하면 표시되는 2Depth 메뉴가 없다 보니 메뉴를 잘못 클릭할 일도 2Depth 메뉴가 기능 영역을 덮어버릴 일이 없는 것이죠.
콘레드는 사소한 디테일에도 신경을 많이 쓴 모습입니다. 보통 날짜 표시창이 년/월/일 구조인 것에 비해 콘레드는 일/월/요일 형식으로 연도를 빼고 날짜를 강조했습니다. 포털 메일 시스템에서 잠깐 설명드린 적이 있는데 이건 중요도에 대비한 콘텐츠의 강약 조절입니다. 년도/월/일/요일 중 콘텐츠의 중요도를 판단해서 중요도가 낮은 콘텐츠인 연도는 과감히 삭제하고 가장 중요하다고 판단되는 날짜만 강조한 스타일이죠.
호텔과 날짜 선택에 비해 사용 빈도가 떨어지는 객실/인원 선택과 할인은 과감하게 박스 처리했습니다. 이것도 날짜와 비슷한 관점입니다. 호텔 선택/날짜 선택/인원 선택 중 중요도와 사용빈도가 높은 날짜 선택은 포인트 컬러를 사용해서 돋보이게 강조하고 사용빈도가 낮은 기능은 박스로 묶어서 처리하는 방식인 거죠.
9) Intercontinental
인터콘티넨탈은 한마디로 정의하면 옛날 스타일입니다. 클릭하면 펼쳐지고 펼쳐진 상태에서 레이어가 열리는 과거에 유행했던 슬라이드식 인터렉션이죠. 옛날 스타일이라 크게 설명할 게 없습니다.
10) RAMADA
역시 올드하고 특색이 없는 UI라 크게 설명할 게 없습니다. 하나만 얘기하자면 글자는 좀 큼직큼직하게 보여줘야 가독성이 높아지지 않을까? 하는 정도
11) Banyan Tree
언뜻 보면 하단에 객실 검색이 있는 무난한 UI처럼 보입니다. 하지만 하나하나 뜯어보면 곳곳에 문제점들을 찾아볼 수 있습니다.
날짜 선택 화면 비교먼저 날짜 선택 캘린더는 특이하게 한 달치 캘린더만 표시하고 이전달/다음 달을 상하 화살표로 배치했습니다. 우측의 라마다처럼 두 달치 캘린더를 표시하고 이전달/다음 달을 좌우로 표시하는 일반적인 형태와 차이가 있죠. 상하 화살표는 좌우 화살표에 비해 사용자의 이동 동선이 부자연스럽고 월이 넘어가는 예약 (예를 들면 11월 30일 - 12월 1일)이나 1개월 이상 장기 투숙 시에는 다음 달 캘린더를 클릭으로 넘겨줘야 하는 불편함과 불필요한 클릭을 유발하게 됩니다. 많은 호텔들이 날짜 선택창에서 2달치 캘린더를 보여주는 이유가 바로 여기에 있습니다. 2달치 캘린더를 표시하는 UI가 사용성을 최대로 이끌어낼 수 있는 디자인이기 때문이죠.
객실/인원 선택 화면 비교객실/인원 선택창도 다른 호텔들에 비해 사용성이 떨어지는 UI입니다. 타 사이트들은 -+로 인원을 가감하는 것에 비해 반얀트리는 인원을 직접 입력합니다. 다시 한번 말씀드릴게요. 인원을 직. 접. 입. 력
직접 입력의 가장 큰 단점은 최소/최대 인원을 컨트롤할 수 없다는 데 있습니다. 100명을 입력해도 1000명을 입력해도 검색 버튼을 클릭하기 전까지는 텍스트 박스 내에서 제어할 수 있는 방법이 없죠. 반면 -+ 구조는 몇 명 이상 입력 시 + 버튼을 비활성화한다던가 하는 방식으로 최소/최대 인원 컨트롤이 가능합니다. 사용자가 입력하는 숫자를 예상할 수 없는 경우 텍스트 박스 입력 형태가 맞지만 (예를 들면 전화번호나 가격 같은 경우) 투숙 인원 제한이 명확한 호텔은 (한 객실에 5명 이상 투숙하기가 어렵기 때문에) 라마다나 콘레드 같은 -+ 같은 형식의 UI가 데이터 구조상 더 적합합니다.
종합적으로 평가하면 껍데기는 그럴듯한데 내용물의 UI가 엉망이다. 라고 평가할 수 있겠습니다.
12) Raffles
레플스 호텔은 반응형 UI를 사용합니다. 문제는 반응형 UI의 장점을 전혀 살리지 못했는데 일단 PC를 보면 세로 1080 해상도로 객실 검색 영역이 반쯤 잘려 보입니다. 반응형인데 세로 1080 해상도도 제대로 못 맞출 거면 왜 반응형을 쓰는 걸까. 세세한 부분이 많이 아쉽습니다.
모바일도 마찬가지입니다. 반응형이라도 비주얼 크기를 좀 줄이고 객실 검색 기능을 살릴 수 있는데 객실 검색 기능을 Book 버튼으로 뭉뜽그려버렸습니다. 비주얼에 엄청 중요한 것도 아니고 객실 검색 기능을 버려가면서 까지 비주얼을 살릴 필요가 있었나? 기술력이 부족했던 걸까? 많은 의문이 듭니다.
객실 검색 UI를 세세하게 뜯어보면 문제점이 한두 가지가 아닙니다. BOOK 버튼 아래에 생뚱맞게 Modify / Cancel 기능을 위치시켜놨는데 이 기능 때문에 전체적인 디자인 밸런스가 깨지고 불안정해 보이는듯한 인상을 줍니다. 저 기능이 특별하거나 꼭 필요한 기능이면 모르겠는데 그런 기능도 아닙니다. 선택한 옵션 중에 뭔가를 수정해야 되면 해당 옵션을 클릭해서 수정하면 되거든요. 굳이 Modify 버튼이 필요할 이유가 없죠. Modify/Cancel 버튼을 빼볼까요. 당연하게도 디자인적인 밸런스가 귀신같이 맞고 안정감이 있는 것을 알 수 있습니다. 왜 저 기능이 저기에 있나를 추론해보면 원래는 없던 기능인데 억지로 넣다 보니 저런 모양이 된 게 아닐까 라고 추측해봅니다.
객실 검색 영역의 레이아웃 분할도 마찬가지입니다. 영역별 비율 배분도 엉망이고 (쓸데없는 여백이 많이 남음) 옵션마다 선으로 구분을 해놨는데 구분도 잘 안되고 오히려 지저분해 보입니다. 선을 없애고 데이터는 박스 처리 한 다음 간격만 조금 조절해도 줘도 훨씬 괜찮아질 겁니다. 아래 일부 변경 예처럼요.
날짜 표시 옵션도 문제가 있는데 월/일/년 구분 기호와 체크인/체크아웃의 구분 기호가 동일합니다. 구분이야 어찌어찌 되겠지만 보기 불편하죠. 이건 간단하게 수정할 수 있습니다. 변경 예1처럼 체크인/체크아웃 구분 기호를 변경하던가 변경 예2처럼 월/일/년 구분 기호를 변경하면 보기에도 훨씬 깔끔해지겠죠?
13) NOVOTEL
일단 포인트 컬러 파란색이 눈이 너무 아픕니다. 좌측의 피드백 버튼은 객실 검색 기능을 가리고 객실 검색은 선택해야 할 항목이 너무 많습니다. 옵션 선택의 글자크기가 너무 작고 클릭하면 기본 셀렉트 박스를 사용해서 옵션과 옵션 간의 간격이 너무 좁아 클릭 미스가 일어날 확률이 높습니다. 그냥 전체적으로 올드한 UI입니다.
14) HYATT
하얏트는 콘레드와 같이 객실 검색 기능을 상단에 배치했습니다. 콘레드에서도 설명했지만 하얏트도 역시 1Depth 메뉴를 클릭하면 2Depth 메뉴가 표시되는 형식이 아니고 각 메뉴의 서브메인 페이지로 이동하는 형태라 객실 검색을 상단에 두는 것이 가능합니다. 플레이스 홀더를 적절히 활용하고 중요도가 떨어지는 기능을 과감히 제거한 군더더기 없이 깔끔한 디자인입니다.
타 호텔은 호텔 옵션을 클릭하면 셀렉트나 리스트 박스로 호텔 리스트를 표시하나 하얏트는 호텔이 너무 많기 때문에 리스트로 표시하는 대신 키워드로 직접 검색을 권장합니다. 호텔 클릭 시에는 아래쪽에 숨겨져 있던 객실/인원 선택과 요금할인, 포인트 사용 옵션이 표시됩니다. 중요도가 떨어지는 기능은 숨겨놨다가 보여주는 방식이죠. 이렇게 기능을 숨기는 건 고객에게 숨겨진 기능을 어떻게 인지시키느냐가 중요한데 하얏트는 무조건 선택해야 하는 호텔 클릭 시 숨겨진 기능을 표시하는 방법으로 기능을 고객에게 인지시킵니다. 글로벌 호텔다운 깔끔한 디자인과 독창적인 UI입니다.
15) PARNAS, COEX
파르나스와 코엑스는 인터콘티넨탈의 체인 호텔이지만 위에 있는 인터콘티넨탈과는 별도의 홈페이지와 예약 시스템을 사용합니다. 메인은 브리지 페이지 형태로 파르나스와 코엑스로 이동할 수 있는 전면 비주얼을 배치하였고 하단에 객실 검색 기능이 위치해있습니다. 위 이미지를 보시면 1080 해상도에서 비주얼이 1/5 정도 잘린 상태로 표시됩니다. 비주얼이 중심이라면 차라리 1080 해상도에 맞춰서 비주얼을 보여줘야 하는데 어정쩡하게 비주얼도 잘려있고 하단에 객실 검색 기능은 보이지도 않고... 어떤 의도를 가지고 만든 레이아웃인지 아리송한 디자인입니다.
객실 검색 기능은 철저하게 디자인 밸런스만 고려한 UI입니다. 선택할 수 있는 호텔이 파르나스와 코엑스 2개밖에 없다 보니 탭으로 2개 호텔을 구분했는데요. 디자이너의 의도는 비주얼과 라인을 맞춰서 왼쪽은 파르나스 오른쪽은 코엑스 같은 형식으로 영역 구분을 하려고 한 것 같은데 그 의도가 맞다면 이건 실패한 디자인입니다. 비주얼이 너무 길어서 객실 검색 기능에 스크롤이 도달하는 순간 비주얼은 하단 부분만 살짝 보이는 형태가 되기 때문에 비주얼만으로 파르나스와 코엑스를 구분할 수 없게 되어버리기 때문이죠. 호텔 선택을 상단 탭으로 올린 건 옵션 선택 영역 레이아웃에도 영향을 미치는데요. 타 호텔과 같이 호텔 선택, 체크인/체크아웃, 객실/인원 선택 3등분 구조였다면 지금처럼 객실/인원 선택 영역이 비대하게 커질 이유가 없었을 겁니다. 현재 레이아웃은 비어있는 호텔 선택 영역을 채우기 위해 객실/인원 선택 영역을 억지로 늘려놓은 형태니까요. 객실/인원 선택보다 체크인/체크아웃의 중요도가 더 큰 걸 생각해보면 비율이 반대가 되어야 정상이겠죠. 이게 다 호텔 선택을 상단 탭으로 올린 부작용입니다. 호텔 선택은 스위치든 On/Off 버튼이든 날짜 선택과 인원 선택의 동일 선상에 두어야 디자인 밸런스나 프로세스 흐름상 잘 맞습니다.
디자인 의도성도 UI의 기능성도 어느 것 하나 제대로 살리지 못한 디자인입니다.
마치며
오늘은 국내외 글로벌 호텔들의 메인 객실 검색 UI 기능을 비교/분석해보았습니다. 비교 결과 호텔의 위상에 맞는 훌륭한 UI/UX로 고객 편의성을 제공한 호텔도 있었고 네임벨류에 비해 아쉬운 호텔도 있었습니다. 여러분은 어떻게 보셨고 어떤 시사점이나 교훈을 얻으셨나요?
많은 사람들이 UI/UX라는 환상에 빠져 자꾸만 새로운 시도나 독창적인 UI를 선보이려고 합니다. 비슷하게 그리면 베꼈다고 욕을 먹을 테니까요. 그런데 한 번쯤은 이런 질문을 던져볼 수 있지 않을까요? '왜 이 기능은 어느 사이트든 엇비슷할까' 어떤 선구자의 UI를 그대로 우르르 베껴서? 다들 그게 국 룰이라고 생각하니까? 우리가 어쩌면 엇비슷하다고 느꼈던 UI와 레이아웃은 정체되고 혁파해야 할 대상이 아니라 실은 수많은 사람의 고민과 고뇌가 담긴 최적화된 결과물일지도 모릅니다. 온고지신이라는 말이 있습니다. 때때로 새로운 것보다 옛것이 더 좋을 때가 있다는 말이죠. 고민과 근거 없이 새로움만 추구한 UI/UX는 당신을 기획자가 아닌 전달자로 디자이너가 아닌 그림 그리는 사람으로 만들 뿐입니다.
새로운 것을 추구하기 앞서 같은 길을 걸었던 선배들의 발자취를 따라가 보세요. 어쩌면 우리가 미쳐 발견하지 못했던 새로운 것을 찾을 수 있을지도 모릅니다.
