필터 UX ( 분량 주의 하실게요 🙏🏻 )

아티클 스터디 ) 상품을 잘 찾게 만드는 필터 UX, 정리해드림

[ 참고 문헌 ] 퍼블리, 상품을 잘 찾게 만드는 필터 UX, 정리해드림, 2024.3.11 참고

개요

필터는 목적 달성까지의 여정을 줄여 구매 전환에 기여한다는 점에서 중요한 영역 중에 하나이기 때문에 이것이 바로 우리가 좋은 사용자 경험을 가진 필터를 구축해야 하는 이유라고 말할 수 있다.

필터의 유형

• 풀 스크린 필터

  • 필터에서 다룰 정보가 많을 때 사용함
  • 전체 화면 덮어 크게 보여주므로 주목도 따라옴
  • 찾고자 했던 필터 뿐 아니라 다른 조건들도 보게 되니 더 정교한 결과 낳음
  • 항목이 많으므로 화면 다채롭게 설계해야 함
  • 슬라이더, 체크 박스, 컬러칩 등으로 지루함 덜어낼 것
  • 에어비앤비 / 에이블리
    • 에이블리 방식 특이함
    • 여러 필터가 상단에 다함께 노출되어 퍼널 여러 개 확보함
    • 선택해서 들어간 섹션에 해당하는 화면부터 시작됨

• 바텀 시트 필터

  • 부담스럽지 않은 사이즈
  • 제한된 면적으로 필터의 규모가 작을 때 사용함
  • 필터 종류를 여러 개로 쪼개서 쓰면 극복할 수 있음
    • 사용자가 골라 들어갈 수 있게 하거나 or 사전에 필터 최적화 해둠
    • 필터 내부에 탭을 둘 수도 있음
  • 발란 / 아마존 / 지그재그 / 쿠팡이츠
    • 쿠팡이츠도 사용자가 골라 들어가게 하는 것은 동일함
    • 이때 선택지를 대폭 줄여서 보여줌 ( 밀러의 법칙 )
    • 최적화된 필터라고 할 수 있는 특정 메뉴가 필터 끝에서 이미 노출 상태로 보임

• 사이드 바 필터

  • 스크린 좌측 혹은 우측에서 열리는 유형
  • 항목이 적지 않으나 스크롤을 길게 내고 싶지 않을 때 사용함
  • 바텀 시트 형식보다는 상대적으로 정보의 양 늘릴 수 있음
  • 한 눈에 필터의 위계 파악할 수 있음
    • 이를 위해 사용자가 펼친 필터 외엔 닫아두기도 함 ( 아코디언 )
  • 이케아 / 오늘의 집
    • 오늘의 집 > 품목에 맞춘 필터 골라 보여줌

• 상단 고정형 필터

  • 선택의 폭이 좁을 때 사용함
  • 진입점 뿐만 아니라 필터 등장 영역까지 상단에 고정되어 있음
  • 주로 지도 서비스에서 발견 가능
  • 화면을 많이 가리지 않는다는 것이 특장점
    • 콘텐츠 탐색 멈추지 않게 함
  • 원하는 게 생겼을 때마다 짧게 짧게 쓰기 좋음
  • 다방
    • 필터 내 항목을 추가해감에 따라 유동적으로 사이즈 변함
    • 탐색을 방해한다는 부정적 감정을 최대한 줄이기 위한 조치임

• 필터 없는 필터링

  • 서비스 가입 시 입력한 정보 기준으로 사전 필터링 이뤄짐
  • 특정한 관심사를 겨냥해 적극적으로 탐색 유도하는 과감한 방식
  • 사용자의 선호 정보를 미리 파악할 수 있어야 함
  • 원티드 / 번개장터
    • 자동으로 선택 직군에 맞는 공고 보여줌
    • 사용자가 팔로우 혹은 빈번히 검색한 브랜드 상품 메인에 꺼내둠

기획 및 디자인을 위한 조언

• 맥락 고민하기

  • 어떤 맥락에서 어떻게 사용되는지 여부
  • 관련한 시나리오 그려볼 것

• 데이터 구조에 대한 이해

  • 서비스마다 다른 분류 기준을 이해해야 적합한 필터를 선택할 수 있음
  • 필터 적용이 누락되는 콘텐츠는 없는지 파악하기 위함이기도 함

• 모의 테스트 필수

  • 과도히 상세하면 결과값 적어져 불만족으로 이어짐
  • 필터 적용 시의 모의 결괏값을 미리 파악해볼 것 > 데이터팀과 협력

• 선택 사항 및 초기화의 확실한 표현

  • 선택한 조건이 무엇인지 확실히 변화줄 것
  • 초기화 버튼 또한 잘 보이는 곳에 둔다면 번거로움 예방 가능

• 충분한 터치 영역의 확보

  • 버튼보다 작은 칩스의 터치 영역을 넉넉하게 두어야 함

• 선택지에 대한 약간의 정보 제공

  • 옵션마다 달리 가진 속성에 대해 설명해줄 필요 있음
  • 텍스트 아니더라도 시각적 요소를 통해 알아볼 수 있게 안내할 것