더 멋진 필터링 UX를 만드는 법
필터는 엄청나게 많은 콘텐츠에서 필요한 것을 걸러서 가장 사용자에게 맞는 결과를 찾게 해주는 좋은 툴이다. 우리는 그것을 어떻게 혼란스럽기 보다는 유용하게 만들 수 있을까?
이 글은 Zomato의 디자인팀에서 가졌던 리서치와 토론 세션의 기록이다. Baymard의 이커머스 사용성 리서치와 Thierry Meier의 필터링과 분류 패턴에 대한 아티클에 영향을 많이 받았다.
좋은 필터링을 만드는 방법
카테고리 맞춤형 필터를 제공하라
널리 쓰이는 필터들은 가격, 색상, 인기도 같은 일반적인 특징으로 결과를 좁혀준다. 하지만 우리는 카테고리별 다양한 필터들도 사용해야 한다. 그것은 옷을 쇼핑할 때 바지 카테고리에는 '핏' 또는 '허리 높이', 레스토랑을 찾을 때 나이트 라이프 카테고리 아래에는 '해피 아워'나 '춤추기 좋은' 같은 필터가 존재해야함을 의미한다.
카테고리 맞춤형 필터를 만드는 가장 간단한 방법은 다음과 같다. 상품에 언급된 모든 설명이 필터에 포함될 가치가 있다는 것이다.
Myntra는 매우 자세한 카테고리 맞춤형 필터를 제공한다. 이것은 특히 상품이 아주 많을 때 유용하다.카테고리 맞춤형 필터는 또한 전시되고 있는 콘텐트에 경험이 부족한 사람들에게 고려해야할 요소들을 가르쳐주는 장점도 있다.
다중 선택을 허용하라
의사 결정은 단 하나의 정보에 기반하지 않을 수도 있다. 원하는 것을 정확하게 알든 (야외 테이블이 있고 반려동물을 동반할 수 있으며 베지테리언 옵션이 있는 레스토랑에 관심이 있다), 또는 원하지 않는 것만 정확하게 알든 간에 (시끄러운 음악이 나오는 레스토랑에는 관심이 없다) 다중 선택은 허용하는 것이 합리적이다. 그것은 사용자가 탐색을 빠르고 더 편리하게 좁혀 나가도록 허락할 것이다.
그리고 다중 선택을 허용하는 것은 상품 조회를 더 빠르게 만든다. 두개 또는 더 많은 필터를 선택하고 싶은 상황에서 선택 하나하나를 할 때마다 페이지가 고통스럽도록 느리게 리로딩 되는 것을 보는 것은 좌절스럽다.
실제 사용되는 언어를 사용하라
필터들은 사용자들의 실제 행동을 관찰한 후에 모델링되어야 한다. 사람들이 원피스를 사기 위해 가게 점원에게 질문을 하는 방식이나 친구들이 휴가지에서 집을 어떻게 빌리는지를 생각해보라. 그 선택을 하기 위해 사용되는 언어가 필터의 언어여야 한다.
예를 들어, 옷가게에 갈 때, 우리가 '핏&플레어'나 '쉬프트' 또는 '보디콘' 원피스를 요청할 확률은 낮다. 그러나 그것이 Chumbak의 온라인 스토어에서 사용되는 필터다. 그런 필터를 사용하는 것보다는 차라리 전체 카테고리를 보면서 어떤 원피스가 내가 찾는 것과 관련 있고 어떤 것들은 그렇지 못한지 (이건 너무 짧고, 이건 팔이 길다...) 살펴 보는 것이 나았다. 이 경우에는 상품이 35개밖에 되지 않았지만 상품이 더 많은 경우에는 그렇게 하기 힘들 것이다.
적용된 필터를 중복 노출하라
적용된 필터를 원래 위치에 보여주거나 '적용된 필터' 섹션에 분리하는 것은 흔한 관습이다. 연구는 그것 둘다 하는 것이 낫다는 것을 말해준다.
사용자가 필터를 해제하고 싶을 때, 그들은 먼저 필터를 그것의 원래 위치에서 찾는다. 그러므로 만약 필터를 찾지 못한다면 사용자들은 당황스러울 것이다.
다른 면에서는, 선택된 필터를 분리된 섹션에 두는 것이 사용자들이 최근에 적용한 필터를 빠르게 체크하고 다양한 필터들을 한 번에 적용 해제할 수 있는 간편한 방법을 제공할 수 있다.
Kulture Shop은 필터들을 드롭다운 되는 그들의 원래 위치에 두면서도 '최근에 적용한 필터' 섹션을 편리하게 사용할 수 있도록 추가해 놓았다.
Kulture Shop은 필터들을 그들의 원래 위치 뿐만 아니라 화면 최상단에도 노출시키고 있다.그럼에도 불구하고 Kulture Shop은 더 발전할 여지가 있다. '무드/스타일/주제별 검색' 필터는 좋은 옵션이지만 '반항적인'이나 '풍자적인' 같은 필터는 너무 자세하다. 그리고 내가 박스를 선택할 때마다 페이지를 리로딩하는 고통에 대해 적절히 표현할 방법이 없는게 안타깝다! 나는 나의 느린 인터넷 속도로 페이지를 두번씩 로딩해야 하는 것 없이 상품을 보고 싶다.
필터 변화 각각은 독립적인 브라우저 페이징처럼 표현되어야 한다
페이지에 담긴 콘텐츠가 변하기 때문에, PC 웹에서 필터를 사용할 때는 다양한 필터가 담긴 하나의 페이지가 있다기 보다는 여러개의 "페이지"가 있는 것처럼 느껴진다.
브라우저 행동은 이 인식과 일치해야 한다. 뒤로 가기 화살표를 누르는 것은 사용자의 이전 필터 선택 결과를 보여주어야 하며 그들을 완전히 다른 페이지로 돌려 보내면 안된다.
필터링과 소팅 패턴
UX는 언제나 맥락 의존적이고 필터 또한 예외가 아니다. 필터에 대한 디자인 결정은 변수의 숫자나 사용자의 종류 같은 맥락에 기반해야 한다.
필터링인가, 소팅인가?
이론적으로 그들은 다른 종류의 것이다. 소팅은 콘텐트를 특정한 변수에 따라 조직하는 것이고, 필터링은 그것을 전시에서 제외해버리는 것이다.
그러나 연구는 사용자 입장에서 그 둘은 거의 동일한 것이라고 보여준다. 필터링과 소팅 모두 그들의 기준에 맞춰 가장 연관도 있는 콘텐츠를 보여주기 때문이다. Baymard의 연구는 심지어 어떤 사람들은 "소팅"과 "필터링"을 번갈아서 쓴다고 말한다.
소팅은 같은 "타입" 끼리의 필터로 볼 수 있다(예를 들어, '가격'). 소팅은 사용자가 특정한 범위를 고르게하는 것($0~$20, $20~$40 .. 중에서 고르는 것) 보다도 사용자가 전체 범위를 훝게 하는 것(낮은 가격순으로 정렬)을 허용한다.
필터링은 상호 배타적인 필터들에게 아주 멋진 옵션이다. 우리가 바지를 '핏'으로 소팅할 수 있다고 해도, 제깅스를 상위에, 2000년대 초반의 배기 팬츠를 하위 결과로 보는 것이 별로 도움이 되지는 않을 것이다.
두 가지를 결합해서 필터링은 사이드 바에 소팅 툴은 화면 상단에 놓는 것이 일반적이다. 이것은 또다른 다음 질문을 하게 만든다..
사이드바와 툴바 (PC 웹)
화면 왼쪽에 사이드바로 놓아진 필터링 인터페이스는 PC 웹사이트의 황금률이다. 그것은 훝어보기 쉽고 페이지 너비에 제한을 받지 않기 때문에 많은 숫자의 필터를 보여주기 쉽다.
페이스북은 검색결과 페이지에 유용한 오래된 스타일의 사이드바를 사용하고 있다 그럼에도 불구하고, 이것도 문제가 있다. 배너가 화면을 가리는 현상이 사이드바 전체가 무시되게 만들거나 사용자가 상위에 놓인 소팅 옵션만 인지하고 그것이 필터링 옵션의 전부라고 생각할 수도 있다.
따라서 소팅과 필터링 툴을 화면 상단의 가로 툴바에서 결합하는 것이 그들을 더 눈에 띄게 할 수 있다.
에어비앤비는 사람들이 가장 많이 사용하는 몇몇 필터들을 확인해서 가로 툴바에서 편리하게 보여주고 있다. 다른 것들은 눌렀을 경우 화면 전체로 확대되는 '더보기' 드롭다운에 들어 있다.
하지만 이 옵션은 많은 드롭다운을 다뤄야하는 상황에서는 성가실 수 있기 때문에 위계관계가 뚜렷하지 않은 검색 변수가 아주 많은 상황에서는 적합하지 않을지 모른다.
모바일 디바이스 필터링 패턴
Thierry Meier가 모바일 필터링 각각 타입의 장점과 사용 케이스를 이미 잘 정리했다. 그러므로 나는 그것을 열거하기만 하고자 한다.
사이드 오버 필터링 : 검색결과 위에 부분적으로 덮어 씌워지는 필터링 보기 방식이다. 이것은 필터링 된 것의 맥락을 보기에 유용하지만 필터링 세트가 긴 경우에는 추천하지 않는다
풀스크린 필터링 : 풀 스크린 필터링은 필터링에 더 집중할 수 있고 좀 더 많은 화면을 사용할 수 있기 때문에 긴 필터링 세트를 보여줄 때 유용하다.
검색결과별 필터링 : 결과가 사용자의 인풋에 달린 필터링 방식이다. 쿼리가 너무 광범위한 경우에 결과를 좁히기 위한 카테고리들이 제공된다. 달리 말하면, 쿼리가 구체적인 경우에는 검색결과가 바로 제공된다.
소팅 : 다시 말하지만 소팅 또는 필터링을 적용하는 것은 맥락을 고려해야하는 디자인 결정이다. Meier는 모바일 디바이스의 더 제한적인 화면이 소팅 필요를 더 높인다고 지적하고 있다.
각기 다른 선택들을 별도로 안내하기 : 검색결과 노출을 위해 반드시 필요한 탑 레벨의 선택들은 실제 필터링과 분리되어야 한다.
'필터 없는 필터들'
우리가 필터에 대해 배우는 동안, Aiswarya Kolisetty와 나는 특정 케이스에서는 적합한 결과를 "전통적인" 필터링 없이 보여주는 것이 더 적합하다는 것에 동의했다.
시작 시점에 사전 선택하기
어떤 서비스들은 신규 사용자가 그들이 볼 콘텐츠를 필터링하는 선택을 하게 만든다.
예를 들어 미디엄은 사용자들이 관심 주제를 선택하게 하고 뉴스피드는 그것을 반영한다. 이런 방식은 합리적인데, 미디엄 유저들의 관심 주제가 그들이 웹사이트를 열 때마다 급격히 바뀔리는 없기 때문이다.
가장 많이 사용되는 변수를 첫번째로 노출하라
반복적인 검색 작업은 가장 흔히 사용되는 검색 변수를 확인하고 상위 노출함으로써 지양될 수 있다.
우리는 우버 앱에서 어떤 장소도 입력할 수 있다. 하지만 사용자에 의해 저장되었거나 가장 많이 사용된 장소는 편리하게 고정할 수 있고 검색 결과 첫번째에 오도록 만들 수 있다.
심리적 필터링을 위한 다른 관점을 제공하라
각기 다른 UI 선택들은 서로 다른 행동을 유도한다. 가령 지도 보기 방식은 사용자가 심리적으로 장소에 의해 필터링 하게 돕고 리스트 보기 방식은 사용자가 그것과는 다른 특징을 훝어 보도록 이끈다.
구글 맵을 예로 들어보자. 장소의 위치가 중요할 때 지도 보기로 카페를 찾는 것은 합리적인 일이다. 리스트 보기 방식은 의사 결정에 다른 요소(별점, 음식의 종류 등..)도 중요할 때 더 적합하다.
이 글은 아래 원문의 번역입니다.
저자 : Laura Cunha
번역자 : 곽나래
원문 링크 : https://uxdesign.cc/crafting-a-kickass-filtering-ux-beea1798d64b
