Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm a user of a popular website that uses horizontal menus for navigation. As the site's functionality grows, the number of menu items also grow. As the horizontal space is limited, the design choice seems to be to add more levels to the navigation.

I've warned against this. Could you help me create a solid argument to improve the design?

share|improve this question
    
Well, are you sure they will scale, well, indefinitely? Also, it seems users don't mind scrolling horizontally. –  Jonta Jul 29 '11 at 9:28
add comment

3 Answers

up vote 5 down vote accepted

This is a problem I thought about a lot for our site as we have a lot of content categories. A flat horizontal menu wouldn't come close to working and even drop down menus with multiple sub-levels would probably start getting overwhelmed.

In the end, I settled on a cross between a mega-menu and a tab interface. At present, including the parent categories, we have over 40 linked items in our menu and it could be comfortably doubled or perhaps even tripled by adjusting the height of the menu, the whitespace, and the font size.

Rather than going with a traditional horizontal or even a dropdown, I'd recommend you take a long look at mega-menus. You'll be able to keep some semblance of a horizontal menu, but with tremendous upside and the ability to scale. The mega-menu pattern is even endorsed by Jakob Neilsen as a result of some extensive testing. (He has some great tips in that article for doing it right, too.)

Here are a few mega-menu inspiration articles that should give you a good idea of different ways you can implement this pattern:

And some ways you can implement it:

share|improve this answer
    
Absolutely fabulous. I think Nielson should get a statue somewhere in Silicon Valley, or something. –  GUI Junkie Jul 29 '11 at 9:54
    
You menu is great, bye the way. –  GUI Junkie Jul 29 '11 at 9:54
    
Thanks, it took a while to figure out, but I think it was worth it. –  Virtuosi Media Jul 29 '11 at 9:55
    
And I agree on Neilsen. I think his article should give your arguments some weight as it's based on actual studies. –  Virtuosi Media Jul 29 '11 at 9:58
    
I like your menu too. Very clear. Reminds me of the most important aspect to all of this, which hasn't been mentioned, in that the information architecture has to be as clear and concise as possible, avoid repetition, mislabelling etc –  colmcq Jul 29 '11 at 10:14
add comment

Um... How do you know what you've been ignored? By the fact they didn't immediately redesign their website following your email? :). Unfortunately it's a bit more complicated than that, especially since you say that it's a popular website (which usually implies that it's big, meaning that a redesign involves a huge amount of money, politics and work).

Horizontal menus don't scale very well in terms of top-level items, but they can incorporate up to two levels of submenus relatively easily. Vertical menus can easily be wider (more top-level items), but they don't scale well in terms of depth, and two levels might feel too much.

This depends on the specific site, but adding a navigation level is in itself a valid solution, and it doesn't automatically mean that it's not as good as adding a top-level menu item.

That is actually one of the problems with vertical menus. Since they scale so well, the owners are often tempted to keep on adding items, ruining the menu, instead of changing the structure and improving the IA by adding a level.

share|improve this answer
    
OK, I'll edit the ignored part out :) –  GUI Junkie Jul 29 '11 at 9:40
add comment

It's risky if you don't know by how much the site will scale following development. If you have a very clear indication of the IA and can be assured it won't develop that much then the risks are minimised. But, and speaking from personal experience, this approach can get very messy once you begin to introduce more levels than the design legislated for, moreover, long link names minimise the number of elements you can include in the navigation.

summary: use if IA is limited and clearly defined. do not use if many sub sections or growth of website is expected.

share|improve this answer
    
I think that's a nice summary. What is IA? –  GUI Junkie Jul 29 '11 at 9:37
    
information architecture. sorry... –  colmcq Jul 29 '11 at 10:11
    
I found that in the Wikipedia. Will give it a look to see what it's about. –  GUI Junkie Jul 29 '11 at 14:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.