brunch

You can make anything
by writing

C.S.Lewis

by UX DAYS SEOUL May 22. 2022

EC사이트에는 2가지 유형의 브레드 크럼이 필요하다

UX/UI

항상 UX DAYS SEOUL에 관심을 가져주시고 기사를 읽어 주셔서 감사합니다.
적합한 기사 제공을 위해 구독자 여러분들의 의견을 얻고자 합니다.
잠깐 시간을 내주셔서 답변해주시면 감사드리겠습니다.

예상 소요 시간 : 30초

설문조사 URL

이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2013년 12월 10일의 기사입니다)

브레드 크럼(이하 이동 경로)은 그렇게 흥미롭지 않은 사이트 요소처럼 보일 수 있지만 최근 Homepage & Category 사용성 테스트에서 중요한 탐색 경로임을 입증했습니다. 아마도 더 흥미로운 것은 전자 상거래 사이트가 계층 기반 및 히스토리 기반 이동 경로라는 두 가지 유형의 이동 경로를 제공해야 한다는 리서치 결과입니다.

그러나 50개의 주요 전자 상거래 사이트를 벤치마킹할 때 68%가 낮은 수준의 이동 경로 구현으로 인해 어려움을 겪고 있음을 발견했습니다.

이 기사에서 우리는 히스토리 기반 및 계층 기반 탐색경로의 특징을 설명하는 리서치 결과를 살펴보고 전자 상거래 사이트에 이 두 가지를 모두 갖는 것이 왜 중요한지 전할 것입니다.

이동 경로 사용 동작

제품 페이지에 이동 경로가 없으면 계층 구조에서 "한 단계 위로"(제품 범주로) 이동하거나 이전 제품 목록 또는 검색 결과 페이지로 돌아갈 방법이 없기 때문에 사용자가 제품 컬렉션을 효율적으로 탐색하기 어렵습니다. 이것은 종종 사용자가 과감한 범위 점프(예: 최상위 범주 선택, 검색 수행 등)를 하거나 제품 페이지에서 머물러 있게 만듭니다.

그러나 이동 경로를 사용하면 제품이 일치하지 않거나 단순히 다른 제품(비교, 실사 또는 추가 구매를 위해)을 보고 싶어 하는 사용자는 이동 경로를 사용하여 사이트 계층을 원활하게 탐색할 수 있습니다. 이렇게 하면 과감한 범위 점프에 의존하지 않고 제품 탐색을 계속할 수 있습니다.

⭕️ 계층 기반 이동 경로를 통해 사용자는 제품 범주를 쉽게 탐색하여 관련 제품을 찾을 수 있습니다. 여기에서 테스트 대상은 재킷에 대해 100% 확신하지 못하므로 H&M 제품 페이지의 계층 구조 기반 이동 경로 링크를 사용하여 가져온 "재킷 및 코트" 범주로 쉽게 이동했습니다.

테스트하는 동안 이동 경로의 가장 일반적인 용도는 테스트 대상이 방금 온 범주로 돌아가는 방법이었습니다. 브라우저의 "뒤로" 버튼을 사용하는 것과 마찬가지로 이것은 웹 페이지 인터페이스의 일부일 뿐입니다. 이러한 의미에서, 이동 경로는 본질적으로 사용자가 제품 카테고리로 돌아가서 제품 페이지와 제품 목록 사이를 앞뒤로 이동하면서 제품 탐색을 계속할 수 있는 쉬운 방법입니다.

이동 경로 링크는 일반적으로 계층 기반이기 때문에 브라우저의 "뒤로" 버튼처럼 작동하지 않는 반면 웹 브라우저의 "뒤로" 버튼은 히스토리 기반(즉, 사용자의 탐색 경로를 기반으로 함)입니다. 결과적으로 사용자가 계층 기반 이동 경로를 사용하여 뒤로 탐색하면 이전에 적용된 필터 및 정렬 옵션이 손실됩니다. 여기에서 히스토리 기반 이동 경로가 필요합니다. 탐색경로가 히스토리 기반인 경우 사용자를 이전 페이지로 다시 보냅니다. 이 페이지는 종종 일반 카테고리 목록이 아닙니다. 예를 들어 사용자가 제품 속성으로 필터링하거나 다른 정렬 방향을 적용했거나 제품에 입력했을 수도 있습니다. 검색(사이트 안팎) 또는 광고와 같은 비선형 방식의 페이지입니다.

❌ Nordstrom에서 "결과로 돌아가기" 옵션을 사용하면 사용자가 이전의 모든 필터링 및 정렬 설정을 그대로 유지한 채 제품 목록으로 돌아갈 수 있습니다(검색에서도 작동함). 그러나 기존의 계층 기반 이동 경로가 없기 때문에 외부 소스의 사용자가 범위를 추론하거나 건너뛰기(즉, 카탈로그 계층 "백업" 순회) 어렵습니다.

일부 사이트는 "뒤로" 링크로 효과적으로 기능하는 사용자의 탐색 경로 (예: 히스토리 기반 이동 경로) 만을 기반으로 하는 이동 경로를 구현합니다. 그러나 이는 제품이 배치된 범주를 탐색하여 선형 탐색 전략으로 이동할 수 없기 때문에 사용자가 비선형 방식으로 액세스 한 범위를 탐색하는 기능을 제한합니다.

두 가지 이동 경로 유형이 모두 필요한 이유

비선형 방식으로 제품 페이지를 방문하는 사용자(예: 내부 또는 외부 검색 또는 추천 프로모션)는 종종 이동 경로를 사용하여 동일한 하위 범주의 다른 제품을 봅니다. 본질적으로 사용자가 사이트의 완전히 다른 부분에서 또는 완전히 다른 사이트에서 제품에 액세스 하더라도 관련 제품을 찾는 방법입니다. 따라서 계층 이동 경로는 검색, 판촉 및 기타 비선형 경로에 매우 중요합니다. 범위가 관련이 있는 경우 사용자가 선형 제품 탐색 전략으로 쉽게 전환할 수 있기 때문입니다.

⭕️ Best Buy에서 한 피험자가 "베스트셀러" 액세서리 목록에서 Targus 노트북 어댑터를 열었습니다. 그러나 100% 확신할 수 없었기 때문에 대상은 다른 랩톱 어댑터를 확인하고 싶었습니다. 다행히도 범주 페이지에서 계층 기반 이동 경로를 클릭하여 "노트북 충전기 및 어댑터" 범주로 직접 이동하는 것만 큼 쉽습니다.

그러나 계층 기반 이동 경로는 비선형 방식으로 제품 페이지에 액세스 한 사용자에게 잘 작동하지만 선형 방식으로 제품 페이지에 액세스 한 사용자의 요구에 항상 맞지는 않습니다. 사용자가 카테고리 페이지에서 여러 필터를 적용한 다음 제품을 여는 경우 제품 페이지의 계층 기반 탐색경로에서 카테고리를 클릭하면 일반적으로 필터 가 유지되지 않고 필터가 없는 카테고리 페이지로 사용자를 다시 보냅니다. 필터가 적용된 이유는 단순히 카테고리에 대한 링크일 뿐 사용자의 히스토리를 기반으로 하지 않기 때문입니다. 한편 사용자에게 정말 필요한 것은 검색 결과 목록이든 이전 필터 및 정렬이 적용된 카테고리이든 상관없이 사용자를 이전 페이지로 다시 보내는 히스토리 기반 이동 경로였습니다.

그렇다면 어느 것을 구현해야 합니까? 정답은 둘 다입니다. 비교적 간단한 솔루션은 일련의 계층 기반 이동 경로를 가진 다음 끝(또는 시작)에 히스토리 기반 "결과로 돌아가기" 옵션을 추가하는 것입니다. 이것은 사용자에게 두 가지 장점을 모두 제공합니다. 즉, 비선형 방식으로 제품 페이지에 액세스함에도 불구하고 카테고리에 액세스 하는 동시에 필터, 정렬 및/또는 검색어를 그대로 사용하여 사용자에게 이전 페이지로 돌아갈 수 있는 방법을 제공합니다.