Web Guide메가메뉴드롭다운메뉴 설계
메가메뉴를 써야 할 때와 쓰지 말아야 할 때
메뉴에 마우스를 올리면 화면 절반이 펼쳐지는 그 방식입니다.
항목이 많을 때는 유용하지만, 적을 때 쓰면 과해 보이고 불편합니다.
01메가메뉴가 유용한 경우
하위 항목이 많고, 방문자가 원하는 곳으로 바로 가는 것이 중요한 사이트입니다. 제품이 많은 제조사나 서비스가 다양한 기업에 적합합니다.
한 번에 전체 구조를 보여주므로 탐색 단계가 줄어듭니다.
1
하위 항목이 많다
메뉴당 5개 이상. 일반 드롭다운으로는 길어집니다.
2
분류가 여러 층이다
대분류 아래 중분류가 있는 구조.
3
바로 가기가 중요하다
방문자가 목적지를 알고 오는 경우.
4
이미지가 도움이 된다
제품 썸네일이나 아이콘을 함께 보여줄 수 있습니다.
02쓰지 말아야 할 경우
하위 항목이 두세 개뿐인데 메가메뉴를 쓰면 화면만 크게 열리고 내용은 비어 보입니다. 과해 보이고 오히려 불편합니다.
또 모바일에서는 메가메뉴가 그대로 쓰이지 않으므로 별도 설계가 필요합니다.
메가메뉴가 과한 경우
하위 항목 2~3개 · 넓은 영역이 비어 보임 · 마우스가 조금만 벗어나도 닫힘 · 단순 드롭다운이 나음
메가메뉴가 맞는 경우
하위 항목 다수 · 분류가 여러 층 · 이미지 병행 · 전체 구조를 한눈에 보여줄 필요
03쓴다면 지킬 것
메가메뉴는 잘못 만들면 오히려 불편합니다. 마우스를 조금만 움직여도 닫히거나, 열리는 속도가 느리면 짜증을 유발합니다.
몇 가지 기본만 지켜도 훨씬 쓸 만해집니다.
닫힘 여유마우스가 잠깐 벗어나도 바로 닫히지 않게 합니다.
열림 속도즉시 열리되, 지나가기만 해도 열리지 않게 약간의 지연을 둡니다.
구조 표현분류별로 묶고 제목을 답니다. 나열만 하면 찾기 어렵습니다.
항목 수 제한너무 많으면 오히려 못 찾습니다. 주요 항목만 노출하고 '전체 보기'를 둡니다.
키보드 접근탭으로 이동하고 선택할 수 있어야 합니다.
04모바일에서는 다른 방식
메가메뉴는 마우스 호버를 전제로 합니다. 터치에서는 호버가 없으므로 그대로 쓸 수 없습니다.
모바일에서는 목록을 펼치고 접는 방식이나, 단계별로 들어가는 방식으로 바꿔야 합니다.
STEP 01
PC
호버로 펼침
STEP 02
태블릿
탭으로 펼침
STEP 03
모바일
아코디언 또는 단계 진입
STEP 04
공통
전체 메뉴 보기 제공
CHECK POINT
□ 하위 항목 수가 메가메뉴를 쓸 만큼 많은가
□ 항목을 분류별로 묶고 제목을 달았는가
□ 마우스가 잠깐 벗어나도 바로 닫히지 않는가
□ 지나가기만 해도 열리지 않게 지연이 있는가
□ 키보드로 접근할 수 있는가
□ 모바일용 별도 방식이 설계되어 있는가
□ 전체 메뉴를 볼 수 있는 경로가 있는가
#메가메뉴#드롭다운#메뉴 설계#네비게이션#호버#모바일 메뉴#접근성#홈페이지 디자인#웹비스타#홈페이지 제작