The selection of a connective topology that shapes how actors move between destinations, balancing freedom of movement against orientation cost. Each model determines which navigation behaviours are possible and how agency is distributed.
Models
- Hub and spoke — central hub lists all sections, actors return to hub for cross-section navigation
- Overview and detail — simultaneous display of collection and item (Split View)
- Fully connected — every page links to all others through global navigation
- Multilevel tree — hierarchical structure with global navigation for main pages, local navigation for subpages
- Step by step — prescribed sequences with back/next controls
- Pyramid — hub lists sequence, actors can navigate sequentially or jump to any item
- Pan and zoom — continuous spatial navigation through large single spaces
- Flat navigation — minimal navigation, all functions accessible in one place
- Hybrid patterns — combinations of multiple models
Decision tree
Refining by behaviour
- Navigate to known locations → Fully connected, tree
- Browse and discover → Pyramid, pan and zoom
- Complete focused tasks → Step by step, flat
- Monitor multiple areas → Hub and spoke
Refining by agency
- Maximum control → Fully connected, pan and zoom, flat
- Balanced guidance → Pyramid, tree
- System-guided → Hub and spoke, step by step
Refining by scale
- Small (< 10) → Fully connected
- Medium (10-50) → Hub (mobile), tree (desktop), pyramid (sequences)
- Large (50+) → Hybrid patterns
Hybrid combinations
When single models don’t fit:
- Hub + fully connected — hub feels constraining, cross-section workflows frequent
- Tree + fully connected — large volume with clear sections, cross-section relationships
- Step by step + pyramid — logical sequence but flexible ordering, varying expertise
- Fully connected + pan and zoom — mix discrete and spatial content
- Hub + flat — multiple independent workspaces, each feature-rich
- Pyramid + tree — many sequences requiring category organisation
- Pyramid + filtering — large collections that need both sequence and narrowing
Malleable Routing
In a malleable system, the target of a link is not a fixed location. Users can choose how they want to open a resource, affecting the composition of their workspace:
- Standard: Navigate to new page (Replace current context).
- Split: Open side-by-side (Compare contexts).
- Peek: Open in overlay/modal (Temporary reference).
- Background: Open in background tab (Queue for later).
Navigation becomes a tool for composition.
Implementation considerations
Universal navigation features
All models benefit from:
- Deep linking for addressability
- Searching for direct access
- Breadcrumbs for context
- Command menu for power users
UI design independence
Models can be rendered in various ways:
- Tabs, menus, sidebar trees for fully connected or tree
- Cards, lists, grids for hub and spoke
- Progress indicators, stepper components, or next/previous for step by step
To-do
- Capture navigation model ↔ navigation-behaviour relationships. Each model supports or constrains specific behaviours. Likely needs the behaviours to become graph-addressable first.
Resources & references
Tidwell, Brewer, Valencia (2020) Designing Interfaces, 3rd ed.