수평 필터가 사이드 필터보다 뛰어난 이유
UX/UI
이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2015년 05월 05일의 기사입니다)
전자 상거래 사이트에서 필터링 인터페이스는 역사적으로 왼쪽 세로 사이드바로 구성되었습니다. 그러나 지난 몇 년 동안 새로운 필터링 및 정렬 인터페이스가 점점 더 대중화되었습니다. 즉, 필터와 정렬 도구를 모두 결합한 수평 도구 모음입니다. 실제로 제품 목록 및 필터링 벤치마크에 따르면 미국 상위 50개 전자 상거래 사이트 중 24%가 기존 필터링 사이드바를 버리고 수평 필터링 및 정렬 통합 도구(위 이미지와 유사)를 선택했습니다.
그러나 이 새로운 수평 도구 모음 인터페이스는 실제 사용자와 실제로 어떻게 작동합니까? 전자 상거래 제품 목록 및 필터링 사용성에 대한 대규모 리서치 동안 테스트된 여러 사이트에 이러한 수평 도구 모음 중 하나가 있었습니다.
간단히 말해서 우리의 사용성 리서치에 따르면 수평 필터링 및 정렬 도구 모음은 특정 유형의 전자 상거래 사이트 에만 적합 하지만 이러한 사이트의 경우 기존의 왼쪽 필터링 사이드바를 훨씬 능가할 수 있습니다.
이 기사에서는 비교적 새로운 수평형 필터링 및 정렬 도구 모음 사용자 인터페이스에 대한 사용성 테스트 결과를 살펴보겠습니다. 어떤 유형의 전자 상거래 사이트에서 고려해야 하고, 고려하지 않아야 하는지, 사용자가 새 UI에 어떻게 반응했는지, 수평 디자인을 올바르게 수행하는 데 중요한 3가지 특정 인터페이스 세부 정보를 간략하게 설명합니다.
수평 필터링 설계가 더 나은 성능을 발휘할 수 있는 이유
사용성 리서치 동안 수평 필터링 및 정렬 도구 모음 디자인은 대부분의 전자 상거래 사이트에서 볼 수 있는 기존 사이드바 필터링 인터페이스에서 자주 관찰되는 두 가지 심각한 문제를 줄이는 것으로 나타났습니다.
사용자는 필터링 사이드바를 완전히 간과하거나 무시합니다(이것이 가장 일반적인 시나리오임).
사용자는 때때로 사이트의 정렬 도구를 사용 가능한 유일한 도구라고 생각하여 사이트 필터링 도구로 착각합니다.
두 가지 문제는 사용자가 구매 기준과 일치하는 잘 정의된 제품 목록을 얻지 못하고 대신 지나치게 광범위한 제품 목록을 탐색하게 됩니다. 테스트하는 동안 테스트 대상자가 지나치게 광범위한 제품 목록을 탐색할 때 피로가 빠르게 시작되었고, 그런 다음 경쟁자를 위해 사이트를 포기하는 것을 포함하여 제품 찾기 전략을 전환했습니다.
이러한 문제는 제품 목록 및 필터링에 대한 전자 상거래 사용성 리서치뿐만 아니라 홈페이지 및 카테고리 탐색, 사이트 내 검색 , 특히 모바일 상거래에 대한 리서치에서도 관찰되었습니다. 다음은 정렬 도구를 사이트 필터링 옵션으로 잘못 해석한 경우입니다.
❌ "제조업체별로 분류할 수 있는 옵션이 있을 수 있다고 생각했습니다." 피험자는 Newegg에서 살펴본 최고의 제품에 만족하지 못한 후 말했습니다. 여기에서 그는 "정렬 기준" 드롭다운을 열고 제조업체별로 "정렬"(실제로는 필터링을 의미함) 방법을 기대했습니다.
❌ 마찬가지로, Pixmania에서 한 주제는 다음과 같이 생각했습니다. 내가 사용할 수 있는 몇 가지 기준이 있습니까?” 그가 가진 유일한 필터링 옵션은 제품 목록 바로 위에 표시된 4개의 정렬 옵션이라는 결론을 내렸습니다.
❌ 정렬 도구의 중심 위치는 보통 테스트 대상자, 특히 페이지 중앙에 배치된 제품 목록에 관여한 적이 있는 사람의 주의를 끄는 것을 의미합니다. Macy를 테스트할 때 여기에 나타나듯이 페이지 맨 위까지 다시 스크롤합니다.
사용자가 처음에 제품 목록을 탐색한 다음 표시된 제품을 변경하기로 결정하면 제품 목록의 맨 위로 스크롤하는 경향이 있습니다. 처음에 집중해야 할 자연스러운 영역은 제품 목록이 멈추는 페이지 오른쪽 중앙입니다. 이것은 종종 정렬 도구가 배치되는 위치이므로 필터에 대한 정렬 도구를 잘못 해석하는 것은 이해할 수 있습니다. 특히 정렬과 필터링이 모두 제품 목록을 변경하도록 설계된 도구라는 점에서 매우 관련이 있다는 점을 고려할 때 그렇습니다. 사실, 테스트하는 동안 몇몇 피험자들은 실제로 필터링을 하고 싶었을 때 "정렬"이라는 용어를 사용했습니다.
그러나 대부분의 사용자에게 가장 일반적인 행동은 "터널 비전"이었습니다. 표시된 제품을 변경하는 방법을 적극적으로 찾고 있음에도 불구하고 필터링 사이드바를 간과하거나 무시했습니다. 예를 들어 각 필터링 값에 대해 확인란을 사용하는 명확한 필터링 디자인이 이 문제의 발생을 줄이는 것으로 관찰되었지만 문제를 제거하지는 못했습니다.
⭕️ IKEA는 통합된 수평 필터링 및 정렬 바를 사용합니다. 테스트하는 동안 이것은 매우 효과적인 것으로 판명되었으며 제품 목록을 변경하려는 대상자는 페이지를 스크롤하면서 즉시 도구를 발견했습니다. 그리고 더 중요한 것은 사이트의 필터링 옵션에 대한 정렬 도구로 착각하지 않았다는 것입니다.
이것은 Allposters에서 32명의 테스트 참가자의 누적된 시선 고정을 보여주는 최근의 시선 추적 연구의 히트맵입니다. 이것은 수평 필터링 도구 모음이 매우 높은 검색률을 가질 수 있음을 분명히 확인할 수 있습니다. 3개의 필터링 드롭다운으로 구성된 수평 필터링 도구가 상위 3개 제품만큼 많은 관심을 받는지 확인하십시오(사이드바에 필터만 있는 사이트에서는 일반적으로 관찰되지 않는 동작).
리서치 기간 동안 테스트된 통합 수평 필터링 및 정렬 디자인은 사이트 필터의 검색 가능성과 활용도 모두에서 매우 우수한 성능을 발휘하는 것으로 나타났습니다. 피험자들은 이 필터링 디자인에 직면했을 때 필터를 더 자주 적용하고 정렬 위젯을 유일한 필터링 옵션으로 혼동하지 않는 것으로 관찰되었습니다.
수평 필터 및 정렬 툴은 기존의 좌측 사이드바를 모두 제거하여 더 큰 제품 축소 이미지(특히 시각적으로 주도적인 산업에 바람직함)를 허용하거나 추가 기능을 위한 공간을 만들 수 있는 또 다른 주요 이점을 제공합니다. 시각적으로 주도되는 산업 또는 그리드 레이아웃이 있는 사이트에서 라인당 추가 제품 열을 위한 공간을 만드는 데 특히 바람직합니다.
수평 필터링 및 정렬 도구 모음을 사용할 수 있는 사이트
수평 필터링 설계에는 공간이 제한적이라는 한 가지 주요 단점이 있습니다. 기존 필터링 사이드바처럼 "무제한" 화면 높이가 아닌 화면 너비를 활용하기 때문에 자연스럽게 필터가 거의 없는 산업 및 사이트 유형에만 적합합니다. 의류와 홈 장식은 이러한 두 가지 산업으로, 수평 여과 도구는 종종 크기, 색상, 재료, 가격, 브랜드 및 스타일로 제한되므로 한 라인에 합리적으로 적용할 수 있다.
⭕️ Crate & Barrel은 필터가 거의 필요하지 않을 뿐만 아니라 업계에 완벽하게 맞는 수평 도구 모음 디자인을 사용합니다.
의류 및 홈 데코 외부에 있는 사이트에 현재 필터가 거의 없는 경우, 수평 통합 필터링 및 정렬 바를 고려하기 전에 해당 사이트에 사용자가 필요로 하는 모든 필터링 옵션이 있는지 철저히 조사하는 것이 중요합니다. 제품 목록 및 필터 벤치마크를 통해 모든 사이트의 60%가 부적합한 수의 필터링 유형을 보유하고 있으며 범주별 필터(42%), 주제별 필터(20%), 호환성 필터(32%)가 부족함을 알 수 있습니다.
원격으로 사양 기반 제품을 처리하는 사이트 유형은 거의 항상 더 큰 범주별 필터 집합이 필요하므로 수평 도구 모음에 맞추는 것이 불가능합니다. 여기에는 대량 판매자, 전자 제품, 사무실, 하드웨어, 스포츠, 취미 및 대부분의 B2B 카테고리와 같은 사이트 유형이 포함됩니다.
더 나은 효과를 위한 중요한 3가지 인터페이스
벤치 마크된 전자 상거래 사이트의 24%가 수평 필터링 인터페이스를 가지고 있지만 벤치마크에서는 이러한 구현 중 절반만 이 기존 필터링 사이드바와 같거나 더 나은 효과를 보일 가능성이 있는 것으로 나타났습니다. 수평 필터링 도구 모음 구현의 나머지 절반에는 사용성 문제가 너무 심각하여 사용자가 필터를 보고 적용하는 기능을 제한할 수 있습니다.
수직 정렬 문제로 인해 이러한 수평 필터링 디자인은 거의 항상 드롭다운 (기본 또는 사용자 지정) 또는 유사한 축소 인터페이스로 구현됩니다. 그러나 결제 프로세스, 모바일 전자 상거래 및 전자 상거래 탐색에 대한 사용성 연구 중에 드롭다운 인터페이스는 주의 깊게 구현하지 않으면 종종 심각한 사용성 문제를 야기했습니다. 필터링 값을 표시하기 위한 드롭다운 인터페이스도 다르지 않으며 사용자의 필터링 경험과 능력을 심각하게 해치지 않는 한 세심한 주의가 필요합니다.
특히 고성능 수평 필터 구현을 얻기 위해 테스트 중에 결정적인 것으로 판명된 3가지 인터페이스 세부 사항이 있습니다.
1) 사용자 정의 드롭다운을 사용하여 각 필터 값에 대한 확인란 표시
❌ Ann Taylor는 수평 필터링 및 정렬 막대를 제공합니다. 그러나 각 필터 내에서 단일 값만 적용할 수 있기 때문에 사용자의 필터링 기능이 심각하게 제한되어 여러 값에 관심이 있는 사용자에게 광범위한 포고 스틱(pogo-sticking)이 발생한다는 점에 유의하십시오(예: 사용자는 모든 "갈색"에 합리적으로 관심이 있을 수 있음, "베이지", "중성" 및 "상아" 스웨터).
인터페이스에 관계없이 사용자는 항상 동일한 필터링 유형 내에서 여러 필터링 값을 선택할 수 있어야 합니다. 그러나 네이티브 HTML 드롭다운 요소(<select> 태그)는 거의 항상 상호 배타적인 옵션을 제공하기 위해 사용됩니다. 따라서 필터링 값을 표시하기 위해 기본 드롭다운 인터페이스를 사용하지 않는 것이 좋습니다(여러 값을 선택할 수 있도록 설정된 경우에도).
링크는 동일한 문제로 인해 문제가 발생합니다. 따라서 여러 값을 선택할 수 있다는 것을 사용자에게 명확하게 전달하기 위해 (매우 잘 설정된 다중 선택 허용) 확인란 목록을 표시하는 사용자 지정 드롭다운 또는 유사한 축소 사용자 인터페이스가 필요합니다.
2) 필터 적용 시 제품 목록 라이브 업데이트
사용자 지정 드롭다운은 필터링 값을 적용하는 색다른 방법이기 때문에 일부 테스트 대상은 그 안의 값을 클릭할 때 실제로 어떤 일이 일어날지 의심했습니다. 따라서 일치하는 결과 목록을 실시간 업데이트하는 것이 좋습니다. 이렇게 하면 사용자가 값을 확인 및 선택 취소하고 페이지 새로고침(여러 테스트 대상이 나타내는 행위)으로 중단되지 않고 인터페이스 동작을 학습할 수 있기 때문입니다. 제품 목록을 실시간 업데이트하는 또 다른 이점은 드롭다운 안에 '적용' 버튼을 맞출 필요가 없다는 것입니다.
3) 드롭다운 위젯 외부에도 적용된 필터링 값 표시
⭕️ Nordstrom의 드롭다운 디자인이 드롭다운 외부에 적용된 값을 어떻게 표현하는지 주목하세요. 사용자에게 즉각적이고 영구적으로 표시될 뿐만 아니라 각 적용된 값을 비활성화하는 쉬운 옵션도 제공합니다.
이를 통해 사용자는 적용된 필터를 확인할 수 있으므로 항상 현재 목록이 필터링되는 정확한 기준을 볼 수 있습니다. 하나 이상의 필터링 값이 적용될 때 사용자에게 명확하게 전달하는 것이 중요합니다. 적용된 필터 하나라도 간과하면 사용자가 사이트에서 제공하는 제품의 유형과 범위를 모두 잘못 해석할 수 있기 때문입니다. 또한 드롭다운 외부에 필터링 값을 표시하면 사용자가 적용된 필터를 선택 해제할 수 있는 직접 액세스가 제공됩니다.
수평 필터링 및 정렬 도구 모음
의류, 가정 장식 및 이와 유사한 미학적 중심 카테고리와 같이 필터링 유형이 매우 적은 일부 사이트의 경우 수평 필터링 및 정렬 도구 모음은 완전히 유효한 필터링 인터페이스이므로 진지하게 고려해야 합니다.
우리의 사용성 연구에 따르면 수평 필터링 및 도구 모음은 사이트 필터의 검색 및 활용도를 모두 높일 수 있으며 정렬 도구의 잘못된 해석을 방지할 수 있습니다.
또한 행당 추가 제품 또는 더 큰 제품 축소판을 표시하는 데 사용할 수 있는 가로 화면 공간을 확보하는 기존 사이드바를 완전히 제거할 수 있는 가능성을 열어줍니다.
그러나 수평 필터링 설계를 신중하게 구현해야 사용자 경험이 향상됩니다. 세부 정보를 올바르게 얻으려면 리소스를 사용해야 합니다. 현재 수평 필터링 도구 모음 구현의 절반이 수행하지 못하는 작업입니다. 구체적으로 다음을 확인하십시오.
필터링 값은 사용자 정의 드롭다운 인터페이스로 구현된다
동일한 유형의 여러 필터링 값을 선택할 수 있다
각 값을 클릭할 때 제품 목록을 자동 적용하고 실시간 업데이트한다
드롭다운 외부에 적용된 필터링 값을 표시한다
항상 UX DAYS SEOUL에 관심을 가져주시고 기사를 읽어 주셔서 감사합니다.
적합한 기사 제공을 위해 구독자 여러분들의 의견을 얻고자 합니다.
잠깐 시간을 내주셔서 답변해주시면 감사드리겠습니다.
예상 소요 시간 : 30초
설문조사 URL
