바오밥나무

[번역] 빵조각 메뉴: 무엇, 언제, 어떻게

In UI/UX Posted Feb 19, 2018
Extra Form
저작자 Nick Babich (UX Planet)
출처 http://babich.biz/breadcrumbs-for-web-si...n-and-how/
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

1_J58ibop2pjh4xMbvF-DzSQ.png

Image credit: codyhouse.co

 

빵조각 메뉴(breadcrumbs, 혹은 breadcrumb trail)는 웹사이트나 웹앱에서 사용자의 위치를 보여주는 2차 메뉴이다. 이 용어는 집으로 돌아가는 길을 추적하기 위해 빵조각으로 길을 표시하는 헨젤과 그레텔 동화에서 가져온 것이다.

 

0_hqeoUA-Y8KaHbAyg.jpg

Image credit: loseyourmarbles

 

동화에서와 마찬가지로, 방문자는 계층에서 상위 수준으로 탐색하기 위해 웹사이트의 계층 구조에서 자신의 위치를 알 필요가 있다. 이 기사에서는 빵조각 메뉴의 사용을 살펴보고, 각자의 웹사이트에 빵조각 메뉴을 적용하기 위해 몇 가지 모범 사례에 대해 토론하고자 한다.

 

빵조각 내비게이션은 점점 더 유용해지고 있다

빵조각 메뉴는 웹사이트의 계층 내에서 사용자의 위치를 알려주는 데에 효율적인 시각적 지원을 제공한다. 이 속성으로 인해 빵조각 메뉴는 사용자에게 매우 중요한 문맥적 정보의 소스가 되며, 사용자가 다음 질문에 대한 답변을 찾도록 도와준다:

 

  • 어디 있는가? 빵조각 메뉴는 웹사이트의 전체 계층에 대해 방문자의 위치를 알려준다.
  • 어디로 갈 수 있는가? 빵조각 메뉴는 웹사이트의 섹션과 페이지에 대한 검색성을 개선시킨다. 웹사이트의 구조는 메뉴에 놓일 때보다 빵조각 메뉴에 놓일 때에 더 쉽게 이해된다.
  • 그곳으로 가야 하는가? 빵조각 메뉴는 콘텐트 가치를 전달하고 탐색을 장려한다. (예를 들어 전자상거래 사이트 방문자는 상품 페이지를 방문할 수 있으며, 그 상품은 방문자에게 잘 맞춰진 것이 아닐 수도 있다. 하지만 방문자는 같은 카테고리에서 다른 상품을 보고 싶어할 수 있다.) 이것은 전체적인 웹사이트의 반송률을 감소시킨다. 

 

행동의 수를 감소시킨다

사용성의 관점에서 빵조각 메뉴는 방문자가 상위 레벨의 페이지에 도달하기 위해 취해야 할 행동의 수를 감소시킨다. 브라우저의 되돌아가기 버튼이나 웹사이트의 1차 내비게이션을 사용하는 대신 방문자는 빵조각 메뉴를 사용할 수 있다. 

 

적은 공간을 차지한다.

빵조각 메뉴는 수평선 형태로 링크가 적용된 텍스트에 지나지 않기 때문에 작은 공간을 차지하는 컴팩트한 메커니즘이다. 장점은 콘텐트 과잉의 관점에서 부정적인 면이 거의 없다는 것이다.

 

사용자는 빵조각 메뉴 때문에 문제를 겪지 않는다

사람들은 이 작은 디자인 요소를 못 보고 넘어갈 수 있으나, 빵조각 메뉴를 잘 못 이해하거나 다루는 데에 문제를 겪을 가능성은 전혀 없다.

 

빵조각 메뉴는 언제 사용해야 하는가?

웹사이트가 빵조각 내비게이션으로부터 장점을 끌어낼 수 있을지 여부를 결정하기 위한 좋은 방법은 웹사이트의 내비게이션 구조를 나타내는 사이트 맵이나 다이어그램을 구성하고, 빵조각 메뉴가 카테고리 안팎을 탐색하는 사용자의 능력을 개선하는지 여부를 분석하는 것이다:

   

  • 정의된 카테고리로 선형 혹은 계층 구조에 조직된 많은 양의 콘텐트를 가지고 있을 때 빵조각 메뉴를 사용해야 한다. (예를 들어 더 작은 서브섹션으로 등분될 수 있는 섹션으로 분할될 수 있다) 가장 좋은 시나리오는 많은 종류의 논리적 카테고리로 그룹화된 상품을 가지고 있는 전자상거래 사이트이다.
  • 빵조각 메뉴를 논리적인 계층 혹은 그룹 구조를 가지고 있지 않은 1단계 레벨의 웹사이트를 위해 사용해서는 안 된다.

 

빵조각 메뉴의 종류

빵조각 메뉴는 다음과 같은 기반 위에 위치할 수 있다: 위치, 경로, 속성(location, path and attribute)

 

위치 기반(Location Based)

위치 기반의 빵조각 메뉴는 웹사이트의 구조를 대변한다. 이 경우 방문자가 다중 레벨(보통 2단계 이상의 레벨)의 웹사이트 계층을 이해하고 탐색하는 데에 도움을 준다. 이 유형의 빵조각 메뉴는 방문자가 외부 소스(예를 들어 검색 엔진)로부터 웹사이트의 더 깊은 레벨의  들어오는 방문자에게 매우 유용하다.

 

1_6gxUFL4eX-BSrZeDpJRMKw.png

Location based navigation. Image credit: marketingland

 

아래의 사례(베스트바이)에서 각 텍스트 링크는 오른쪽의 링크보다 한 단계 높은 레벨의 페이지를 나타낸다. 

 

1_kJq_c3yZ6pAzwkNrzgw_iw.jpeg

Location Based Breadcrumb from the BestBuy

 

경로 기반(Path Based)

경로 기반 빵조각 메뉴(다른 이름으로는 "히스토리 흔적")는 특정 페이지에 도달하기 위해 사용자가 움직이는 전체 경로를 보여준다,이 유형의 빵조각 메뉴는 보통 동적으로 생성된다. 보통 경로 기반 빵조각 메뉴는 유용할 수 있지만, 대부분의 경우 헷갈릴 수 있다.--방문자는 종종 한 페이지에서 다른 페이지로 광범위하게 탐색한다.  이런 종잡을 수 없는 경로를 가지는 것은 상ㅇ자에게 많은 도움을 주지 않으며, 브자우저의 "되돌아가기" 버튼으로 쉽게 대체될 수 있다. 결론적으로 히스토리 흔적은 웹사이트의 깊숙한 페이지로 바로 도달하는 방문자에게는 쓸모가 없다.

 

아래는 목적 페이지로 향하는 2개의 경로를 보여주는 경로 기반 빵조각 메뉴 링크의 예시다.

 

0_OdeO5BGJyLBI_uG2.png

Path based navigation. Image credit: Oracle

속성 기반(Attribute Based)

속성 기반 빵조각 메뉴는 특정 페이지나 가장 빈번한 상품을 목록으로 보여준다.--이러한 유형의 빵조각 메뉴는 전자상거래 웹사이트에 유용하다. 이 유형은 방문자가 상품들의 관계를 이해하는 데에 도움을 주며 각각 다른 접근 방법을 제공한다. 

 

1_-1wsiCtzi2A6rqYkjudzmQ.png

Attribute based navigation. Image credit: marketingland

 

예를 들어 TM 르윈에서 빵조각 흔적은 특정 페이지에 표시된 아이템의 속성을 보여준다:

 

1__ShSlqmUMOq8SXT93CT6Ww.jpeg

This page displays all suits that have the attribute of ‘Slim Fit’. Image credit: T.M. Lewin

 

계층 혹은 히스토리?

빵조각 메뉴를 위한 섬네일의 규칙은 사용자의 히스토리가 아니라 웹사이트의 계층을 보여준다. 따라서 경로 기반이 아니라 위치 기반/속성 기반 빵조각 메뉴를 사용한다.

 

빵조각 메뉴의 모범 사례

빵조각 내비게이션을 설계할 때, 아래를 염두에 두도록 한다:

 

빵조각 메뉴를 1차 내비게이션의 대체제로 사용하지 말라

빵조각 내비게이션은 별도의 기능으로 간주되어야 하며, 1차 메뉴를 효율적으로 대체해서는 안된다. 이것은 2차 내비게이션 수단, 웹사이트를 탐색하는 대체적인 방법으로서 편의 기능이라는 사실을 명심하자. 

 

1_VNOarWri41nTDPWkPNfJGQ.png

애플은 1차 내비게이션을 지원하기 위해 빵조각 내비게이션을 사용하고 있다. 

 

내비게이션에 현재 페이지에 대한 링크를 포함시키지 말라

빵조각 메뉴 (현재 사용자의 위치)의 가장 마지막 항목은 선택 항목이다--만일 표시하고자 한다면 클릭할 수 없게 해야 한다. 사용자는 이미 페이지에 있기 때문에 빵조각 내비게이션에 현재 페이지의 링크를 추가하는 것은 아무 의미가 없다.

 

구분자를 사용하라

빵조각 메뉴에서 링크를 구분하는 가장 인식하기 좋은 심볼은 "~보다 크다"는 부등호 기호(>)이다. 전형저긍로 > 기호는 부모 카테고리 > 자식 카테고리 형식으로 계층을 나타내는데 사용된다. 그외 사용되는 다른 기호로는 오른쪽 화살표(→), 오른쪽 인용 부호(≫), 슬래시(/)가 있다. 선택은 웹사이트의 미관과 빵조각 메뉴의 유형에 달려있다:

 

1_7QyzdCXPueprmhtxS-U_YA.png

Image credit: Dribbble

 

1_75hWnw3mGUy1txgonPBKhw.png

Image credit: Dribbble

 

적당한 크기와 여백을 선택하라

디자인 할 때 목적 사이즈와 여백을 주의 깊게 생각하라. 서로 다른 빵조각 레벨 사이에는 적당한 간격이 있어야 한다. 그렇지 않으면 사람들은 사용하기가 힘들어진다. 그러나 동시에 빵조각 메뉴가 페이지를 지배하지 않게 하려면 1차 내비게이션 메뉴보다 눈에 잘 띄지 않아야 한다.

 

디자인의 초점으로 만들지 말라

빵조각 메뉴를 사용하는 목적을 해치는 장식적인 폰트나 밝은 색상을 사용해서는 안된다. 빵조각 메뉴의 크기와 스타일을 결정할 때 따라야 하는 법칙은 페이지를 방문하는 사용자의 눈길을 사로잡는 첫번째 아이템이 되어서는 안된다는 것이다. 아래 사례의 빵조각 메뉴는 그리 나쁘지는 않아도, 과하게 눈길을 끌어 방문자가 1차 내비게이션과 메인 콘텐트로부터 주의를 돌리게 될지도 모른다. 

 

1_dHoggvnBN86uFDu3pxglag.png

Image credit: Dribbble

 

구글은 빵조각 메뉴를 장식적으로 보이게 만들지는 않았지만, 사용자는 쉽게 위치를 인식하고 활용할 수 있다.

 

1_dfq7g_B36FOao0sF_Fqyww.png

 

모바일 사이트에는 빵조각 메뉴를 사용하지 말라

모바일 사이트를 사용하면서 빵조각 메뉴의 필요성을 느낀다면 모바일 사용 측면에서 디자인에 뭔가 문제가 있는 것이다. 특정 용도의 유형과 모바일이 제공하는 환경에 비해 대체로 당신의 웹사이트는 너무 복잡하다(깊이가 너무 깊다). 이 문제를 해결하기 위해서는 빵조각 메뉴가 안건에조차 오르지 않도록 먼저 덜 복잡하게 만들어야 한다.  

 

결론

빵조각 메뉴는 방문자가 콘텐트를 소비하면서 이동하기 쉽게 하며 전체적인 구조를 이치에 맞게 한다. 이것은 사용성을 증진하는 몇 가지 안되는 가장 간단한 방법 중 하나다. 그리고 디자인에서 단 한 줄만으로 충분히 기여할 수 있다.


  1. Myth #3: 사람들은 스크롤하지 않는다?

    #UI/UX 읽기
    Read More
  2. [번역] 반응형 웹 디자인의 단점

    #Web 읽기
    Read More
  3. 공인 IP, 사설 IP, 고정 IP, 유동 IP

    #Web 읽기
    Read More
  4. Billable Hour 직업의 함정

    #Web 읽기
    Read More
  5. 다국어사이트의 URL주소는 서브 도메인? 아니면 하위 디렉토리?

    #Web 읽기
    Read More
  6. [번역] 빵조각 메뉴: 무엇, 언제, 어떻게

    #UI/UX 읽기
    Read More
  7. [번역] 고통없는 계정 UX에 대한 3가지 법칙 : 로그인

    #UI/UX 읽기
    Read More
  8. [번역] 이 이메일에 회신하지 마시오

    #UI/UX 읽기
    Read More
  9. Survivorship Bias (생존자 편향의 오류)

    #Mkt 읽기
    Read More
  10. Top 25 Free Mobile Friendly & Responsive HTML Email Templates 2017

    #Web 읽기
    Read More
  11. Mobile Application Frameworks (HTML, CSS & JavaScript)

    #UI/UX 읽기
    Read More
  12. 여러 도메인 추적하기(Cross Domain Tracking)

    #GA 읽기
    Read More
  13. Envato Market의 Standard 라이센스(Regular 라이선스 vs. Extended 라이선스)

    #Web 읽기
    Read More
  14. 코딩이 필요 없는 웹사이트 제작 툴 & 사이트 10선

    #Web 읽기
    Read More
  15. 기술에 대해 "충분히 아는" PM이 되는 길

    #Web 읽기
    Read More
  16. 주목해야할 5개의 엔터프라이즈 오픈 소스 위키

    #Web 읽기
    Read More
  17. 어플리케이션 생명주기 관리를 위한 무료 소프트웨어

    #Web 읽기
    Read More
  18. TOP5 오픈 소스 프로젝트 관리 도구

    #Web 읽기
    Read More
  19. [번역] 이메일 마케팅: 고객의 참여를 높이기 위한 7가지 이메일 디자인과 문구 비법

    #UI/UX 읽기
    Read More
  20. [번역] 면적 과잉 : 사이드바 내비게이션을 단순화하기

    #UI/UX 읽기
    Read More
목록
Board Pagination Prev 1 2 3 4 Next
/ 4