A field guide to the models that shape how actors move between destinations, each balancing freedom of movement against orientation cost. Each model determines which navigation behaviours are possible and how agency is distributed.

In practice the model is rarely chosen. The kind of space a region holds is read off its content at a glance, and for three of the four kinds the model follows from the kind. Only heterogeneous sections leave a topology open, and there a working design starts from its genre’s default and corrects it under load, one pain at a time. The step that recognises the kind, and the growth steps that correct it, are walked in structuring the space.

Kinds of space

One continuous space — a map, a canvas, a timeline. Movement is viewport control, not link-following.

• Pan and zoom. Costs orientation: at any zoom the view carries no evidence of where it sits in the whole.

An ordered sequence — a checkout, a setup, a course. Movement is progression.

• Step by step when later steps depend on earlier ones. Costs the actor who already knows where they need to be.
• Pyramid when they don’t: the hub states the shape and the actor enters anywhere. Costs the hub the job of showing the shape.

One collection, browsed item by item — records, files, messages. Movement collapses into focus moving between two coupled views.

• Overview and detail. The topology question dissolves here; the design continues in composing views.

A collection can have an order too, and where the order comes from tells the two kinds apart. An authored order, such as a course or a setup, makes an ordered sequence. An order derived from an attribute, such as date, name, or rank, leaves it a collection.

Heterogeneous sections — destinations that differ in kind. The one kind with a real choice among topologies.

• Flat navigation — everything on one surface. Holds only while the tools fit.
• Hub and spoke — a hub lists the sections and every journey returns through it. Costs the journey between two spokes, paid twice on every trip.
• Fully connected — every section one move from every other. Costs chrome on every page, and the chrome is a fixed budget content growth eats into.
• Multilevel tree — sections with subsections behind them. Costs lateral trips back up, and files anything that belongs in two places in one.
• Hybrid patterns — more than one of the above, per region. The normal case at scale rather than a fallback.

Each genre has a default to start from:

• A desktop tool with tens of sections: a tree under a global menu.
• A phone app: fully connected across a tab bar, or a hub when the app opens on a launch screen of independent spokes.
• An editor: one surface.
• A space with under ten destinations: fully connected.

Growing past a model

The topologies among sections are weighed against each other when a region hurts, not before. Each pain has a worn path:

• The one surface no longer fits its tools → flat splits into hub and spoke.
• Journeys between spokes have become routine → the hub opens direct paths and becomes fully connected.
• The global chrome no longer fits its sections → the depth goes into a tree.
• The tree’s lateral trips have become the common case → cross-links, or a command menu and search as the escape hatch, before the shape changes.

Every address the region ever handed out constrains the move; deep linking owns that contract.

Other ways to read the choice

Lenses for explaining a model already recognised, not steps to walk:

• By what the actor is doing: navigating to known locations suits fully connected and the tree; browsing and discovering suits pyramid and pan and zoom; focused tasks suit step by step and flat; monitoring several areas suits hub and spoke, with the monitoring view itself a purpose-keyed view.
• By who drives: fully connected, pan and zoom and flat leave the most to the actor; pyramid and the tree guide; hub and spoke and step by step lead.
• By how much there is: under ten destinations, fully connected; tens, a hub on mobile, a tree on desktop, a pyramid for sequences; past fifty, hybrids.

Hybrid combinations

Pairings that recur:

• 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

Resources & references

Tidwell, Brewer, Valencia (2020) Designing Interfaces, 3rd ed.