많은 온라인 쇼핑이나 탐색 경험에서 검색 및 필터링은 계정 생성 및 결제와 같은 비즈니스에 중요한 기능만큼 중요합니다. 그 이유는 간단합니다. 사용자가 원하는 것을 찾을 수 없으면 구매(또는 소비)하지 않을 것이기 때문입니다. 그러나 필터 메뉴의 모양과 작동 방식에 대한 권위 있는 플레이북은 없습니다.
저는 Cisco.com을 재구상하기 위한 업계에서 인정받는 노력의 일환으로 필터 메뉴를 표준화하기 위해 노력해 왔으며 이 작업을 시작할 때 알았더라면 좋았을 몇 가지 관찰 사항을 공유하고 싶습니다.
의미 있는 기본 프레젠테이션 순서 찾기
Cisco에서 필터 작업을 하면서 우리는 사용자가 목록을 필터링할 수 있더라도 목록 항목의 신중한 순서를 중요하게 생각한다는 사실을 알게 되었습니다. 우리는 사용자의 목적이 필터링이라고 가정하는 것이 실수라는 것을 깨달았습니다. 실제로 사용자는 의미 있는 콘텐츠를 원할 뿐입니다 . 임의의 정렬 순서를 사용하면 사용자가 더 많은 작업을 수행할 수 있습니다.
Cisco.com 사용자는 목록이 알파벳순으로 정렬되었기 때문에 첫 번째 항목임에도 불구하고 필터링 가능한 목록의 첫 번째 항목을 클릭하는 경향이 있었습니다. 이는 반드시 우리가 의도한 동작은 아니었습니다. 큐레이션이 없을 때 사용자가 큐레이션을 추론 했을 수도 있습니다 . 큐레이션의 중요성을 확인하기 위해 사용자 테스트에서 대상을 다양한 유형의 기본 정렬 논리에 노출했습니다. 테스터 15명 중 13명은 가장 최근 또는 AZ보다 최적 일치 기본 논리를 선호했습니다.
우리는 현재 목록 항목의 인기도나 관련성에 따라 필터링 가능한 목록을 렌더링하는 전략을 연구하고 있습니다.
클릭 데이터가 오버레이된 필터 메뉴가 있는 웹페이지의 스크린샷 4개
Cisco.com 사용자는 필터링 가능한 목록에서 첫 번째 항목을 클릭할 때 큐레이션을 추론 했을 수 있지만 목록은 실제로 알파벳순으로 정렬되었습니다.
스크롤 및 모바일에 최적화
이 작업을 하면서 나는 수백 개의 필터 메뉴를 조사했습니다 . 가장 좋은 방법은 메뉴를 화면 상단에 고정하거나 플로팅 버튼을 표시하여 목록을 아래로 스크롤할 때 메뉴를 손이 닿는 곳에 유지하는 것입니다. 모바일에서는 일반적으로 후자가 가장 우아한 옵션입니다.
필터 메뉴에 대한 사용자 경험에 많은 투자를 할 것으로 예상되는 미국 상위 10대 전자 소매업체 중 Walmart, Apple, Best Buy는 데스크톱 스크롤을 최적화하고 eBay와 Apple은 모바일 스크롤을 최적화합니다. 아래 이미지는 eBay와 Apple의 모바일 처리를 보여주며 Kayak도 포함되어 있습니다.
Apple, eBay, Kayak용 모바일 필터 메뉴 스크린샷
Apple, eBay, Kayak의 필터 메뉴는 모바일에 최적화되어 있습니다.
이러한 치료법이 최고의 사용자 경험을 제공한다는 점은 논쟁의 여지가 없습니다. 필터 메뉴에서 스크롤할 때 최상의 사용자 경험이 항상 필요한지 여부는 논쟁의 여지가 있습니다. 사용자가 검색 및 필터링 후 상위 몇 개의 결과를 클릭하는 경향이 있는 경우 스크롤 최적화는 추가 노력을 기울일 가치가 없을 수 있습니다. 검색 및 인기 알고리즘을 통해 관련성을 보장하면 비용 대비 더 많은 효과를 얻을 수 있습니다. 탐색, 헤더 또는 채팅 위젯과 같은 기존 고정 요소로 인해 새로운 플로팅 또는 고정 요소를 추가하는 것이 불가능할 수도 있다는 점도 언급할 가치가 있습니다. Cisco.com의 경우입니다.
직관적이고 확장 가능한 필터 메뉴 분석
필터 메뉴는 방해가 되지 않으면서 도움이 되어야 합니다. 직관적이고 방해가 되지 않아야 하며, 투박하거나 압도적이지 않아야 합니다.
일반적인 노트북 화면에서 사용자는 기계 도구 모음과 브라우저 메뉴를 고려하여 웹 브라우저에서 접힌 부분 위로 약 700px를 볼 수 있습니다. 일반적으로 전체 필터 메뉴를 수용하기에는 공간이 충분하지 않습니다. 너무 많이 스크롤하거나 클릭하지 않고도 소화가 가능하도록 Cisco.com 필터 메뉴에 대한 몇 가지 규칙을 정했습니다(아래 이미지 목록 참조).
필터 카테고리는 아코디언 서랍처럼 열리고 닫힙니다. 페이지 작성자는 사용자가 첫 번째 페인트에서 전부는 아니더라도 대부분의 카테고리를 볼 수 있도록 기본적으로 처음 두 개의 카테고리만 여는 것이 좋습니다.
필터 카테고리는 기본적으로 처음 5개 속성만 표시하며, 전체 속성 목록을 열려면 '더 보기(##)' 텍스트 버튼을 사용하세요.
더 긴 속성 목록(예: 국가별 필터링)의 경우 속성 목록을 검색/필터링하기 위한 텍스트 입력이 포함됩니다.
몇 가지 필터 속성이 메뉴 상단에 태그로 표시될 수 있습니다(예: 신규, 인기, 곧 만료됨, 할인 중). 태그는 카테고리로 표시하기에 적합하지 않은 이진 속성을 위한 것입니다.
각 속성의 개수는 속성 이름 뒤의 괄호 안에 표시됩니다.
선택한 필터를 나타내는 해제 가능한 칩이 결과 목록 상단에 나타나 추적성을 제공하고 필터를 빠르게 제거할 수 있는 두 번째 경로를 제공합니다.
모든 것이 정해진 것은 아닙니다. 페이지 작성자는 카테고리 순서와 태그로 사용할 속성을 결정합니다. 또한 속성을 알파벳순, 사용자 정의 순서 또는 가중치(예: 결과 수)순으로 표시할지 여부를 결정합니다.
다음은 위에서 설명한 규칙에 맞는 Cisco.com 필터 메뉴의 예입니다. 처음에는 약간 기본적인 것입니다. 앞으로는 아이콘, 고객 평가 기준 필터링, 가격대 기준 필터링에 대한 지원을 추가할 수 있습니다.
웹사이트의 필터 메뉴 예시 모형
Cisco.com 필터 메뉴는 유용성과 확장성을 위해 설계되었습니다.
사용자 상호작용에 따라 필터 업데이트
사용자는 필터 메뉴의 상태가 자신이 선택한 내용을 반영할 것으로 기대합니다. 속성 개수는 필터가 추가되거나 제거될 때마다 업데이트되어야 합니다. 이를 위해서는 빈번한 API 호출이 필요하지만 사용자 조사에 따르면 정적 속성 개수는 사용자 기대치를 충족하지 못합니다. 일부 필터 메뉴에는 사용자가 필터 선택 조정을 마칠 때까지 서버 핑을 방지하기 위한 "적용" 버튼이 있습니다(이 작업은 모바일에서만 수행됩니다).
또한 사용자는 이전 선택 사항에 따라 필터 옵션이 더 이상 적용되지 않으면 필터 옵션이 제거되기를 기대합니다. 예를 들어, 특정 가격대를 선택하면 특정 브랜드나 모델이 제외될 수 있습니다(또는 그 반대). 이에 대한 몇 가지 구현 전략이 있습니다. 우리 연구에서 테스터 15명 중 10명은 사용할 수 없는 옵션을 표시하지만 처리가 비활성화된 디자인보다 더 이상 사용할 수 없는 필터를 제거한 디자인을 선호했습니다.
사용자가 상호 작용할 때 필터가 업데이트되어야 한다는 규칙에는 한 가지 중요한 예외가 있습니다. 사용자가 특정 필터 카테고리와 상호작용할 때 해당 카테고리의 속성이 변경되어서 는 안 됩니다 . 이를 통해 사용자는 해당 카테고리 내에서 다중 선택할 수 있습니다.
이는 예에서 가장 잘 설명됩니다. 브랜드와 크기라는 두 가지 범주가 있는 필터 메뉴를 생각해 보세요. 사용자가 몇 가지 브랜드를 선택하면 사이즈 수가 업데이트되고 일치하지 않는 사이즈는 숨겨져야 하지만 브랜드 목록은 사용자가 상호작용한 마지막 카테고리라고 가정하여 정적으로 유지되어야 합니다. 그런 다음 사용자가 사이즈를 선택하면 브랜드 목록은 업데이트되고 사이즈는 그대로 유지됩니다.
아래 모형은 그 예를 보여줍니다. 상태 1이 기본값입니다. 필터가 적용되지 않았습니다. 상태 2에서는 사용자가 몇 가지 브랜드를 선택했기 때문에 크기에 대한 속성 수가 감소했습니다. 아직 숨겨진 크기는 없지만 이는 사용자가 작은 크기로 필터링하는 상태 3에서 발생합니다. 이제 필터링된 목록은 선택 항목의 실제 결합을 반영합니다.
이러한 동작은 혼란스럽게 느껴질 수 있지만 eBay 및 Best Buy와 같은 주요 전자상거래 사이트 사용자에게는 자연스러운 현상입니다.
필터 메뉴의 진행 상태를 보여주는 세 가지 모형
필터는 사용자가 상호작용할 때 업데이트되어야 하지만, 마지막 카테고리는 다중 선택이 가능하도록 정적으로 유지되어야 합니다.
마무리
Cisco.com은 다양한 기술을 사용하여 시간이 지남에 따라 구축된 잡동사니입니다. 최근 몇 년 동안 우리는 새로운 디자인 시스템, 페이지 템플릿, 필터와 같은 재사용 가능한 모듈을 통해 혼란을 해결했습니다. 필터는 제품군 내의 하드웨어 모델 검색부터 웨비나 및 이벤트 검색까지 다양한 상황에서 당사 사이트에 표시되지만 공통 디자인 및 상호 작용 패턴이 Cisco.com 방문자의 인지 부하를 줄이고 페이지 성능 향상에 기여한다고 믿습니다. 웹에서 본 뛰어난 필터 메뉴에 대한 독자들의 의견을 환영합니다.
