Navigation
Terminology
- Global navigation
- Indicates the opt-level categories of a website/app and is shown on every page/screen.
- Local navigation
- Indicates the user’s current location within the site - showing sibling pages within the current category, and if applicable, the children or nieces and nephews of the current page.
- Utility navigation
- Consists of secondary actions and tools, such as contact, subscribe, save, sign in, share, change view, print, etc.
- Doormat navigation
- Navigation that is included both at the top and the bottom of the page (a doormat is the first thing you see when you arrive and the last thing you see when you leave).
- Breadcrumb navigation
- Navigation that reflects the information hierarchy of your site (or where the current page sits within the overall site map).
- Hamburger navigation
- Also called hidden navigation is a menu that is hidden until a user action is made. This is often clicking on a "hamburger" icon but can be another object or label.
- Combo navigation
- Where some main navigation links are visible and some were hidden under a menu.
General best practices
- 5 Tips to make navigation visible
- Large menus for large screens
- Put menus in familiar locations
- Make menus visibly interactive (clickable)
- Add space around the menu
- Add contrast to and around the menu
- Four Dangerous Navigation Approaches that Can Increase Cognitive Strain
- Thin, horizontal, roll-over activated menus: Testing users’ fine motor control (and patience)
- Unfamiliar labels: Forcing translation of your creative nomenclature
- Redundant links on routing pages: Increasing the perceived number of choices
- Overly incremented sliders: "Fun" tools that become obstacles
- Link labels should follow the 4Ss:
- Specific: Vague or repetitive links make it difficult for users to anticipate what these links lead to.
- Sincere: A link is a promise.
- Substantial: links should contain the most important content that users will find if they select it. A link's surroundings are often ignored. See: “Learn More” Links: You Can Do Better
- Succinct: Get to the point as quickly as possible, to increase the likelihood that users will quickly understand the link as they scan and process the page
- Avoid image sliders and carousels. They're difficult to get right. See: Carousel Usability - Designing an Effective UI for Websites with Content Overload
Local Navigation
Source: Local Navigation Is a Valuable Orientation and Wayfinding Aid
Local navigation serves a few purposes simultaneously:
- It indicates the category of the current page and, thus, works as an orientation element, similar to a “You are here” indicator on a map.
- It shows links to other pages (or information) within the same information-architecture (IA) category and, thus, serves as a wayfinding element that tells users where they can go from their current location.
- It facilitates access to deep parts of an IA (e.g., second or third-tier subcategories) that would otherwise require a higher interaction cost to access.
Local navigation is best suited for website users that:
- tend to browse multiple subpages of a category within a single session
- tend to compare or combine information which is displayed on multiple pages (e.g., product information)
- tend to start their site visit on interior pages (rather than on the homepage) and need to stay oriented throughout the session
An effective local navigation should:
- be highly discoverable and recognizable. Will users notice it and are they able to distinguish it from the global nvigation?
- support typical pathways between content. Does the local navigation facilitate access to content that is needed i a single session, as users are carrying out a top task?
- incurs minimal interaction cost. Is it easy for users to access the local navigation?
Utility Navigation
Source: Utility Navigation: What It Is and How to Design It
Some best practices for utility navigation:
- Provide icons with text labels. People like icons, but they don’t understand them and have trouble memorizing them Researchers find that the hamburger menu is used more when it is labeled Menu and looks like a button.
- Avoid hidding mission critical menus behind a button. If you do, it works best on mobile platforms, where there is very little distraction in the user interface.
- Group utilities where people expect them: either in the top-right corner or next to the content they affect.
- Make controls look like controls, and use typical names for them.
- Separate the two types of social-media icons. Divide the Follow us from the Share this, because they tend to look alike, but they do very different things.
- Don’t go wild with sharing tools and sharing counters, because research shows people do more sharing with their own tools and methods.
- Include subscription tools. Make it easy for readers to follow features, authors, and feeds.
- Follow search-tool best practices.
- Don’t use country flags for locales unless there are only a few locales that share the same language (so the flags used would be familiar to most readers). Use the name of the language in its own character set instead.
- Put Log In and Sign Up next to each other.
- Use colors and buttons to emphasize the most important actions and to draw the eye to the utility area.
Breadcrumb navigation
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile:
- Breadcrumbs should not replace the global navigation bar or the local navigation within a section.
- Breadcrumbs should display the current location in the site’s hierarchical structure, not the session history.
- For polyhierarchical sites, breadcrumbs should show a single pathway in the site’s polyhierarchy.
- Include the current page as the last item in the breadcrumb trail.
- In the breadcrumb trail, the breadcrumb corresponding to the current page should not be a link.
- Breadcrumbs should include only site pages, not logical categories in your IA.
- Breadcrumbs aren’t necessary (or useful) for sites with flat hierarchies that are only 1 or 2 levels deep, or sites that are linear in structure.
- Breadcrumb trails should start with a link to the homepage.
- Mobile: Don’t use breadcrumbs that wrap to multiple lines.
- Mobile: Don’t use breadcrumbs that are too small or too crowded together.
- Mobile: Consider shortening the breadcrumb trail to include only the last level(s).
See also: Breadcrumb navigation
Search
Search Is Not Enough: Synergy Between Navigation and Search
- Search requires knowledge of the search space. In order to formulate a good search query users need to know fairly well what they are searching for. They need to understand the search space and put in the right keywords.
- Search increases memory load. Even when users are familiar with the search space, search requires them to recall information from their memory. To come up with a meaningful query, a user needs to think about attributes that are relevant for his goal and incorporate them in the query.
- Search has higher interaction cost than browsing. Search forces users to work more because not only must they come up with a query, but they also must type it.
- Site search often works poorly. Even if users are able to come up with a reasonable search string, chances are that the results returned will often be irrelevant.
- Users have poor search skills and don’t know how search works. Their search mental model is corrupted by the big search engines and they expect search to work in the same way on every site.
Further learning
- Article: Vertical left-side navigation
- Hero menu