Helping users navigate should be a high priority for almost every website and application. After all, even the coolest feature or the most compelling content is useless if people can’t find it. And even if you have a search function, you usuallyshouldn’t rely on searchas the only way to navigate. Most designers recognize this, and include some form of navigation menu in their designs.
Definition:Navigation menusare lists of content categories or features, typically presented as a set of links or icons grouped together with visual styling distinct from the rest of the design.
Navigation menus include, but are not limited to, navigation bars andhamburger menus.
Menus are so important that you find them in virtually every website or piece of software you encounter, but not all menus are created equally. Too often we observe users struggling with menus that are confusing, difficult to manipulate, or simply hard to find.
Avoid common mistakes by following these guidelines for usable navigation menus:
Make It Visible
- Don’t use tiny menus (or menu icons) on large screens.Menus shouldn’t be hiddenwhen you haveplenty of spaceto display them.
- Put menus in familiar locations.Users expect to find UI elements where they’ve seen them before on other sites or apps (e.g., left rail, top of the screen). Make these expectations work in your favor by placing your menus where people expect to find them.
- Make menu links look interactive. Users may not even realize that it’s a menu if the options don’t look clickable (or tappable). Menus may seem to be just decorative pictures or headings if you incorporate too many graphics, or adhere too strictly to principles offlat design.
- Ensure that your menus have enough visual weight.In many cases menus that are placed in familiar locations don’t require much surrounding white space or color saturation in order to be noticeable. But if the design is cluttered, menus that lack visual emphasis can easily be lost in a sea of graphics, promotions, and headlines that compete for the viewer’s attention.
- Use link text colors that contrast with the background color. It’s amazing how many designers ignorecontrast guidelines; navigating through digital space is disorienting enough without having to squint at the screen just to read the menu.
Even designers familiar with all of these guidelines can still end up creating menus that are overlooked by users, because it is so difficult toobjectively evaluate your own work— especially for subjective criteria like whether something is visible. If you know where it is (because you put it there), then of course you can see it! That’s why it’s so important totest your menuswith users.
Communicate the Current Location
- Tell users ‘where’ the currently visible screen is located within the menu options. “Where am I?” is one of the fundamental questions users need to answer to successfully navigate. Users rely on visual cues from menus (and other navigation elements such abreadcrumbs) to answer this critical question. Failing to indicate the current location is probably the single most common mistake we see on website menus. Ironically, these menus have the greatest need to orient users, since visitors oftendon’t enter from the homepage.
Coordinate Menus with User Tasks
- 使用理解able link labels. Figure out what users are looking for, and usecategory labels that are familiar and relevant. Menus arenotthe place to get cute with made-up words and internal jargon. Stick to terminology that clearly describes your content and features.
- Make link labels easy to scan.You can reduce the amount of time users need to spend reading menus byleft-justifying vertical menusand byfront-loading key terms.
- For large websites, use menus to let users preview lower-level content. If typical user journeys involve drilling down through several levels,mega-menus(or traditional drop-downs) can save users time by letting them skip a level (or two).
- Provide local navigation menus for closely related content. If people frequently want to compare related products or complete several tasks within a single section, make those nearby pages visible with a local navigation menu, rather than forcing people to ‘pogo stick’ up and down your hierarchy.
- Leverage visual communication. Images, graphics, or colors that help users understand the menu options can aid comprehension. Butmake sure the images support user tasks(or at least don't make the tasks more difficult).
Make It Easy to Manipulate
- Make menu links big enough to be easily tapped or clicked. Links that are too small or too close together are a huge source of frustration for mobile users, and also make large-screen designs unnecessarily difficult to use.
- 确保下拉菜单不太小或太big. Hover-activated drop-downs that are too short quickly become an exercise in frustration, because theytend to disappearwhile you’re trying to mouse over them to click a link. On the other hand, vertical drop-downs that are too long make it difficult to access links near the bottom of the list, because they may be cut off below the edge of the screen and require scrolling. Finally, hover-activated drop-downs that are too wide are easily mistaken for new pages, creating user confusion about why the page has seemingly changed even though they haven’t clicked anything.
- Consider ‘sticky’ menus for long pages.Users who have reached the bottom of a long page may face a lot of tedious scrolling before they can get back to the menus at the top. Menus that remain visible at the top of the viewport even after scrolling can solve that problem and are especially welcome on smaller screens.
- Optimize for easy physical access to frequently used commands. For drop-down menus, this means putting the most common items close to the link target that launches the drop-down (so the user's mouse or finger won't have to travel as far. Recently, some mobile apps have even begun reviving pie menus, which keep all the menu options nearby by arranging them in a circle (or semicircle).
‘Wow’ the User with Innovative and Interesting Menu-Interaction Methods
Attempting to impress your users with cool effects shouldnotbe one of your priorities when creating menus. Other designers may be impressed by novel menu designs, but users tend to be far more impressed by great content that is attractively presented and easily accessed with familiar menus.
Of course sometimes new types of menus improve the user experience. (Mega-menus are a great example of this phenomenon.) Or, sometimes new technologies are so different that some of these guidelines won't apply — for example, the guideline for visual weight is irrelevant to voice-recognition systems. But these cases are few and far between, and most interfaces will be easier to use if they adhere to these principles.
(Learn more about menus in ourfull-day course on Navigation Design.)