Mastering Navigation Design: From Architecture to Interactive Components

Preface

The article introduces a practical navigation design course created by vivo VMIC UED for new designers, aiming to provide growth resources for those entering the design industry.

1. Navigation

The term "navigation" originates from the 15‑17th‑century era of geographic discovery, meaning to guide a ship along a route. In the digital world, navigation design presents the information space of a product, acting as the visible layer of its information architecture and helping users move freely within it.

2. Navigation System

1) Definition

A navigation system is a collection of interface elements whose purpose is to help users locate target functions and content. It includes navigation paths, components, and related information; a single component alone does not constitute a system.

2) Classification

Navigation systems can be divided into several types:

Global navigation : Appears on every page, usually as a top‑level menu, allowing users to reach key nodes from any hierarchy level.

Local navigation : Provides routes within a specific module, typically showing parent, sibling, and child pages.

Auxiliary navigation : Cross‑level links that offer shortcuts to content not covered by global or local navigation, useful for “mid‑journey” returns.

Inline navigation : Embedded within content, linking to specific pages, files, or objects, enhancing flexibility.

Friendly navigation : Offers a convenient entry that may be hidden when not needed.

Remote navigation : Exists outside the product’s structural hierarchy, such as site maps or index tables.

3. Navigation System Design

Designers can approach navigation from four dimensions: architecture, framework, components, and information.

Architecture

Defines the direction of navigation paths, ensuring relationships match user cognition and that jump distances are reasonable.

Framework

Determines where navigation is placed within the interface, aligning with product nature and usage scenarios.

Components

Typical navigation components include menus, tab bars, side tags, steering (dial) navigation, filters, headers, navigation bars, breadcrumbs, hamburger (drawer) menus, dropdown menus, pagination, steppers, sticky elements, floating‑ball (touch‑point) navigation, links, palace (grid) navigation, list navigation, index tables, and site maps.

Information

Effective navigation conveys clear hierarchy, maintains readability, ensures consistency while highlighting differences, and aligns with users’ mental models and habits.

Conclusion

Good navigation design accurately conveys product functions, guides users efficiently, and adapts to product evolution and user contexts, ultimately supporting a smoother user experience.