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

As important as email marketing is, being an expert at it is no easy task. But do not fret. Email Marketing 2014 provides the trends and best practices you need to follow. You'll find: 21 email trends charts featuring data from Who's Mailing What!Analysis of 11 effective cross-channel emails Best practices covering everything from email copywriting and design to data, metrics, CRM, deliverability and more4 email case studies Email Marketing 2014 Trends, Best Practices & Case Studies

As important as email marketing is, being an expert at it is no easy task. But do not fret. Email Marketing 2014 provides the trends and best practices you need to follow. You'll find: 21 email trends charts featuring data from Who's Mailing What!Analysis of 11 effective cross-channel emails Best practices...

ORDER NOW

To help determine what marketers can do and should be doing with the exponential growth in mobile device ownership, Daniel Rowles gives practical and hands-on training on how to design, implement and measure an effective digital strategy.  Mobile Marketing How Mobile Technology is Revolutionizing Marketing, Communications and Advertising

To help determine what marketers can do and should be doing with the exponential growth in mobile device ownership, Daniel Rowles gives practical and hands-on training on how to design, implement and measure an effective digital strategy. ...

ORDER NOW

 

COMMENTS

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