Web Guide햄버거 메뉴메뉴 노출모바일 UX
햄버거 메뉴의 장단점
세 줄 아이콘 하나에 모든 메뉴를 넣는 것이 정답일까요.
편하지만 클릭이 줄어드는 대가가 있습니다.
01장점
널리 쓰이는 데는 이유가 있습니다.
점검 항목
공간 절약
화면을 콘텐츠에 씁니다.
익숙함
대부분 아이콘 의미를 압니다.
확장성
메뉴가 많아도 담깁니다.
구현 간단
널리 쓰여 사례가 많습니다.
깔끔함
화면이 정돈돼 보입니다.
일관성
모든 페이지에서 같은 위치.
02단점
보이지 않으면 눌리지 않습니다.
01
발견 저하
숨어 있어 이용이 줄어듭니다.
02
한 번 더
눌러야 목록이 보입니다.
03
구조 파악 어려움
사이트 전체가 안 보입니다.
04
중요 메뉴 매몰
핵심도 같이 묻힙니다.
05
전환 감소
문의 경로가 멀어집니다.
06
고연령 이용자
아이콘 의미를 모를 수 있습니다.
03보완 방법
전부를 넣지 않는 것이 핵심입니다.
핵심 노출주요 2~3개는 밖에 둡니다.
글자 병기아이콘 옆에 메뉴라고 씁니다.
하단 탭 병행자주 쓰는 것은 아래 고정.
전환 버튼 분리문의는 메뉴 밖에.
본문 내 링크메뉴 말고도 길을 만듭니다.
검색 제공찾기 어려운 사이트일수록.
04판단 기준
사이트 성격에 따라 다릅니다.
써도 되는 경우
메뉴가 많은 대형 사이트 · 재방문 이용자 위주 · 탐색보다 검색 중심
피해야 할 경우
메뉴가 몇 개 안 됨 · 처음 온 이용자 위주 · 특정 메뉴 유도가 목표
CHECK POINT
□ 메뉴 개수가 정말 많은가
□ 핵심 메뉴를 밖에 노출했는가
□ 아이콘에 글자를 함께 넣었는가
□ 문의 버튼이 메뉴 안에만 있지 않은가
□ 본문 안에도 이동 경로가 있는가
□ 주 이용층이 아이콘을 이해하는가
□ 메뉴 클릭 데이터를 확인했는가
□ 대안을 검토했는가
#햄버거 메뉴#메뉴 노출#모바일 UX#내비게이션#전환#발견성#설계#반응형#웹비스타#홈페이지 제작