직관적인 웹사이트 탐색을 위한 최고의 Drupal 8(및 9) 모듈

성공적인 웹사이트의 비결은 무엇입니까? 글쎄, 내가 박쥐에서 바로 생각할 수있는 10 개 이상의 요소가 있습니다. 매력적인 디자인, 페이지 로드 속도, 콘텐츠 품질, 마케팅 노력 등. 성공적인 웹사이트를 이끄는 훌륭한 사용자 경험을 위해 중요하지만 종종 간과되는 요소 중 하나는 직관적인 탐색입니다. Drupal 8에는 웹사이트의 탐색 구조를 개선하기 위한 훌륭한 모듈 세트가 있습니다. 쉽고 직관적인 웹사이트 탐색을 가능하게 하는 최고의 Drupal 8(및 9) 모듈 목록을 선별했습니다. 알아 보려면 계속 읽으십시오.

좋은 웹사이트 탐색은 사이트 방문자가 웹사이트에 도착하는 즉시 정보를 얻을 수 있는 위치를 정확히 알 수 있도록 합니다. 반대로 잘못된 웹사이트 탐색은 전환율을 손상시키고 이탈률을 높입니다. 매력적인 디자인의 웹사이트가 항상 직관적인 탐색을 의미하지는 않습니다. 나는 훌륭한 탐색 구조를 가진 평범한 디자인의 웹사이트를 보았습니다. 그리고 나는 여기저기서 방황하지 않고도 필요한 것을 얻을 수 있다는 것을 알기 때문에 계속 그들에게 돌아갑니다. CrazyEgg에 따르면 사용자가 필요한 것을 찾는 데 3번 이상 클릭하면 안 된다고 합니다.

직관적인 웹사이트 탐색을 위한 요소

웹사이트 방문자는 산만하거나 혼동하지 않고 한 페이지에서 다른 페이지로 원활하게 이동할 수 있어야 합니다. 주의가 산만하거나 혼란스러운 사용자는 연결을 설정하기 전에 웹사이트를 떠날 것입니다. 멋진 디자인도 좋지만 방문자가 연락처 양식을 찾지 못하면 의미가 없겠죠? 그렇다면 좋은 탐색 구조를 구성하는 요소는 무엇입니까?

1. 메인 네비게이션 바

이것은 웹 사이트의 가장 중요한 탐색 요소입니다. 이것은 귀하의 웹사이트 주변의 방문자를 가리키는 링크를 나열하는 가로(때로는 세로) 막대입니다. 좋은 메인 네비게이션 바는 간단하고, 짧고, 일관되고, 유용하고, 눈에 잘 띄어야 합니다.

2. 빵 부스러기

이러한 유용한 탐색 도구는 사이트 방문자가 자신의 위치를 ​​정확히 식별하는 데 도움이 됩니다. 상위 페이지에서 시작하여 현재 페이지로 끝나는 링크의 흔적이며 일반적으로 ">" 또는 "/" 기호로 구분됩니다.

3. 다중 열 메뉴(및 하위 메뉴)

수많은 지점과 하위 지점이 있는 더 복잡한 웹사이트는 다중 열 메뉴를 사용해야 합니다. 다시 말하지만, 이러한 메뉴는 간단하고 탐색하기 쉬워야 합니다.

4. 사이트맵

종종 SEO 부스터로 간주되는 Sitemap은 탐색 보조 도구로도 매우 유용합니다. 일반적인 Sitemap은 전체 웹사이트의 계층 구조를 표시해야 합니다.

5. CTA(클릭 유도문안) 버튼

여기에서 모든 작업이 실제로 발생합니다! 이러한 CTA 버튼의 적절한 배치는 색상, 글꼴 스타일, 크기, 텍스트 등과 같은 다른 것들 사이에서 중요한 역할을 합니다.

6. 사이드바

사이트 방문자의 UX를 향상시키기 위해 페이지별 링크를 추가하기에 좋은 곳입니다. 좋은 사이드바는 너무 길지 않고 단순해야 하며 CTA를 포함하고 적절하게 주문해야 합니다.

7. 하이퍼링크

여기서 우리는 외부보다 내부 연결에 대해 더 많이 이야기하고 있습니다. 하이퍼링크는 직관적이어야 하며 방문자를 예상하는 페이지로 안내해야 합니다(놀랍지 않음). 내부 링크가 있는 것이 SEO에 좋지만 과도하게 사용하지 마십시오. 그렇지 않으면 페이지에 대한 초점을 잃을 위험이 있습니다.

8. 바닥글

바닥글은 무시하기 쉽고 종종 저작권 세부 정보만 표시하는 데만 사용됩니다. 사람들이 페이지가 끝날 때까지 스크롤하지 않는다는 신화는 이제 깨졌습니다. 일반적인 바닥글에는 머리글이나 사이드바 섹션에 표시할 수 없는 링크가 포함되어야 합니다. 또한 연락처 세부 정보와 메일링 리스트 가입 미니 양식이 있을 수 있습니다.

직관적인 탐색을 위한 최고의 Drupal 8(및 9) 모듈

1. 메뉴 블록

Drupal 8 메뉴 블록 모듈의 디자인은 Drupal의 표준 트리 탐색 스타일을 따르지만 핵심 메뉴 모듈에서 제공되는 것보다 더 향상된 기능을 제공합니다. 메뉴 링크 블록을 쉽게 구성하고 시작하고 끝나는 수준을 지정할 수 있습니다. 표시할 수 있는 레벨 수에는 제한이 없습니다. 하위 메뉴 요소를 확장된 상태로 유지하도록 선택할 수 있습니다. 이 모듈의 일부 기본 기능은 Drupal 8 코어로 이식되었습니다. 메뉴 블록 모듈은 Drupal 9도 지원합니다.

2. 쉬운 이동 경로

Drupal 8 Easy Breadcrumb 모듈은 웹 페이지의 현재 URL에서 위치 세그먼트를 추출하여 작동합니다. 수많은 구성 가능한 옵션을 제공하며 기존 Drupal 이동 경로 모듈을 대체할 수 있습니다. 홈 페이지 링크 또는 기타 지정된 링크를 완전히 숨기도록 선택할 수 있습니다. Easy breadcrumb 모듈은 Drupal 9도 지원합니다!

3. 슈퍼피쉬

Drupal 8 Superfish 모듈은 크고 여러 계층의 다중 열 드롭다운 메뉴가 있는 경우에 이상적입니다. 이 모듈은 터치스크린, 화면 판독기 및 기타 키보드 상호 작용에 작동하는 다목적 메뉴 플러그인인 jQuery Superfish 플러그인과 통합됩니다. 마우스 아웃, 애니메이션, 메뉴 링크 숨기기 및 표시, 하위 메뉴가 감지된 경우 화살표 추가 등에 시간 지연을 추가하도록 구성할 수 있습니다. Drupal 9와도 호환됩니다.

4. 사이트맵

Drupal 8 Sitemap 모듈은 간단하고 깨끗하며 사용하기 쉽습니다. 전체 사이트 구조를 깨끗한 계층 구조로 표시할 수 있습니다. 블로그 및 카테고리에 대한 RSS 피드를 생성하고 표시하도록 선택할 수도 있습니다. Sitemap 모듈은 Drupal 9를 지원합니다.

5. 메뉴 항목 역할 접근

이 모듈을 사용하면 메뉴에 액세스 제어를 추가할 수 있습니다. 사용자 역할에 따라 메뉴 항목을 활성화 및 비활성화할 수 있습니다. Drupal 8 메뉴 항목 역할 액세스 모듈을 사용하면 메뉴 항목에 역할 필드(선택 사항)를 입력할 수 있습니다. Drupal 9도 지원합니다.

6. 치즈버거 메뉴

햄버거 메뉴가 훌륭하다고 생각했다면 치즈 버거 메뉴를 확인할 때까지 기다리십시오. Drupal 8 치즈버거 메뉴 모듈에는 몇 가지 훌륭한 기능이 포함되어 있으며 모바일 보기에만 국한되지 않고 데스크톱 보기 및 다양한 화면 크기에서도 작동합니다. 치즈버거 메뉴에 표시할 메뉴 항목을 선택하고 메뉴 제목을 편집할 수 있는 유연성을 제공합니다. Drupal Commerce를 사용하는 경우 메뉴에서 장바구니 또는 매장 전화번호를 표시하도록 선택할 수 있습니다. 분류법은 치즈버거 메뉴의 구조로 선택할 수 있습니다. 치즈버거 메뉴 모듈은 Drupal 9도 지원합니다!

7. 메뉴 간소화

Drupal 8 메뉴 단순화 모듈을 사용하면 Twig 템플릿에서 메뉴를 렌더링할 수 있습니다. 접근성을 가능하게 하고 표준과 호환되는 메뉴 마크업을 사용자화할 수 있습니다. 나뭇가지 템플릿에서 메뉴 트리를 배열로 렌더링하고 메뉴 배열을 완전히 제어할 수 있습니다. 이 모듈은 아직 Drupal 9를 지원하지 않습니다.

8. 전체 제어 관리자 대시보드

Drupal 8 Total Control Admin Dashboard는 유용한 관리 탐색 도구입니다. 모든 관리 도구에 대한 중앙 집중식 허브 역할을 합니다. 대시보드에는 관리 창과 사용자, 분류 체계, 메뉴, 콘텐츠 유형, 사이트 통계, 보기 패널 창 등에 대한 빠른 링크가 표시됩니다. 보기 패널 창을 추가로 사용자 지정할 수 있습니다. 이 모듈은 Drupal 9에서도 작동합니다.

9. Footermap: 바닥글 사이트 맵

이름에서 알 수 있듯이 Drupal 8 Footermap 모듈은 바닥글 블록에 배치할 수 있는 Drupal 웹사이트에 대한 사이트맵을 제공합니다. 사이트맵을 동적으로 생성할 수 있으며 번역 및 캐싱을 지원하도록 쉽게 구성할 수 있습니다. 표시할 메뉴를 선택하고, 메뉴 수준 제한(하위 메뉴)을 설정하고, 메뉴 제목을 활성화하고, 사이트 레이아웃과 일치하도록 CSS를 편집하는 등의 작업을 수행할 수 있습니다. Footermap 모듈은 Drupal 9에서도 작동합니다.