Clear and Consistent Navigation
Navigation of a website or app is critically important for all users, so designs should be clear and consistent across all pages and views. Organize menu items in a logical way with succinct labels. Before you start the visual design of the menu, it can be helpful to draft a sitemap to build a structured overview of all content.
Multiple Ways to Navigate
To accommodate a wide variety of users, be thoughtful in creating designs that provide multiple ways to locate pages. These may include:
- Search
- Menu
- Breadcrumb
- Sitemap
Providing multiple means of navigation ensures that no matter what the user’s approach, they’ll find the experience to be seamless and intuitive.
This website offers three ways to navigate: breadcrumb, search, and menu.
Dropdowns and Other Hidden Panels
In interactive design, important content and functionality are often contained in panels that are visually hidden. Examples of these panels include:
- Dropdowns
- Drawers
- Modals
- Accordions
- Tabs
Ensure any user interaction required to access hidden content is clearly labeled. Buttons to toggle visibility should be keyboard accessible, and should not require hovering with a mouse.
The top-level items in this menu each have a visible label along with an icon to indicate they are expandable.
People use a variety of methods to interact with an interface, including:
- Mouse
- Keyboard
- Voice activation
- Sip and puff
Ensure interactions don’t involve complex or precise gestures that can be a barrier for users with motor or cognitive disabilities.
The nested sub-menus in the first example can be quite difficult to navigate if hovering outside collapses them. Instead, the sub-menu can be activated on click instead of hover, and the second nested menu can be placed in a static sidebar.