Open Enrollment | Subscribe to Target Marketing HERE
Connect
Follow us on
Advertisement
 

E-commerce Link : Go Big or Go Home

5 mega menu implementation best practices for your website

August 2011 By Cristin Siegel
Get the Flash Player to see this rotator.
 

In May, we began exploring the tip of the navigation best practices iceberg. Now I want to move on to a worthy trend in navigation design that's become popular during the past year or so: mega menus.

Mega menus work in conjunction with the global navigation bar to help users move through your website confidently and efficiently. They are among my favorite navigation interactions; particularly for sites with a robust information architecture (IA).

In the Beginning ...
Before mega menus, there were a couple of standard designs for a global navigation bar. The first was a simple static global nav. Clicking one of the buttons on the bar would open another page where additional menu items were available, either in the main content area or listed down the left-hand side. Technically, this method gets the job done. But because there is so little insight into the breadth, depth and organization of site content, it requires a lot of guessing, clicking and tunneling. This is not the most efficient way to connect users with the content they seek.

The second familiar global navigation interaction makes use of cascading dynamic dropdown menus, sometimes called flyouts. When users hover over a global navigation button, they get a dropdown menu listing their choices one level deeper. When they hover over one of the items in that menu, they get another menu with yet more options one level deeper still. While this gives the user more insight into the structure of the site, this multi-level hovering is a usability frustration to say the least.

We've all experienced the annoyance of trying to point from one dropdown menu to the next: On the way to making your next selection, the first menu disappears. BAH! So, how is the mega menu different?

Make It Mega
Mega menus are large navigation panels that appear when hovering over a global nav button. They are different from flyout menus in that they display multiple levels of IA at once with no scrolling. For example, outdoor gear retailer REI groups its content into logical categories and displays those categories and all related sub-options at once through the mega menu. The large mega menu panel allows you to move your mouse from one option to the next with no fear of it doing that pesky disappearing act.

 

SPONSORED CONTENT

MORE ON ONLINE MARKETING >>

FROM THE BOOKSTORE

Reading The Ultimate  Insider’s Guide to Winning Foundation Grants is like peeking at someone’s  secret diary or personal email.  You feel  guilty.  This is privileged information.
Only in this case Martin Teitel WANTS to reveal everything  to you. A
 long-time foundation CEO, he’s fed up with the smoke and mirrors of  
grant seeking. Ultimate Insider's Guide to Winning Foundation Grants

Reading The Ultimate Insider’s Guide to Winning Foundation Grants is like peeking at someone’s secret diary or personal email. You feel guilty. This is privileged information. Only in this case Martin Teitel WANTS to reveal everything to you. A long-time foundation CEO, he’s fed up with the smoke and mirrors of...

ORDER NOW

One of the only books for fundraisers on monthly giving! Tips on how to make monthly giving work alongside other fundraising effortsHow to acquire monthly donors through different channels such as email, social media, direct mail, television and radioAnd much, much more! Monthly Giving: The Sleeping Giant

One of the only books for fundraisers on monthly giving! Tips on how to make monthly giving work alongside other fundraising effortsHow to acquire monthly donors through different channels such as email, social media, direct mail, television and radioAnd much, much more!...

ORDER NOW

 

COMMENTS

Click here to leave a comment...
Comment *
Most Recent Comments: