Navigation
Navigation
- Ant Design
- Global Styles
- Design Patterns
- Design Patterns (Research)
- Overview
- Template Document
- Global Rules
- Visualization
- Motion
- Illustrations
Navigation is used to display where the user is in the current product and where they can go.
Make users clearly aware of their current position in the product and conveniently and quickly take them to where they want to go.
Users can locate the information they want.
1. Multiple entry points: Provide multiple links to the same destination;
2. Shortcuts: Provide shortcuts to access content, such as related links;
3. Escape hatch: Click the logo to return to the homepage and restart the information search.
• Keep the information architecture hierarchy shallow, flat, and wide as much as possible during design;
• Consider navigation from the user's usage path rather than just based on the hierarchical structure;
• Common organizational methods include:
By topic, such as the services or content categories provided by the product, which directly presents the site's content scope;
By audience, such as administrators, operators, users;
By task, such as understanding cooperation models, contacting cooperation specialists, signing process, cooperation coordination, business operation, customer service.
A complete navigation should allow users to move along multiple paths:
A - Lateral Move: Jump to the same level
B - Drill Down: Enter lower-level content
C - Return: Browse back through history or higher-level content
D - Associative Navigation: Navigate to content based on relevance
Correct understanding and use of navigation components are crucial to the overall product experience.
We divide navigation into the following 5 types:
Global Navigation
Back Navigation
In-Page Navigation
Drill Down Navigation
Associative Navigation
Global navigation reflects the core organizational structure of the website.
Used when there are many menus, recommended for more than 6 menu items;
Can carry multiple levels, but 1-3 levels are recommended;
Enterprise products are recommended to use sidebar navigation, which has better visibility and is easier to scan. The importance of each menu is less affected by the menu order.
The weight of each menu is often positively correlated with the order, meaning the order affects the frequency of user use;
Recommended for 2~7 content items;
Recommended for 1-2 levels; when more than 2 levels, pop-up navigation is recommended.
Used to expand the navigation bearing level, suitable for large websites.
Sitemap-style navigation allows users to see the available functions of the entire site at a glance.
Do not make users follow a narrow hover path to get navigation menus;
Do not make users open each layer of the menu step by step to find, inefficient and difficult;
This suggestion is only for navigation menus, not for operational menus.
Usually placed in the upper right corner of the website, it is a habitual usage. Users are used to finding these contents in this position.
Content usually includes:
• Global search
• Notification center
• Site help
• Customer service information, shopping cart
• Favorites
• Login tools
• Language switch
Do not place in-page operations in utility tools.
Enterprise products often adopt a mixed structure of hierarchy + database in information architecture. This structure usually has deep layers. To achieve a shallow, flat, and wide perception level for users, organize several deep layers into a subsite to reduce the number of levels in a single site and reduce user cognitive load.
Another subsite scenario is to face complex tasks that require a large workspace and handle tasks immersively as a subsite. The most common is the editor. In subsite mode, there is a low demand for full-site navigation functions, usually only needing to provide an exit to return to the upper level or homepage.
Here, the database is a form of information architecture where the content of each page is independent but follows a consistent format.
Used to handle complex tasks or those requiring a large workspace.
Used for subsites with many menus;
Subsite design should be significantly different from full-site navigation, requiring a significant transition to indicate entering a new space.
For content navigation at lower levels of the information architecture, use in-page navigation. If the page needs to be shared with others, add a location mark in the URL.
The page header is located above the page content, mainly for declaring the page theme, in-page information navigation, and page-level content operations.
Displays a multi-level structure within the page.
Jumps between various page sections, used when the content displayed in a flat layout is too long.
Quickly returns to the top of the page.
Cycles through a series of content.
Click to enter the lower-level content of the information architecture. Defaults to in-site navigation; opens a new tab for external sites. A typical scenario is drilling down from a list to details.
Reflects the current page's position within the website structure. When there are fewer than three levels, there is no need to display breadcrumbs, as the global navigation can directly present the location. Users can return to the previous page through breadcrumbs.
Titles typically appear alongside breadcrumbs. When breadcrumbs are present, back buttons in titles are not recommended.
The back button in the page header is equivalent to a short breadcrumb, used to return to the previous level. It is suitable for subsite scenarios where full-site navigation is hidden, and users need to return to the upper level through the back button.
Guides users step by step according to a predefined sequence.
Displays the step bar on each page of a series of pages, marking the current page's position on this linear path.
Suitable for:
• Linear user visit paths;
• Step bars break down complex tasks into easy-to-handle small tasks, reducing user errors and completing tasks faster.
Helps us move to other closely related web pages.
To test the quality of the navigation system, conduct a stress test: parachute into the site, testing the navigation system's limits.
Ignore the homepage and go directly to a random page on the site;
Check if users can know their current position and its relation to other parts of the site. Which part of the site is this? What is the upper-level page?
Do they know where this page will take them? Does the link text explain the destination?