3

Most of my past projects are rather simple in terms of navigation. A simple dropdown menu (Superfish, for instace) works with most of them.

Now I have a project that requires content to be separated into, let's say, 7-10 immediate subpages and one subpage (or menu option) that requires 3-5 suboptions. In other words, 7-10 top level options and only one of them which will require some 2nd level nesting. It's just the way content is organized.

Because this out-of-order option has 3-5 suboptions I cannot/don't want to move them to the top level because that would increase the top level to around 15 options which I think is not a good practice.

Also I don't want to introduce a full blown dropdown menu like superfish for this site because it would look silly. Most top level options and only one option with a dropdown opening...hopefully you understand.

When looking into other options I came up with this idea that I used to implement few years back, before introducing Superfish into almost every page. It's an idea which implements two menus. One at the top level and one per subpage level.

Since most toplevel options have no suboptions, this would only show the 2nd level menu on one of the subpages. I could render this second menu as a tab strip.

Question 1)

Hopefully you will be able to make some sense out of this and be able to advise on what the best practice would be. Would this kind of design make people confused?

Question 2) What is your general advice on using unorthodox navigation? Something out of the box beyond the normal horizontal or vertical menu. For instance, I have this idea of using a navigation in the form of number keypad (3x3 options), since most pages will be refered to by one single word? It looks nice and it fits in the design that I've developed (1/3 of the 980px space would be occupied by this "keypad" and the other 2/3 will be occupied by the content slider/slideshow).

1
  • Does the page that has sub-options also have content of its own above and beyond the existence of sub-options? Or, is it merely a gateway to the sub-options?
    – Jacob G
    Commented Dec 27, 2011 at 4:08

3 Answers 3

3

I'd usually suggest the typical pattern is to use a 'normal' nav bar but just flag the fact that one of the entries is actually a container for sub-entries - like the arrowhead this site places to the left of your profile name. Still, a tab-strip is a common enough pattern for users to grok it, so long as you adhere to two key principles:

1) It appears whilst hovering. If a user has to click or enter a 'summary page' before they see the options, you're relying on them knowing what content and value they'll be provided in advance.

and

2) It's clear that the tab strip has a parent-child relationship with the main nav bar

Question 2) What is your general advice on using unorthodox navigation?

Don't.

If users don't immediately understand how to access your content, they'll rarely stick around to figure it out. Unfortunately, your users do not ultimately care about your cool website or nifty interface as much as about getting what they want to do done.

It looks nice and it fits in the design that I've developed (1/3 of the 980px space would be occupied by this "keypad" and the other 2/3 will be occupied by the content slider/slideshow).

A word of advice.

This is the web, not print. Your users will access your content with user agents you couldn't possibly forsee, and your stakeholders will inevitably request additions and adaptations that will break inflexible layouts (eg adding new categories in six months' time). And no, you will never be empowered to overrule them. You've got to assume that your designs must be flexible enough to absorb new content and get syndicated on new platforms that aren't within your control. The alternative is madness.

1
  • It took me some time to accept this answer because I was the one who upvoted @Tony Bolero thinking that my idea for navigation was not at all bad. However, after a few days of thinking about it and in the meantime doing other stuff, I finally decided to go with a somewhat classic menu navigation but without dropdowns. Essentially what I ended up doing is the "pills" navigation, it looks great, it has hover support, allows for showing the currently active page, looks and feels understandable and looks nice.
    – mare
    Commented Dec 29, 2011 at 12:49
1

I don't think the users will be confused. People are really focused on their task and they will not look and digest the whole page and think that -man, that was a strange structure of the menu. They will look for labels that match their question and click on them pretty much as fast as they can.

If one menu item has sub pages, use a dropdown preferably marked with an arrow pointing down or use a category page that list the sub pages.

When it comes to that keypad menu idea - think like this - people appreciate user interfaces that works like people are used to because they dont need to put a lot of brain energy (or cognitive load) learning how the site works. Instead they could use their resources to focus on the task they came to solve. If you could make the solving part as easy as possible, they will love your site and your brand. If this keypad navigation is something that feels natural then go for it but if people need to stop and think about how to use ut, don't use it.

0

If I understand your situation correctly, you can have links on the relevant page for its sub-topics.

This way, the main menu will have only top level options and no dropdowns at all. The one option that you would like to provide with sub-options will simply direct to the relevant page that contains a broad general discussion and a short list of the links to sub-topics under it.

I do not think this is way unconventional either. It feels more logical and convenient from the user point as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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