5

Considering following site architecture, where each category has multiple products inside it:

/Home
/About
/Products/Category 1
/Products/Category 2
/Products/Category 3
/Products/Category 4
/Services
/Blog
/Contact

What is the optimal way to display this as horizontal-navigation with user behavior in mind?

For example:

Should the main navigation only show the very top-level directories? Therefore, "Products" would link to a page with sub-navigation links to each category. (Each category page would then contain links to products.)

Or should the division of categories be visible right away in the navigation? Thus, through a drop-down menu on rollover (and something else for mobile). In this case, the "Products" could still link to a landing page as above (e.g. in case the rollover doesn't work).

Improve this question
1
  • P.S. A lot of good answers, but the take away is: It depends on your website and goals.
    – Baumr
    Commented Nov 29, 2012 at 22:48

4 Answers 4

Reset to default
5

Seems to me your question is about whether or not to actually have a landing page for Products, or whether users should be forced to select a category before viewing a listing of products.

The optimal solution would then depend greatly on

  1. how logically distinct the categories are (do any products belong to more than one category, or is there any ambiguity about their proper place), and

  2. whether these categories service psychologically unrelated needs (will users arrive at the site with a need for more than one category of products)

If the categories are NOT logically distinct, a Products landing page can help users understand where to look for the product they're after.

If users can arrive with needs or desires that overlap multiple categories of product, then having a Products landing page can help showcase products from across multiple categories at once.

On the other hand, if a selection of products from different categories on a landing page will seem random and unrelated, or if a Products landing page adds nothing in terms of serendipitous discovery (if users won't ever act on a promoted product), then a Products page is probably a waste of time.

Improve this answer
3
  • Thanks for your reply. Very interesting, but maybe it was ambiguous, however there's no reason why even with a drop-down, the "Products" link would go to a landing page
    – Baumr
    Commented Nov 28, 2012 at 11:58
  • Great suggestions in how users would think about these products and if they'd overlap in categories
    – Baumr
    Commented Nov 28, 2012 at 12:00
  • 1
    I was thinking of it the other way around, @Baumr. If there's a drop down, you could potentially avoid having a Products landing page. But, ultimately, how the navigation works is dependent on the content structure, so you need to make that call first. If there's a landing page, then whether you have drop down or not is determined by (1) how category-specific you think the user intent is likely to be; (2) how time-poor the user is; and/or (3) how valuable cross-promotion is to the business).
    – Justin
    Commented Dec 3, 2012 at 23:47
3

It's often been a tough choice between the simpler model (no submenus) and the model (with submenus) that's more information rich and faster (less clicks) to achieve things.

Having direct action buttons (or links) alongside drop down menus has always been a mixed metaphor of sorts. The drop down menus usually have some visual indication that they're a slightly different kind of thing than their direct action neighbor but it's not always clear that clicking on one drops down a menu while clicking on another takes you to a different page.

The drop-down-on-hover-menu solve some of these problems but it can't be applied to touch UIs.

So I'd say the simpler model should be favored unless there's a compelling reason to show more of the nav structure. The domain of the application would determine how beneficial (or not) the complex model might be. Given your example above, ask the question "what are the advantages of showing the subcategories of 'Product'?"

Improve this answer
1
  • Great logic and good stuff to consider. What do you think about the claim that more clicks is a problem? I don't think anyone has actually showed that's true. Also, what do you think of Tony's reply?
    – Baumr
    Commented Nov 28, 2012 at 12:03
2

Sometimes is better to mix categories with individual products in the top level navigation. This way it's easier to find popular products (or products that the company want to highlight). Look at Apple.com as an example. It is easy to start with a strictly hierarchical approach (I do!) but if you think about the menu links as shortcuts to popular and important pages or as a toolbar instead it could help you prioritize.

You could still use a hierarchical structure but the top level menu doesn't necessarily need to reflect it. That way you could create category pages that includes the highlighted products.

Improve this answer
2
  • Very interesting concept, thanks. So, in summary, if product categories are the flagship of the company (e.g. iPod, Mac) then they should be clickable from the homepage and every page of the site. Correct?
    – Baumr
    Commented Nov 28, 2012 at 11:57
  • 1
    Basically yes. As long as the labels are clear it's ok to mix and match.
    – Tony Bolero
    Commented Nov 28, 2012 at 12:09
1

If the products are the most important content on the site, I would use two menus.

"Informational" menu:

  • Home
  • About
  • Services
  • Blog
  • Contact

Product menu:

  • Category 1
  • Category 2
  • Category 3
  • Category 4

I usually place the informational menu as a horizontal top navigation (right aligned), and the product menu in the left sidebar. In this case you should make sure to design it so that users don't think that the left sidebar is a conditional submenu for the top nav.

This design works even better when the home page of the site could be the product page. In this case, the top nav can be styled smaller so that it serves as "secondary" navigation.

If the "Services" page can be considered an important (buyable) "product", include it in the product menu, too.

Improve this answer
1
  • Thank you, what an interesting suggestion, do you have any examples of this being done successfully?
    – Baumr
    Commented Nov 28, 2012 at 13:00

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.