사이트의 유용성은 웹 사이트를 구축하거나 유지할 때 가장 중요한 고려 사항 중 하나 여야합니다. 귀하의 웹 사이트를 사용하기 어려운 경우 사람들은이를 사용하거나 다시 방문하지 못하게 될 것입니다. 또한 많은 경우 유용성이 우수하면 더 나은 SEO 결과로 바로 이어집니다.

좋은 웹 사이트 사용의 몇 가지 특징은 다음과 같습니다.

  • 모바일 응답 성 : 점점 더 많은 사람들이 휴대 전화를 통해 인터넷에 액세스하고 있습니다 (Google은 이것이 모바일 이니셔티브의 일환으로 검색 순위에 중요하다고 생각합니다).
  • 페이지로드 속도 : 사람들이 웹사이트와 상호작용하는 방식과의 상관관계를 통해 Google이 제공하는 또 다른 중요한 순위 신호입니다. Kissmetrics에 따르면 소비자의 47%는 웹 페이지가 2초 이내에 로드될 것으로 기대합니다!
  • 웹 사이트 탐색 : Orbit Media Studios에 따르면 웹 사이트가 사용하기 쉽고 콘텐츠를 쉽게 찾을 수 있다면 검색 엔진에서 얻을 수있는 트래픽에 긍정적 인 영향을 미칩니다. Gerry McGovern은 특정 페이지에 대한 링크를 클릭하는 것이 더 쉽고 빠르기 때문에 70 %의 사람들이 무언가를 찾을 때 검색보다는 탐색에 의존한다는 연구를 수행했습니다. 웹 사이트의.

이 자습서에서는 메뉴 디자인 및 모범 사례 측면에서 사용성에 중점을 둘 것입니다.

사이트 탐색

웹 브라우징 사이트의 내부 링크 아키텍처를 나타내는 일반적인 용어입니다. 무엇보다 사용자가 웹 사이트에서 관련 콘텐츠를 쉽게 찾을 수 있도록 돕는 것이 주요 목적입니다. 탐색 구조는 또한 웹 사이트 사이트 맵의 기초를 형성하여 Google과 같은 거대 검색 엔진이 그에 따라 웹 사이트 색인을 생성하는 데 도움이됩니다.

물론 효율적인 웹 사이트 탐색에 기여할 수있는 몇 가지 사항이 있지만 지금은 특히 메뉴, 이는 일반적으로 사용자가 새 웹 사이트를 방문 할 때 상호 작용하는 첫 번째 페이지이기 때문입니다.

메뉴에서 탐색

내비게이션 메뉴는 웹 사이트의 전면과 중앙에 위치하는 경향이 있습니다 (비상 적으로 말하면 중앙 메뉴가 좋을 것입니다). 카테고리가 다른 웹 사이트의 경우 드롭 다운 기능은 공간을 절약하고 카테고리 화 요구를 충족하는 옵션입니다.

요즘에는 미니멀리즘 (및 모바일 사용 편의성)을 보여주기 위해 많은 웹 사이트에서 햄버거 메뉴 디자인 (본질적으로 세 개의 짧은 수평선이있는 사각형으로 한 번의 클릭으로 메뉴를 확장 할 수 있음을 나타냄)을 채택했습니다. .

스토어프론트 테마 WooCommerce 오른쪽 상단 모서리에서 실용적인 예를 제공합니다.

menu.png의 예

햄버거 스타일 웹 사이트 메뉴 디자인은 개발자가 매우 작은 공간에서 사용 가능한 탐색을 만드는 책임이 있기 때문에 모바일 웹 사이트 디자인과 관련하여 가장 인기가 있습니다. 물론 모바일 사이트에서 사용할 수있는 드롭 다운 메뉴를 만드는 것은 어려울 수 있습니다!

즉, 많은 디자이너 경멸 햄버거 메뉴는 사이트 탐색을 재미 있고 기능적으로 만드는 창의적인 방법을 찾는 새로운 운동으로 이어졌습니다. 이를 염두에두고 일반적인 웹 사이트 메뉴 디자인 휴리스틱은 각 웹 페이지 상단에 메뉴 탐색을 영구적으로 배치하여 사용자가 쉽게 길을 찾거나 다음 페이지를 검색 할 수 있도록합니다.

메뉴 디자인 모범 사례

대부분의 WordPress 테마에는 사전 정의된 웹사이트 메뉴 디자인이 함께 제공됩니다. 그대로 유지하거나 완전히 다시 실행하려는 경우 유용성과 기능을 염두에 두고 메뉴 탐색을 디자인하기 위한 모범 사례는 다음과 같습니다. SEO 당신의 마음에:

  • 가능하면 드롭 다운 메뉴를 피하십시오. 많은 웹사이트에서는 공간을 절약하기 위해 드롭다운 메뉴를 사용하기를 좋아하지만 권장되지 않습니다. 특히 다음과 같은 경우에는 더욱 그렇습니다. SEO 인위적인. 사용성 테스트 결과 대부분의 사람들이 드롭다운 메뉴를 좋아하지 않는 것으로 나타났습니다. 인간의 눈은 손보다 빠르게 작동하기 때문에 사람들은 무엇을 클릭할지 이미 결정했는데 다른 것이 떨어져서 특정 페이지에 대한 방문 횟수가 줄어들면 짜증이 나기 때문입니다. 즉, 디자인 중인 사이트에 드롭다운 메뉴 없이는 할 수 없는 콘텐츠가 너무 많으면 "메가 드롭다운" 메뉴가 약간 더 적합합니다.
  • 설명력이 있어야합니다. "서비스"또는 "제품"과 같은 일반적인 단어를 제거하십시오. 대신 제품 또는 서비스 일관된, "일반적인 단어 또는"서비스 "가있는 제품을 실제로 검색하는 사람은 없기 때문입니다. 더 나은 방법은 메뉴 항목의 정확한 이름을 결정하기 전에 SEO 키워드 연구에 포함 된 내용을 정당화하는 것입니다. Orbit Media는설명 라벨 사용이 방법은 검색 엔진이 사이트를 크롤링 할 때 사용자와 사용자 모두에게 이익이되기 때문입니다. 내비게이션은 모든 페이지에 표시되므로 업계와 관련된 용어를 사용하면 Google에 정말 관심이 있음을 알립니다. 특정 주제에 초점을 맞추는 한 모든 페이지의 순위를 매길 수 있습니다.
  • 또한 궤도 미디어는 낙담 네비게이션 기반 에 형식, 처럼'조직 모든 비디오, 모든 인포그래픽 등과 같은 콘텐츠 기반 페이지 사람들이 형식이 아닌 주제로 검색하기 때문입니다.
  • 탐색 메뉴에서 항목의 위치 (또는 레이아웃)가 중요합니다. 사이트 방문자가 가장 자주 검색하는 페이지 인 "정보"페이지, "연락처"페이지 등과 같이 웹 사이트에서 제공 할 일반 페이지 목록이 있습니다. (명확하게 표시되기 때문에) 트래픽이 높은 이러한 눈에 잘 띄는 페이지는 종종 참여율이 낮습니다. Google Analytics를 사용하여 가장 중요한 페이지를 결정하고 최적화 기회를 찾으십시오. 가장 중요한 탐색 항목을 먼저 표시합니다 (또는 메뉴 표시 줄의 방향에 따라 상단).
  • 최대 XNUMX 개의 메뉴 항목 유지 최대 7 . 연구에 따르면 사람들은 한 번에 최대 7 개의 정보 만 기억하거나 처리 할 수 ​​있습니다. 메뉴 항목 카테고리가 너무 많으면 검색 순위에 영향을 미칠 수 있습니다. Google은 관련성이 없어 보이는 카테고리가 너무 많으면 사이트가 특정 틈새 시장에 맞지 않았다는 신호로 해석 할 수 있습니다. XNUMX 개 이상의 메뉴 항목이 필요한 경우 하위 범주로 나눕니다.

위에서 언급 한 점과 관련하여 United의 웹 사이트 메뉴 디자인은 너무 복잡합니다 (방문자를위한 옵션이 너무 많습니다).

나쁜 menu.png 예
다음은 블로그에서 피해야 할 절대적인 예입니다. 반대로 Cafebond.com은 간단한 분류와 관련하여 잘 구성된 예를 제공합니다.
좋은 메뉴 예 .png
  • 메뉴 감사 때때로. 거의 클릭하지 않는 링크를 제거하십시오. 방문자와 검색 엔진을 더 잘 설명하도록 일반 레이블의 이름을 변경합니다.

이 팁이 모두 끝났으므로 WordPress에서 다양한 메뉴를 더 잘 구성 할 수 있기를 바랍니다. 나열되지 않은 관행이 있습니까? 자유롭게 게시하십시오.