33.웹사이트 네이게이션에 잘 작동하는 메가 메뉴

요약:

크고 직사각형 형태의 메뉴는 내비게이션 옵션을 그룹화하여 스크롤을 없애고, 타이포그래피, 아이콘, 툴팁 등을 사용해 사용자의 선택을 설명한다.

**메가메뉴(mega menu, 때로는 megamenu로 표기)**는 확장 가능한 메뉴의 한 유형으로, 많은 선택지를 2차원 드롭다운 레이아웃으로 보여준다. 많은 옵션을 수용하거나 하위 페이지를 한눈에 보여주기에 훌륭한 디자인 선택이다.

다음 스크린샷에서 볼 수 있듯, 메가메뉴의 특징은 다음과 같다:

• 내비게이션 옵션이 그룹으로 나누어진 큰 2차원 패널

• 레이아웃, 타이포그래피, 때로는 아이콘을 통해 내비게이션 선택지를 구조화

• 모든 항목이 한눈에 보이며 스크롤 필요 없음

• 상단 내비게이션에서 활성화 시 수평 또는 수직 형태, 왼쪽 내비게이션에서는 메가 플라이아웃 형태로 나타날 수 있음(예시는 없음)

• 메뉴 옵션은 호버, 클릭, 탭으로 표시됨

NovaScotia와 Moleskine 사례에서 보듯, 메가메뉴는 이미지나 기타 풍부한 콘텐츠를 배치할 충분한 공간을 제공한다. 메가메뉴에 포함된 이미지는 사용자가 올바른 옵션을 선택하는 데 도움이 된다.

또한 메가메뉴는 디자이너가 사이트 정보 구조의 여러 단계를 보여줄 수 있게 해준다. 위 다섯 가지 예시 중 세 가지(Dave Ramsey, Game Stop, John Lewis)에서는 메가메뉴에 1단계 카테고리와 2단계 카테고리가 모두 포함되어 있다.

메가메뉴가 일반 드롭다운을 능가하는 이유

사용자 테스트 결과, 메가메뉴가 효과적이라는 것이 확인되었다. 이를 뒷받침하는 근거는 다음과 같다:

• 많은 기능을 가진 큰 사이트에서는 일반 드롭다운 메뉴가 대부분의 옵션을 숨기는 경우가 많다. 스크롤할 수는 있지만, (a) 번거롭고, (b) 스크롤하면 메뉴 상단의 옵션이 가려진다. 따라서 모든 선택지를 한눈에 비교할 수 없고, 단기 기억에 의존해야 한다. 사용자는 이미 많은 정보를 처리하고 있으며, 단기 기억을 더 사용하게 하면 사이트에서 작업을 수행하는 능력이 떨어진다. 메가메뉴는 모든 옵션을 한눈에 보여주므로, 기억하려고 하기보다는 바로 볼 수 있다.

• 일반 드롭다운은 그룹화 기능을 지원하지 않으며, 들여쓰기 같은 꼼수(예: 두 번째 수준 옵션 앞에 공백 문자 추가)로만 구현할 수 있다. 메가메뉴는 항목 간의 관계를 시각적으로 강조할 수 있어 사용자가 선택지를 이해하는 데 도움을 준다.

• 텍스트만으로도 충분할 수 있지만, 이미지나 아이콘은 많은 정보를 쉽게 전달할 수 있다(Moleskine 예시 참조). 메가메뉴는 필요에 따라 이미지를 쉽게 사용할 수 있게 해준다. 텍스트만 사용하더라도, 중요한 링크와 덜 중요한 링크를 구분할 수 있는 풍부한 타이포그래피를 활용할 수 있다.

⸻

호버 시 메가메뉴 표시 시 고려 사항

메가메뉴가 호버로 표시되는 경우, 두 가지 사용자 의도를 구분하는 것이 중요하다:

1. 사용자가 단순히 화면의 목표 지점을 향해 마우스를 이동하는 중, 메가메뉴 링크를 지나치게 되는 경우

2. 사용자가 내비게이션 카테고리를 실제로 보고 더 많은 정보를 확인하려는 경우

두 번째 상황에서만 메가메뉴를 열어야 하며, 첫 번째 상황에서는 열면 안 된다.

이를 위해, 메가메뉴의 반응 속도를 너무 빠르게 설정하지 않는다. 포인터가 0.5초 동안 멈춰 있을 때까지 아무 것도 표시하지 않는다(메가메뉴나 툴팁 등). 이 지침을 지키지 않으면, 사용자가 마우스를 이동할 때 화면이 깜빡여 불편하다.

타이밍 규칙:

1. 0.5초 동안 대기

2. 포인터가 여전히 네비게이션 항목 위에 있으면, 0.1초 내에 메가메뉴 표시

3. 포인터가 네비게이션 항목과 드롭다운 영역 밖으로 0.5초 동안 벗어나면, 0.1초 내에 메뉴 제거

예외:

최적 구현에서는 사용자가 네비게이션 항목에서 드롭다운 내 목표로 이동할 때 이를 감지한다. 포인터가 이동 경로에 있을 때, 드롭다운은 계속 표시된다. 이는 **대각선 문제(diagonal problem)**를 해결하는 추가 지침으로, 사용자가 드롭다운 내의 항목으로 이동 중일 때 메뉴가 사라지지 않도록 한다.

위 예시에서 사용자는 먼저 Sport & Leisure 네비게이션 항목을 가리킨 후 Haberdashery를 선택하려 한다. 이 두 지점 사이를 이동하는 과정에서 포인터가 Baby & Child 항목을 지나치게 된다. 많은 사용자는 포인터를 매우 빠르게 이동하기 때문에 활성 영역을 0.5초 미만으로 벗어나지만, 느리게 움직이는 사용자나 연령대가 높은 사용자는 메뉴 항목을 가리키는 도중 드롭다운이 사라져 매우 불편함을 느낄 수 있다.

⸻

메가메뉴 내 옵션 그룹화

주요 그룹화 지침은 다음과 같다:

• 관련 항목끼리 묶기: 카드 소팅(card-sorting) 연구를 통해 사용자의 기능에 대한 정신 모델을 파악한 뒤, 관련 세트로 옵션을 묶는다.

• 중간 수준의 세분화 유지:

• 너무 많은 옵션을 가진 큰 그룹은 스캔하는 데 시간이 많이 걸려 불편하다.

• 반대로 그룹이 너무 작으면 메가메뉴에 지나치게 많은 그룹이 생겨 사용자가 이해하는 데 시간이 걸린다.

• 간결하면서 설명적인 그룹 라벨 사용:

• 웹 작성 기본 규칙 준수: 핵심 정보를 담은 단어를 앞에 배치하고, 조어 사용 금지

• 동사의 기본형(“shop”)이 -ing 형태(“shopping”)보다 일반적으로 좋다

• 라벨 간 구분 명확히 하기 (예: JohnLewis.com의 Gift by Interest와 Gift by Occasion는 구분이 어려움)

• 그룹 순서 지정: 기능의 자연스러운 순서나 중요도에 따라 배열, 가장 중요한 그룹이나 자주 사용하는 그룹은 좌측 상단에 배치

• 각 선택지는 한 번만 표시: 옵션 중복은 사용자가 동일한 항목인지 혼동하게 하며, 인터페이스를 불필요하게 복잡하게 만든다

⸻

메가메뉴 단순화

• **“단순하게 유지”**라는 일반적인 사용성 지침은 메가메뉴에도 적용된다.

• 아무거나 넣을 수 있다고 해서 넣어서는 안 된다.

• 단순성은 **프레젠테이션뿐 아니라 상호작용 의미(Interaction Semantics)**에도 적용된다.

• 옵션이 적을수록 스캔, 이해, 오류 발생 가능성이 줄어든다.

• GUI 위젯 등 복잡한 상호작용 요소는 피해야 한다.

• 메가메뉴는 일시적인 화면 요소이므로, 복잡한 상호작용은 **대화 상자(Dialog Box)**가 적합하다.

• 대화 상자는 표준적인 종료 방법(OK/Cancel 버튼)을 제공하고, 사용자가 필요하면 화면 내 위치를 이동할 수 있다.

• 메가메뉴 내에 검색창을 숨기는 것도 바람직하지 않다.

• 검색창은 항상 페이지에 표시되어야 하며, 메가메뉴를 활성화해야만 보이게 하면 안 된다.

• 텍스트 필드와 버튼 같은 GUI 위젯은 메가메뉴를 무거운 상호작용 영역으로 만들어 단순 내비게이션 메뉴 기능을 방해한다.

⸻

접근성(Accessibility)

• 동적 화면 요소는 접근성 문제를 일으킬 수 있으므로 스크린 리더와 보조 기술을 고려하여 코딩해야 한다.

• 올바르게 코딩했더라도, 화면 확대기를 사용하는 저시력 사용자는 작은 화면에서 메가메뉴의 일부만 볼 수 있어 문제가 발생할 수 있다.

• 스마트폰이나 태블릿 사용자도 마찬가지로, 작은 화면에서는 메가메뉴가 제한적으로만 표시될 수 있다.

예를 들어, 위 JohnLewis.com 스크린샷에서 **화면 확대기(screen magnifier)**를 사용할 경우, 첫 번째 그룹은 보이지만 Gift Food & Alcohol 항목이나 그 오른쪽 그룹들은 보이지 않는다. 전체 메뉴 오른쪽 가장자리에 있는 그림자(drop shadow)는 너무 미묘하여 대부분의 사용자, 특히 시력이 좋지 않은 사용자에게는 도움이 되지 않는다. 사용자는 보이는 내용이 전체 콘텐츠라고 잘못 생각할 수 있으며, 따라서 저시력 고객이 많은 사이트(특히 연령층이 높은 사용자를 타깃으로 하는 경우)에서는 주문을 잃을 수도 있다. 메뉴 경계에 강력한 시각적 신호를 제공하는 것이 이 문제를 완화하는 한 방법이다.

또한, 메가메뉴 내부의 작은 옵션은 터치스크린에서 선택 오류를 일으키고, 지나치게 민감한 표시/숨김 동작은 운동 기능이 제한된 사용자에게 불편을 준다.

메가메뉴 접근성을 개선하는 두 가지 주요 접근법은 다음과 같다:

• 간단한 방법(Simple): 드롭다운 자체를 접근 가능하게 만들지 않는다. 대신, 각 최상위 메뉴 항목을 클릭하면 일반 웹페이지로 이동하도록 하고, 그 페이지에서 모든 드롭다운 옵션을 단순하고 완전히 접근 가능한 HTML로 제공한다.

• 고급 방법(Advanced): jQuery 플러그인을 사용해 메가메뉴를 스크린 리더 접근 가능하도록 백엔드에서 사이트를 편집한다. 이 경우 HTML과 CSS 구조 변경도 필요하다.

부유한 기업이거나 접근성을 특히 중요시하는 경우, 간단한 방법과 고급 방법 모두 구현하는 것이 좋다. 그러나 대부분의 사이트는 간단한 접근법으로 충분할 것이다.

⸻

결론

메가메뉴는 사이트의 탐색성을 개선할 수 있다. (물론 항상 테스트하는 것이 가장 좋다.)

사용자가 더 많은 콘텐츠를 쉽게 찾도록 도와주면, 사이트는 더 많은 판매를 이루거나, 기부 유치, 비영리/정부 사이트의 정보 제공 등 다른 비즈니스 목표 달성에도 도움이 된다.

정확한 내용은 원문 링크를 확인해주세요

https://www.nngroup.com/articles/mega-menus-work-well/