So what is menu stacking you ask. Menu stacking is the design concept of having one horizontal menu stacked on top of another. These separate menus often address different target groups or needs, and can run anywhere from just two menus to eight. I say eight only because I have actually caught a website doing this. There is no real limit to the confusion though, and it is not uncommon to find sites with at least three menus stacked on top of each other.

Menu stacking is a bad idea, and reflects poor planning in regards to site hierarchy along with the poor planning for visitors needs.

Examples of Menu Stacking

The first example of menu stacking comes from Direct TV. They have stacked five different menus all in the header. It’s really only four levels high, but there are five menus within those four levels.

A little user testing on this site reveals visitors trying to use menu 4, as it appears to be the main menu. This works for new members, but unfortunately for their registered members, menu 4 does not disappear after logging in.

This issue is compounded because after logging in, the site displays all of the menu 4’s content in the members area left sidebar. When two prominent menus are displayed to a visitor, the common expectation is that these two menus link to different services or content. In this case they do not, and it creates confusion for a visitor.

Direct TV could even be losing out on Pay Per View sales here. With so much emphasis on menu 4 the users may not notice menu 3, and this is where the Pay Per View ordering takes place under What’s on TV. For registered members, menu 4 needs to go.

Another issue with this websites navigation is that it is not completely clear to a visitor what menu they should use. Menu 4 does seem to be the obvious initial choice, but there are other justifiable menu options for a non-member. Should the new visitor use the menu 4, or should they use menu 2 and register? The menu is confusing, and that orange order now button…order what? Registered menus in no way need menu 1 or 4.  Why are they forced to filter out those menus?

Another example of a menu stacked is one from my favorite magazine, Scientific America. Sadly, my opinion is that they should stick to making magazines.

This site has two stacked menus followed by a typical blog, more/main content section, which in a way acts as a third menu stacked. This particular screenshot was comical to me. I was planning on taking the screenshot of the drop down from the top menu covering up the menu below it. I did manage to do that, but by good timing a popup appeared on top of that blocking my navigation and their content. Looking at that popup, I am also wondering how many visitors to the website are already subscribers. I’m betting a high percentage.

In Scientific America’s website the two stacked menus is almost bearable at first look. The content does seem to be divided, but unfortunately again for this site, they make the mistake of using drop down menus. Don’t get me wrong here, drop down menus are good, but they are an extremely poor choice when used directly over another menu. Please don’t do this to your own site.

I Have a Ton of Content Though

So if you were to use the argument that you have a ton of content, and that all those menus really are required may I suggest looking at a few sites that handle this issue beautifully:

• The White House – Yahoo has indexed at least 60,000 pages of content on this site. They have one menu in header.
• MySpace – Over 2,000,000 pages indexed, powered by Google (another example), one menu in the header.
• WordPress – Nearly 1,000,000 pages indexed, one menu.

These are huge sites that are easily controlled by visitors using  just one navigation menu starting on their home page.

Like this post? Get website tips delivered by email straight to you. Full feed articles are delivered, and are managed by Google's Feedburner service.

Be the first to comment!