UI 브레드크럼(breadcrumbs)의 유형

UI용어 중 브레드크럼이라는 용어가 있습니다. 여러 페이지를 돌아다니는 것을 의미합니다. 곧 이동 경로라고 할 수 있습니다.

헨젤과 그레텔이 숲에서 길을 잃지 않기 위해 남긴 빵부스러기 떨어뜨리며 길을 갔는데, 여기서 유래된 용어이기도 합니다.

웹사이트도 여기저리 이동하다보면 길을 잃을 수 있는데, 이때 유용한 것이 브레드크럼입니다.

1. UI 브레드크럼 이란?

UI 브레드크럼는 사용자가 사용자 인터페이스 또는 웹 사이트의 계층 구조 내에서 서로 다른 섹션 사이를 쉽게 탐색할 수 있도록 하는 표준 길 찾기 장치입니다.

이러한 이동 경로는 종종 현재 페이지와 이전 페이지, 그 이전 페이지 등을 나타내는 링크의 가계도로 나타납니다.

홈 페이지에 대한 링크는 "/" 또는 ">"와 같은 기호로 구분된 후속 페이지와 함께 이 체인의 루트 노드로 나타나야 합니다. 이 탐색 경로는 일반적으로 웹 사이트의 기본 메뉴 바로 아래에 있습니다

UI 이동 경로는 세 가지 유형으로 나눌 수 있습니다.

위치 기반 이동 경로는 인터페이스 또는 웹 사이트의 페이지 계층 구조 내에서 사용자의 위치를 강조 표시합니다. 이러한 이동 경로는 여러 레벨이 포함된 대규모 시스템에서 길 찾기를 지원하는 데 특히 유용합니다.

일반적인 위치 기반 이동 경로는 다음과 같이 표시됩니다.

홈페이지 > 섹션 페이지 > 하위 섹션 페이지

속성 기반 이동 경로는 현재 페이지를 분류하는 정보를 표시하여 사용자가 방향을 잡는 데 도움이 됩니다.

이러한 유형의 이동 경로 추적은 온라인 마켓플레이스에서 일반적입니다. 그 결과 "속성 트리"는 항목을 쇼핑할 때 제품의 기능과 품질을 좁히는 데 특히 유용합니다.

다음은 Depop에서 스웨트 셔츠를 찾을 때 표시되는 속성기반 이동 경로의 예입니다.

경로 기반 이동 경로는 사용자가 현재 페이지에 도달하기까지의 수행한 모든 단계를 보여줍니다. 이러한 이동 경로는 사용자가 UI를 탐색하는 동안 고유한 기록을 표시하므로 동적으로 생성됩니다.

이러한 의미에서 경로 기반 이동 경로는 뒤로 또는 실행 취소 기능으로 사용할 수 있으므로 길을 잃은 염려 없이 사용자는 사이트 섹션 사이를 이동할 수 있습니다.

그러나 대부분의 사용자가 무질서하게 탐색하여 경로를 생성하기 때문에 사용이 유용하지 않습니다.

UI 이동 경로는 사용자가 인터페이스 구조 내에서 페이지에 도달하는 데 도움이 되는 보조 탐색 형식입니다. 다중 레이어 계층 사이트 내에서 탐색을 돕는 데 특히 유용할 수 있지만 단일 수준 웹 페이지에서는 무의미합니다.

일반적으로 추적의 각 노드는 관련 페이지에 연결되며 사용자가 사이트를 드릴 다운할 때 브래드스크럼이 더 구체적으로 됩니다. 세 가지 유형의 이동 경로(위치, 특성 및 경로 기반)는 사용자가 사용할 수 있는 UI 아키텍처를 통해 서로 다른 경로를 만듭니다.

이동 경로는 일반화되었지만 항상 필요한 것은 아니며 기존 메뉴와 동일한 역할을 수행하면서 페이지를 복잡하게 만들 수 있습니다. 또한 모바일을 많이 사용하는 시대에 작은 텍스트의 긴 이동 경로는 가장 사용자 친화적인 도구에 적합하지 않습니다.