Getting to a particular state takes a few moves: narrow the list this way, open that item, scroll to the part that matters. Once the actor is standing there, the only record of how they got there is in their head. There is nothing to bookmark, nothing to send to a colleague, and coming back tomorrow means walking the same path again.
Forces
- Legible names vs. stable names — a name made from what something is called tells whoever holds the link what they are about to open, and breaks the day it gets renamed. A name made from an identifier never breaks and says nothing.
- Restoring the view vs. handing over the sender’s settings — the more of the state a link carries, the closer the recipient’s screen is to the sender’s, and the more of the sender’s private arrangement arrives uninvited.
- Naming states vs. rearranging freely — a state with an address is a promise to keep answering it. Reorganising later breaks links held by people who aren’t there to say so.
Solution
Give every state worth returning to an address of its own, and keep that address current as the actor works, so the state can be bookmarked, sent, or resumed without being rebuilt. The address has to work in both directions: opening it reconstructs the state, otherwise it only looks addressable.
Choosing where state goes
An address has three jobs to hand out. Which one a value takes follows from what the value means to the actor, not from how much state there is.
What identifies the thing
Change it and the actor is looking at something else; take it away and there is nothing left to look at.
/products/4815-modern-wristwatch
/users/alice/settings
What narrows the view
Which items are filtered in, how they are sorted, the page reached, the layout chosen. Drop these and the link still lands somewhere sensible — the same collection, unnarrowed.
/tasks?filter=completed&sort=date&view=list
Narrowing that changes what comes back is still narrowing. Page two and page one show different items and describe the same collection; two products are two things.
What points inside the view
A section of a document, a highlighted range, where a canvas is parked. It means nothing until what surrounds it is on screen, and it is usually the thing the actor was actually looking at.
/document/123#section-4
#canvas-x=1240&y=680&zoom=2.5
Most states worth sending use all three at once — the board, how it is currently narrowed, and the card in front of the actor:
/board/sprint-3?filter=assigned-to-me#card-1234
What the actor set once for themselves — theme, density, a collapsed sidebar — is the class of state to leave out. It belongs to the person rather than to the view, and having someone else’s arrangement imposed on arrival is a surprise, not context.
Names that survive renaming
A readable address tells whoever holds it what it points at before they open it: /products/modern-wristwatch is legible in a chat message in a way /products/4815 is not. But a name taken from a title breaks when the title changes, and titles change.
Carrying both settles most of it:
/products/4815-modern-wristwatch
The number is what resolves; the wording is there for whoever reads the link. A renamed item keeps its address, and a link sent last year arrives at the current wording rather than at a dead end.
Where the state has no natural name — a filter combination, a canvas position — a short code standing in for the whole arrangement keeps the address manageable, at two costs: the recipient can no longer read what they are about to open, and the link dies with whatever record the code stands for.
Which changes deserve a Back step
Keeping the address current as the actor works is what makes any moment sendable. Not every change is a step in a journey, though. Filters adjusted one after another, a slider dragged, a default filled in on arrival — if each becomes a step, Back stops meaning “the view I was just in” and starts meaning “the keystroke before this one”, and leaving the page takes a dozen presses.
Count it as a step when it is somewhere the actor would expect Back to return them from: opening an item, running a search, moving to the next page of results. Let corrections, defaults, and rapid intermediate adjustments overwrite the current step instead of adding one.
Whichever way it goes, going back has to put the actor back — the view rebuilt from the address rather than from whatever happened to be left in memory. And a change the actor would call navigation should read as navigation to someone who isn’t watching the screen: when the view is replaced in place, arriving needs announcing, the way a fresh page announces itself.
Exposing the link
The address bar is the sharing control most of the time, and copying from it is what people already do — which is why it has to keep up with the view rather than lag a step behind.
An explicit Copy link earns its place where the visible address isn’t the one worth sending: an embedded view, a state reached inside something with no address bar of its own, or a moment where the actor is unlikely to think of the address as the thing to hand over. Where the link crosses devices rather than people, a code to scan does the same job. Where the destination is someone else’s page, offer the embeddable form alongside it.
Related components
- Messaging — Each message/thread is addressable
Resources & references
- Cool URIs don’t change — Tim Berners-Lee on URL stability
- Designing Interfaces (3rd ed.) by Jenifer Tidwell, Charles Brewer, Aynne Valencia
Consequences
- any state worth naming has a name that restores it, so returning, sharing and bookmarking cost nothing beyond keeping the link
- addressable state is state that has left the actor's control: a link travels, and whoever holds it reaches what it points at
- the links are now a contract — states that were named have to keep resolving — which constrains how freely what sits behind them can be reorganised
Related patterns
Enacts
- Shareability — a link can only carry state that has a name, and deep linking is where the name comes from
Complements
- Dynamic hyperlinks — URL-based addressability
- Fully connected — enables direct access to any page
- Hub and spoke — enables direct spoke access from external sources
- Link preview — when a link targets a specific section, the preview can scroll to and highlight the anchored fragment
- Multilevel tree — enables direct access to any node
- Pan and zoom — encode position and zoom in URLs for sharing
- Pyramid — sharing and bookmarking items
- Step by step — enables returning to specific steps via URL
Related
- Commenting — Comments get unique URLs
- Progressive disclosure — URL state tracks what's expanded/revealed
Enabled by
- Prose — Deep linking surfaces a piece of system state as a shareable address; the prose around the link does the work of telling the recipient what they will land in.