Design problem

Poor navigation

People cannot predict where something lives, and search has become the only way through the product.

How you know you have it

1Run a tree test on the current structure before redesigning anything.
2Take label candidates from support tickets and search logs, not from the product team.
3Make the current location visible in the navigation on every page.
4Preserve scroll, filters and selection when people navigate back.

Menus that mirror teams rather than tasks are predictable to insiders and opaque to everyone else.

Names that test badly in a tree test almost always test badly in production too.

Mega menus, pinning and recents are compensations. They help, and they do not fix a structure that does not match how people think.

Navigation problems are almost always architecture problems wearing a menu. The research methods are listed first for that reason.

The mechanism underneath the symptom. Read these when the fix needs justifying to somebody else.

Jakob's Law
People spend most of their time on other products, so they expect yours to work the way those do.
LawCraft convention
Mental Models
Users act on their belief about how the system works, not on how it actually works.
Mental modelEstablished research
Serial Position Effect
Items at the start and end of a list are remembered best, which makes the middle of any list the weakest position.
LawEstablished research
Recognition Over Recall
Recognising something on screen is far easier than remembering it, so keep the information visible.
HeuristicExpert heuristic
Match Between System and the Real World
Use the words, concepts and order that your users already have, not the ones your database has.
HeuristicExpert heuristic

The visual and structural levers that produce or relieve this problem.

Visual Hierarchy
The order in which elements are noticed, controlled by size, weight, colour, position and space.
UI foundationCraft convention
Similarity
Elements that look alike are assumed to behave alike, which makes visual language a promise.
UI foundationEstablished research
Proximity
Things placed close together are read as belonging together, before anything is read.
UI foundationEstablished research

Recognised solutions, with the conditions under which each earns its place.

Navigation
The structure that tells people what exists and where they are, which is an information architecture problem before it is a layout one.
PatternCraft convention
Search
The escape hatch from navigation, and often the primary path for users who know what they want.
PatternCraft convention
Filtering
Narrowing a large set by attributes, which is what makes large catalogues navigable at all.
PatternCraft convention
Command Palette
A searchable list of every action, which serves novices as discovery and experts as an accelerator.
PatternCraft convention

States, behaviour and the accessibility contract you will need to specify.

Menu
A list of actions revealed on demand, which is where infrequent operations belong.
ComponentCraft convention
Breadcrumb
A trail showing where you are in a hierarchy, useful when the hierarchy is deeper than two levels.
ComponentCraft convention
Tabs
Parallel views in one space, which works only when users never need to compare across them.
ComponentCraft convention
Dropdown
Content revealed below a trigger, a term that covers three different components and causes confusion.
ComponentCraft convention

Where the words carry more of the fix than the layout does.

Microcopy
The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.
UX writingCraft convention
Content Design
Deciding what content a user needs and in what order, which is a design activity rather than a writing one.
UX writingCraft convention

The requirements this problem raises, mapped to the decisions that produce them.

Keyboard Navigation
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
AccessibilityCraft convention
Heading Structure
Headings are the table of contents screen reader users navigate by, so levels must follow structure rather than appearance.
AccessibilityCraft convention
Focus Management
Deliberately moving focus when the interface changes, so keyboard and screen reader users are not stranded.
AccessibilityCraft convention
Accessible Names
What assistive technology announces for a control, which must match what a user would call it.
AccessibilityCraft convention

Methods suited to confirming the cause before you commit to a fix.

Information Architecture
Organising, labelling and structuring content so people can find it, which determines navigation rather than following from it.
Research methodCraft convention
Tree Testing
Testing whether people can find things in a structure, with no visual design to confound the result.
Research methodEstablished research
Card Sorting
Asking users to group content, which reveals their mental model of a domain rather than your org chart.
Research methodEstablished research
First-Click Testing
Measuring where people click first, which predicts task success better than almost any other single measure.
Research methodEstablished research

Interactive review passes, with progress saved in your browser.

UX Audit Checklist
A structured pass across the whole product, organised by the same categories as the audit tool.
ChecklistExpert heuristic

Worked cases, including the options that were rejected.

Fixing a Search That Returned Nothing
A large share of searches returned nothing, and the fix was vocabulary rather than the search engine.
Case studyCraft convention

The same material, organised around the surface you are building rather than the symptom you are fixing.