Decision time grows logarithmically with the number of equally likely choices, so the tenth option costs far less than the second.
LAW·001
I'm designing
Navigation
How people find out what exists and where they currently are.
What this surface turns on
- The structure, which is an information architecture question rather than a layout one.
- The labels, which come from research rather than from a meeting.
- What sits at the top level and what is one layer down.
- How the current location is signalled.
Where these usually go wrong
- Labels invented internally rather than drawn from user vocabulary.
- Hover-opened cascading menus, which are fragile to steer and impossible on touch.
- Current location marked by colour alone.
- More than seven top-level items.
- Redesigning the navigation bar when the problem is the structure beneath it.
Why these
Navigation is an architecture problem wearing a menu, so the research methods come first here. The rest cover labelling, current location and the back behaviour people expect from a browser.
Why it works the way it does
The reasoning layer. Read these when a decision needs justifying, or when something is failing and you cannot say why.
Items at the start and end of a list are remembered best, which makes the middle of any list the weakest position.
LAW·008
People spend most of their time on other products, so they expect yours to work the way those do.
LAW·003
Moving a pointer along a constrained path takes time proportional to the path length divided by its width, which is why nested menus are hard.
LAW·016
Working memory holds a small number of chunks, so the design lever is what counts as a chunk, not the raw item count.
LAW·004
Time to hit a target depends on how far away it is and how big it is, which makes size and distance the two levers you control.
LAW·002
The craft decisions
The visual and structural foundations that carry most of the weight on this surface.
The order in which elements are noticed, controlled by size, weight, colour, position and space.
FND·001
Using size, weight, colour and space to make the structure of text visible before it is read.
FND·032
Difference is what makes anything perceivable, and it is measurable for text against its background.
FND·002
Elements that look alike are assumed to behave alike, which makes visual language a promise.
FND·005
A fixed set of spacing values, so every gap in the product comes from the same vocabulary.
FND·042
Patterns to reach for
Solutions people already recognise, with the conditions under which each one earns its place.
The structure that tells people what exists and where they are, which is an information architecture problem before it is a layout one.
PAT·001
The escape hatch from navigation, and often the primary path for users who know what they want.
PAT·002
Show the common case first and reveal the rest on request, so complexity is available without being present.
PRIN·003
Components you will specify
Each entry covers the states, behaviour and accessibility contract you need to define.
Content revealed below a trigger, a term that covers three different components and causes confusion.
CMP·019
Parallel views in one space, which works only when users never need to compare across them.
CMP·016
A trail showing where you are in a hierarchy, useful when the hierarchy is deeper than two levels.
CMP·020
A panel that slides in from an edge, keeping context visible while offering more room than a popover.
CMP·011
Accessibility requirements
Not a separate pass. These are the requirements this surface raises, mapped to the decisions that produce them.
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
A11Y·002
The visible marker showing where keyboard focus is, which must never be removed.
A11Y·003
What assistive technology announces for a control, which must match what a user would call it.
A11Y·008
Content that appears on hover or focus must be dismissible, hoverable and persistent.
A11Y·018
Headings are the table of contents screen reader users navigate by, so levels must follow structure rather than appearance.
A11Y·006
Language and content
The words do more work here than most teams budget for.
The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.
WRT·001
Use the words, concepts and order that your users already have, not the ones your database has.
HEUR·002
Designing so the product can be adapted to other languages and regions without being rebuilt.
WRT·006
How to find out
Research methods suited to the questions this surface raises.
Asking users to group content, which reveals their mental model of a domain rather than your org chart.
RES·005
Testing whether people can find things in a structure, with no visual design to confound the result.
RES·006
Measuring where people click first, which predicts task success better than almost any other single measure.
RES·007
Organising, labelling and structuring content so people can find it, which determines navigation rather than following from it.
RES·015
Check your work
Interactive checklists, with progress saved in your browser.
A structured pass across the whole product, organised by the same categories as the audit tool.
CHK·008
A practical WCAG 2.2 AA review pass, ordered so the checks that find the most problems come first.
CHK·002
Touch targets, reach, input, performance and the assumptions that only fail on a phone.
CHK·003
Documents you might need
Fillable templates, prefilled so they are usable rather than empty.
Every path through a task, including the error paths and the states most flows forget.
TPL·005
A recording sheet for expert review, with severity rated from frequency, impact and persistence.
TPL·008
Decisions other teams made
Worked cases, including the options that were rejected and why.
A large share of searches returned nothing, and the fix was vocabulary rather than the search engine.
CASE·006
Designing something else?
Neighbouring territory. Each surface reuses much of the same material, arranged around the decisions that surface turns on.