이동 경로 탐색을 적절한 방법으로 사용하는 방법

Breadcrumbs는 유치원 시절에 읽었을지도 모르는 오래된 동화로 우리를 데려갑니다. 두 아이 헨젤과 그레텔은 헨젤이 집으로 돌아가는 길을 추적하기 위해 빵 부스러기의 흔적을 만들기로 결정하자 숲에 있는 집에서 쫓겨납니다. 빵 부스러기는 숲의 성가신 새들에게 먹히지만, 이야기가 쓰여진 지 몇 년이 지난 후에 그들은 그럭저럭 인상을 남겼습니다.

웹 디자인에서 이동 경로는 Hansel이 염두에 두었던 것과 유사한 목적을 제공합니다. 이동 경로는 방문자가 한 페이지에서 다른 페이지로 이동한 후 길을 잃지 않도록 웹사이트 탐색 내에서 보조 탐색 역할을 합니다. 오래된 동화처럼 사용자가 착륙한 위치와 마지막 위치를 표시하는 데 도움이 됩니다.

탐색경로가 웹사이트의 계층 구조에 통합되면 사용자는 "뒤로" 버튼을 누르지 않고도 제품 범주를 자세히 살펴보고 처음 시작한 곳으로 돌아갈 수 있습니다.

Breadcrumbs는 경험이 부족한 방문자가 전자 상거래 웹 사이트를 탐색하는 데 도움이 되는 그래픽 제어 요소의 역할도 합니다. 이러한 웹사이트의 경우 내부 구조를 지능적으로 설계해야 합니다. 이동 경로를 통해 온라인 쇼핑 플랫폼은 방문자에게 사용 편의성을 제공할 뿐만 아니라 잠재 고객이 길을 잃어 페이지를 포기하는 것을 방지하는 것이 필수적입니다.

이동 경로 탐색

이동 경로는 방문자의 현재 위치와 도중에 방문한 장소를 파악하여 방문자를 안내하는 효과적인 수단입니다. 사이트 계층 구조 내에서 시각적 보조 도구로 사용됩니다. 그러나 고객 사용자 경험 측면에서 이동 경로는 이 3가지 질문에 답하는 데 도움이 됩니다.

1. 내가 어디 있지?

   탐색경로를 통해 사용자는 여행을 시작하는 사이트에서 자신의 위치를 ​​알 수 있습니다.

2. 어디로 갈 수 있나요?

   다음으로 갈 곳을 제안하여 사용자에게 도움을 주는 역할을 합니다. 구조가 이미 그들 앞에 놓여 있기 때문에 사용자는 더 이상 카테고리나 사이트 섹션을 검색하고 찾을 필요가 없습니다.

3. 내가 거기 가야 하나?

   이동 경로는 더 나은 탐색을 촉진하고 사용자에게 콘텐츠 가치를 표시하는 데 도움이 됩니다. 예를 들어, 고객이 제품을 검색하기 위해 웹 페이지를 방문하면 자신의 요구에 잘 맞는 것으로 판명될 수 있는 다른 제품을 찾을 수 있습니다. 이는 웹사이트의 이탈률을 줄이는 데 도움이 됩니다.

혜택

조치를 줄인다

더 높은 수준의 페이지에 도달하기 위해 이동 경로는 no.를 줄이는 데 도움이 됩니다. 사이트 방문자가 사이트에 도달하기 위해 필요한 조치 방문자는 "뒤로" 버튼이나 웹사이트의 기본 탐색을 계속 사용하는 대신 탐색경로를 사용하여 뒤로 탐색할 수 있습니다.

최소한의 공간 필요

텍스트 링크로 채워진 수평선만 필요합니다. 이것은 최소한의 공간을 차지하고 웹사이트의 다른 요소가 숨을 쉴 수 있도록 하여 건강한 웹 디자인 구조를 촉진합니다. 이것은 또한 웹 사이트의 더 나은 로딩 속도를 얻는 데 도움이 됩니다.

모든 사용자는 이동 경로를 작동하는 방법을 알고 있습니다.

이해하기 쉽고 상호 작용하는 데 기술적 지식이 필요하지 않습니다. 텍스트는 사용자가 어디에 있었고, 현재 있고, 갈 수 있는지 설명합니다. 모든 사용자가 이해할 수 있는 보편적인 설명이 필요한 내비게이션 시스템입니다.

이동 경로를 언제 사용합니까?

웹 사이트의 탐색 구조를 표시하도록 사이트 맵을 구성하는 것은 웹 사이트가 이동 경로의 이점을 얻을 수 있는지 확인하는 가장 좋은 방법 중 하나입니다. 그런 다음 탐색경로 탐색이 웹사이트 콘텐츠를 통해 사용자에게 도움이 되는지 여부를 평가판으로 분석하고 테스트할 수 있습니다.

• 이동 경로는 범주 내에서 깔끔한 선형 구조로 구성해야 하는 훨씬 더 큰 콘텐츠가 있을 때 가장 잘 사용됩니다. 대부분의 전자 상거래 웹 사이트에서는 다양한 제품을 논리적 범주로 그룹화하는 데 동일한 기준이 사용됩니다.
• 콘텐츠 또는 제품 그룹화를 위한 논리적 계층 구조가 없는 웹사이트에는 이동 경로를 사용해서는 안 됩니다.

사용을 피해야 할 때

이동 경로가 웹사이트 구조에 필수적인 경우 피해야 하는 경우도 있습니다. 그룹화에 대한 명확한 표시 없이 단일 수준 구조로 구성된 웹 사이트가 있는 경우 이동 경로 추가를 피하는 것이 웹 사이트에 가장 좋습니다. 위에서 언급했듯이 다이어그램이나 사이트맵은 웹사이트의 탐색 아키텍처를 결정하는 데 매우 유용할 수 있습니다.

이동 경로는 기본 탐색에서 지원하는 경우에만 유용합니다. 이동 경로는 근육 역할을 하는 반면 기본 탐색은 이들을 함께 고정하는 골격입니다. 완전한 이동 없이는 웹사이트 계층 구조가 생산적으로 작동할 수 없습니다.

빵 부스러기의 종류

위치, 경로 및 속성에 대해 알아야 할 세 가지 유형의 이동 경로가 있습니다.

1. 위치 기반

위치 기반 이동 경로는 웹 사이트의 기본 구조를 표시하는 데 사용됩니다. 이를 통해 사용자는 여러 수준과 포괄적인 콘텐츠 추적이 있는 웹 사이트를 탐색할 수 있습니다. 이러한 유형의 이동 경로는 외부 소스에서 웹 사이트를 방문하고 더 깊은 수준의 콘텐츠를 입력하는 방문자에게 매우 유용합니다. 예를 들어, 특정 유형의 제품을 검색하고 Google이 표시한 검색 결과를 클릭하면 웹 페이지에 들어가면 여러 범주 사이에 있는 자신을 발견하게 됩니다. 이동 경로는 위치를 결정하고 계층 구조의 가능성을 탐색하는 데 도움이 됩니다. 깊은 수준의 콘텐츠를 포함하는 웹 사이트는 위치 기반 이동 경로에 매우 적합합니다. 이상적인 예는 eBay입니다.

2. 경로 기반

이러한 이동 경로는 웹사이트의 히스토리 트레일 탐색에 중요합니다. 경로 기반 이동 경로는 기본적으로 사용자가 현재 위치에 도달하기 위해 방문한 모든 경로를 보여줍니다. 일반적으로 이러한 이동 경로 링크는 동적으로 생성됩니다. 경로 기반 플러그인은 웹사이트 탐색에 많은 시간을 할애하는 사용자에게 도움이 될 수 있지만 대부분의 사용자에게는 수수께끼입니다. 대부분의 방문자는 재량에 따라 한 페이지에서 다른 페이지로 이동하기 때문에 탐색합니다. 브라우저의 "뒤로" 버튼은 경로를 변경해야 하는 대부분의 요구 사항을 해결합니다. 이것은 이미 웹사이트 깊숙이 있는 사이트 페이지에 도착하는 방문자 유형에게는 특히 유용하지 않습니다.

3. 속성 기반

전자 상거래 웹 사이트는 속성 기반 이동 경로에서 가장 큰 이점을 얻습니다. 특정 페이지나 제품에 따라 카테고리를 나열하는 데 도움이 됩니다. 이러한 유형의 이동 경로는 사용자가 제품 간의 관계를 이해하도록 장려하는 데 매우 유용합니다. 예를 들어 웹사이트에서 청바지를 판매하는 경우 속성 기반 이동 경로를 사용하여 고객이 일반 핏, 슬림 핏 또는 스키니 진 중에서 탐색할 수 있습니다.

이동 경로 탐색 모범 사례

이동 경로 탐색을 디자인할 때 다음 사항을 염두에 두십시오. Breadcrumb 탐색은 사이트에서 사용자 경험을 개선하기 위한 추가 지원입니다.

중복 요소 피하기

웹 사이트에 이동 경로를 추가하려는 경우 올바른 방식으로 추가할 수 있습니다. 먼저 이동 경로 사이에 있을 수 있는 중복 요소를 제거해야 합니다. 안타깝게도 동일한 페이지가 여러 범주 또는 표시된 콘텐츠 수준으로 분류되는 많은 상위 웹사이트에서 이를 보았습니다. 이것은 방문자를 혼란스럽게 할 뿐만 아니라 웹사이트에 나쁜 영향을 미칩니다.

SEO 호환성

Breadcrumb는 방문자를 위한 탐색 컨트롤일 뿐만 아니라 SEO 관행에 대한 훌륭한 자산입니다. 탐색경로 내에서 키워드를 사용하여 검색 엔진에서 순위를 높일 수 있습니다. 검색 엔진이 결과의 이동 경로에 쉽게 나열할 수 있도록 웹사이트 카테고리에 대해 SEO 친화적인 이름을 선택하는 것이 좋습니다.

이동 경로를 대체 탐색으로 사용

이동 경로는 사용자가 한 지점에서 다른 지점으로 이동하는 데 도움이 되는 훌륭한 소스이지만 2차 소스로만 취급해야 합니다. 이동 경로는 방문자의 사용성을 향상시키기 위한 추가 기능이며 어떠한 경우에도 웹사이트의 기본 탐색 구조를 대체할 수 없습니다.

이동 경로 탐색에서 현재 페이지를 연결하는 것은 무의미합니다.

탐색경로에 방문자의 현재 위치를 표시하는 것은 선택 사항이지만 선형 구조에 표시된 링크가 탭하거나 클릭할 수 없는지 확인해야 합니다. 방문자가 현재 보고 있는 페이지의 링크를 표시하는 것은 혼란을 야기할 뿐입니다.

구분 기호 추가

구분 기호를 사용하는 것은 이동 경로 탐색에 깨끗하고 눈에 띄는 모양을 제공하는 좋은 방법입니다. 사용자가 더 깊은 수준으로 이동하면 텍스트가 너무 가까이 오는 것을 방지하고 이해하고 상호 작용하기 쉬운 동적 구조를 만듭니다.

일반적으로 옷 › 셔츠 › 칼라 셔츠 등과 같은 범주 형식에서 사용되기 때문에 계층을 나타내기 위해 › 기호를 사용할 수 있습니다. 다른 기호에는 화살표(→), 직각 따옴표(») 및 슬래시(⁄)가 포함됩니다.

빵 부스러기의 크기와 패딩 소개

이동 경로를 디자인할 때 패딩과 대상 크기를 고려해야 합니다. 한 이동 경로와 다른 이동 경로 사이의 간격은 눈에 잘 띄어야 합니다. 그렇지 않으면 방문자가 이동 경로를 효과적으로 사용하지 못할 수 있습니다. 동시에 빵 부스러기의 크기가 주변의 다른 요소를 손상시키지 않도록 하여 기본 탐색이 영향을 받지 않도록 합니다.

필요한 것보다 더 많은 빵 부스러기 디자인에 초점을 맞추지 마십시오.

이동 경로를 나타내기 위해 밝은 색상이나 멋진 글꼴을 사용하지 마십시오. 이동 경로는 사용자가 페이지를 방문한 후 중요하지만 가장 먼저 눈에 들어오는 것은 아닙니다. 이동 경로 탐색에 글램을 추가하면 사용자가 웹 사이트의 기본 탐색을 무시할 수 있습니다. 이는 사용자가 페이지에 들어가는 실제 의도를 산만하게 하고 결과적으로 상점에 대한 잠재적인 전환을 잃을 수 있습니다. 그런 면에서 구글이 가장 좋은 예다. 검색된 콘텐츠 수준이 너무 높기 때문에 사용자가 쉽게 탐색 경로를 찾고 상호 작용할 수 있도록 멋진 글꼴이나 색상이 없는 간단한 탐색 경로를 보여줍니다.

어떤 유형을 피해야 합니까?

사이트 계층을 표시하기 위해 위치/속성 기반 이동 경로 또는 경로 기반 이동 경로를 사용할지 여부에 대한 논쟁의 여지가 있습니다. 이동 경로는 사용자 기록이 아니라 사이트 계층 구조를 보여야 한다는 것이 일반적입니다. 우리의 평가와 의견에 따르면 경로 기반 이동 경로를 더 이상 신경쓰지 않아도 됩니다. 우선 UX에 도움이 되지 않습니다. 다른 레벨 사이에 표시되는 계층 구조가 없기 때문에 방문자에게 잠재적으로 혼란을 일으킬 수 있기 때문입니다. 이것이 위치 및 속성 기반 이동 경로가 경로 기반 이동 경로보다 선호되는 이유입니다.

마지막 생각들

이동 경로는 웹사이트의 다른 요소만큼 중요합니다. 이제 기술을 통해 더 많은 양의 데이터, 더 빠른 인터넷 속도, 더 빠른 로딩 시간을 저장할 수 있으므로 땀을 흘리지 않고도 상위 계층에서 탐색을 보다 포괄적으로 표시할 수 있습니다. 이동 경로의 도움으로 귀하의 웹 사이트는 더 나은 사용자 경험을 제공할 뿐만 아니라 고객으로부터 더 많은 매출을 창출할 수 있습니다. 더 매끄럽고 정교하지 않은 탐색은 제품 페이지에 더 쉽게 액세스하고 체크아웃 프로세스를 방해하지 않는다는 것을 의미합니다.