아티클

실전 UI/UX - 호텔객실검색시스템은 어떻게 다를까? (2)

서점직원| 2022.02.18

이어지는 이전 아티클 확인하기



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는 당신을 기획자가 아닌 전달자로 디자이너가 아닌 그림 그리는 사람으로 만들 뿐입니다.

새로운 것을 추구하기 앞서 같은 길을 걸었던 선배들의 발자취를 따라가 보세요. 어쩌면 우리가 미쳐 발견하지 못했던 새로운 것을 찾을 수 있을지도 모릅니다.



좋아요 3
공유하기

서점직원

서점에서 일하지 않은 서점직원. 뻔한 이론이 아닌 실전적인 웹기획과 UI/UX 이야기를 전합니다.
목록으로

TOP