웹 플로에서 SEO 및 UX에 친숙한 메가 메뉴를 만듭니다.

인생의 실제 문제 : 아름다운 웹 사이트 ...하지만 고객은 아무것도 찾을 수 없습니다!

상상해보십시오 ... 당신은 모두 돈과 아름다운 웹 플로우 웹 사이트를 만들 때 전용입니다. 현대적인 디자인, 현대 애니메이션은 매끄럽고 인상적입니다. 그러나 슬픈 이야기 ... 고객이 들어 와서 "혼란스러워"! 그들은 원하는 페이지를 찾을 수 없거나 서비스가 무엇인지 알지 못하거나 찾을 수없는 페이지를 찾지 못합니다. 마지막으로 클릭하여 불행히도 닫으십시오. 이 문제는 우아한 쇼핑몰을 만드는 것과 같습니다. 그러나 고객이 걸어 가서 낙담 할 때까지 길을 잃어버린 명확한 신호는 없습니다. 그리고 맨손으로 걸어가십시오 ... 이것은 모든 웹 사람들의 악몽입니다.

이 문제의 출처는 종종 "내비게이션 메뉴"또는 웹 사이트의 탐색 메뉴에 숨겨져 있습니다. 특히 많은 정보가있는 웹 사이트에는 많은 서비스가 있으며, 더 이상 대답하지 않는 계층에 쌓인 일반 드롭 다운 메뉴를 사용하는 많은 범주가 있습니다. 중요한 정보를 숨기고 사용자를위한 실망스러운 경험을 창출하기 때문입니다.

삽화에 대한 프롬프트 : 사용자 이미지가 눈살을 찌푸립니다. 복잡한 웹 메뉴와 컴퓨터 앞에서 혼란스러워. 미로처럼 앞뒤로 연결되는 선으로 웹 사이트에서 "잃어버린"느낌을 전달합니다.

그 문제가 발생한 이유 : 웹이 자라는 날에 "일반 메뉴"의 함정

복잡한 탐색 문제는 자연스럽게 발생하지 않습니다. 그러나 웹 사이트의 "성장"으로 인해 처음에 "계획"이 누락 된 것으로 발생합니다. 우리는 몇 페이지 만있을 수 있습니다. 그러나 비즈니스가 증가 된 제품/서비스를 확장하면 기사는 매주 작성되었습니다. 우리의 메뉴는 정리하지 않고 모든 것을 채우는 옷장처럼 "부종"과 "엉망"을 시작했습니다. 다음으로 인한 주요 원인 :

• 정보 아키텍처 부족 (IA) : 원하는대로 메뉴에 새로운 얼굴을 추가하는 경향이 있습니다. 정보 아키텍처가 무엇인지 이해하기 위해 사용자가 정보를 찾는 방법에 대한 전반적인 그림에 대해 생각하지 않고 가장 중요한 출발점입니다.
• 원래 드롭 다운 : 사용자가 마우스를 점차적으로 쫓아 가야하는 전통적인 메뉴를 고수하십시오. 정보가 많은 웹 사이트에는 적합하지 않습니다. 중요한 옵션을 숨기기 때문에 사용자가 모든 개요를 보지 못하게합니다.
• 사용자의 관점을 간과하십시오 : 우리는 "웹 소유자"의 관점에서 메뉴를 설계합니다. 이는 어디에 있는지 알고 있지만 처음으로 온 "새로운 사용자"가 명확하고 이해하기 쉬운 "지도"를 원한다는 것을 이해하지 못할 것이라고 생각하는 것을 잊었습니다.

귀하의 웹 사이트가 더 크고 복잡 할 때 메뉴 구조는 단지 아름다움에 관한 것이 아닙니다. 그러나 디지털 비즈니스 경쟁에서 "생존"의 문제입니다.

그림을위한 프롬프트 : Siteemap 이미지 (siteemap). 처음에는 순서대로 연결된 몇 개의 상자가 있습니다. 그리고 함께 연결된 큰지도가 된 또 다른 이미지는 계획이 부족한 계획을 전달합니다.

왼쪽에 영향을 미치는 영향 : UX와 SEO의 보이지 않는 재난.

나쁜 탐색 메뉴를 갖는 것은 단순히 "성가신"것이 아니라 비즈니스 목표와 SEO 순위에 직접적인 영향을 미치는 "사라집니다"입니다. 이러한 끔찍한 효과를 살펴보십시오.

• 채권 속도가 높습니다 : 사용자가 몇 초 안에 원하는 정보를 찾을 수없는 경우. 그들은 즉시 뒤로 버튼을 누릅니다. 이 신호는 귀하의 웹 사이트가 "유용하지 않음"을 Google에 보냅니다.
• 전환율 DANT : 제품 구매, 양식 작성 또는 연락 여부 ... 사용자가 해당 대상 페이지에 도달하지 않으면 변환은 결코 발생하지 않습니다.
• 사용자 경험 (UX) : 나쁜 경험은 브랜드로 나쁜 추억을 만들어냅니다. 다시 돌아올 수있는 기회는 거의 0입니다.
• 심각하게 부정적인 영향을 미칩니다. GoogleBot은 메뉴와 링크 구조를 사용하여 웹 사이트 (크롤링 및 인덱싱)를 이해하고 만듭니다. 메뉴가 복잡하고 중요한 페이지에 대한 링크가 어려운 경우 Google은 해당 페이지가 표시되지 않아 Google에서 순위를 매
• 마케팅 예산 상실 : 사람들이 웹에 입장 할 수있는 많은 돈을 버릴 수 있습니다. 그러나 그들이 들어 와서 당신과 동등하게 길을 잃으면 "돈을 불 태우십시오"

"메뉴"와 같은 작은 것들이 생각보다 무서운 체인에 영향을 미친다는 것을 알 수 있습니까? UX 구조 개선은 매우 중요합니다. 투자자 관계 와 같은 높은 신뢰가 필요한 웹 사이트에서

그림의 프롬프트 : 3 그래프 이미지 표시 효과 : 첫 번째 "바운스 속도"러시, 두 번째 "변환 속도"가 떨어지고, 세 번째 막대 "SEO 순위"가 슬픈 얼굴 아이콘으로 급락했습니다.

해결책이 있습니까? 그리고 시작 장소 : "메가 메뉴", 많은 정보를위한 백인 승마 기사

국제적으로 받아 들여지고 매우 강력한이 문제에 대한 해결책은 ** "메가 메뉴"**입니다! 메가 메뉴는 호버 사용자가 클릭 할 때 확장되거나 다양한 레벨에서 모든 탐색 옵션을 표시 할 때 확장되는 대형 탐색 메뉴입니다. 동시에, 그것은 긴 목록을 가진 드롭 다운 일뿐 만 아니라 잘 구성된 "제어판"입니다. 사용자가 모든 전체 이미지를보고 원하는 부분으로 즉시 교차 할 수 있도록 도와줍니다.

Nielsen Norman Group 에 따르면 Mega 메뉴는 전통적인 메뉴의 문제를 직접 해결하는 데 도움이되기 때문에 매우 잘 작동합니다.

그리고 어디에서 시작해야합니까?

키는 즉시 웹 플로로 이동하는 것이 아니라 ** "ia) ** **입니다.

1. 모든 정보를 수집하십시오 : 목록, 모든 웹 페이지.
2. 그룹화 (그룹화) : "서비스", "산업 솔루션", "정보", "지식 창고"와 같은 "사용자"(미국이 아님)에게 합리적인 주요 범주와 관련된 그룹을 구성합니다.
3. 계층 구조 생성 : 각 그룹에서 링크의 우선 순위를 정하십시오. 사람들이 먼저보고 싶어하는 링크는 무엇입니까?
4. 명확한 단어 (레이블링)를 사용하십시오. 메뉴와 링크의 이름을 지정하십시오. 사람들이 일반적으로 이해하고 쉽고 간단한 단어로

명확한 "청사진"이 있으면 웹 플로우에서 메가 메뉴를 작성하는 것이 쉬워지고 즉시 좋은 방향을 가질 것입니다. 웹 사이트의 SEO와 UX에 직접적인 영향을 미치는 기초입니다 .

그림을위한 프롬프트 : 아이콘이있는 주제로 퍼져있는 메가 메뉴와 여러 레이어를 겹치는 기존 드롭 다운 메뉴의 비교. 깨끗하고 이해하기 쉽습니다

성공했던 실제의 예 : B2B Tech 웹 사이트가 메뉴를 변경했을 때 리드는 200%증가했습니다.

더 명확 해지려면이 문제에 직면 한 B2B 기술 회사의 사례를 높이고 싶습니다. 그들의 웹 사이트에는 많은 소프트웨어 제품이 있으며 많은 산업 솔루션 (금융, 소매, 생산)이 있으며 큰 지식 창고 (기사, 사례 연구, 화이트)가 있습니다. 원래 메뉴는 영업 팀이 불만을 제기 할 때까지 "무엇이든 찾아"하는 3 단계 드롭 다운 메뉴이지만 고객은 전화를 걸 수 있지만 웹에서 기본적인 질문을 찾을 수 있습니다.

해야 할 일 : 팀은 웹 플로에서 메가 메뉴를 사용하여 모든 새로운 내비게이션 메뉴를 "점검"하기로 결정했습니다.

• "제품"메뉴 : 짧은 설명과 의미의 의미로 모든 소프트웨어 이름 표시
• "솔루션"메뉴 : "산업"및 "비즈니스 크기"에 따른 솔루션 그룹.
• "리소스"메뉴 : "블로그"열, "사례 연구"및 "다운로드"로 나뉘어 최신 기사 또는 흥미로운 사례가 하이라이트로 나뉩니다.

결과 : 3 개월 동안 새로운 메뉴를 출시 한 후, 웹의 사용자 (현장 시간)의 사용자가 두 배가되었을 때 Boundce Rate는 40%감소했습니다. 그리고 가장 중요한 것은 다양한 솔루션의 "품질 리드"가 200%이상 증가했습니다. 결국 고객은 회사가 실제로 자신의 요구를 충족시키는 솔루션을 가지고 있음을 "발견"했기 때문입니다. 이것은 변화하는 훌륭한 내비게이션의 힘입니다. "방문자"는 진정으로 "대상 고객"이됩니다.

그림을위한 프롬프트 : 웹 사이트의 전후 화면 이미지. 웹 사이트는 오래되고 사용하기 어렵습니다. 후에는 깨끗한 메가 메뉴와 명확한 카테고리가 있습니다. 로드 그래프가 더 높은 리드를 보여줍니다

따르고 싶다면 어떻게해야합니까? (즉시 사용할 수 있습니다) : 손으로 메가 메뉴를 만들어 셰이크 웹 플로우 웹 플로우를 만듭니다.

웹 사이트를 변경할 수있는 메가 메뉴를 만들 준비가 되었습니까? 웹 플로에는 "mega menu"라는 구성 요소가 없지만 웹 플로의 기본 도구를 사용하여 유연하고 강력하게 만들 수 있습니다. 단계를 보자 :

1 단계 : 네비게이터의 구조

웹 플로의 Navbar 구성 요소를 사용하여 시작하십시오. 내부에서`Nav 메뉴 '는'드롭 다운 '을`드롭 다운 목록에 추가하는'드롭 다운 '은 우리가 메가 메뉴를 만들 수있는 영역입니다.

2 단계 : 그리드 또는 Flexbox를 사용하여 열을 배열하십시오.

'divdown 링크'를 삭제하십시오. 'divdown lists'에 'dropdown list'에 'dropdown 링크'를 삭제하십시오. 'div block'대신 'dropdown list'에 'dropdown list'가 있습니다. 이것은 메가 메뉴의 기본 컨테이너입니다. 콘텐츠를 쉽고 비례 적으로 구성하는 데 도움이됩니다.

3 단계 : 내용 및 링크를 입력하십시오.

각 그리드 채널에서 컨텐츠를 바로 넣을 수 있습니다. 권장 방법은 다음과 같습니다.

• 그룹 제목 : 카테고리 이름 (예 : "우리의 서비스", "산업 솔루션")의 이름에 'Heading'(예 : H4 또는 H5)을 사용하면 링크가 아닌 탁월한 모습을 보입니다.
• 링크 목록 : 그룹 주제에서 각 작은 페이지의 '링크 차단 또는 텍스트 링크'를 배치하십시오.
• 관심 추가 (비주얼) : ``Imagey 또는``````작은 ''``작은 ''````작은 ''가 의미를 전달하는 데 도움이 될 수 있습니다. Smashing Magazine이 권장하는 디자인 원칙에 따라 뛰어난 프로모션 이미지의 최종 칼럼

4 단계 : UX에 아름답고 친절한 사용자 정의.

웹 플로우 디자이너의 성능을 사용하여 브랜드와 일치하도록 스타일을 사용자 정의하십시오. 편안한 공간 (공백)을 갖도록 패딩을 놓고 링크 .

5 단계 : 모바일에 대한 반응을 보이십시오 (매우 중요합니다!)

메가 메뉴는 데스크탑에 전체 결과 만 표시됩니다. 태블릿 또는 모바일 뷰로 전환 할 때 메뉴를 일반 메뉴 (햄버거 메뉴)로 다시 붕괴시켜야합니다. 모바일에서 메가 메뉴 div (`display)를 숨기고 준비된 표준 NAV 메뉴를 사용할 수 있습니다. 모바일 사용자의 최고의 경험을 위해

이 부분을 관리하기 위해 전문가가 필요하다면 웹 플로우 웹 사이트 개발 팀이 도와 줄 준비가되었습니다.

그림을위한 프롬프트 : 네비게이터 패널을 보여주는 웹 플로우 디자이너 화면은 드롭 다운, 그리드 및 제목 구조를 명확하게보고 각 단계에서 화살표가 있습니다.

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

질문 : 메가 메뉴, 웹 다운로드가 느려질까요?
답변 : 웹 플로에서 올바르게 생성 된 경우 Div, Grid 및 이미 가볍고 효과적인 링크와 같은 기본 요소를 사용하기 때문에 전혀 아닙니다. 메뉴에 큰 이미지 나 비디오를 넣지 않는 한 속도에 큰 영향을 미치지 않습니다.

질문 : Mega 메뉴가 SEO에 정말 좋은가요? Google이 혼란 스럽습니까?
답 : 아주 좋아요! 반면에 Google은 웹 사이트 구조를 더 잘 이해하는 데 도움이됩니다. 다양한 중요한 페이지에 대한 명확한 내부 링크를 생성하기 때문입니다. 최상위 레벨은 "링크 quality"또는 "seo juice"를 해당 페이지에 더 잘 배포하는 데 도움이됩니다. 또한 사용자 참여 신호 (예 : 바운스 속도 감소, 거주 시간 추가)를 늘리는 데 도움이되며, 이는 순위에 큰 긍정적 인 요소입니다.

질문 : 휴대폰은 어떻게 메가 메뉴를 보여 주어야합니까?
답 : 모바일에 전체 메가 메뉴를 표시하지 마십시오! 즉시 사용자 경험을 파괴합니다. 클릭 할 때 수직 링크 (수직 목록)가 다양한 링크에 대한 아코디언 (수직 목록)을 표시 할 수있는 표준 모바일 메뉴 (햄버거 메뉴)로 다시 붕괴되는 가장 좋은 방법은 다양한 링크에 대한 아코디언 (수직 목록)을 표시 할 수 있습니다. 주문을 위해

질문 : 메가 메뉴에 웹에 모든 페이지를 넣어야합니까?
답 : 필요하지 않습니다. 중요한 의무를 선택하고 사용자의 여정 (사용자 여정)에만 도움이됩니다. 너무 많은 링크를 착용하면 메뉴와 초점이 부족합니다. 웹 사이트의 여러 부분에 대한 "메인 문"으로 의무를 선택해야합니다.

그림을위한 프롬프트 : 이미지 아이콘, "속도", "SEO"및 "모바일"을 나타내는 작은 아이콘이있는 큰 물음표 (?). 각 질문에 답변합니다.

이해하기 쉬운 요약 + 노력하고 싶어

이 시점에서 메가 메뉴는 아름다운 "디자인 트렌드"일뿐 만 아니라 웹 플로우에서 매우 강력한 "전략적 비즈니스 도구"라고 생각합니다. 사용자에게 명확한 "지도"로 "아름답지만 잃어버린"웹 사이트의 클래식 클래식 문제를 해결하는 데 도움이됩니다. 그들이 원하는 것을 빠르고 쉽게 찾게합니다

메가 메뉴를 계획하고 만드는 데 투자가 강합니다. ** 하나는 탁월한 사용자 경험 (UX) **이 브랜드에 대한 인상과 충성도가 높고 **는 Google이 웹 사이트를 좋아하고 상금으로 더 나은 순위를 제공하는 데 도움이되는 강력한 SEO 구조 **를 제공하는 투자입니다.

더 이상 비즈니스 성장을 방해하는 "병목 현상"으로 지저분한 탐색 메뉴를 두지 마십시오. 일반 메뉴를 변경할 때입니다. 고객을 열고 성공하도록 안내하는 큰 문이 되려면.

지금 돌아가서 웹 플로우 웹 사이트 메뉴를 탐색하십시오. 사용자와 SEO에 대한 답입니까? 충분히 좋습니까? 여전히 ... "메가 메뉴"를 만들 시간입니다! UX와 SEO를 모두 이해하는 전문가가 필요하다면 완벽한 메뉴를 만드는 데 도움을주십시오. Vision X Brain Team은 항상 조언을 준비했습니다!

삽화를위한 프롬프트 : 컴퓨터 화면에 아름답고 명확한 메가 메뉴가있는 웹 사이트를 사용하는 동안 사용자 이미지가 행복하고 만족 스럽습니다. 옆에 떠오르는 심장 모양의 기호와 그래프로

‍