All notes

Navigation: Knowing Where You Are Matters More Than More Links

Make scope, object hierarchy, selected routes, and mobile navigation understandable from a deep link.

English edition, edited for length. Read the complete Chinese original.

Assume a user follows a search result to a settings subpage. The left menu has no selected item, and the page title is simply “Management.” The user cannot tell whether this is an organization-level or personal setting. Navigation must do more than provide entry points: it must explain the current level, the available return path, and the scope affected by each action.

Consider the possibility of directly accessing organizational billing settings from emails: users cannot determine the scope based on previous navigation history since they haven’t viewed the homepage. The page should at least include the organization name, billing title, and a predictable entry point for organizational settings. The following is a hypothetical scenario, not research results. Treating deep links as normal entry points can force information architecture to be independent of historical context, and also expose naming conventions that only make sense when accessed through multiple clicks.

Information about the billing page’s scope can appear directly beside the title: the current organization, current bill, and the user’s permission to act. When a user switches organizations, the page must refresh the relevant objects and permissions instead of retaining the previous organization’s amounts or button states. The current location is not merely a menu highlight; it determines which organization an action affects. Deep-link entry points make this hidden context easier to detect.

The “Return” function has two meanings: to return to the previous organizational level, or to return to the previously visited location. The former represents a stable, hierarchical link, while the latter depends on the browsing history. When accessing from outside the application, there is no browsing history, which means that a “Return” button cannot reliably take the user to the email or search page without providing clear indication. Use accurate labels to distinguish task paths.

This involves handling the global area, the current object, and the page’s internal structure separately. The sidebar represents the stable area, breadcrumbs represent the object hierarchy, and the internal directory only describes the current content. Combining all three into a single menu would mislead users into thinking that chapters and business objects have the same relationship.

Global areas, such as articles, projects, and “about,” represent stable categories. Organizations, projects, and documents represent business objects. Notifications and privacy within a single page are local sections. These three types of relationships can coexist, and do not necessarily require the same navigation component. When using breadcrumbs to express hierarchy, it is important to clearly indicate whether the parent item is a real page and to avoid using visual styles that resemble links for inaccessible organizational labels.

The system should not infer the user’s entry path based on the login homepage. Deep links must be established independently. Permissions affect the visibility of entry points, but hiding entry points does not replace authorization. Navigation labels should not use internal department names, and the initial version should maintain the real structure, without adding blank pages to fill the menu.

Choose a sidebar or top bar based on switching tasks

The hierarchy of business objects should reflect genuine relationships, not fabricated parent pages for aesthetic purposes. When an organization has projects and documents, it’s appropriate to represent this structure; however, a single article’s topic may not necessarily be the only parent object, and tags are not suitable for creating a single-level hierarchy. Information architecture allows for classification, relationships, and navigation, without necessarily representing all content as a single tree.

The internal page directory only focuses on chapter navigation; clicking does not switch to a different business object. The visual style can be similar to the main navigation, but with clear semantics and positioning. The current chapter status is also distinct from the current page. This allows users to determine whether they are scrolling or navigating away, preventing them from misinterpreting the relationship due to visual similarity.

Permission restrictions affect the interpretation of the structure. When a parent level is inaccessible, you can display the names of allowed disclosure levels without creating links, or use a restricted explanation. You cannot first render the complete secret organization path and then rely on a click-to-deny mechanism. Navigation using the same authorization scope does not replace server-side checks, even if the entry is hidden.

Fixed sidebars are suitable for frequent cross-area operations, while topbars are better for areas with few regions and extensive content. The choice depends on the task, not on popular styles. Folded menus save space but reduce visibility, so narrow screens retain the current position and a clear entry point for expanding.

When navigation items are limited, the top bar is beneficial for maximizing the width of the main content. When frequently switching between modules using management tools, the sidebar is convenient for maintaining the position. However, not all areas should be fixed at the top of the screen. You can record the target users need to switch to continuously, and then determine whether it is worth keeping the position. After collapsing on mobile, the current position and its scope should still be visible, otherwise the cost of repeatedly opening menus will outweigh the space saved.

Why collapsed icons weaken the sense of location

Before choosing a sidebar layout, consider listing the following common tasks: frequently switching between projects, team members, and invoices, or spending extended periods reading articles after entering them. While a persistent navigation bar takes up space, it reduces switching costs. A top navigation bar is lighter but may limit the number of areas you can access. Based on your tasks, don’t blindly copy a management backend just because it looks professional.

Grouping names can help create a map, but internal department names may not be meaningful. Users searching for invoices might not recognize “Business Operations Center,” and users looking for team members might not understand “Resource Management.” Instead of requiring users to learn the organizational structure, use user tasks and object names, and verify the categories through testing when necessary.

New modules do not automatically appear at the top level. They may belong to an existing area or only appear in the context of a specific object. Increasing the number of top-level items makes global selection more difficult, while reducing the number of items may hide frequently used targets. Keep track of frequent switching and discovery tasks, and identify the appropriate level. Do not rely solely on the length of the menu as a measure.

When the application collapses, it may only display unrecognizable icons, or the back button relies on browser history, leading to the application being closed. This results in a loss of location awareness. Deeper nesting levels can also cause breadcrumbs to overflow. Instead of removing the single term that clearly defines the scope, it’s important to retain meaningful parent and current objects.

An icon representing a house could indicate the application’s home page, or it could represent an overview of the current project. Relying solely on tooltips is not sufficient for touchscreen users to understand the application over the long term. Collapsible navigation can retain accessible names and a clear expansion/collapse mechanism, while key areas can continue to use text labels when necessary. The current page’s emphasis and keyboard focus must be clearly distinguishable, to prevent users from mistakenly believing that the focus has been moved, which would indicate a route change.

Calculate selected state from the target route

Collapsible navigation can retain the current area name and the expansion entry, with appropriate helper labels for the icons. This allows touch screen users to directly operate the icons without relying on hovering. If a set of icons is difficult to distinguish, retaining the text is more effective than adding more tooltips. Spatial constraints can be addressed through layout adjustments, without sacrificing the core sense of location.

Long object names must maintain both identity and scope. They can be displayed on multiple lines or truncated appropriately, with the full name provided when necessary. The title, scope hint, and breadcrumbs provide the necessary information without mechanically repeating the full, long name three times, which would create clutter.

Keep current-page state, keyboard focus, and menu expansion as separate states. When a keyboard user moves focus to a link for another area, the route has not changed yet; the selected highlight must not move with focus and pretend that navigation already occurred. Expose the current page with the appropriate semantics, while keeping focus visible and predictable.

Define stable region names and selection rules. The deep link directly calculates the current navigation state. Object titles and hierarchical information complement each other, and breadcrumb links are predictable. Skipping the navigation entry makes it easy for keyboard users to directly access the main content. When the mobile menu is opened, the focus and closing behavior are clear. The same entry should not be changed to a different business meaning due to screen width changes; the content structure should remain consistent, with only the layout being adjusted.

The selected state is determined by a stable route mapping and object context calculation, and cannot be determined solely by checking if a URL contains a specific word. Personal settings and organizational settings may both contain “settings,” and string matching can lead to incorrect selection. A unified parsing rule should be used for dynamic slugs, query parameters, and trailing slashes, ensuring that the state remains consistent after refreshing, just as it was when accessed through a link. Pages with insufficient permissions should also be able to determine the current scope.

Validate the navigation map from external entry points

Back navigation can restore query state, but the scope identity must still be confirmed again. When an old filter refers to a service or project that no longer exists, explain the invalid condition instead of applying it to another object. A collection deep link is not a fixed data snapshot; it describes the current scope and available targets so that an old entry point still has a secure path.

The mobile menu follows a clear lifecycle: it opens to the appropriate position, closes back to the triggering point, and displays new content or a relevant title after a page selection. Background interactions should be handled appropriately, and the menu should not simply cover the page visually while still allowing keyboard access to underlying controls.

The search entry is also part of the navigation. The results links include object identity and scope, allowing users to independently understand their current location upon entry. Returning to the results allows for resuming the search, but requires re-authorization. Browsing history recovery does not unconditionally display old, restricted content, and maintains both location continuity and the freshness of permissions.

From searching, external links, refreshing, and different permissions, participants should identify their current location and the corresponding return path. Check for the longest object name, narrow screens, and collapsed menus. When navigating with the keyboard, ensure that the selected element is distinct from the focus, to avoid confusing the current page with the current operation.

The navigation acceptance card directly opens a deep link to an organization settings page, with the entry coming from an external message rather than the homepage. The page should clearly display the organization name, current location, and parent return path, and personal settings should not be accidentally selected. After collapsing the sidebar, there should still be a clear and understandable entry point, and the keyboard should be able to expand and continue the operation. When switching to an identity with no access rights, both menu hiding and server-side rejection should be simultaneously active. Using a long organization name and a narrow viewport, the parent meaning should not be completely lost due to cropping. Ask participants if a single action affects themselves or the entire organization. If the answer is inconsistent, the location and scope information should still be incomplete.

Validate navigation with scope checks

Multiple users need to clearly understand the state after switching. Whether the organization switch retains the same area or returns to the overview depends on whether the target resource exists. If the resource doesn’t exist, it should be hidden, and the old organization’s resources should not be displayed. The current organization name and routing are used together to confirm the context. The system should not only rely on the UI-selected organization for authorization.

Unified terminology for navigation text maintenance. Each term (member, team, organization, and project) has a defined meaning, preventing errors caused by inconsistent use of terms across different pages. When translating or adding new modules, the relationships between terms are checked. Long names have a defined layout scheme. Naming is a part of information architecture, not just a final replacement of a string of text.

Some entry points represent infrequent, high-risk operations. They can live inside the relevant settings area with a clear name instead of remaining globally visible. Reduced exposure is not a security boundary; authorization is still enforced by the server. Navigation placement supports findability, while actual rules define the security boundary.

Participants enter from an external source, identify their current location, explain the scope of their actions and the path to the parent level, and then perform a sensitive task. If they can find the button but do not understand that it affects the whole organization, scope is still unclear. Observe their actual understanding instead of treating the shortest click path as proof of orientation. The sample is limited, so the conclusion must state which tasks were covered.

The regression set includes long names, dynamic slugs, old links, unauthorized access, narrow screens, and keyboard menus. Redirect old paths while preserving the object’s meaning instead of sending everything to the homepage and masking invalid links. When a new page is added, check its title and selected-state rules. Navigation is also a contract: structural changes affect bookmarks and external links.

After launch, analyze the specific tasks in which users cannot find an entry. The cause may be unclear naming, unintuitive object relationships, or insufficient permission information; do not attribute every failure to a menu with too few items. Fix the map first, then add search or shortcut entries where the task evidence supports them. Shortcuts can speed up experienced users, but the basic structure should still let a new user find the destination independently.

Establish the new scope before restoring the task after an organization switch

Assume a user switches from the billing page of Organization A to Organization B. Organization B does not have billing permissions. In this scenario, the appropriate action is to clearly indicate that access is not permitted within the scope of Organization B, and to provide an alternative entry point. Maintaining the original billing content from Organization A and simply changing the top-level organization name to “B” would be incorrect and dangerous. This would be more problematic than a standard navigation failure because the user might inadvertently perform actions in the wrong organization.

The transition process can be broken down into the following steps: confirming the target, clearing the old range state, reading the new range permissions, and loading available pages. During the transition, it should not continue to perform sensitive actions from the old organization. Failure should not allow the old content to be disguised as new content. Whether to retain the old page as a return path can be determined by the product, but it must be clearly stated that it still belongs to the old range. The page context is not a decorative label, but a combination of data and authorization.

The presence of the same entity in one area does not necessarily mean that the same entity exists in another area. A billing number from one organization cannot be directly applied to the routing of another organization. Users can either return to the billing list of the second organization or indicate that the original entity is unavailable. The identity of the entity and the identity of the area are treated separately. The system must still avoid mismapping across entities while maintaining task continuity.

During the acceptance process, the page, address, request parameters, and server-side authorization context must all correspond to the same entity. It is not acceptable to ignore the fact that the backend request still uses the old organization just because the user interface displays correctly, nor is it acceptable to tolerate the page leaking the old content just because the server rejects it. Both continuous navigation and data isolation must be satisfied.

A shareable URL does not make its state public

Users want to share the filtered list of items with colleagues, and the address should include publicly available sorting and filtering parameters, but should not contain keys or unnecessary personal information. Recipients can access the objects based on their own permissions, and they cannot gain the same access simply because the sharer has viewed these records. Routing expressions indicate the search intent, and authorization determines the visible results.

Some states are suitable for addressing, such as page numbers, topic filters, and selected tags; others are for temporary interactions, such as incomplete sensitive forms, open confirmation windows, and one-time authorizations. Serializing all UI states into a URL would unnecessarily burden browsing history, logs, and copied links with data. The ability to share should first define the task and then determine where the states should be stored.

When accessing through an old link, the filter values may no longer exist. The page should indicate which condition is invalid, allowing removal and re-querying, rather than silently discarding all filters or claiming that there are no results simply because there is no data. Parsing failures, lack of permissions, object deletion, and normal empty results should have different explanations, providing accurate next steps within the range of information that can be disclosed.

The results page needs to restore the appropriate query and scrolling position, but also re-read the current permissions and data. Restoring the old position does not mean displaying an old data snapshot. Users need to know which ranges have been preserved and which results have been updated in order to understand why the list is different from before. The navigation experience should be seamless, but the underlying data must remain fresh.

The team has merged the “Members” page into the “Team” page, and the old entry is still bookmarked and referenced in external documents. It is possible to redirect to the corresponding member area while preserving the allowed object’s identity. While redirecting all members to the homepage avoids displaying error pages, it also makes the tasks meaningless. The redirection should check the actual relationship between the original and new target, rather than simply finding an existing route.

Moving an object does not necessarily mean that users still have access. After a document is moved from Project A to Project B, the old links can be updated to point to the new location based on permissions, or to provide restricted access information. It is not possible to publicly reveal the name of Project B, nor to retain access to the original project simply because the old link is still valid. While the object’s identity and its current location can be separate, access privileges are still determined based on the current rules.

Migration mapping requires a lifecycle. A list should be maintained that includes: which old paths are still supported, when they will be decommissioned, and which have no corresponding target. Route testing should not only check response codes, but also verify headers, ranges, and the meaning of operations. A successful redirect chain might still lead the user to an incorrect object, and the status code is not the only evidence of correct navigation.

The in-app search, email templates, and help documentation also need to be updated to the new location. Only updating the main menu will leave behind a large number of old entries, resulting in different users having different navigation maps. The scope of the information architecture change includes all production links and consumers, not just a single navigation component.

Use findability tasks to distinguish map problems from shortcut needs

Provide participants with a specific goal, such as finding the billing receipt email, and first have them indicate the expected area. Then, actually search for it. If the expected categories and the actual categories don’t match, it could be due to naming or grouping issues. If the categorization understanding is correct but switching costs are high, a persistent entry might be needed. Neither of these problems can be solved by simply adding a global button, as this would gradually turn all historical complaints into a single collection.

Testing can involve both novice and experienced users, but it’s important not to treat the paths of a few individuals as a general rule. Record tasks, scope, entry points, and points of failure to form hypotheses for the next design iteration. Tree testing can help check for classification issues, while actual page testing can check for scope and status. The questions they answer are different, so the results need to be combined rather than choosing one and declaring the structure validated.

Finally, verify whether a user can clearly understand the following three aspects regardless of the primary entry point:

  • Which entity and object are being processed currently.
  • Which area the current page belongs to.
  • Whether the next step will remain on this page or transition to another area.

The number of entry points is merely a superficial implementation. The ability to understand these three aspects is the crucial factor in determining whether the user has a clear sense of location and can effectively perform their tasks.

Give multiple navigation landmarks distinguishable names

Global navigation, organizational area navigation, and a table of contents can all exist simultaneously, but assistive technology should be able to distinguish their purposes. Avoid using the same term (“navigation”) for all three areas, as this would confuse users and require them to navigate individually to determine the content. The page structure should use appropriate semantic labels and concise names. The current page and current chapter should also be clearly identified, and the chapter location should not be treated as a routing state.

Skip the navigation entry that directs users to the main content, and ensure the header doesn’t obscure the landing point. Test the process by starting from the page and performing the main task, then returning to the necessary navigation. Check for any hidden or unnecessary intermediate points. Optimizing efficiency by reducing redundant paths is achieved after the semantic map is clearly defined, rather than hiding all navigation options from the keyboard.

References