0

I have noticed the following navigation pattern recently and am wondering if this is a "good" pattern in your experience. - Can you point to any usability research about the pattern?

It basically works like this: Show important "shortcuts" as a regular horizontal menu but hide the rest of the site navigation in a "Full menu" drawer. If you have sub sites the visible shortcuts in the horizontal menu can change and reflect the current site you are on. It basically replaces and combine a global menu, utility menu and/or a footer menu.

The pattern could be seen at for example Volvocars.com. A slightly different version of this pattern can also be seen at Microsoft.com

A opened and closed menu drawer on Volvocars.com

The menu on Microsoft.

The benefits that I can see is the following:

  • Less clutter. It helps the visitor find the most important pages.
  • Discoverability. It replaces the footer menu.The users don't have to scroll down to the bottom of the page just to check if there's more content on the site.
  • Easy to maintain. You could use the same drawer as a hamburger menu on smaller screens.

The drawbacks

  • Discoverability. Do the users actually see and understand the menu?
  • Confusion. If the shortcuts in the horizontal menu are being repeated in the Full menu do the users think that they are different pages?

What are your takes on this pattern?

Improve this question
4
  • The way this question is asked, it will result in a lot of opinions. If that’s not what you are looking for, maybe you could rephrase the question. For example, are you looking for insights from actual testing?
    – Andy
    Feb 15 at 10:22
  • 2
    In my opinion, this is a great pattern, which is sometimes referred to as an overflow menu. It’s also great because it works well on responsive websites: There is no need for breakpoints, as the number of items is always determined by the available space. For example, Material Design’s Top app bar allows for exactly three action icons, the third can be an overflow menu. Typically three dots are used as a symbol, a label like “more” is recommended.
    – Andy
    Feb 15 at 10:28
  • @Andy You're right. I made a slight clarification about it.
    – Tony Bolero
    Feb 15 at 13:23
  • "is this a good idea" and "what are your takes on X" are the points you should modify in your question. It's still asking people's opinions on the pattern.
    – Luciano
    Feb 16 at 14:22

1 Answer 1

Reset to default
0

This type of navigation (dropdown menu or sub-menu) is used for products with a complex hierarchy. In a nutshell, it is quite difficult to talk about the advantages of such a menu. I advise you to read these two articles. Most of the answers you can find in them.

https://www.expandtheroom.com/insights/best-website-navigation-dropdown-menus/

https://designmodo.com/ux-dropdown-navigation-menus/

Improve this answer

Your Answer

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

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