Well, I think I finally came up with my content and sections, and now I just need to settle on a website layout.
If I have a (horizontal) “Navigation Bar” or (horizontal) “Navigation Tabs” at the top of my home page, and then I have “Navigation Links” in the left margin, can these two types of navigation co-exist, while being totally independent?
Debbie
Yes, they can!
There are plenty of sites out there that successfully use both top and side navigation. They key for you as the developer is to ensure that it is instantly and unmistakably clear to your visitors what the distinction between the two navigation lists is … eg, if one is global navigation across the site, and the other is local links within the current section, or however you have divvied them up.
Are the navigation links sub-sections of the items in the navigation bar/tabs, or are they duplicates of the links in the navigation bar/tabs?
As Stevie said, as long as they’re sub-sections of the global navigation, then they’re fine. But if they’re duplicates then you’re taking up unnecessary space, and potentially confusing your users as to which set of links does what.
Can both your “Navigation Bar” and your “Left Margin Links” both be “global”?? :-/
Debbie
I am planning the layout of my website now, so this is a “moving target”, however it was my original thought that the top Navigation Bar and the Left-Margin Links would be independent and global. (Well, the Navigation Tabs" should definitely be global, and the Left-Margin Links could change some.)
My website is content-driven, and hopefully will have have LOTS of content. However, WHAT all of the content will be is evolving…
I have been busy looking at the major newspapers to come up with some kind of a layout/organizational-scheme.
As Stevie said, as long as they’re sub-sections of the global navigation, then they’re fine. But if they’re duplicates then you’re taking up unnecessary space, and potentially confusing your users as to which set of links does what.
No duplicates, but maybe they could just be independent lists?!
Here is my thinking…
I don’t care for JavaScript menus, so I will probably just have 5-10 Navigation Tabs that are created with CSS.
Since that number is limited, I would have to pick Major Topics for each. (For example, if I was a newspaper, the Navigation Tabs could be: Home, Local, International, Sports, Business, Arts, and Op-Ed.)
But there will be so much more to my website that people need to know about!!
So if I had a Left Column with links, then I could promote them too.
Now, each grouping would be totally or at least mostly unreated.
Maybe in the Left margin I would have: Columnist #1, Columnist #2, Free Tips, User Guides, Resources, Glossary, etc.
I have a 3-column, fixed-width CSS set up I was hoping to use if I can ever figure out how to organize things?!
Debbie
Hmm, of course the choice is yours, but your proposal is the type of navigation that I find very confusing when it comes to websites.
From my experience organizing content in very deep/complex sites, the best thing to do is NOT to overwhelm visitors with too much navigation (especially split navigation), and really grit your teeth and focus on what the core of your website is supposed to be. Then, make your navigation that, and only that.
If you have too much to fit into a horizontal navigation bar, then a “Misc” or “More” tab/button with a drop down menu that opens up into “Columnist #1, Columnist #2, Free Tips, User Guides, Resources, Glossary, etc”
You don’t do that with javascript by the way, you can have menus open via pure CSS.
This article doesn’t really go into DUAL navigation, but it makes a case against vertical navigation in general and mentions what I said above: by not making hard decisions and forcing yourself to limit your navigation, your site can start to feel like it’s lacking purpose or organization:
If you do want to make those links accessible to the user up front, I HIGHLY recommend that you make them as minimal as possible with respect to the main navigation. Your main/horizontal navigation should be far more prominent than the links in the left margin.
And I might even suggest that you move the links to the right margin instead, so as to further reduce the user’s confusion as to which set of navigational elements is the primary set.
Agm, excellent Smashing article. I hadn’t read that. Thanks for the link. DD, I think Agm says it well.
As I said before, “They key for you as the developer is to ensure that it is instantly and unmistakably clear to your visitors what the distinction between the two navigation lists is”. If it’s just a fairly arbitrary way of dividing up a long list by splitting into two parts, that probably isn’t going to be a great success. If there’s no obvious reason why a link would be in one list rather than the other, there’s going to be a lot of people who don’t ever find it. You have to find some objective and unarguable reason for putting some links in one list and some in the other. If not, you need to have just a single list.
I’m trying to do that, but it is easier said than done!
If you have too much to fit into a horizontal navigation bar, then a “Misc” or “More” tab/button with a drop down menu that opens up into “Columnist #1, Columnist #2, Free Tips, User Guides, Resources, Glossary, etc”
How about a design like the Chicago Tribune uses?
You don’t do that with javascript by the way, you can have menus open via pure CSS.
Can I do a top menu with included sub-menus like the Chicago Tribune does?
This article doesn’t really go into DUAL navigation, but it makes a case against vertical navigation in general and mentions what I said above: by not making hard decisions and forcing yourself to limit your navigation, your site can start to feel like it’s lacking purpose or organization:
Interesting article.
If you do want to make those links accessible to the user up front, I HIGHLY recommend that you make them as minimal as possible with respect to the main navigation. Your main/horizontal navigation should be far more prominent than the links in the left margin.
And I might even suggest that you move the links to the right margin instead, so as to further reduce the user’s confusion as to which set of navigational elements is the primary set.
What about having a Left Vertical Sub-Menu that is driven off of what the user selects in a simplified Top Menu? (I think that is what Amazon.com does, right?)
Debbie
Can you provide some examples that don’t go against what AgmLauncher was talking about and what was discussed in that Smashing article above?
Debbie
Haha tell me about it. It’s so hard to make decisions about what you want the focus of your site to be when everything has merit and importance in its own way.
How about a design like the Chicago Tribune uses?
The site has good navigation, but I do have two critiques which you may want to consider.
The very top navigation in the black bar I think stands out a little too much compared to the colored sub navigation in the main navigation area. It almost seems like a second set of features and it’s not immediately clear why they don’t belong with the rest of the navigation. SOME of those definitely belong up there (Home Delivery, Advertising, ChicagoPoints), but the rest are classifieds links which belong in a Classifieds tab in the main navigation, not up at the top.
The tertiary navigation (the “Quick Links” bar) that appears below the colored secondary navigation bar is also a bit confusing. Why don’t those links appear in the colored secondary navigation bar that is attached to the tab? What is the difference between those, and the secondary navigation?
Overall, what the user sees when they first see the site is FOUR navigational elements. It’s fairly obvious what the primary navigational element is (the one with the largest text and tabbed selection), but the rest is all similar and harder to parse.
Can I do a top menu with included sub-menus like the Chicago Tribune does?
This is precisely the design I was using on my site a few months ago. I had a colored tab connected to a matching colored sub-navigation bar with horizontal style navigation (and yes, this is done via CSS as well. CSS rocks!). What I found though, was that it was hard to use. Try this experiment for yourself:
Mouse over the Opinion tab, and then try and click on the Editorials link on the very left. You tend to move your mouse directly there, but the diagonal path it takes causes your mouse to hit the Health tab on you. It forces you to move it down, and then left along a narrow path.
Now, it looks they ARE using some javascript to keep the sub-menu open for about a half second even if your mouse wanders off of it. This is to aid in keeping it open while you attempt to get your mouse to where you want to go, but if you touch any of the main navigation tabs along the way, it switches the menu on you.
For usability purposes, it’s best to make it so that when you mouse over a tab, it opens up a vertical drop down menu instead of a horizontal one, allowing you to scrap the horizontal sub-navigation bar entirely, simplifying your navigation.
The downside of course is that you can’t display that page’s sub-navigation up front so users might not notice that tab’s sub-features when first viewing the page, but I’ll address that below:
What about having a Left Vertical Sub-Menu that is driven off of what the user selects in a simplified Top Menu? (I think that is what Amazon.com does, right?)
Sort of. Amazon does away with it’s horizontal navigation entirely once you select a department, which isn’t really necessary. You can preserve your horizontal/main navigation while simultaneously showing your vertical sub-navigation.
So to answer your question. YES! for sure it is acceptable for the left navigation to based on the main tab selection (essentially, a vertical version of the horizontal implementation on Chicago Tribune’s site.
http://kohls.com is a good example of this.
Notice when you click on Women’s or Juniors’, it displays that department’s sub navigation links on the left in a large alphabetically ordered vertical list? That’s a very, very good way of showing a lot of sub-navigation content since it clearly wouldn’t fit in a horizontal bar (especially since Kohls already has 2 rows of horizontal navigation :P). It’s also fairly easy for the eye to scan, and even easier for the mouse to navigate.
This is also something you can get away with on your home page, provided you do something to make it clear that the topics listed in this sub-navigation panel are sub-topics of “Home” so that people don’t think it’s alternative primary navigation.
This is where UI design becomes a bit of an art - using visual weight, white space, color contrast, font size etc to communicate a visual hierarchy on the page without having to expressly label each element.
AgmLauncher,
Thanks for your detailed comments!
Debbie
AgmLauncher,
So, if I need to have a Top Menu and then a Vertical SubMenu in the Left Margin, how would I go about that?
What I mean is, “How do you set it up so that your website knows which Vertical SubMenu to display in the Left Margin?”
This sounds like it might require programming or something fancier than just HTML and CSS?! :-/
Debbie