What is the best form/ position for a submenu in a website, a dropdown for the menu item, a list in a sidebar or a second nav bar?
Answer
TL;DR:
- Don't make users scroll, and make it as visible as possible.
- Second navigation bar for a small number of items.
- Side bar for a medium number of items.
- Mega-menus for a sub-menu with a number of categories.
- Mobile navigation is too broad of a subject to address.
The Nielsen Group regularly notes that:
Hiding content behind navigation diminishes people’s awareness of it.
This is mirrored by Don Norman in the Design of Everyday Things, who says:
In each state of the system, the user must readily see and be able to do the allowable actions. The visibility acts as a suggestion reminding the user of the possibilities.
So if possible, don't hide your navigation.
Use a form of navigation which makes the user's options immediately visible, such as a second navigation bar.
An added advantage is that the user will also have fewer types of navigation to contend with.
If you can't fit your items on a second navigation bar, the next best thing is a side-bar.
But only if your users won't need to scroll to see the items at the bottom.
If they do, a mega-menu might be more suitable.
It's sometimes not possible to show all items.
Nielsen and Li (March 2017) describe in detail why mega-menus work so well for categorised navigation with a large number of items.
They summarise by saying:
Large, rectangular menus group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices.
They also note the advantages over a standard drop-down menu:
For bigger sites with many features, regular dropdown menus typically hide most of the user's options. Yes, you can scroll, but (a) it's a pain, and (b) scrolling hides the options at the top of the menu. As a result, you can't visually compare all your choices; you have to rely on short-term memory.
Mega menus let you visually emphasize relationships among items. This again helps users understand their choices.
Mega menus make it easy to use pictures and icons when appropriate. And, even if you stick to text alone, you have richer typography at your disposal (letting you differentiate link sizes according to their importance, for example).
How about mobile?
I've intentionally not addressed mobile because it's a very broad area to cover.
For those wanting to delve into it, here's some great places to start:
No comments:
Post a Comment