17가지 유형의 블로그 및 웹사이트 탐색 옵션

탐색이 귀찮으면 방문자의 67%가 웹사이트를 떠납니다. 좋은 블로그와 웹사이트 탐색은 트래픽, 사용자가 사이트에서 보내는 시간 및 전환율에 영향을 미치므로 성공에 필수적입니다.

인터넷의 발달로 인해 탐색 메뉴의 종류에 대해 많은 추측이 있습니다. 탐색은 사용자 경험에 영향을 미치는 주요 요소 중 하나이며 탐색이 없는 블로그나 웹사이트는 상상할 수 없습니다.

웹 사이트에서 탐색이 중요한 이유는 무엇입니까?

귀하의 웹 사이트가 도시라고 생각하십시오. 싱가포르, 두바이, 로마 또는 기타 원하는 목적지에 방금 착륙하셨습니다. 보고 싶은 장소는 알지만 어떻게 가야 할지 모릅니다. 대부분의 도시에는 사람들을 특정 장소로 ​​안내하는 데 도움이 되는 표지판이 있습니다. 표지판은 또한 사람들을 참여시키는 데 도움이 됩니다. 콜로세움을 방문할 생각을 하지 않았을 수도 있지만, 콜로세움이 근처에 있다는 표지판이 보이면 방문하게 될 것입니다.

블로그 및 웹사이트 탐색은 동일한 원칙을 염두에 두고 설계되었습니다. 탐색 기능이 없으면 방문자는 어디로 가야 하는지, 어떤 페이지를 볼 가치가 있는지 알 수 없습니다. 제품 목록 페이지나 구독 페이지를 찾을 수 없습니다.

탐색의 목적은 웹 사이트를 더 자세히 탐색하는 데 도움이 되는 것입니다. 사람들의 호기심을 불러일으키고 링크를 클릭하도록 설득해야 합니다. 좋은 웹사이트 탐색은 방문자가 좌절 없이 한 페이지에서 다른 페이지로 이동할 수 있도록 합니다. 좋은 일을 한 경우 방문자는 다시 방문하거나 뉴스레터를 구독하거나 제품이나 서비스를 구매할 의도로 사이트를 떠날 것입니다.

탐색 옵션

다음은 블로그나 웹사이트에서 마술처럼 작동할 수 있는 몇 가지 최신 탐색 옵션입니다.

대화형 탐색

이러한 유형의 대화형 탐색 메뉴는 일반적으로 방문자가 링크 위로 마우스를 가져갈 때 상호 작용을 제공하는 요소가 있는 가로 막대로 구성됩니다. 이것은 시선을 사로잡기 위해 함께 혼합된 정적, 동적 및 대화형 요소의 혼합을 제공하기 때문에 가장 멋진 탐색 옵션 유형 중 하나입니다. 사용자에게 매력적이고 영감을 주는 대화형 경험을 약속합니다. 그러나 많은 이동 요소로 인해 이러한 탐색 옵션은 모든 종류의 브라우저 또는 모바일 장치와 호환되지 않습니다.

고정 탐색 모음

이름에서 알 수 있듯이 고정 탐색 모음 은 웹 사이트 메뉴로, 일반적으로 상단에 수평으로 표시되며 제자리에 유지되며 웹 사이트를 아래로 스크롤해도 사라지지 않습니다. 이렇게 하면 웹 사이트 헤더로 돌아가서 스크롤 페이지에서 위치를 잃는 것을 방지할 수 있습니다. 사용자가 페이지의 어느 곳에서나 사이트를 탐색하는 데 도움이 됩니다.

CSS 및 jQuery 플러그인으로 인해 이제 많은 웹 사이트 테마에 기본 기능으로 고정 메뉴가 내장되어 있습니다. 이러한 유형의 탐색은 화면이 더 길고 얇기 때문에 모바일 장치에서도 잘 작동합니다.

사이트에 탐색할 페이지가 많은 경우 고정 탐색 메뉴를 사용하는 것이 좋습니다. 사용자 참여를 돕고 방문자를 사이트에 더 오래 머물게 하기 때문입니다. 일부 고정 탐색 모음은 아래로 스크롤할 때 크기가 줄어들어 덜 침습적이며 페이지 콘텐츠를 더 잘 볼 수 있습니다.

수직 사이드바 정적 탐색

사이드바 정적 탐색 은 이제 몇 년 동안 트렌드가 되었습니다. 대부분의 디자이너는 이러한 메뉴가 작고 세련된 웹 사이트에 더 적합하다고 말하지만 여전히 이러한 스타일의 탐색을 사용하는 블로그와 잡지가 많이 있습니다.

대부분의 웹사이트는 모든 링크를 빠르고 효과적으로 표시할 수 있는 페이지 왼쪽에 정적인 밝은 색상의 패널을 사용합니다. 한편, 사이드바를 이동하지 않고 웹 페이지를 아래로 스크롤할 수 있습니다. 모든 관련 링크를 손쉽게 사용할 수 있으므로 뛰어난 사용자 경험을 제공합니다.

수직 슬라이딩 탐색

이 탐색 옵션에는 스크롤 또는 슬라이드다운 옵션 이 제공되어 방문자가 정적 막대로 볼 수 있는 것보다 더 많은 페이지 목록을 볼 수 있다는 점을 제외하면 정적 사이드바와 매우 유사합니다. 많은 수의 최신 웹 사이트가 현재 수직 슬라이딩 탐색 트렌드를 채택하고 있으며 매우 잘 작동합니다. 이 탐색 옵션은 기존 웹사이트 디자인의 한계를 뛰어 넘는 크리에이티브 에이전시 또는 포트폴리오 웹사이트에서 매우 인기가 있습니다.

이 디자인은 그리드 웹 디자인이 아닌 전체 화면 레이아웃에서 잘 작동합니다. 수직 슬라이딩 사이드바는 디자인하기가 쉽지 않으며 때로는 모바일 또는 터치 기반 장치를 사용하는 경우 작업이 매우 까다로울 수 있습니다. 그래도 새롭고 멋진 탐색 아이디어를 시도해보고 싶다면 수직 슬라이딩 막대가 좋은 아이디어가 될 수 있습니다.

시차 탐색

시차 탐색 또는 시차 스크롤은 페이지의 기본 배경이 전경의 다른 요소보다 느린 속도로 움직이는 웹 레이아웃으로 구성됩니다. 이 탐색 옵션은 그래픽 기반이며 웹 페이지에 3차원 효과를 제공합니다.

여러 시각적 요소와 움직이는 요소가 결합된 시차 웹사이트는 흥미를 유지하고 방문자가 사이트에서 길을 잃는 것을 방지합니다.

웹 사이트 유형에 따라 시차는 웹 사이트에서 약간 사용하여 추가 차원을 제공하고 전경 및 중요한 요소가 튀어 나오도록 할 수도 있습니다.

햄버거 메뉴

햄버거 아이콘 은 일반적으로 웹 사이트의 왼쪽 상단 또는 오른쪽 상단 모서리에 있는 메뉴 버튼입니다. 아이콘이 3개의 짧은 수평선을 서로 겹쳐서 구성되어 햄버거 샌드위치 모양을 나타내기 때문에 이름이 지정되었습니다. 이것은 일반적으로 모바일 친화적인 웹사이트나 현대적인 테크노바이브 데스크톱 웹사이트에서 볼 수 있습니다.

이것은 많은 혼란을 추가하지 않고 모든 링크를 한 곳으로 모으기 때문에 가장 인기있는 탐색 버튼 유형 중 하나입니다. 이 유형의 메뉴는 매우 개별적이고 세련되며 역동적입니다. 이제 모바일 탐색의 주요 표준이 되었지만 기술에 정통하지 않은 일부 사람들은 이러한 유형의 숨겨진 탐색 옵션을 찾기가 어렵습니다. 따라서 버튼 옆에 메뉴라는 단어를 추가하면 이러한 방문자가 쉽게 탐색할 수 있습니다.

멀티미디어 기반 메뉴

멀티미디어 기반 메뉴 는 탐색 메뉴 항목에 있는 이미지 및 비디오와 같은 여러 시각적 요소로 구성됩니다. 이 훌륭하고 매력적인 옵션은 웹 사이트의 기능, 접근성 및 성능을 손상시키지 않으면서 많은 멀티미디어를 추가할 수 있는 기술의 발전 덕분입니다. 따라서 이러한 유형의 매력적이고 현대적이며 트렌디한 탐색 기능은 역동적이고 세련된 웹사이트의 필수품이 되었습니다.

멀티미디어 기반 탐색은 햄버거 메뉴 및 바닥글 탐색과 같은 다양한 유형의 탐색 옵션을 사용하고 설명에서 가장 중요한 부분만 강조 표시합니다.

목차

Google은 긴 형식의 콘텐츠를 좋아하므로 블로거는 이제 더 길고 긴 콘텐츠를 작성하기 위해 노력하고 있습니다. 이것은 검색 엔진에 따르면 훌륭한 관행이지만 독자가 방향을 잡지 못하게 할 수 있습니다. 일을 간단하게 하기 위해 많은 웹사이트는 기사의 시작 부분 에 콘텐츠 를 다른 섹션으로 분류하는 목차를 추가합니다. 이 방법으로 사용자는 원하는 섹션의 링크를 클릭하기만 하면 페이지를 끝없이 스크롤하지 않고도 해당 섹션으로 이동할 수 있습니다. 이렇게 하면 기사가 덜 위협적으로 보이고 사용자 경험이 경이로워집니다.

가장 눈에 띄는 예는 작성 이후 목차를 사용해 온 위키피디아의 경우입니다.

관련 게시물 탐색

일반적으로 블로그, 뉴스 사이트 및 제품 목록에서 사용되는 가장 중요한 탐색 옵션 유형 중 하나는 관련 게시물 탐색 입니다. 이 유형의 탐색은 주요 콘텐츠 사이, 위 또는 아래에 삽입된 다른 추천 블로그 게시물, 뉴스 항목 또는 제품에 대한 링크로 구성됩니다.

이 탐색 옵션의 가장 큰 장점은 방문자가 관심을 가질 만한 유사한 콘텐츠를 제공한다는 것입니다. 관련 게시물 탐색은 방문자가 사이트의 다른 유사한 제안 및 게시물을 탐색하도록 장려하고 참여를 늘리며 이탈률을 줄이고 구매를 유도합니다.

메가 드롭다운 메뉴

드롭다운 메뉴 는 논란의 여지가 있는 것으로 알려져 있습니다. 하나는 검색 엔진 봇이 크롤링하기 어려울 수 있습니다. 다른 한편으로는 긴 웹 페이지 목록을 보는 데 관심이 없는 방문자에게는 성가실 수 있습니다. 또한 방문자가 중요한 페이지를 놓치게 만듭니다. 그러나 한 가지 유형의 드롭다운 메뉴는 매우 잘 수행됩니다. 메가 드롭다운 메뉴입니다.

메가 드롭다운 메뉴는 스포츠, 온라인 뉴스 및 전자 상거래 상점과 같은 특정 산업을 제공하는 웹 사이트에서 항상 잘 작동합니다. 메가 드롭다운 메뉴는 화면의 거의 전체 너비에 걸쳐 있는 다기능, 다중 열 구성 요소입니다. 또한 비디오, 이미지 및 장바구니와 같은 요소의 균형을 맞출 수도 있습니다. 매우 복잡한 구성 요소이기 때문에 특히 모바일 브라우저에서 페이지가 응답하지 않는 경우가 있습니다. 그러나 웹 사이트에서 다양한 서비스 또는 제품을 제공하는 경우 가장 좋은 옵션 중 하나입니다.

메가 드롭다운 메뉴가 제공하는 가장 큰 장점은 방문자가 다양한 웹사이트에서 제공하는 콘텐츠 유형에 대한 아이디어를 얻을 수 있다는 것입니다. 따라서 이러한 스타일의 탐색을 좋아하는 사용자가 엄청나게 많습니다.

단일 페이지 점 탐색

요즘 가장 유행하는 탐색 유형 중 하나는 단일 페이지 점 탐색 입니다. 여기에는 화면의 왼쪽, 오른쪽 또는 중앙에 위치한 일련의 귀여운 작은 원형 아이콘이 포함됩니다. 각 점은 페이지의 다른 섹션을 나타냅니다. 방문자가 점 위에 마우스를 올리거나 클릭하면 해당 점에 연결된 웹페이지 섹션 또는 슬라이드로 이동합니다. 방문자가 클릭하는 점은 웹사이트에서 사용자의 위치를 ​​표시하기 위해 강조 표시됩니다.

이 유형의 탐색은 한 페이지에 많은 수의 제품을 표시하고 싶지만 많은 공간을 차지하지 않으려는 경우에 적합합니다. 사실, 단일 페이지 점 탐색은 드롭다운 메뉴 및 고정 상단 탐색 모음과 같은 다른 탐색과 함께 매우 잘 작동합니다.

범용 탐색

일부 회사는 대기업이며 자신의 이름으로 여러 브랜드를 보유하고 있습니다. 이러한 회사는 종종 전체 웹사이트에 걸쳐 보편적인 탐색 메뉴를 가지고 있습니다. 이름에서 알 수 있듯이 이 탐색 옵션에는 상위 브랜드가 제공하는 다양한 브랜드, 서비스 및 제품이 모두 포함됩니다.

이러한 탐색 유형의 가장 좋은 예는 TV 채널, 영화, 테마파크, 게임 등을 소유한 디즈니입니다. 유니버설 탐색은 모든 Disney 제품에 주의를 끌기 때문에 이 상황에서 의미가 있습니다. 이 탐색은 대기업에도 포함되지 않습니다. 또한 Jezebel, Deadspin 및 Lifehacker를 포함하여 Univision Communications가 소유한 웹사이트의 네트워크와 이전에 Gawker Media가 소유했던 7개 브랜드에 대한 탐색 링크에서도 사용됩니다.

이 탐색 유형의 장점은 사용자가 웹사이트 네트워크의 일부인 다른 사이트를 알 수 있게 하고 성공적인 브랜드 아이덴티티와 브랜드 인지도를 만드는 데 도움이 된다는 것입니다. 이것은 방문자가 네트워크를 통해 모든 웹사이트에 교차 수분하는 데 도움이 될 수 있습니다.

이동 경로 탐색

"헨젤과 그레텔" 이야기에서 아이들은 집으로 돌아가는 길을 찾기 위해 빵 부스러기 흔적을 남깁니다. 이동 경로 탐색 또는 이동 경로 추적 은 동일한 원칙에 따라 작동합니다. 웹 페이지 상단에 작은 글꼴로 표시되는 계층적 탐색 링크로 방문자에게 웹사이트 내 위치를 표시합니다.

이동 경로 스키마는 현재 페이지가 할당된 카테고리의 링크, 해당 페이지가 존재하는 사이트 섹션을 표시하고 홈페이지로 다시 연결됩니다. 때로는 이동 경로 탐색에 현재 있는 페이지의 이름도 표시되지만 하이퍼링크로 연결되지는 않습니다.

Amazon 예제의 경우 책은 "문학 및 소설" 섹션의 일부인 "장르 소설" 범주에 속하며 Amazon 웹 사이트의 기본 "도서" 섹션으로 다시 연결됩니다.

뚱뚱한 바닥글 탐색

바닥글 탐색 은 사이트 상단의 기존 메뉴 모음과 모양이 비슷합니다. 그러나 주요 차이점은 이것이 웹 페이지 하단에 있다는 것입니다. 이 때문에 바닥글 탐색이라고 합니다.

많은 사이트에서 바닥글 탐색은 일반적으로 연락처, 개인 정보 및 법적 링크로 구성됩니다. 그러나 이제 바닥글 메뉴에 이메일 등록 필드, 소셜 미디어 링크 및 제품 페이지 링크를 표시하는 것이 매우 일반적이 되었습니다.

대부분의 방문자는 마지막 수단으로 바닥글 메뉴를 검색합니다. 많은 웹사이트, 특히 소매 웹사이트는 바닥글 메뉴를 사용하여 머리글 메뉴에 표시할 수 없는 페이지에 대한 링크를 표시합니다.

반응형 Subnav 메뉴

사람들은 이제 데스크톱 컴퓨터보다 모바일 장치를 더 많이 사용합니다. 이 점을 염두에 두고 개발자는 반응형 하위 탐색 메뉴라고 하는 새롭고 더 효율적인 탐색 시스템을 고안했습니다. 이 하위 탐색 메뉴는 작게 표시되어 모바일 화면에 적합하지만 버튼을 눌러 숨겨진 범주를 표시하도록 확장할 수 있습니다.

반응형 하위 탐색 메뉴가 있는 사이트는 메뉴에 하위 범주가 포함되어 있음을 나타내는 작은 더하기 아이콘, 화살표 기호 또는 색상 변경으로 구성됩니다.

주요 스토리 캐러셀

탑 스토리 캐러셀 탐색 옵션은 트래픽이 많은 뉴스 사이트와 블로그에서 빠르게 트렌드가 되고 있습니다. 이러한 주요 사이트 중 상당수는 매일 수십 개의 게시물을 게시할 수 있으며 페이지 상단에 간단한 회전 목마를 추가하면 방문자가 가장 최근 게시물을 볼 수 있습니다. 캐러셀의 기사는 동적으로 업데이트되고 선별되며 썸네일 이미지처럼 보이도록 스타일을 지정할 수 있습니다.

이러한 유형의 탐색은 대용량 웹 사이트 및 블로그에 적합하며 사용자 경험을 향상시킬 수 있습니다. 페이지에 있는 동안 방문자는 관심을 가질 수 있는 다양한 이야기를 찾을 수 있으며 사이트를 탐색하는 데 더 많은 시간을 할애할 수 있습니다. 이는 참여 시간을 늘리고 사용자 유지를 개선하며 이탈률을 줄입니다.

슬라이드 아웃 메뉴

이것은 햄버거 버튼과 유사한 "숨겨진" 탐색 중 하나입니다. 슬라이드 아웃 메뉴 는 화면이 얇아 메뉴뿐만 아니라 콘텐츠를 표시할 공간이 부족한 모바일 장치에서 널리 사용됩니다. 따라서 그들은 엄청난 인기를 얻었고 디자이너들은 이제 데스크탑 웹 사이트에서도 이를 구현하고 있습니다.

슬라이드 아웃 메뉴는 아이콘과 같은 시각적 단서로 표시되며, 예를 들어 화살표 또는 작은 텍스트를 누르면 메뉴가 나타납니다. 일반적으로 슬라이드 아웃 메뉴는 왼쪽에 표시되지만 요즘에는 오른쪽, 위쪽, 아래쪽에서도 표시될 수 있습니다.

탐색은 모든 웹사이트 디자인의 필수적인 부분이며 디자이너는 클라이언트의 요구에 적합할 뿐만 아니라 회사의 목소리를 반영하는 탐색 유형에 특히 주의를 기울여야 합니다. 이 외에도 탐색이 가능한 최상의 방식으로 작동하는지 확인하기 위해 따라야 하는 몇 가지 팁이 있습니다.

• 모든 프로젝트를 시작할 때 사이트맵을 계획해야 합니다. 간단히 말해 사이트맵은 웹사이트의 URL 및 웹페이지 목록입니다. 이것은 검색 엔진 관점에서 가능한 최고의 탐색 도구 중 하나임을 의미합니다.
• 웹사이트의 탐색은 모든 사용자가 사이트에서 자신의 위치, 사이트가 사용자를 안내할 위치 및 방문한 페이지를 알 수 있도록 해야 합니다.
• 최고의 웹사이트는 한 가지 유형의 탐색이 아니라 여러 최신 탐색 사이트의 조합을 제공합니다. 예를 들어, 모바일 친화적인 웹사이트에는 햄버거 버튼과 함께 슬라이드 아웃 메뉴, 바닥글 및 쉬운 탐색을 위한 고정 머리글이 있을 수 있습니다.
• 방문자가 특정 기능을 찾을 수 있는 위치를 알 수 있도록 모든 탐색 옵션도 웹 규칙을 따라야 합니다.
• 적절한 경우 웹사이트에서 햄버거 버튼 및 슬라이드 아웃 메뉴와 같은 반응형 웹사이트 탐색 요소를 사용하는 것이 좋습니다.

전통적이든 현대적이든 여러 종류의 탐색 옵션이 있지만 장점과 한계를 고려한 후 사이트에 어떤 탐색을 표시할지 결정하는 것은 사용자의 선택입니다. 탐색의 경우 트렌드는 진정으로 역동적이며 매년 새해에는 완전히 새로운 범위의 놀라운 메뉴가 표시됩니다. 귀하의 웹사이트에 적합한 탐색 유형은 전적으로 귀하에게 달려 있습니다.