Mastering Navigation Design: Principles, Forms, and Real-World Examples

Introduction

McGovern noted that users prefer navigation over direct search because navigation presents a choice rather than a fill‑in‑the‑blank task, highlighting its importance in product design. In B‑to‑B systems, complex business logic makes selecting an appropriate navigation design especially critical.

Navigation Design Principles

Maintain coherence and consistency – Ensure users can clearly see whether a menu has sub‑levels, avoiding hidden or ambiguous items. Alibaba Cloud’s progressive sidebar navigation exemplifies this by supporting large business content while providing a clear experience.

Design clear and understandable interactions – Visualize interactions with directional arrows and differentiate visual elements (e.g., Meituan’s distinct icon styles) to guide users and provide feedback.

Design flat navigation structures – Limit hierarchy depth; the fewer clicks required, the faster users reach their goal. Use progressive disclosure when classification boundaries are clear, and full‑display navigation when they are ambiguous.

Consider device characteristics and compatibility – Mobile devices lack hover states, so click‑based interactions are needed. Responsive designs, such as Huawei Cloud’s switch from top navigation on PC to sidebar on mobile, adapt to platform traits.

Consider progressive information display – Manage cognitive, visual, and action load. Use progressive hiding for clearly classified information to reduce visual load, or full‑display for complex, less obvious categories.

Navigation Design Forms

NavMenu – Includes top navigation, sidebar navigation, and hybrid navigation for grouping website information.

Breadcrumb – Shows the current page’s path within the site hierarchy and enables quick jumps to other levels.

Tabs – Provides parallel level switching for modules or views.

Pagination – Splits large lists or feeds into manageable pages, reducing load time.

Steps – Guides users through multi‑step tasks, displaying progress and reducing memory burden.

Dropdown – Aggregates actions or links into a hidden menu that expands on click or hover.

Case Study: Suning Logistics “Tianyan” Platform

The Tianyan system integrates all Suning Logistics data, supporting data‑driven operations, risk alerts, capacity adjustment, and reporting. The legacy version used an F‑shaped navigation that required extensive horizontal and vertical switching, consuming excessive screen space and limiting data visibility to about 56% on a laptop.

Redesign goals were to unify interaction and visual experience, improve data visualization, and accommodate expanding business modules. The new design adopts a progressive sidebar navigation that can be hidden behind a top‑left button, allowing data panels to occupy over 90% of the screen and supporting future expansion.

Conclusion

Web navigation design is fundamental to user experience and product scalability. Designers must consider coherence, interaction clarity, hierarchy depth, device compatibility, and progressive disclosure, and choose appropriate navigation forms based on the specific context.

References

WeChat public account Wu Yi: Web design components – navigation.

Everyone is a Product Manager: Navigation design, four key points.