megamenu

메가메뉴 디자인 팁

메가 메뉴란 네비게이션 메뉴의 링크위에 마우스 롤오버 할때 나타나는 대형 메뉴를 말합니다. 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴 링크를 표시할 수 있으며 메인 카테고리별로 차일드링크를 분류 할 수 있습니다. 그렇기때문에 카테고리별 링크를 명확하게 분류하여 메뉴를 찾기 쉽도록 디자인해야 하며 메가메뉴는 주로 대형 웹사이트에서 많이 사용됩니다.









사용자가 메가 메뉴를 오픈햇을때 메인 네비게이션 링크를 따라서 수많은 차일드 링크들이 한꺼번에 노출되는 경우에는 사용자에게 큰 부담을 안겨줄 수 있습니다. 모든 메인/차일드 링크들이 한꺼번에 노출되면서 사용자는 각각의 정보를 스캔해야되는데 복잡한 정보구조로 하나하나 보는데 시간도 오래걸리고 전체적인 네비게이션 경험을 안좋게 만듭니다.

그렇기때문에 모든 링크를 한꺼번에 노출시키는것보단 메인 메뉴 링크를 마우스 롤오버했을때 관련 차일드 링크만 그때그때 실시간으로 노출시키는것이 더 효과적일 수 있습니다.








2단계 뎁스를 가진 메가 메뉴


2단계 뎁스를 가진 메가메뉴 (Progressive Disclosure)


앞서 말한것처럼 사용자에게 불필요한 링크를 숨기면서 효과적으로 사용자가 원하는 관련된 차일드링크만 노출시키는 방법은 주 메인 링크 아래에 또다른 두번째 메인 링크를 좌측에 배치시키는것입니다. 그렇게함으로서 사용자가 두번째 메인 링크를 마우스 롤오버시 필요한 차일드링크만 하나의 그룹으로서 실시간으로 노출시킬 수 있습니다. 이 방법으로 더욱쉽고 빠르게 사용자가 원하는 정보를 스캔할수있는거죠. 이러한 구체적인 방법론을 progressive disclosure라고 부르며 복잡한 정보 계층구조 안에서 사용자가 헷갈리지 않게 필요한 정보만 실시간으로 보여주는 방법입니다.

이 방식이 항상 옳은것은 아니겠지만 복잡한 링크구조를 갖고있는 사이트의 경우 효과적으로 사용자의 네비게이션 경험을 향상시킬 수 있기때문에 추천되는 방식이라고 볼 수 있겠습니다.

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top