What are some good examples of left-hand sub-menu navigation?
November 5, 2007 5:22 PM Subscribe
I have a client who wants to reveal its entire site map in the left navigation. What left-hand navigation examples can I show them as an alternative?
Information architects and web fanatics: I have a large corporate client who is determined to expose its entire site map through its left hand navigation. In doing so they want three tiers -- one main list with two levels of fly-outs. I'm trying to convince them that hiding at least one level of fly-outs would serve them better, so want to show them examples. Here's what I envision:
-Left nav has n number of items
-User clicks on one of these items
-User goes that page and nav expands down to reveal second-tier items that relate to that facet
-Third-tier items are then accessible as fly-outs from those newly revealed second tier items
Can you think of any sites that do this or similar? Even sites with two levels that expand, sans fly-outs, would be useful examples.
Information architects and web fanatics: I have a large corporate client who is determined to expose its entire site map through its left hand navigation. In doing so they want three tiers -- one main list with two levels of fly-outs. I'm trying to convince them that hiding at least one level of fly-outs would serve them better, so want to show them examples. Here's what I envision:
-Left nav has n number of items
-User clicks on one of these items
-User goes that page and nav expands down to reveal second-tier items that relate to that facet
-Third-tier items are then accessible as fly-outs from those newly revealed second tier items
Can you think of any sites that do this or similar? Even sites with two levels that expand, sans fly-outs, would be useful examples.
UBOC kind of does what you're talking about, without any fly-outs (the homepage doesn't have a left nav bar, but all the other pages do). For example. Of course, they might not be the greatest example because their print gets very tiny at some of the lower levels of the hierarchy.
posted by phoenixy at 6:37 PM on November 5, 2007
posted by phoenixy at 6:37 PM on November 5, 2007
I'm building something similar right now without the third tier fly-outs.
Click on "Gala Details" or "Student Event" for an example of the second tier.
posted by brad! at 7:02 PM on November 5, 2007 [1 favorite]
Click on "Gala Details" or "Student Event" for an example of the second tier.
posted by brad! at 7:02 PM on November 5, 2007 [1 favorite]
I really like how Adobe implemented their flyouts/dropdown navigation. When you hover over "Solutions" and "Communities", you see there are bold headers that divide each menu into sections. This is an elegant way to achieve a 3-tier flyout menu in a 2-tier format. Though if you have a huge number of tier-2 and tier-3 items, it will quickly get ugly. (In that case, you should really be simplifying and consolidating the menu. Nav =/= site map).
The problem with the nav you proposed is that once a user lands on a tier-3 page, they'd need to start at the beginning to access a tier-2 item in a different menu section. I recommend the following workflow instead:
1. Left nav has n number of items with tier-2 flyouts
2. User can click on tier-1 menu or tier-2 flyout menu
3. Tier-3 items are links/sections in the tier-2 page
This has the advantage of exposing the entire tier-1 and tier-2 menu system even when the user is on a tier-3 page.
As an alternative, I rather like how U Florida set up their navigation. The tier-2 pages are very practical and elegant in terms of how lean yet usable it is and still doesn't take very much space. No fancy flyout menus yet I can browse through pages 3-4 levels deep very quickly and find what I need.
posted by junesix at 9:28 PM on November 5, 2007
The problem with the nav you proposed is that once a user lands on a tier-3 page, they'd need to start at the beginning to access a tier-2 item in a different menu section. I recommend the following workflow instead:
1. Left nav has n number of items with tier-2 flyouts
2. User can click on tier-1 menu or tier-2 flyout menu
3. Tier-3 items are links/sections in the tier-2 page
This has the advantage of exposing the entire tier-1 and tier-2 menu system even when the user is on a tier-3 page.
As an alternative, I rather like how U Florida set up their navigation. The tier-2 pages are very practical and elegant in terms of how lean yet usable it is and still doesn't take very much space. No fancy flyout menus yet I can browse through pages 3-4 levels deep very quickly and find what I need.
posted by junesix at 9:28 PM on November 5, 2007
Entrepreneur.com does what you're talking about but no third-tier fly-outs. You have to click to those second levels to see third-level nav (within the body of the page) or do a "view all" on that second-level category.
posted by faunafrailty at 10:10 PM on November 5, 2007
posted by faunafrailty at 10:10 PM on November 5, 2007
In my view, based on unscientific observation of people using sites, you generally shouldn't use flyouts or dropdowns unless most visitors will know what they want and need a direct path to get it. Sites which are primarily about promoting a product/service and helping inexperienced users delve into information need to avoid forcing premature, uninformed decisions.
As for multiple levels of flyout, well for any type of site that tends to end up like one of these, even for people with good motor skills, so your proposed solution seems like a good one. I think you might have more success taking a negative approach where you show them some horribly fiddly multi-level flyout/dropdown menus.
posted by malevolent at 12:37 AM on November 6, 2007
As for multiple levels of flyout, well for any type of site that tends to end up like one of these, even for people with good motor skills, so your proposed solution seems like a good one. I think you might have more success taking a negative approach where you show them some horribly fiddly multi-level flyout/dropdown menus.
posted by malevolent at 12:37 AM on November 6, 2007
Response by poster: Thanks all. Some helpful things here.
posted by kables at 11:00 AM on November 6, 2007
posted by kables at 11:00 AM on November 6, 2007
This thread is closed to new comments.
posted by zsazsa at 5:24 PM on November 5, 2007