brunch

라이킷 23 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX DAYS SEOUL Aug 22. 2021

브레드 크럼의 6가지 중요한 측면 (전편)

Breadcrumb

이 기사는 Baymard의 허가 아래 게재하고 있습니다.

사용성 테스트 동안, 모바일 사이트에서는 Breadcrumb (이하 브레드 크럼)이다음 2가지를 이유로 많은 부분의 역할을 했습니다.

1. 모바일 사용자는 메인 내비게이션이 통상적으로 숨겨져 있기 때문에 사이트의 현재 위치를 확실히 알지 못합니다.
2. 모바일의 경우, 메인 내비게이션이 상시로 표시되는 데스크톱과 비교해 조작의 횟수가 늘어나 액세스에 더 많은 노력이 필요한 경우가 많습니다.

당사의 최신 모바일 벤치마크에 의하면, 브레드 크럼이 표시되고 있는 사이트 중 36%가 모바일 상품 페이지의 브레드 크럼에 전체 카테고리의 범위를 포함하고 있지 않은 것으로 나타났습니다.

이것은 모바일 사용성 테스트에서 이러한 누락으로 인해 모바일 사용자가 자신이 어디에 위치하고 있는지 제대로 이해하지 못하고 카테고리 계층을 탐색하기가 어렵다는 사실로 밝혀졌기에 중요한 부분입니다.

이 경우 원하는 상품을 어떻게 찾아야 할지 모르거나 사이트 내에서 길을 잃어버릴 가능성이 있습니다.

이 기사에서는 모바일에서의 상품 페이지에 리서치 결과를 토대로 최적의 브레드 크럼을 구현하는 방법을 소개합니다.

불완전한 브레드 크럼의 문제

과도한 브레드 크럼이 되지 않도록 하는 2 가지 방법

긴 브레드 크럼을 구현하는 방법

긴 브레드 크럼에 주의 깊게 접근해야 할 2가지 디자인 패턴

주의해야 할 2가지 추가 사항

브레드 크럼에 즉시, 명확하게 액세스 할 수 있도록 하는 2가지 실행 사항

1. 불완전한 브레드 크럼의 문제

전체 브레드 크럼을 모바일 사이즈에 맞추는 것은 상당히 어려울 수 있습니다.

❌ L.L.Bean은 상품 상세 페이지에 브레드 크럼이 포함되어 있지 않습니다만 이것은 피해야 할 점입니다.

테스트 중에 관찰된 최악의 접근법은 전혀 브레드 크럼을 제공하지 않는 것입니다. 모바일 사이트와 데스크톱 사이트 모두에서 이러한 문제가 발생하지 않도록 해야 합니다.

실제로 모바일 및 데스크톱 테스트에서, 특히 모바일 사용자의 경우 사이트의 위치를 파악하고 추가 계층에 액세스 할 수 있도록 지원하는 데 있어 매우 중요한 것으로 나타났습니다.

데스크톱 사이트의 20%가 상품 상세 페이지에 브레드 크럼이 없는 것에 비해, 모바일 사이트에서는 65%나 브레드 크럼이 없었습니다. 이것은 사용자가 사이트 내에 어디에 위치하고 있는지 이해하고 사이트 내의 다른 부분에 간단히 접근하는 것을 제한하게 합니다.

❌ 테스트 중 사용자가 외부 링크를 통해 Macy 모바일 사이트의 상품 상세 페이지에 직접 액세스 했습니다. 그녀는 다른 립스틱을 찾아보고 싶었지만 ‘립스틱'의 카테고리가 브레드 크럼에 표시되어 있지 않았기 때문에 (첫 번째 이미지) 내비게이션 메뉴를 사용해서 ‘립스틱' 상품 리스트로 이동했습니다(두 번째 이미지).
운 좋게도 메인 내비게이션을 통해 간단하게 액세스 할 수 있었습니다. 특히 페이지에 충분한 공간이 있는 경우에는 브레드 크럼에 현재 위치가 없으면 사이트 구조를 잘못 이해/해석하고 탐색하려는 사용자의 불필요한 노력이 증가하게 됩니다.

모바일 테스트에서 브레드 크럼에서 계층을 생략해 길이를 줄이는 방법도 확인할 수 있었습니다.

그러나 브레드 크럼에서 주요한 계층을 생략하면 상품이 어떻게 구성되어있고 전체 사이트에서 어디에 위치해 있는지, 사용자에게 오해를 줄 수 있어 혼란을 일으키고 탭 조작이 집중되는 쇼핑 경험으로 이어질 수 있습니다.

브레드 크럼에 주요 카테고리와 서브 카테고리의 계층이 모두 포함되어 있지 않을 경우, 사용자는 제시된 선택지에 사이트 전체의 구조를 표시하고 있지 않다는 것을 알지 못하기 때문에 잘못된 정보를 바탕으로 내비게이션의 결정을 하는 위험이 높아집니다.

결과, 사용자는 다른 항목을 탐색하고 원래 탐색 중이던 페이지로 돌아가기 위해 불필요하고 혼란스러운 탐색 경험으로 이어질 수 있습니다.

❌ Victoria’s Secret과 Crate&Barrel에서는 하위 카테고리인 ‘소파’(첫 번째 이미지), ‘파자마 세트'(두 번째 이미지)가 브레드 크럼에 포함되어 있습니다.
모바일에서 이러한 브레드 크럼의 디자인 접근 방식은 현재 상품인 하위 카테고리로만 표시하고 있기에 사용자의 이해를 제한하게 됩니다. 또한 현재 하위 카테고리를 건너뛸 수가 없기에 사용자의 이동성도 제한하게 됩니다.

모바일에서 브레드 크럼의 길이를 제어하는 또 다른 해결 방법은 현재 상품이 속한 상위 카테고리 또는 하위 카테고리만 표시하는 것입니다.

예를 들어, 상품 상세 페이지에 ‘가구 > 거실 가구 > 소파’ 대신 ‘가구'만 표시하거나 ‘소파'만 표시합니다.

현재 범위만 표시하는 브레드 크럼은 ‘한 단계 돌아가기'라는 일반적인 사용자 행동을 서포트합니다. 하지만 이 디자인 패턴은 사용자에 있어서 몇 가지 문제를 야기합니다.

예를 들어, 하위 카테고리만 표시하면 사용자가 자신이 어디에 위치하고 있는지 대부분 인지하지 못하고 상품이 어떻게 분류되어 있는지, 자신이 그 카테고리 구조 전체 중 어디에 위치하는지 넓게 이해하지 못합니다.

또, 현재 범위만을 표시하면 사용자가 카테고리 이동시 미스매치를 경감하지만 한 번의 탭으로 이동할 수 있는 것은 1 계층뿐이기에 사용자가 한 번에 이동할 수 있는 범위가 크게 제한됩니다.

이러한 문제는 비선형적으로 페이지에 도달한 사용자 (예:내부 또는 외부 검색 또는 프로모션)에게 특히 문제가 될 수 있습니다.

브레드 크럼에 상위 또는 하위 카테고리만 포함하는 경우, 일부 사용자에게는 어디로 이동하는지에 대한 불확실성을 줄 수 있습니다.

특히, 사용자를 상위 또는 하위 카테고리로 이동시키는 ‘계층’ 브레드 크럼일까요? 아니면 필터와 정렬이 적용된 상태의 상위/하위 카테고리로 사용자를 되돌리는 ‘뒤로' 버튼과 유사하게 동작하는 ‘이력'의 브레드 크럼일까요?

어느 쪽이든 모든 사용자의 기대와 정확히 일치하지 않을 것이며 이로 인해 일부 사용자의 방향감각 상실과 좌절로 이어질 수 있습니다.

⭕️ 보고 있던 배낭에 대해 관심을 잃은 Overstock의 사용자는 상위 카테고리의 브레드 크럼 링크 (첫 번째 이미지)를 탭 하여 한 단계 위인 ‘Backpacks’ (두 번째 이미지)로 이동한 다음 ‘Lightweight Backpacks’을 탐색했습니다.
브레드 크럼에서 현재 상품 상세 페이지 전체의 주요 카테고리에 바로 액세스 할 수 있기에 이러한 흐름이 간단하게 이뤄졌습니다.

⭕️ 이 사용자는 외부 (첫 번째 이미지)에서 상품 상세 페이지로 직접 이동한 후, 한 번의 탭으로 (두 번째 이미지) 몇 단계 위로 이동하여 ‘의류' 카테고리에서 탐색했습니다. 이처럼 브레드 크럼의 완전한 계층 표시는 여러 단계를 건너뛰어 상품 카테고리를 변경할 수 있습니다.

때문에 전체의 주요한 카테고리, 이상적으로는 현재 상품과 연결되는 전 카테고리의 경로를 ‘브레드 크럼'에 포함시킵니다.

특히 모바일 사이트에서는 사용자가 전체상을 설정하고 유지하기 어렵다는 점을 기억하는 것이 중요합니다. 상품 페이지에 전체 계층 구조를 제공하지 않으면 더욱 사용자를 어렵게 만들며 길을 잃거나 혼란 상황에 빠지면, 일부 사용자는 완전 포기를 선언하고 이탈하는 사용자도 있습니다.

2. 과도한 브레드 크럼이 되지 않도록 하는 2 가지 방법

많은 사이트에서 브레드 크럼을 구현할 때 모든 카테고리를 표시하면 경로가 너무 길어지게 됩니다.

그러나 테스트 결과 너무 긴 브레드 크럼을 피하는데 2가지 방법이 있다는 것을 알 수 있었습니다.

1. 과도한 분류를 피하십시오
2. ‘HOME’및 ‘현재 상품 페이지' 계층을 억제하십시오

❌ 1. 과도한 분류를 피하십시오.
H&M은 필터로 제시해야 할 부분을 카테고리로 잘못 구현하고 있습니다 (Skater Dresses, Cotton Crêpe Dress). 이 때문에 상품 페이지의 브레드 크럼이 너무 길게 표시됩니다. 적절하게 필터가 구현되어 있다면 경로는 ‘Dresses’로 끝났을 것입니다.

1. 과도한 분류를 피하십시오.

우선적으로 과도한 카테고리화를 피하십시오. 왜냐하면 이것은 브레드 크럼에 불필요한 요소를 증가시키기 때문입니다.

상품 페이지의 긴 브레드 크럼을 방지하기 위해 하위 카테고리를 제거하기 전에 카테고리 자체를 검토하여 과도한 범위인지 확인합니다 (예: 필터로 구현해야 할 것을 카테고리로 잘못 구현된 경우). 이커머스 사이트의 50% 이상이 과도한 카테고리화로 고통받고 있습니다.

또한 카테고리 레이블을 재 검토하여 짧게 하거나 심플하게 바꿀 수 있는 부분을 찾아보십시오. 카테고리 레이블이 독특하고 설명적이면서도 간결하게 함으로써 사용자가 관심 상품을 찾고 탐색할 때 작업을 경감시킬 수 있습니다.

❌ 2. ‘HOME’및 ‘현재 상품 페이지' 계층을 억제하십시오. HP의 상품 페이지에서 ‘HOME’및 ‘현재 상품 페이지' 부분까지 넣어 매우 긴 브레드 크럼을 표시하고 있습니다.

⭕️ 2. ‘HOME’및 ‘현재 상품 페이지' 계층을 억제하십시오. American Eagle은 ‘HOME’이나 ‘현재 상품 페이지'를 브레드 크럼에 표시하지 않습니다. 테스트하는 동안 사용자는 ‘HOME’및 ‘현재 상품 페이지'요소 제외에 영향을 받지 않았습니다.

2. ‘HOME’및 ‘현재 상품 페이지' 계층을 억제하십시오

브레드 크럼에 ‘HOME’과 ‘현재 상품 페이지'를 표시하지 않는 것은 브레드 크럼을 줄이는 논리적인 부분입니다.

HOME으로 돌아가기 위해서 사용자는 대부분 모바일 사이트의 전체 헤더에 영구적으로 표시되는 사이트 로고를 언제든지 택할 수 있습니다. 또한 모바일에서 일반적으로 "계층 구조" 이동 경로의 가장 긴 부분인 현재 상품 페이지의 레이어를 표시하지 않는 것으로 브레드 크럼의 길이가 대폭 단축되고 페이지 상부의 혼란도 줄일 수 있습니다.

특히 테스트 결과, 브레드 크럼에 ‘HOME’및 ‘현재 상품 페이지' 레이어가 없어도 사용자에게 부정적인 영향 은 없었습니다.

(후편에서 계속됩니다)

번역 : Hyunmin Kim