긍정적인 사용자 경험을 보장하는 5가지 웹사이트 탐색 예

귀하의 웹사이트는 귀하의 비즈니스에서 가장 중요한 얼굴입니다.

귀하가 누구이며 무엇을 제공하는지 보여줄 수 있는 완벽한 온라인 부동산입니다.

또한 웹 사이트는 시각적으로 즐거운 디자인뿐만 아니라 쉽고 효율적인 탐색을 통해 가능한 최고의 사용자 경험을 만들 수 있는 기회를 제공합니다 .

최적의 웹사이트 디자인이 필요한 곳입니다.

웹사이트에서 쉽고 직관적인 탐색이 없으면 방문자는 오히려 빠르게 좌절감을 느낄 수 있으며 의심할 여지 없이 이탈률이 높아지고 전환율이 감소하는 것을 보게 될 것입니다.

계속해서 읽고 영감을 주는 최고의 웹사이트 탐색 예제를 찾아보세요!

웹사이트 탐색이란 무엇입니까?

웹사이트 탐색은 웹사이트의 구조와 콘텐츠가 구성되고 연결되는 방식을 나타냅니다.

여기에는 전체 웹 사이트 계층 구조 및 링크 구조가 포함됩니다.

간단히 말해서 웹사이트 탐색은 방문자를 원하는 정보와 페이지로 쉽게 안내하는 도구입니다.

이 탐색은 방문자가 실제로 귀하의 웹사이트에 온 이유를 찾는지 여부에 중요한 역할을 합니다.

웹사이트 탐색 유형

웹 사이트 탐색과 관련하여 막대 및 메뉴라는 용어는 종종 다양한 유형을 설명하는 데 사용됩니다. 이러한 링크 기반 도구는 약간 다른 사용자 경험을 제공하며 다음을 포함합니다.

수평 탐색

오늘날 많은 웹사이트의 상단에 위치하기 때문에 대부분의 사람들은 이미 이러한 유형의 웹사이트 탐색에 익숙합니다.

흔히 톱 메뉴, 메인 네비게이션, 수평 네비게이션이라고 합니다.

웹 사이트 방문자는 사용 가능한 다양한 정보에 액세스할 수 있는 방법을 위해 사이트 상단으로 유도되며 이를 통해 필요한 정보를 찾을 수 있습니다.

수평 탐색을 위한 레이블의 예로는 회사 소개, 제품, 서비스, 계획, 뉴스, 블로그 및 연락처가 있습니다.

수직 탐색

사이드바 탐색이라고도 하는 수직 탐색은 페이지의 오른쪽 또는 왼쪽에 있는 열에 웹사이트 페이지를 나열합니다.

블로그 게시물과 기사를 분류하기 위해 이러한 유형의 탐색을 종종 찾을 수 있습니다.

수평 배치보다 덜 일반적이지만 수직 탐색의 장점은 다음과 같습니다.

• 방문자가 필요한 항목을 쉽게 검색할 수 있는 방법을 제공합니다.
• 더 긴 페이지 레이블을 수용합니다.
• 더 많은 기본 최상위 링크를 위한 공간이 포함됩니다.

바닥글 메뉴

웹 페이지 하단에 위치한 바닥글 메뉴는 일반적으로 상단에 수평 탐색 모음과 함께 표시됩니다.

특히 무언가를 찾는 방문자의 경우 웹사이트에서 다음에 어디로 가야 하는지에 대한 단서를 두 곳에서 모두 찾을 수 있습니다.

바닥글 메뉴는 가로 메뉴보다 더 깊이 있는 경우가 많으며 일반적으로 사이트에서 가장 중요한 페이지로 연결됩니다.

하단 메뉴의 공통 링크에는 다음이 포함될 수 있습니다.

• 회사에서 사용할 수 있는 채용 정보.
• 개인 정보 보호 정책 및 기타 법적 문제.
• 고객 충성도 프로그램.
• 웹사이트 소유자에게 연락하는 방법.

또한 사이트 하단으로 스크롤하는 사이트 방문자는 브랜드에 더 많이 참여하는 경향이 있습니다. 이러한 이유로 그들이 거기에 있어야 할 가치 있는 이유를 제시해야 합니다.

드롭 다운 메뉴

드롭다운 메뉴는 웹사이트 방문자가 기본 옵션 중 하나를 가리키거나 클릭할 때마다 수평 메뉴 막대에서 확장됩니다.

이러한 메뉴는 화면 공간을 절약하는 데 도움이 되며 지나치게 바쁜 웹사이트 레이아웃을 방지하는 데 도움이 됩니다.

메가 메뉴

드롭다운 메뉴와 달리 메가 메뉴는 여러 콘텐츠 카테고리를 추가할 수 있는 기회를 제공합니다.

이 초대형 메뉴는 더 넓게 확장 되어 방문자에게 콘텐츠를 보다 자세히 분류하여 원하는 것을 찾는 데 매우 편리합니다.

카탈로그, 잡지 및 블로그 사이트에서 종종 볼 수 있습니다.

햄버거 아이콘

햄버거 탐색 버튼은 공간을 제공하고 방문자가 콘텐츠 제공을 쉽게 확장할 수 있는 방법입니다.

버튼 자체는 세 줄 아이콘으로 구성되며 모바일 웹 디자인에서 자주 볼 수 있습니다. 방문자는 아이콘을 클릭하기만 하면 드롭다운 또는 팝업 메뉴가 나타납니다.

대부분의 경우 연결된 콘텐츠 레이블은 여전히 ​​랩톱 및 데스크톱 컴퓨터 화면에서 가로로 나열되지만 모바일 장치와 같은 작은 화면에서는 햄버거 아이콘 버튼 뒤에 숨겨집니다.

전체 화면 메뉴

전체 화면 탐색은 단순히 화면의 대부분을 차지하는 오버레이로 메뉴 링크를 추가할 수 있는 충분한 공간을 제공합니다.

방문자는 일반적으로 햄버거 아이콘 버튼을 클릭하여 이 메뉴에 액세스합니다.

사이트는 공간이 제한되고 메가 메뉴를 위한 공간이 적을 때 종종 이 탐색 방법을 사용 합니다.

빵 부스러기

탐색 경로 탐색 유형은 방문자가 웹사이트에서 현재 어디에 있는지 알려주는 데 사용됩니다.

페이지가 사이트의 다른 페이지와 관련하여 어떻게 특징지어지는지를 보여주기 위해 설계된 계층적 링크 구조 입니다.

5 웹사이트 탐색 예

이러한 탐색 유형은 오늘날 웹사이트 전반에 걸쳐 사용되며 귀하와 귀하의 대상 고객에게 가장 적합한 탐색 유형을 찾는 것이 성공의 열쇠입니다.

다음은 자신의 디자인에 영감을 주는 5가지 웹사이트 탐색 예입니다.

1. NKI

프랑스 스튜디오 NKI는 애니메이션, CGI 및 VFX를 전문으로 합니다.

그들의 웹사이트가 방문자가 도착했을 때 바로 찾을 수 있는 뛰어난 시각적 콘텐츠를 보여주는 것은 놀라운 일이 아닙니다.

그러나 콘텐츠가 사이트에서 이미 놀랍지만 스튜디오는 웹사이트 탐색에 추가 고려를 하여 구조가 더 게임과 같도록 만들었습니다.

NKI는 방문자가 화면을 변경하기 위해 스크롤하는 전체 화면 탐색을 선택했습니다.

이 접근 방식은 스튜디오의 개성과 일치하여 방문자에게 독특한 경험을 제공합니다. 그것은 그들을 끌어들여 사이트를 계속 탐색하고 스튜디오 자체의 팬이 되는 흥분을 만듭니다.

그래도 NKI는 탐색 구조에도 기반이 필요하다는 것을 알고 있습니다.

이러한 이유로 왼쪽 하단에 고정 메뉴를 배치하여 방문자가 항상 이 메뉴로 돌아와 방향을 변경할 수 있습니다.

물론 모든 사람을 위한 고유한 접근 방식은 아니지만 이러한 창의적인 비즈니스에는 전체 화면 탐색 유형이 적합할 수 있습니다.

2. 에드윈 유럽

의류 품목, 특히 데님 의류 품목의 경우 경쟁이 치열할 수 있습니다.

고객이 귀하의 웹사이트를 좋아하지 않고 귀하가 제공하는 제품으로 이동하는 데 어려움을 느낀다면 오래 머물지 못할 것입니다.

Edwin Europe이라는 브랜드는 이를 알고 많은 고객이 모바일에서 쇼핑을 하기 때문에 모바일에 최적화된 웹사이트와 탐색 유형이 필수가 되었습니다.

따라서 수평 및 수직 사이드바 탐색 방식을 결합했습니다. 방문자가 수평 막대의 범주 위로 마우스를 가져가면 수직 사이드바가 나타납니다.

이 탐색 유형은 브랜드에 적합하고 확장 가능 하며 스마트폰과 랩톱 또는 데스크톱 컴퓨터 사용자 모두를 위해 사이트를 쉽게 로밍할 수 있는 방법을 만듭니다.

3. 프로파 뷰티

때로는 직접적인 접근 방식이 가장 좋습니다. 예를 들어, Propa Beauty를 보십시오.

수평 탐색 메뉴를 다소 단순하게 유지하면서 주요 목표로 전환 및 판매 생성 에 중점을 둡니다 .

방문자는 매번 검색하는 내용을 쉽고 빠르게 찾을 수 있습니다.

또한 Propa Beauty는 맨 오른쪽에 있는 간단한 아이콘을 사용하여 방문자가 장바구니, 회원 로그인 페이지 및 검색 기능을 포함하여 사이트의 다른 인기 있는 영역으로 쉽게 이동할 수 있는 방법을 제공합니다.

4. 그늘의 방

온라인 뉴스 제공업체인 The Shade Room은 한 가지 유형의 탐색 메뉴에만 국한되지 않습니다.

대신 가로 헤더와 3줄 햄버거 메뉴 옵션을 모두 제공하여 방문자에게 완전한 경험을 제공합니다.

웹사이트 방문자가 햄버거 메뉴 버튼을 클릭하면 웹사이트의 다른 부분에 대한 링크와 함께 두 번째 탐색 메뉴가 나타납니다.

5. 파타고니아

Patagonia와 같이 광범위한 제품 또는 품목 카탈로그를 제공하는 브랜드의 경우 메가 메뉴 접근 방식이 가장 좋은 경우가 많습니다.

방문자는 상단의 가로 막대에서 쇼핑 옵션 위로 마우스를 가져 가 탐색을 위해 선택할 수 있는 수많은 링크를 나열하는 심층적인 메가 메뉴가 표시됩니다.

스포츠 옵션 위로 마우스를 가져가면 방문자는 스포츠 유형별로 세분화된 더 작은 메뉴를 볼 수 있으므로 다른 방식으로 정확히 원하는 항목으로 쉽게 이동할 수 있습니다.

상단의 가로 막대에는 스토리 및 활동과 같은 다른 옵션도 포함됩니다. 이 두 가지는 메가 메뉴에 연결되어 있지 않지만 클릭하면 방문자를 웹사이트의 별도 섹션으로 이동할 수 있습니다.

이 두 가지 접근 방식은 방문자에게 더 나은 쇼핑 경험 을 제공하는 Patagonia에 적용됩니다. 또한 브랜드에 대한 중요한 정보에 연결합니다.

웹사이트 탐색을 위한 3가지 모범 사례

마케팅의 모든 것과 마찬가지로 전략이 필요합니다.

웹사이트가 어떻게 구성되어 있고 방문자가 웹사이트에서 제공하는 콘텐츠로 이동하는 방식을 고려하는 것은 디지털 마케팅 계획의 필수적인 부분이 되어야 합니다.

방문자에게 좋은 경험을 제공하려면 웹 사이트 탐색에 대한 다음 세 가지 모범 사례를 통합해 보십시오.

1. 기여 보고서/사용자 흐름 보고서

이미 웹사이트가 있는 경우 마케팅 웹 분석 소프트웨어에서 이 기능을 제공하는 경우 속성 보고를 활용하십시오.

보고서는 새로 생성된 연락처를 귀하의 비즈니스와 수행한 상호 작용에 대해 설명합니다.

이러한 정보를 통해 팀은 콘텐츠, 기능 또는 둘 다에 관계없이 웹사이트에서 방문자를 자격 있는 리드로 전환시키는 요소를 더 잘 이해할 수 있습니다.

웹사이트 방문자가 제품 페이지나 블로그에서 가장 많은 시간을 보내고 있습니까? 어떤 블로그 게시물이 가장 주목받고 있습니까?

찾은 내용을 반영하도록 탐색을 디자인하고 해당 페이지의 우선 순위를 지정합니다.

기여 보고서에 액세스할 수 없는 경우에도 Google Analytics 및 사용자 흐름 보고서를 사용하여 웹사이트에서 발생하는 상황을 파악할 수 있습니다.

이 보고서는 제한된 보고서이지만 방문자가 사이트에서 탐색하는 경향에 대한 정보를 제공합니다.

2. 시각적 분리 생성

웹사이트 탐색 메뉴는 전체 웹사이트 콘텐츠와 다른 방식으로 눈에 띄어야 합니다. 이를 수행하려면 시각적 분리를 만들어야 합니다.

이를 수행하는 방법에는 다음을 사용하는 것이 포함됩니다.

• 여백.
• 다른 배경이나 글꼴 색상과 같은 색상.
• 다른 글꼴.
• 일종의 구분선.

탐색 메뉴를 웹페이지의 다른 콘텐츠 요소와 분리하여 방문자 를 돕고 웹사이트의 다른 영역으로 안내하는 클릭 가능한 텍스트를 알려줍니다.

3. 클릭 유도문안을 위한 버튼 활용

모든 클릭 유도문안 포함에 대해 고유하게 디자인된 버튼을 활용하십시오.

웹사이트의 버튼은 방문자의 시선을 끌어 일종의 조치를 취하기 위한 링크를 알려줍니다.

색상 변형, 글꼴 또는 기타 선호하는 디자인 전술과 같이 버튼을 눈에 띄게 디자인하여 이러한 버튼을 최대한 활용하십시오 .

마무리: 웹사이트 탐색 디자인을 우선 순위로 지정

웹사이트 탐색은 전체 사용자 경험에 가장 큰 영향을 미칩니다.

이러한 경험을 간소화하고 방문자가 웹사이트에서 원하거나 필요한 것을 쉽게 찾을 수 있도록 함으로써 체류 시간을 늘리고 전환율을 높일 수 있습니다.

방문자 에게 긍정적인 콘텐츠 경험 을 제공하는 더 많은 방법을 알아보려면 지금 기사를 확인하고 마케팅 접근 방식을 변경하십시오!