[UI/UX 원칙 #5] 브레드크럼 Breadcrumbs UX 원칙 가이드라인

브레드크럼 Breadcrumbs UX 원칙 가이드라인

닉 넬슨 [브레드크럼 Breadcrumbs UX 원칙 가이드라인] 소개하고자 합니다.

브레드크럼(빵부스러기)은 핸젤과 그레텔에서 유래한 용어로, 사이트나 웹 앱에서 사용자의 위치를 보여주는 보조 내비게이션 시스템을 의미합니다.  브레드크럼을 웹사이트에 어떻게 활용할 수 있는지와 좋은 사례를 살펴보겠습니다.

브레드크럼 내비게이션은 더 유용하다

브레드크럼 내비게이션은 사용자에게 '맥락 정보'를 제공하는 좋은 방법이며, 사용자가 다음 질문에 대한 답을 찾는 데 도움을 줍니다.

- 지금 어디에 있는가?
사용자가 사이트 전체 구조 안에서 자신의 위치를 알 수 있도록 해야 합니다.

- 어디로 갈 수 있는가?
사이트의 검색 가능성을 높여주고, 메뉴를 펼쳐 보여줌으로써 사이트 구조를 더 쉽게 이해할 수 있도록 해야 합니다.

- 거기로 가야 하는가?
콘텐츠의 가치를 명확히 전달하고 브라우징을 유도해야 합니다. 예를 들어, 사용자가 상품을 검색한 후 마음에 들지 않을 경우, 쉽게 상위 카테고리로 돌아가서 다른 상품을 살펴볼 수 있도록 해 사이트 이탈률을 줄여야 합니다.

브레드크럼 내비게이션의 장점

첫째, 사용자가 상위 페이지로 가기 위해 필요한 행동의 수를 줄여야 합니다. 뒤로 가기 버튼이나 전체 내비게이션을 사용하지 않고도 한 번에 이동할 수 있어야 합니다.

둘째, 최소한의 공간을 차지해야 합니다. 링크가 걸린 텍스트를 가로로 펼쳐 보여주기 때문에 콘텐츠가 너무 많아지지 않도록 해야 합니다.

셋째, 사용자가 잘못 이해하거나 조작할 수 있는 상황이 없어야 합니다.

언제 브레드크럼을 이용해야 하는가?

브레드크럼 내비게이션이 사이트에 도움이 되는지 판단하기 위해서는 사용자가 카테고리 내에서 또는 카테고리 사이에서 필요한 정보를 더 잘 찾는지 직접 테스트해봐야 합니다.

- 많은 양의 콘텐츠가 수직형 구조나 계층 구조로 되어 있으면 반드시 브레드크럼 내비게이션을 사용해야 합니다. (예: 이커머스 사이트)

- 반면, 논리적 계층 구조나 그룹핑이 없는 단일 레벨 웹사이트에서는 브레드크럼을 사용하지 않는 것이 좋습니다.

브레드스크럼 유형 1. 위치 기반(location based)

위치 기반 브레드크럼은 사이트 구조를 보여줘 사용자가 여러 레벨의 구조를 쉽게 이해할 수 있도록 도와줍니다. 특히, 검색 엔진 결과와 같은 외부 소스를 통해 사이트 내부 정보에 접근한 방문자에게 매우 유용합니다.

브레드크럼 유형 2. 경로 기반(path based)

경로 기반 브레드크럼은 사용자가 특정 페이지에 도달하기까지 지나온 전체 경로를 보여줍니다. 이 방법이 유용할 때도 있지만, 대부분의 경우 혼란을 줄 수 있습니다. 방문자가 여러 페이지를 오가며 탐색하기 때문에 경로 정보를 제공하는 것이 큰 의미가 없을 때가 많습니다. 특히 외부에서 직접 내부 페이지로 들어온 경우에는 전혀 도움이 되지 않습니다.

경로 기반 브레드크럼이 혼란을 줄 수 있는 이유는 다음과 같습니다.

1) 비일관성

사용자가 여러 페이지를 오가면, 경로 정보가 일관되지 않아 혼란을 초래할 수 있습니다. 각 방문자가 다른 경로를 거쳐 왔기 때문에, 보여지는 경로가 실제 탐색과 맞지 않을 수 있습니다.

2) 직접 접근

외부 링크나 검색 엔진을 통해 특정 페이지에 직접 접근한 경우, 이전 경로가 없기 때문에 경로 정보가 의미가 없어집니다. 사용자는 자신이 어떤 경로를 통해 왔는지 알지 못하게 됩니다.

3) 복잡한 구조

사이트 구조가 복잡할수록, 경로 기반 브레드크럼은 오히려 사용자가 필요한 정보를 찾는 데 방해가 될 수 있습니다. 경로가 길어질수록 정보가 과도하게 제공되어 이해하기 어려워질 수 있습니다.

따라서 경로 기반 브레드크럼이 모든 상황에서 유용하지 않을 수 있습니다.

브레드크럼 유형 3. 속성 기반(attribute based)

속성 기반 브레드크럼은 특정 페이지나 제품의 카테고리를 보여줘 이커머스 사이트에서 유용합니다. 예를 들어, TM Lewin 사이트의 두 번째 이미지에서는 보이는 아이템들의 속성을 페이지에서 확인할 수 있습니다.

속성 기반 브레드크럼이 이커머스 사이트에서 유용한 이유는 다음과 같습니다.

1) 명확한 카테고리 표시

사용자가 어떤 제품이나 페이지에 있는지를 명확하게 보여줍니다. 이를 통해 소비자는 쉽게 원하는 제품을 찾을 수 있습니다.

2) 속성 정보 제공

제품의 속성(예: 색상, 사이즈 등)을 한눈에 확인할 수 있어, 구매 결정을 내리는 데 도움이 됩니다. 사용자는 다양한 옵션을 비교하며 선택할 수 있습니다.

3) 탐색 용이성

사용자가 현재 위치를 이해하고, 관련된 카테고리로 쉽게 이동할 수 있도록 도와줍니다. 이는 사이트 탐색의 편의성을 높입니다.

4) 구매 경험 향상

속성 기반 브레드크럼은 소비자가 제품을 더욱 쉽게 탐색하고, 원하는 상품을 빠르게 찾을 수 있도록 도와줍니다. 이는 고객의 만족도를 높이고, 구매 전환율을 증가 시킬 수 있습니다.

브레드크럼은 위치 기반 또는 속성 기반 브레드크럼만 사용하는 것이 좋습니다.

브레드크럼 내비게이션의 가이드

브레드크럼 내비게이션을 만들 때 다음 사항을 고려해야 합니다.

1. 브레드크럼은 주 내비게이션을 대체하지 않습니다.

2. 내비게이션에서는 현재 페이지에 링크를 걸지 않습니다.

3. 구분 기호를 사용합니다. (예: >, >>, /, → 등)

4. 크기와 여백을 적절하게 설정합니다.

5. 브레드크럼이 디자인의 중심이 되지 않도록 합니다.

6. 모바일에서는 브레드크럼을 사용하지 않습니다.

Case1. 브레드크럼은 주 내비게이션을 대체하지 않습니다.

Case2. 구분 기호를 사용합니다. (예: >, >>, /, → 등)

Case 3. 브레드크럼이 디자인의 중심이 되지 않도록 합니다.