• 사례 작성일 : 2021년 04월
  • 사례에 포함된 서비스 : 트립닷컴
  • OS 정보 : 안드로이드
  • 버전 정보 : –
  • 카테고리 : 필터
  • 내용 : 각 필터를 적용하는데 필요한 정보 제공과, 적용 여부를 시각적으로 안내하는 방법

트립닷컴은 1999년 상하이에서 시작, 2003년에 나스닥에 상장한 온라인 여행사(OTA)입니다. 곧 홍콩증시에 상장한다는 소식도 있고, 중국에서는 50% 이상의 점유율을 갖고 있는 곳이에요. 아직 모르시는 분들도 많지만 스카이스캐너를 인수해 운영하고 있습니다.

트립닷컴에서 저는 김포-제주 노선 항공권을 검색해봤어요. (1)리스트에서 가장 먼저 눈에 띄었던 점은 제가 선택한 기간과 동일한 기간의 항공권 평균 가격을 보여준다는 점이었어요. 날짜 선택을 다시 하지 않고도 이전, 다음주 일정에 해당하는 가격을 볼 수 있어 좋았습니다.

뒤에서 다시 살펴볼 예정이지만 필터와 정렬 기능이 각기 다르게 적용되어 있는 점도 확인할 수 있었어요. 먼저 필터를 살펴보면, (2)플레이윙즈에서 아쉬움으로 언급했던 시간 정보가 상대적으로 뚜렷하게 구분되는 점을 알 수 있었어요. (3)또 항공사 등 원하는 조건을 선택하는데 있어 가격 정보를 함께 제공해줘 선택이 훨씬 편리했습니다.

  • 가격 정보가 제공 될 때 : 필터 – 원하는 조건 선택 – 리스트 확인
  • 가격 정보가 제공되지 않을 때 : 필터 – 원하는 조건 선택 – 리스트 확인 – 필터 재설정 – 확인

가격 정보가 필터 내 제공되어 동일 조건을 적용하는데 있어 필터 화면을 2번 이상 보지 않아도 되는 편리함을 사용자는 그대로 느낄 수 있게 됩니다.

필터는 원하는 리스트만 확인할 수 있게 도와주지만, 필터 내 포함된 조건들이 많을 경우 한 번에 적용하기 어렵거나 헷갈릴 수 있어요. 이럴 때 트립닷컴이 가격정보를 제공하는 것처럼 조건을 설정하는데 필요한 정보를 함께 제시해준다면 더 빠르게 결과를 확인할 수 있겠죠?

(1)가격 정보가 선택한 조건에 따라 제공되는 점은 좋지만, 선택지가 많지 않은 필터를 적용하기 위해 화면을 한 번 더 이동해야 하는 건 불편했어요. 특히 항공기종은 2개 중 하나를 선택하는데 (국제선으로 눈을 돌려도 기종이 확 늘어나진 않아요) 이 정도면 앞 화면(리스트에서 필터 선택 시 처음 보게 되는 화면)에서 내용을 펼쳐 확인하는 것으로도 충분하지 않을까 하는 생각이 들었습니다.

(2)필터가 적용되었다는 점은 적용되지 않았을 때와 다른 배경 컬러를 적용해 쉽게 확인 할 수 있었어요. 게다가 몇 개의 필터가 적용되었는지 숫자로 확인할 수 있어 적용여부와 개수를 언제든 볼 수 있도록 구성되어 있습니다.

그런 경험 없으세요? 항공권이나 숙소 등 필터로 적용할 값이 많은 경우 종종 뭘 선택했는지 헷갈릴 때가 있어요. 물론 필터가 많을 경우 적용된 값을 하나씩 다 보여줄 순 없지만 적용 여부와 별개로 몇 개를 선택했는지와 같은 구체적 정보를 제공해주는 것이 중요해요.

앞서 살짝 말씀드린 것처럼 (1)트립닷컴은 정렬과 필터를 리스트 내 각각 설정할 수 있어요. 필터를 설정한 후, 리스트로 돌아와 5가지 조건에 따라 정렬 할 수 있습니다. (2)선택한 값이 하나이기에 선택한 내용을 바로 확인할 수 있고요. (저는 출발시간을 선택했는데 이 정보가 바로 적용되어 있네요) 화면을 이동하지 않아도 되니, 원하는 리스트가 아닌 경우 정렬 기준만 바꿔 리스트를 빠르게 갱신할 수 있어요.

필터와 정렬기준에서 아쉬운 점도 있어요. 둘은 모두 드롭다운의 모습을 갖고 있는데요. 드롭다운에서 화살표는 다음 행동을 예측하게 하는 어포던스 역할을 하는데, 트립닷컴의 필터링은 탭 시 필터 선택 화면으로 연결이 되고 있어요. 필터 화면은 좌측 상단 X 버튼을 탭 해 닫을 수 있는 구조. 드롭다운은 사용자에게 꽤 익숙한 형태라, 화살표를 빼고 그냥 버튼으로 제공되었다면 어땠을까 하는 생각이 듭니다.

이 사례는 ‘팁스터 뉴스레터 : 모바일 앱에 적합한 정렬과 필터는?‘에서 소개된 내용입니다.