7

Asumming I have the case of a menu where I have several options in only some categories (products):

enter image description here

Should I always put some content on the button "Products"? Or I can skip it so people go to option A or B instead, without an introductory "products" page.

Of course I can highlight when user mouseover an option in the menu

enter image description here

But if I don't have content on that "Products" button should I highlight it?

enter image description here

Or just highlight the options with content?

enter image description here

|improve this question
8

Great question, and a common design problem.

There is no "right" answer here, but here's a contemporary approach:

  • This looks like a commercial website. So, reducing cognitive friction for potential buyers is important.

  • You likely have a large number of users who are new to the site, so providing consistent affordance in your controls (especially in a nav bar where they are sitting next to each other) is important. Otherwise you may frustrate or confuse users.

  • Therefore, having a nav bar where some buttons are clickable and some are not (because they are dropdowns) is not a good idea.

As a result, every button on the top-level nav bar should be clickable. So for the Products button:

  1. Hovering over the button reveals the drop down menu, allowing users to navigate to a specific product.
  2. Clicking on Products takes you to a products page which introduces all of your products and allows the user to select a product to explore.

Don't underestimate the importance of #2. It may take extra time to build a product page, but for new users this is an opportunity to provide branding, marketing, and information around your entire product line (e.g. "at Acme Company, all our products are hand-made and hand-finished using the finest leathers").

Again, there is no "right" answer here, so this is just one example of a modern approach.

|improve this answer
  • 4
    I absolutely agree with @tohster. The other thing I would add is for your question around highlighting and animation, you should definitely highlight the top bar "products" and it should take the user to a products overview page. – Lauren Dankiewicz Mar 4 '15 at 20:54
  • Very good points were mentioned already. One thing to consider with this solution is to provide clear feedback, which item was selected and in case of a proper product page, a clear title/visulization were the action led to. – Stefan Wasserbauer Mar 5 '15 at 6:50
  • I would like to add that taking in account touch devices don't have a hover state, dropdowns on hover are difficult to use. One tap activates the hover state and only after the second tap they would go to the products page. There are ways to provide different navigation for just touch devices, but they're cumbersome and don't have good effect on the consistency across devices. – Paul van den Dool Mar 5 '15 at 11:17
  • @Paul there are some decent paradigms for mobile drop downs. Google's Material Design has some guidelines. Here is one example... This one hides the trigger button intentionally to save space but it could be configured to drop down instead: materializecss.com/dropdown.html – tohster Mar 15 '15 at 23:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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