상품을 잘 찾게 만드는 필터 UX, 정리해드림

필터 UX, 직접 분류해 봤습니다

앱 서비스의 유저에게 검색·탐색은 콘텐츠나 상품을 고르는 과정입니다. 유저는 자기가 원하는 콘텐츠와 상품에 도달하기까지 복잡한 과정을 거칩니다. 먼저, 화면에 보이는 리스트에서 적절한 분류를 선택합니다. 그리고 각 콘텐츠의 상세페이지를 오가면서 세부 정보를 비교하고, 결정합니다.

유저는 이러한 과정의 끝에 원하는 것을 발견합니다. 얼핏 간단해 보이지만, 매 순간 정보를 소화하면서 의사 결정을 내려야 하는 여정입니다. 그래서 필터의 도움이 필요한 거죠.

필터는 유저의 정보 탐색과 검색 여정에서 중요한 역할을 합니다. 유저는 필터를 사용해 원하는 상품에 더 쉽고 빠르게 도달할 수 있습니다. 커머스 서비스에서 필터는 탐색, 검색 여정을 줄여줘 구매 전환율을 높이는 데도 기여합니다. 그런데 제가 UI/UX 일을 하면서 검색해봐도, 모바일 앱의 필터에 대해 정리된 콘텐츠는 찾기 어려웠어요.

그래서 저처럼 필터 UX를 한눈에 보고 싶은 분들을 위해 필터의 유형별 특징과 사용자 경험을 정리해보고자 합니다. 여기에 더해 제가 필터 UX를 구축하며 고려했던 핵심적인 사항도 공유하려고 해요.

이 글을 다 읽으시면 다양한 형태의 필터가 주는 사용자 경험과 팁을 얻어가실 수 있어요. 그리고 서비스의 검색 경험을 향상하고 싶으신 분들도 필요한 아이디어를 떠올릴 수 있으실 거예요.

필터 UX 5가지 유형별 사용자 경험

유저가 원하는 정보를 빨리 찾을 수 있도록 돕는 것이 필터의 역할입니다. 기업에서는 이러한 유저의 니즈를 충족시키기 위해 다양한 UI와 인터랙션*을 이용해 필터를 만듭니다. 물론 각각의 서비스와 유저의 특성에 맞는 필터를 구축하지요.

* 인터랙션(interaction): 유저와 디지털 프로덕트가 UI를 통해 상호작용 하는 과정

모든 앱의 필터는 조금씩 다릅니다. 그러나 비슷한 UI와 인터랙션을 가진 서비스의 필터들은 유저에게 비슷한 경험을 전달하는데요, 이를 유형해봤습니다. 아래 세 가지를 눈여겨보시면 좋겠습니다.

• 유형별 필터가 어떤 식으로 동작하는지
• 그로 인해 유저들은 어떻게 정보를 받아들이고, 사용하는지
• 이 유형을 활용하는 실제 서비스의 사용자 경험

1. 풀 스크린 필터 - 에어비앤비, 에이블리

에어비앤비와 에이블리는 풀 스크린(full screen) 필터를 활용하고 있습니다. 이 유형은 전체 화면을 덮어 필터의 옵션들을 유저에게 보여줍니다. 화면 전체를 쓰기 때문에 유저의 시선을 집중시키기 좋습니다.

필터에 진입한 유저는 자연스럽게 세부 항목들을 탐색합니다. 찾고자 했던 필터뿐만 아니라 다른 조건들도 함께 볼 수 있고, 그 덕에 더욱 정교한 필터링을 할 수 있습니다. 풀 스크린 필터는 한 번의 클릭으로 필터 전체를 돌아보고, 설정하도록 유도합니다. 필터를 정교하게 설정한 유저는 당연히 자신이 찾던 정보와 밀접한 검색 결과를 얻게 되지요.