brunch

매거진 UX 디자인의 모든 것

라이킷 117 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 23. 2016

브레드크럼 Breadcrumbs UX 원칙

UX 디자인 배우기 #14

Today UX 아티클

2016년 8월 17일 UX Planet에 게재된 Nick Nelson의 글 Breadcrumbs For Web Sites: What, When and How를 소개하고자 합니다.

브레드크럼(빵부스러기로 표시한 길)이란 핸젤과 그레텔에서 따온 용어로, 사이트나 웹 앱에서 유저의 위치를 보여주는 부차적인 내비게이션 시스템을 뜻한다고 합니다. 이 글에서는 브레드스크럼을 웹사이트에 어떻게 활용해야 하는지, 어떤 좋은 사례가 있는지 살펴봅니다.

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

브레드크럼 내비게이션은 유저에게 ‘맥락 정보’의 훌륭한 소스가 되며, 유저가 다음 질문에 대한 답을 찾을 수 있도록 도와준다고 합니다.

지금 어디에 있는가? 사이트 전체 구조 안에서 어디에 위치했는지 알려준다고 합니다.

어디로 갈 수 있는가? 사이트의 검색 가능성을 높여주며, 펼쳐서 보여주어 메뉴보다 사이트 구조를 더 이해하기 쉽게 해준다고 합니다.

거기로 가야 하는가? 콘텐츠의 가치를 알려주고 브라우징을 독려한다고 합니다. 예를 들어 상품을 검색해서 마음에 안 들면 쉽게 상위 카테고리로 들어가서 살펴볼 수 있게 해주어 사이트 이탈률을 줄여준다고 합니다.

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

첫째, 유저가 상위 페이지로 가기 위해 취해야 하는 행동의 수를 줄여준다고 합니다. 뒤로 가기 버튼이나 전체 내비게이션을 이용하지 않고 한 번에갈 수 있기 때문입니다.

둘째, 최소한의 공간을 차지한다고 합니다. 링크가 걸린 텍스트를 가로로 펼쳐서 보여주기 때문에 콘텐츠를 지나치게 많이 주지 않는 것이 장점이라고 합니다.

셋째, 유저가 절대 잘못 이해하거나 조작하지 못할 일이 없다고 합니다.

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

브레드크럼 내비게이션이 사이트에 도움이 되는지 안되는지 판단하기 위해서는 유저가 카테고리 내에서 혹은 카테고리 사이에서 필요한 것을 더 잘 찾는지 직접 테스트해봐야 한다고 합니다.

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

논리적 계층구조나 그룹핑이 없는 단일 레벨 웹사이트에서는 이용하면 안 된다고 합니다.

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

위치기반 브레드크럼은 사이트 구조를 보여주어 유저가 여러 레벨의 사이트 구조를 쉽게 이해할 수 있게 해준다고 합니다. 특히 검색엔진 결과 등 외부 소스를 통해 사이트 안쪽에 있는 정보에 접근한 방문자에게 매우 도움이 된다고 합니다.

위치기반 네비게이션

BestBuy의 위치 기반 브레드스크럼

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

경로 기반 브레드크럼은 유저가 특정 페이지에 도달하기까지 지나온 전체 경로를 보여준다고 합니다. 이 방법이 도움이 될 때도 있지만, 대부분의 경우 헷갈리게 한다고 합니다. 방문자가 때로는 이 페이지에서 저 페이지로 점핑해서 다니기 때문에 이런 경로 정보를 제공하는 것이 큰 의미나 도움이 되지 않기 때문이라고 합니다. 특히 외부에서 안쪽에 있는 페이지로 바로 들어온 경우 전혀 도움이 되지 않는다고 합니다.

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

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

위치 기반 네비게이션과 경로 기반 네비게이션을동시에 쓴 사례

이 페이지는 ‘슬림핏(Slim Fit)’ 속성을 가진 모든 수트를 보여주고 있습니다

브레드크럼은 위치기반 혹은 속성 기반 브레드스크럼만 사용하라고 조언합니다.

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

브레드크럼 내비게이션을 만들 때 다음을 염두에 두라고 합니다.

브레드크램은 주 내비게이션을 대체하지 않는다

내비게이션상에서 현 페이지에는 링크를 걸지 않는다

구분해주는 부호를 사용한다(예: >, >>, /, →등)

크기와 여백을 적절하게 정한다

디자인의 중심이 되게 만들지 않는다

모바일에선 브레드스크럼을 이용하지 않는다.

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