Navigation Flow

A navigation flow maps how users MOVE through a product's navigation structure. The split that keeps this file honest: information architecture is the structure (what exists, how it's organized and named — see IA for flows and the full method in Information Architecture); a navigation flow is the movement — the actual paths people walk through that structure, from every real entry point, to the things they came for. Same building, two documents: the floor plan vs. the routes people take through it.

A navigation flow succeeds when, at every node, the classic three IA questions have answers: Where am I? What's here? Where can I go? If any answer is missing at any node on any path, the flow is broken there regardless of how good the IA tree looks.

When to use

• After the IA tree exists (card-sorted, tree-tested) and before/while designing the navigation UI.
• When redesigning navigation: map today's real paths (analytics) vs. the paths the structure assumes.
• When deep entry dominates — most sites' visitors land mid-tree from search, ads, and shared links, so the flow must work upward and sideways, not just down from Home.

What it answers

From each entry point, how many steps to each top task? Where are the dead ends? Which paths force a detour through Home? Can a user who landed three levels deep tell where they are and get anywhere else?

What it includes

• The IA tree as the base layer, then top-task routes traced over it from every real entry point (including search-engine deep entries).
• Which navigation components carry each hop. Global nav, local nav, tabs, breadcrumbs, sidebars, footer nav, in-page links, search, and mobile patterns each serve different moves. For the evidence on choosing and building these components (hidden-nav costs, mega-menu and breadcrumb guidelines, mobile tab/gesture rules, accessibility), use Navigation Patterns — do not re-derive it here. This file is about which component covers which path, and finding paths no component covers.
• Lateral and upward moves, not just descent: sibling-to-sibling (breadcrumbs/local nav), child-to-unrelated-branch (global nav), anywhere-to-anywhere (search — a complement to browse, not a substitute; NN/g, "Search Is Not Enough").
• Failure surfaces as nodes: the 404 page, empty search results, and "moved content" redirects are navigation moments — each needs outbound routes (search box, top tasks, suggestions), or it's an abandonment exit.

How to build one

1. Start from the tested IA tree and the top 5–10 user tasks.
2. List real entry points per task from analytics (landing pages, not the homepage you wish they used).
3. Trace each task from each entry point; write the component used at each hop (global nav → local nav → in-page link…).
4. Count hops; flag routes over ~3 that aren't wizards, dead ends, and any hop where "Where am I?" has no on-screen answer.
5. Add the failure surfaces (404, no-results) and their outbound routes.
6. Fix by rerouting (cross-links, breadcrumbs, nav changes) — or by fixing the IA, if the tree itself is the problem.

Common mistakes

• Assuming homepage entry. Testing every route from Home while 70% of sessions start on a leaf page from Google.
• Navigation that mirrors the org chart, so routes users need cross three departments' silos.
• No current-location marker — "Where am I?" unanswerable, so users can't build a mental map of the structure.
• Dead-end leaf pages: content with no local nav, no related links, no breadcrumb — the only moves are back or leave.
• Hiding top destinations behind a hamburger and calling the flow fine because the tree is fine (see Navigation Patterns for the measured costs of hidden navigation).
• Treating search and browse as rivals; the strongest flows let users switch between them mid-path (NN/g).

Example — studio marketing site

Home
├── Services
│   ├── Drone Mapping
│   ├── 3D Modeling
│   └── Interactive Media
├── Portfolio
├── Pricing
├── About
└── Contact

Traced flows over that tree:

Happy (deep entry): Google "drone mapping detroit"
  → [Drone Mapping]                          ← lands 2 levels deep
  Where am I?   breadcrumb Home › Services › Drone Mapping
  What's here?  service page + example work (cross-link → Portfolio)
  Where can I go? global nav (Pricing, Contact); local nav (siblings:
                  3D Modeling, Interactive Media)
  → Pricing → Contact ✓  (2 hops from landing to conversion)

Alternate: Home → Portfolio → project page → "Service: Drone Mapping"
  cross-link → [Drone Mapping] → Contact ✓

Error: old shared link → 404
  → 404 offers: search, Services, Portfolio, Contact
  → user recovers to [Drone Mapping]          [recovery]
  (a bare 404 here = abandonment exit)

Abandonment: [3D Modeling] has no pricing link and Pricing shows no
  3D tier → user leaves to a competitor. Fix: cross-link + tier row,
  not a bigger menu.

Checklist

• Built on a tested IA tree (tree testing lives in Information Architecture).
• Top tasks traced from every real entry point, incl. deep entry.
• Every node answers: Where am I? What's here? Where can I go?
• Component per hop named; pattern choices deferred to Navigation Patterns.
• Lateral and upward routes exist (breadcrumbs, siblings, global).
• Hop counts flagged; no forced detours through Home.
• 404 and no-results pages have outbound routes.
• Search and browse interlinked, not parallel silos.
• Dead ends: zero.

Sources

• Rosenfeld, L., Morville, P. & Arango, J. (2015). Information Architecture (4th ed.). O'Reilly — navigation systems as one of the four IA systems; the orientation questions trace to this tradition.
• Nielsen Norman Group — "Search Is Not Enough: Synergy Between Navigation and Search" (Budiu), nngroup.com/articles/search-not-enough/.
• Component-level evidence (hidden nav, mega-menus, breadcrumbs, mobile): see the sources in Navigation Patterns — NN/g studies, Larson & Czerwinski (1998), Apple HIG, Material 3, W3C APG.
• The floor-plan/routes metaphor and hop-count thresholds are conventions of this library, not published findings.