온라인 상점을 위한 효과적인 탐색을 만드는 방법

좋은 탐색 시스템은 고객이 원하는 것을 빠르고 효율적으로 찾도록 도와주고 매장의 전반적인 성공을 향상시킵니다. 사실, 귀하의 웹사이트는 사이트 방문자의 관심을 끌 수 있는 시간이 몇 초밖에 없으므로 방문자가 즉시 필요한 정보로 안내하는 것이 좋습니다!

기본 탐색의 작은 차이라도 고객의 요구 사항에 맞는 제품을 찾는 능력에 상당한 영향을 미칠 수 있습니다. 그들이 귀하의 사이트에 도착했을 때 무엇을 해야 하는지 또는 어디로 가야 하는지 알 수 없으면 재빨리 떠나 다른 곳에서 쇼핑할 것입니다.

그러나 판매를 늘리고 이탈률을 줄이는 효과적인 온라인 상점 탐색을 어떻게 만들 수 있습니까?

탐색 메뉴 모범 사례

1. 명확하고 의미 있는 언어 사용

일반적으로 웹사이트 헤더에 있는 기본 탐색 메뉴의 경우 레이블이 명확하고 의미가 있는지 확인하세요. 사이트 방문자는 라벨을 읽는 것만으로 카테고리에 어떤 제품이 있는지 또는 드롭다운 메뉴를 클릭할 때 어떤 정보를 찾을 수 있는지 정확히 알아야 합니다. 귀하의 문구로 창의력을 발휘하고 싶은 유혹이 느껴질 수 있지만, 이는 클릭을 유도하기보다는 고객을 혼란스럽게 할 수 있습니다.

예를 들어, fixjeiphone.nl의 기본 탐색 메뉴는 명확하고 의미가 있습니다. 특정 항목을 클릭하기 전에 각 페이지에 어떤 콘텐츠나 제품이 표시될지 환상적인 아이디어를 얻을 수 있습니다.

탐색 메뉴의 항목도 FixjeiPhone 고객의 요구와 직접적인 관련이 있습니다. 그들은 사람들이 부품이나 액세서리를 구입하거나 전화 설명서를 읽거나 리퍼브 장치를 구입하기 위해 사이트를 방문한다는 것을 알고 있습니다. 각 메뉴 항목은 특정 요구 사항을 기반으로 하므로 사이트 방문자는 즉시 클릭할 위치를 알 수 있습니다.

2. 최상위 항목을 클릭 가능하게 만들기

일부 웹 사이트에는 새 페이지에 연결하는 대신 드롭다운만 실행하는 최상위 탐색 항목이 있습니다. 그러나 이것은 웹사이트 방문자에게 혼란을 줄 수 있습니다. 특히 어떤 이유로 드롭다운을 여는 데 문제가 있는 경우에는 더욱 그렇습니다.

메뉴에 제품 카테고리를 나열하는 경우 최상위 항목을 기본 카테고리 페이지에 연결하고 드롭다운에 하위 카테고리를 포함하는 것이 좋습니다. 이것은 또한 사용자가 찾고 있는 것을 정확히 찾거나 전체 카테고리를 탐색할 수 있는 더 많은 옵션을 제공합니다.

Absoluteantibody.com은 이를 효과적으로 수행합니다. 주 탐색 메뉴에서 "항체 리소스"를 클릭하면 항체에 대한 모든 정보로 이동합니다. 또는 드롭다운에서 강조 표시된 보다 구체적인 리소스를 클릭할 수 있습니다.

3. 드롭다운 표시기 추가

Absolutelyantibody.com 및 fixjeiphone.nl도 탐색 메뉴에 드롭다운 표시기를 구현합니다.

일반적으로 드롭다운 표시기는 각 탐색 레이블 옆에 화살표를 추가하여 메뉴 항목이 확장되었음을 보여줍니다. 웹 사이트 방문자가 각 개별 항목 위로 마우스를 이동하지 않고도 사용할 수 있는 더 많은 옵션이 있음을 이해하는 데 도움이 됩니다.

이것은 종종 테마 설정의 옵션이지만 메뉴 아이콘과 같은 플러그인을 사용하거나 웹사이트 코드를 편집할 수도 있습니다.

4. 표준 위치에 충실

웹 사이트 디자인으로 창의력을 발휘하는 것은 군중에서 눈에 띄는 좋은 방법입니다. 그러나 창의성이 혼란을 일으키면 고객과 매출을 모두 잃을 수 있습니다.

사람들이 찾을 것으로 예상되는 위치에 내비게이션을 두는 것이 좋습니다. 시선 추적 연구에 따르면 웹사이트 방문자는 페이지의 왼쪽 상단을 먼저 봅니다. 따라서 헤더에 기본 탐색을 유지하고 홈 페이지와 같은 가장 중요한 항목을 왼쪽에 배치하십시오.

또한 사용자는 탐색을 위해 바닥글과 사이드바를 찾습니다. 반품 정책 및 조건과 함께 바닥글의 중요한 페이지에 대한 링크를 고려하십시오. 제품 및 카테고리 페이지에 관련 제품, 추가 카테고리 및 자주 묻는 질문에 대한 링크가 있는 사이드바를 포함할 수 있습니다.

"햄버거" 메뉴(고객이 세 줄 아이콘을 클릭하면 확장됨)는 모바일 메뉴를 단순화하는 데 적합하지만 데스크톱 컴퓨터에서는 혼동될 수 있습니다.

아이콘이 너무 작고 일반적으로 구석에 있기 때문에 웹 사이트 방문자가 쉽게 길을 잃거나 간과할 수 있습니다. 또한 가장 중요한 메뉴 항목을 표시하지 않으며 방문자가 원하는 것을 찾기 전에 한 단계 더 수행해야 합니다.

이동 경로를 사용하는 방법과 사용해야 하는 이유

이동 경로는 웹 사이트에서 사용자의 위치를 ​​표시하는 보조 탐색 시스템입니다. 이름은 헨젤과 그레텔이 빵 부스러기를 떨어뜨리고 숲으로 돌아가는 길을 찾는 이야기에서 따왔습니다. 이 탐색 방법은 페이지나 제품이 많은 경우에 특히 유용합니다.

탐색경로 메뉴는 일반적으로 웹사이트 콘텐츠 바로 위의 기본 탐색 아래에 표시됩니다. 이렇게 하면 사이트 방문자가 스크롤할 필요 없이 쉽게 사용할 수 있습니다.

Craft Can Directory 웹사이트는 탐색경로를 사용하여 고객에게 현재 있는 페이지와 시작 지점으로 돌아가는 방법을 보여줍니다. 이를 통해 브라우저의 "뒤로" 버튼을 여러 번 클릭하지 않고도 한 페이지로 돌아가거나 여러 페이지를 건너뛸 수 있습니다.

이는 쇼핑객이 제품을 검색하거나 상품을 비교할 때도 유용합니다. 맥주 한 병을 사고 싶지만 보고 있는 범주의 옵션이 마음에 들지 않는 경우에는 혼합 사례 범주로 다시 클릭하여 다른 옵션을 볼 수 있습니다.

이동 경로가 중요한 이유

이동 경로는 고객이 사이트에서 길을 잃지 않도록 합니다. 그것들이 없으면 누군가가 이전 페이지나 카테고리로 되돌아가는 것이 훨씬 더 어렵습니다. 대신 고객은 기본 메뉴를 다시 클릭하거나 페이지를 검색하거나 "뒤로" 버튼을 사용해야 합니다.

Google은 또한 웹사이트의 구조와 계층 구조를 설명하는 데 도움이 되는 이동 경로를 좋아합니다. 이동 경로는 검색 엔진 결과에 포함될 수도 있으므로 잠재 고객이 사이트 페이지를 찾고 클릭할 가능성이 높아집니다.

사이트에 탐색경로를 추가하는 방법:

대부분의 경우 테마 설정에서 이동 경로를 켤 수 있습니다. 예를 들어 무료 WooCommerce Storefront 테마에는 페이지, 제품, 카테고리 등에 대해 이 기능이 내장되어 있습니다.

테마에 이동 경로가 포함되어 있지 않거나 추가로 사용자 지정하려는 경우 두 가지 방법으로 사이트에 추가할 수 있습니다.

1. 플러그인 사용:

버튼 클릭으로 이동 경로를 켜는 데 사용할 수 있는 여러 플러그인이 있습니다. 예를 들어 Jetpack을 사용하면 제품이나 카테고리 페이지가 아니라 웹사이트 페이지에서 이동 경로를 사용할 수 있습니다.

각 플러그인은 다양한 수준의 사용자 정의를 허용하며 설정은 다양합니다. 전체 옵션 목록을 보려면 WordPress 플러그인 저장소를 살펴보세요.

2. 사용자 지정 코드로 이동 경로 추가

WooCommerce 이동 경로를 표시하려면 <?php woocommerce_breadcrumb(); ?> 이동 경로가 출력되는 위치를 제어하는 ​​스니펫.

필터와 인수를 사용하여 이동 경로 구분 기호, 홈 텍스트 및 링크와 같은 항목을 제어할 수도 있습니다.

이 사용자 지정 인수는 이동 경로 구분 기호와 이동 경로 앞에 표시되는 HTML을 변경합니다.

 /* Change breadcrumbs separator */ <?php $args = array( 'delimiter' => '/', 'before' => '<span class="breadcrumb-title">' . __( 'This is where you are:', 'woothemes' ) . '</span>' ); ?> <?php woocommerce_breadcrumb( $args ); ?>

이 필터는 기본 홈 텍스트를 사용자가 지정한 것으로 변경합니다.

 /* Change Home Text in Breadcrumbs */ add_filter( 'woocommerce_breadcrumb_defaults', 'mm_change_breadcrumb_home_text',20); function mm_change_breadcrumb_home_text( $defaults ) { $defaults['home'] = 'Store'; return $defaults; }

이 필터는 홈 URL 링크를 변경합니다.

 /* Replace the home link URL */ add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' ); function woo_custom_breadrumb_home_url() { return 'http://woocommerce.com'; }

WooCommerce 문서에서 모든 사용자 정의 코드 스니펫을 확인하여 더 많은 사용자 정의를 수행할 수 있습니다.

메가 메뉴는 어떻습니까?

메가 메뉴는 온라인 상점에서 인기 있는 옵션입니다. 이를 통해 고객에게 기본 메뉴에서 많은 선택권을 제공하고 사진이나 비디오를 추가할 수도 있습니다.

그러나 콘텐츠와 제품을 분류하는 방식은 매우 중요합니다. 관련 제품을 함께 그룹화하는 방식으로 상위 카테고리, 하위 카테고리 및 계층을 활용해야 합니다. 이를 통해 잠재 고객이 원하는 것을 쉽게 찾고 제품 및 옵션의 다양한 세그먼트를 한 눈에 볼 수 있습니다.

예를 들어, The Craft Can Directory는 사용자가 보고 싶은 제품으로 사용자를 안내하는 데 도움이 되는 방식으로 메가 메뉴를 잘 활용합니다.

기본 메뉴에서 "Craft Beer Shop" 위로 마우스를 가져가면 상위 범주는 굵은 글꼴로 강조 표시되고 하위 범주는 각 상위 범주 아래에 본문 글꼴로 표시됩니다.

카테고리가 이러한 방식으로 그룹화되지 않은 경우 메가 메뉴는 표준 탐색 메뉴보다 고객에게 훨씬 더 혼란스러울 수 있습니다.

Storefront 테마 사용자를 위해 WooCommerce는 프로세스를 단순화할 수 있는 메가 메뉴 확장을 제공합니다.

바닥글 탐색을 효과적으로 사용하기

바닥글은 나중에 생각하는 것이 아니라 웹사이트 전략의 일부가 되어야 합니다. 사이트의 모든 단일 페이지와 제품에 표시되기 때문에 가장 중요한 페이지를 보여줄 수 있는 귀중한 장소입니다.

수십 개의 링크가 포함된 거대하고 압도적인 바닥글을 만들면 안 되지만 사용 가능한 공간을 최대한 활용하는 것이 중요합니다. 바닥글을 포괄적인 것으로 생각하십시오. 웹사이트 방문자가 페이지의 모든 콘텐츠를 읽고 맨 아래로 스크롤하면 어떤 정보가 가장 도움이 될까요?

경우에 따라 기본 메뉴에 있는 링크와 유사할 수 있습니다. 바닥글에 이러한 옵션을 추가하면 사람들이 맨 위로 스크롤하지 않고도 원하는 것을 찾는 데 도움이 됩니다.

그러나 웹 사이트 사용자가 온라인 상점 바닥글에서 볼 것으로 기대하는 페이지와 콘텐츠를 잊지 마십시오. 예를 들어:

• 배송 정보
• 반품 및 환불 정책
• 개인 정보 보호 정책
• 이용약관
• 고객 서비스 세부정보
• 자주 묻는 질문
• 연락처 정보
• 검색창
• 소셜 미디어 링크

Yubico.com은 효과적인 바닥글의 좋은 예입니다. 기본 탐색 메뉴와 유사하게 Yubico는 웹사이트 방문자가 정보를 쉽게 찾을 수 있도록 카테고리별로 중요한 링크와 콘텐츠를 구성합니다.

온라인 상점의 규모에 따라 이러한 옵션 중 일부만 필요할 수도 있습니다. 링크 수에 관한 것이 아닙니다. 그것은 그들 뒤에있는 전략에 관한 것입니다.

내비게이션을 잊지 마세요

웹 사이트 탐색은 온라인 상점에서 가장 간과되는 측면 중 하나이며 종종 당연하게 여겨집니다. 효과적인 탐색을 만드는 첫 번째 단계는 고객에게 가장 중요한 요소를 파악하는 것입니다.

고객이 귀하의 콘텐츠, 제품 및 제품을 쉽게 탐색할 수 있도록 하려면 어떻게 해야 합니까? 그들에게 어떤 정보가 가장 도움이 될까요? 대량의 제품 카탈로그가 있는 경우 메가 메뉴가 의미가 있습니까?

잠재 고객이 원하는 것을 빨리 찾지 못하면 경쟁자에게 빼앗길 수 있음을 기억하십시오.

메뉴의 다른 버전을 테스트하고 싶습니까? 탐색을 A/B 테스트하는 방법을 알아보세요.