Websites with multiple dropdown menus are known for causing user problems. But how would a unified dropdown menu that displays all of a website’s links in one menu fare? It’s not common to find a unified dropdown menu on websites today. But this innovative navigation technique could prove useful in some cases.
hovering over the navigation bar drops down a single all-inclusive menu
See All Content Links in a Single Glance
The biggest benefit to a unified dropdown menu is that users can see all the available content links in a single glance. Traditional dropdown menus only allow users to see one content section of links at a time. Users have to go through the trouble of opening each content section to see the links. This makes finding and exploring website content slow and hard.
A unified dropdown menu allows users to explore website content in a faster and easier way. All they have to do is hover their mouse over the top navigation bar and a unified dropdown menu will display all the content links for every website section at once. The user has all of a website’s content links at their disposal, and can choose the content they want without having to open another menu.
No Accidental Menu Triggers
Unified dropdown menus also allow users to see everything a website offers without experiencing accidental menu triggers. In traditional dropdown menus, it’s common for users to accidentally hover over the wrong section and open a menu they never meant to open. These accidental errors slow users down and keep them from completing their task. Users also won’t experience any accidental menu triggers when they move from section to section in a unified dropdown menu. The user’s mouse can move freely without error because each content section combines into one large menu with a lot of space.
The Spacing Challenges
A unified dropdown menu is not suitable for every website. There are a lot of spacing challenges to executing it. Websites that have large lists of links for each content section will have trouble pulling it off due to limited width space. But if you only have a handful of links for each section, a unified dropdown menu could work for you. It’s important that the width of each link is as short as possible. Long link labels can easily throw the spacing between each section off-balance. You should have enough space between each section so that the links under it will have enough width space to not crowd or run into the links in a neighboring section.
ample spacing between each section is important to avoid link crowding
Easier to Use Than Traditional Menus
Not every website can use a unified dropdown menu. But those that do will make their navigation a lot easier for users to use. To see all the content links for a website in a single glance is powerful. And being able to move your mouse across the navigation area without any accidental menu triggers gives users a more seamless experience. The unified dropdown menu is not a widely used interface technique today. However, with its advantages compared to traditional dropdown menus, there’s no reason designers shouldn’t consider using it. It does have its spacing challenges, but in the end, its elegance and ease of use for the user pays off.
Book
Affiliate
That’s a good idea.
The example menu has a problem with the link called “Young Ballers” which is over two lines. At first, it seams to be two differents links.
I really like this drop down idea, especially for users who move their mouse off the hover area and then accidentally close their menu. My fear however is that users would get a visual overload from seeing all the links at once. If a user wants to check out the “Entertainment” tab, now they’re getting info on Entertainment and Lifestyle. Its more than what they were expecting. I also wonder if users will feel like they’re being upselled.
Doesn’t this destroy the whole idea of Responsive web design ?
Ah, but then there’s choice overload:
http://cbdr.cmu.edu/seminar/Emir2.pdf
The unified dropdown menu is certainly not for everyone – you can easily be more confusing by showing all your options at once if you have too many.
But what’s too many..?
You forgot to cater non-mouse devices.
You can not rely on crucial functionality to lie beneath :hover when milions upon milions of devices are touch-based.
True, though you could just as easily make it trigger on click as well so it works well on both touch and traditional interfaces.
I hope folks understand what’s being proposed here is not the same thing as a megamenu, even though the visual appearance is equivalent.
It works well in this case but it certainly could have the same impact as a mega menu and possibly confuse people. I like the idea but only for simple sites with a small page count .
I think care is required in the design of the hierarchy. It’s important to ensure menu items are grouped effectively. If the user has hovered over a certain section, why overload them with irrelevant content?
Another advantage is that the user may find links of interest under top-level items they never would have hovered over, so this solution may result in more pageviews and longer visits.
I honestly think this example is totally wrong. Although I understand the idea of the unified menu, this execution in particular shows why you need to treat this carefully and not use it just for the sake of using it. In this example, once you hover on a menu item, the menu is displayed but there are no visual cues or connections of the menu category and the subcategories. The design of this one looks as if the flyout was only about the section you hovered on. I would expect a lot of users to hover on another menu item to see other options.
If this had any kind of visual connection to understand
1. The subcategories of the item I’m hovering
2. That other subcategories are directly related to the category
It could be an interesting concept/solution.
In this case, it doesn’t do either.