Breadcrumb 탐색 모범 사례 및 예제

빵 부스러기 내비게이션은 디자인 및 개발 과정에서 종종 간과됩니다.. 어떤 사람들은 그것을 불필요하다고 여길 지 모르지만 다른 사람들은 그 가치에 비해 너무 큰 번거 로움을 느낄 수도 있습니다. 사실에 따르면, 탐색 경로 탐색은 웹 사이트의 유용성을 크게 증가시킵니다..

이동 경로는 사용자에게 탐색의 다른 방법을 제공하여 웹 사이트의 계층 구조에있는 위치를 파악하고 웹 사이트 내에서 상위 수준으로 이동하는 데 필요한 단계를 줄입니다..

여기서는 다양한 유형의 탐색 경로 탐색을 사용하고 있으며, 중요한 이유와 탐색 방법을 온라인으로 구현해야합니다. 참조 용으로 여기에 포함되어 있습니다. 현재 빵 부스러기가 온라인으로 사용되는 방법 30 가지 예.

탐색 경로 탐색은 웹 사이트를 만들거나 중단하지 않을 가능성이 있지만 웹 사이트의 전반적인 유용성과 기능을 향상시켜 사용자에게 추가적인 이점을 제공합니다..

이동 경로 유형

통로

경로 기반 이동 경로는 사용자가 웹 사이트의 현재 페이지에 도달하기 위해 취한 경로 또는 단계를 나타냅니다. 또한 사용자는 이전에 방문한 페이지로 연결되는 링크를 볼 수 있습니다. 탐색 경로 탐색의 세 가지 유형 중 경로 기반 탐색 경로 탐색은 온라인에서 가장 인기가 없습니다. 그 이유는 경로 기반 탐색 경로 탐색 기능이 “앞으로” 과 “뒤로” 브라우저의 단추. 대부분의 웹 사이트의 경우 위치 기반 및 속성 기반의 탐색 경로 탐색 기능이 더 나은 기능을 제공합니다..

위치

위치 기반 이동 경로는 현재 페이지가 웹 사이트 계층에있는 사용자에게 알려줍니다. 이러한 유형의 탐색 경로 탐색은 깊이 또는 내용이 두 단계 이상인 웹 사이트에서 가장 일반적으로 볼 수 있습니다. 웹 사이트로 이동하면 사용자는 페이지 또는 카테고리에 대한 링크를 제공 받게되어 “부모의” 또는 현재보고있는 페이지의 레벨을 올리십시오. 예를 들어 사용자가 “말하다” 그러나 페이지 “우리가하는 일” 페이지는 “말하다” 페이지하면서 “집” 페이지는 “우리가하는 일” 페이지.

Clearleft 주

속성

속성 기반의 탐색 경로는 사용자에게 웹 사이트 내의 현재 페이지에 속한 속성 또는 범주를 나타냅니다. 전자 상거래 웹 사이트에서 흔히 볼 수있는 제품은 카테고리에 속할뿐만 아니라 특정 속성에도 해당 될 수 있습니다. 예를 들어, 차량을 SUV로 분류 한 다음 2010 년에 검정색과 검정색의 속성을 가질 수 있습니다.

Cars.com

왜 빵 부스러기를 사용 하는가??

뛰어난 사용성

이동 경로는 사용자가 웹 사이트를 쉽게 탐색 할 수있는 추가 수단을 제공합니다. 사용자가 다른 소스에서 웹 사이트의 내부 페이지를 방문하면 사이트 이동 경로를 통해 사용자는 사이트 계층 구조 내에서 사이트의 위치를 정확히 볼 수 있습니다. 사용자는 번거 로움없이 주어진 시간에 더 높은 수준의 웹 사이트로 이동할 수있는 기회가 주어집니다..
뒤로 쉽게 돌아 가기

일차 항법은 빵 부스러기가 뒤를 따를 수 있도록 고안되지 않았습니다. 역 추적은 온라인에서 매우 인기가있어 조금만 더 도움을 받으실 수 있습니다..
추가 클릭 제거

이동 경로를 사용하면 사용자가 웹 사이트의 한 수준에서 다음 수준으로 이동할 수 있습니다. “앞으로” 또는 “뒤로” 브라우저의 단추. 또한 breadcrumbs는 사용자가 계속해서 메인 네비게이션에 의존 할 필요를 없애줍니다..
사용자 계층 구조 표시

웹 사이트의 기본 탐색은 사이트 내의 모든 페이지의 계층 구조를 반영하지 않습니다. 사용자에게 사이트 이동 경로를 제공하면 웹 사이트 내에서 페이지의 계층 구조를 볼 수 있습니다..
시각적 즐거움

빵 부스러기는 사용자에게 추가적인 유용성을 제공 할뿐만 아니라 페이지에서 많은 공간이나 공간을 차지하지 않고 사용자에게 추가 사용성을 제공합니다. 빵 부스러기는 웹 사이트의 시각적 디자인으로 구현하기 쉽고 사용자에게 큰 이점을 제공합니다..
추가 도움말 제공

일부 사용자는 웹 사이트 기본 탐색이 어떻게 작동하는지 이해하지 못할 수도 있고 경우에 따라 사용자가 찾고있는 것을 알지 못할 수도 있습니다. 사용자에게 빵 부스러기를 제공하면 웹 사이트의 전반적인 진행 상황과 구조를 볼 수 있으므로 웹 사이트를 더 잘 탐색 할 수 있습니다..
낮은 이탈률

일반적으로 탐색 경로는 기본 탐색보다 자세한 탐색을 제공합니다. 그렇게함으로써 사용자는 웹 사이트를 탐색하는 방법에 대한 더 많은 옵션을 얻을 수 있습니다. 고객에게 웹 사이트 내 몇 수준을 쉽게 추적 할 수있는 기회를 주면 이탈률이 낮아집니다..
관심 분야를 조성합니다.

사용자가 웹 사이트의 내부 페이지에 올랐을 때 그들은 이미 관심있는 페이지에 있습니다. 빵 부스러기는 사용자가 관심있는 다른 페이지 및 정보에 대한 링크를 제공 할 수 있습니다..

Breadcrumb 모범 사례

페이지 상단에서 이동 경로 사용

이동 경로의 가장 보편적이고 본능적 인 배치는 페이지 상단에 있습니다. 이를 통해 사용자는 복잡하지 않은 방식으로 탐색 경로를 찾고 이에 따라이를 사용할 수 있습니다..
빵 부스러기 사용하기

탐색 경로를 사용하기로 결정한 경우 전체 웹 사이트에서 탐색 경로를 사용해야합니다. 사용자에게 일부 페이지의 빵 부스러기를 제공하고 다른 페이지는 표시하지 않으면 혼란스럽고 좌절감을 나타낼 것입니다.. (한 가지 대표적인 예는 Amazon이 개별 제품 페이지에서 사이트 이동 경로를 제거하기 때문입니다.)
빵 부스러기가 정상적으로 저하되어야 함

빵 부스러기는 항상 홈 페이지에서 시작하여 현재 페이지로 저하되어야합니다. 이렇게하면 빵 부스러기는 한 번에 최고 단계에서 최저 단계로 한 단계 씩 나아갈 필요가 있습니다..
빵 부스러기 적절하게 양식 지정하기

빵 부스러기가 보이기를 원하지만 그 초점을 초점으로 삼기를 원하지는 않습니다. 또한 빵 부스러기가 페이지의 주요 컨텐츠의 일부가 아니며 페이지에 대한 추가 지원 만한다는 점을 분명히하고 싶습니다. 귀하의 빵 부스러기가 두드러 지지만 뽐내지 않는 행복한 매체를 찾으십시오..
명확하게 페이지 분류

두 개 이상의 카테고리에 속하는 페이지가있는 경우 웹 사이트에서 사이트 이동 경로를 사용하지 않을 수 있습니다. 두 개 이상의 카테고리 아래에 페이지를 배치하려고하면 불분명 한 탐색 경로 만 생성되어 사용자를 혼란에 빠뜨릴 수 있습니다. 웹 사이트에 체계적인 계층 구조가 있고 빵 부스러기를 통해 적절히 표시되는지 확인하십시오..
명확하게 각 레벨 분리

사용자가 각 이동 경로 수준의 차이를 구분할 수 있어야합니다. 레벨 사이의 가장 일반적인 분리 기호는 '보다 큼'문자 (>)입니다. 다른 좋은 분리 기호에는 오른쪽 이중 인용 부호 (»), 슬래시 (/) 및 화살표 (→)가 포함됩니다. 일반 텍스트 문자를 사용하는 경우 하나만 사용하십시오.. (»는보다 매력적이며 효과적입니다.)
현재 페이지 밖의 단일 페이지

현재 탐색중인 페이지임을 확인하려면 탐색 경로 목록의 마지막 항목에 다른 스타일을 사용하십시오. 이 작업을 수행하려면 항목을 대담한, 색상 변경, 또는 강조하는 그것.
현재 페이지를 링크로 만들지 마십시오.

현재 탐색중인 페이지이므로 탐색 경로 목록의 마지막 항목을 링크로 만들 필요가 없습니다. 여기에 링크를 만들면 사용자를 혼동시킬뿐입니다. 특히 링크를 클릭하면 새 페이지로 이동하지 않습니다..
이동 경로를 페이지 제목으로 사용하지 마십시오.

이동 경로 목록의 마지막 항목을 현재 페이지의 제목으로 사용하는 것은 효과가 없습니다. 빵 부스러기를 사용하기로 결정했다면 페이지 머리글도 함께 추가하십시오.
이동 경로가 기본 탐색을 바꾸지 않음

이동 경로는 기본 탐색에 대한 지원으로 만 사용되며 기본 탐색을 완전히 바꾸지 않습니다. 탐색 경로 탐색을 사용하기 전에 항상 웹 사이트를 탐색 할 수있는 기본 탐색 경로를 사용자에게 제공해야합니다..