navigation

77 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

Top navigation menu constraints

Top navigation menu places hyperlinks in a row and presents information in a simple and straightforward way. It is suitable for landing pages and consumer-facing web apps. The number of first level menu items should be between 2 and 7. The title for each menu item should contain less than 15 characters.

Side navigation menu usage

Vertical navigation is more flexible than horizontal navigation. Menu items are easily extensible downward, and longer labels can be allowed. With help from a scrollbar, an unlimited number of menu items can be supported. Side navigation is suitable for multi-level, operation-intensive, and dashboard-like web apps.

Breadcrumb hierarchy depth recommendations

When hierarchy is deep, it is recommended to hide certain pages. The depth of pages shown should at best be lower than 3 and should not exceed 5.

Breadcrumb usage considerations

Avoid using breadcrumb as much as possible, especially when a page contains other navigation components that sufficiently tell users where they are. Breadcrumbs tell users where they are now among page hierarchy and show parent-child relationships between pages.

Tabs label character limit

Tab labels should contain less than 15 characters. Tabs categorize content to present large amounts of information in a limited space, and users can easily switch among tab panels without transitioning from one page to another.

Basic tabs usage

Basic tabs control content of the entire page and are usually used for switching among core functionalities.

Card tabs usage

Card tabs control part of page content. The bordered container naturally separates it from other parts of the page.

Pill tabs usage

Pill tabs switch among options in a card. They are usually used in a small section or along with basic and card tabs to allow users to navigate to intended content via quick tab switching.

Vertical tabs usage

Vertical tabs are used for a large number of tab options and can be easily extended to contain an unlimited number of categories.

Horizontal steps constraints

Horizontal steps should be used for more than 2 but less than 5 steps. The title for each step should contain less than 12 characters.

Basic pagination with customizable page size

When there is a large number of rows, page size can be made customizable by users, allowing them to query and browse information more flexibly and effectively. A quick page jumper can be used when there are more than 5 pages.

Simple pagination usage

Simple pagination is commonly used in a Card or a data table for no more than 10 pages.

Single column list layout

Stack elements from top to bottom, with the data filtering module at the top. After filtering the data, users can browse and analyze from the general to the specific.

Two-column list layout

Place the data filtering module in the sidebar when there are many filtering conditions and ample horizontal space.

Navigation design validation method

Validate navigation system design quality by stress testing it like skydiving into the website: (1) Skip the homepage, randomly jump to some page on the website; (2) Check if users know their current position and relationship to other site parts - what website? what part? what are parent pages? (3) Check if they know where this page will take them - do link texts clarify the destination?

Previous and next article navigation

Previous and next article navigation helps move to other closely related webpages.

Navigation design principle: Traceability

Users can locate the information they want through the navigation system.

Navigation design principle: Efficiency

Navigation should support efficiency through: (1) Multiple access points - provide multiple links to the same destination; (2) Shortcuts - provide shortcuts to access content, such as related links; (3) Escape routes - clicking the logo to return to the homepage to restart information seeking.

Five navigation types in Ant Design

Navigation is divided into five types: (1) Global navigation; (2) Back navigation; (3) In-page navigation; (4) Drilling navigation; (5) Associative navigation.

Popup navigation pitfalls

When using popup navigation: (1) Do not make users follow narrow hover paths to access navigation menus; (2) Do not make users open each menu level one by one to search - this is inefficient and difficult. Note: this guidance applies only to navigation menus, not to operation menus.

Utility tools placement and content

Utility tools are typically placed in the top-right corner of the website as this is a common user expectation. Common contents include: global search, notification center, website help, customer service information, shopping cart, favorites, login tools, and language switching.

Utility tools pitfall

Do not place page-level operations into utility tools; they should only contain site-wide utilities.

Tree component for in-page navigation

Tree component shows multi-level structures within a page.

Anchor links usage

Anchor links enable jumping between various page sections. They should be used when flat-presented content is too long.

Back to top button

Carousel for in-page navigation

Carousel cycles through a series of content.

Drilling navigation

Drilling navigation occurs when clicking to enter lower-level content in the information architecture. Default behavior is to navigate within site; external links open in new tabs. Typical scenario is drilling from list to details.

Breadcrumb navigation guidance

Breadcrumb reflects the current page's position within the website structure. It should not be displayed when there are fewer than three hierarchy levels, as global navigation can directly show the position. Users can use breadcrumb to return to parent pages.

Steps component for associative navigation

Steps component guides users through a predefined sequence, moving step by step forward or backward. Display steps on each page of a series, marking the current page's position on this linear path. Suitable when: (1) User access path is linear; (2) Steps break complex tasks into manageable small tasks, reducing errors and enabling faster task completion.

Carousel navigation purpose

Carousel navigation cycles through a series of content.

Navigation design goals

Navigation is used to display where the user is in the current product and where they can go. The design goals are to make users clearly aware of their current position in the product and to conveniently and quickly take them to where they want to go.

Navigation design principles: Findability

Findability is a core principle of navigation design, ensuring users can locate the information they want.

Navigation design principles: Efficiency

Efficiency is a core principle of navigation design achieved through three mechanisms: (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—clicking the logo returns users to the homepage to restart the information search.

Information architecture recommendations

Keep the information architecture hierarchy shallow, flat, and wide as much as possible. Consider navigation from the user's usage path rather than based solely on the hierarchical structure. Common organizational methods include: by topic (services or content categories), by audience (administrators, operators, users), or by task (understanding cooperation models, contacting specialists, signing process, cooperation coordination, business operation, customer service).

Navigation paths: types of user movement

A complete navigation should allow users to move along four types of 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.

Five types of navigation

Navigation is divided into five types: Global Navigation, Back Navigation, In-Page Navigation, Drill Down Navigation, and Associative Navigation.

Sidebar navigation usage

Sidebar navigation is used when there are many menus, recommended for more than 6 menu items. It can carry multiple levels, with 1–3 levels 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.

Top navigation usage

Top navigation is recommended for 2–7 content items. Recommended for 1–2 levels; when more than 2 levels are needed, pop-up navigation is recommended. The weight of each menu is often positively correlated with the order, meaning the order affects the frequency of user use.

Pop-up navigation usage

Pop-up navigation is used to expand the navigation bearing level and is suitable for large websites. Sitemap-style navigation allows users to see the available functions of the entire site at a glance. Two key rules: (1) Do not make users follow a narrow hover path to get navigation menus; (2) Do not make users open each layer of the menu step by step to find content, as this is inefficient and difficult. This suggestion applies only to navigation menus, not operational menus.

Utility navigation placement and content

Utility navigation is usually placed in the upper right corner of the website, which is a habitual usage location where users are accustomed to finding these contents. Typical content includes: global search, notification center, site help, customer service information, shopping cart, favorites, login tools, and language switch. Do not place in-page operations in utility tools.

Subsite navigation and information architecture

Enterprise products often adopt a mixed structure of hierarchy and database in information architecture. This structure usually has deep layers. To achieve a shallow, flat, and wide perception level for users, several deep layers should be organized 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 requiring a large workspace and handle tasks immersively as a subsite, such as an editor. In subsite mode, there is low demand for full-site navigation functions, usually only needing to provide an exit to return to the upper level or homepage.

Multilevel site navigation usage

Multilevel site navigation is 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.

In-page navigation overview

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.

Page header purpose

The page header is located above the page content and is mainly used for declaring the page theme, in-page information navigation, and page-level content operations.

Tree control usage

Tree control displays a multi-level structure within the page.

Anchor navigation usage

Anchor navigation jumps between various page sections and is used when the content displayed in a flat layout is too long.

Back to top button purpose

The back to top button quickly returns users to the top of the page.

Immersive navigation usage

Immersive navigation is used to handle complex tasks or those requiring a large workspace.

Drill down navigation behavior

Drill down navigation allows users to click to enter the lower-level content of the information architecture. It defaults to in-site navigation; opens a new tab for external sites. A typical scenario is drilling down from a list to details.

Breadcrumbs usage and recommendations

Breadcrumbs reflect 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.

Back button in page header usage

The back button in the page header is equivalent to a short breadcrumb and is used to return to the previous level. Titles typically appear alongside breadcrumbs. When breadcrumbs are present, back buttons in titles are not recommended. The back button is suitable for subsite scenarios where full-site navigation is hidden and users need to return to the upper level through the back button.

Step bar usage and benefits

The step bar guides users step by step according to a predefined sequence and is displayed on each page of a series of pages, marking the current page's position on this linear path. It is 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.

Previous/Next navigation purpose

Previous/Next navigation helps users move to other closely related web pages.

Navigation design validation: stress test

To test the quality of the navigation system, conduct a stress test by parachuting into the site, testing the navigation system's limits. The test involves: (1) Ignoring the homepage and going directly to a random page on the site; (2) Checking if users can know their current position and its relation to other parts of the site, which part of the site this is, and what the upper-level page is; (3) Determining if users know where this page will take them and whether the link text explains the destination.

Secondary confirmation overlay pattern

Avoid overusing Modal for secondary confirmation. Instead, allow users to attempt the action directly and provide an 'undo' option. Use Message to inform users of success with an undo button. The Message disappears after user performs another action or after 1 minute of inactivity. Exception: For irreversible operations, use Popconfirm for secondary confirmation on the current page.

Details overlay pattern

In lists, load additional details about a list item through user 'hover' or 'click' on a block, displaying more information on the current page. When using hover activation, set approximately 0.5 seconds delay before triggering; close the overlay immediately when the mouse leaves.

Input overlay pattern

Allow users to directly input a small number of fields on an overlay layer. Trigger by mouse click on an icon; directly save input results and exit when user clicks outside the overlay.

List embedding layer pattern

Display detailed information for a list item directly within the list, maintaining uninterrupted context without navigating away.

Tabs pattern for information organization

Organize multiple equal-level information groups using tabs, displaying only one group of information at a time.

Virtual page concept

Virtual pages are not limited to the mechanical concept of traditional pages. Overlay layers display additional content and interaction links on top of the current page; embedding layers achieve the same effect within the page; virtual pages leverage characteristics of the information age to build new types of pages.

Give your agent this brain