Patterns

The structure that tells people what exists and where they are, which is an information architecture problem before it is a layout one.

Pattern · Structure

The escape hatch from navigation, and often the primary path for users who know what they want.

Pattern · Finding

Suggestions as the user types, which turns recall into recognition when it is fast enough.

Pattern · Finding

Narrowing a large set by attributes, which is what makes large catalogues navigable at all.

Pattern · Finding

Reordering a set, where the default order is the decision that matters most.

Pattern · Finding

Putting options side by side so differences can be seen rather than remembered.

Pattern · Deciding

Checking input at the right moment, which is rarely while the user is still typing.

Pattern · Forms

An interruption that should be reserved for genuinely irreversible actions, because it stops being read when it is routine.

Pattern · Safety

Actions that remove or destroy, which need separation in space, distinct styling and a recovery path.

Pattern · Safety

The screen before there is anything to show, which is a teaching opportunity rather than a gap.

Pattern · Content states

What to show while waiting, chosen by how long the wait is and whether its length is known.

Pattern · Content states

Grey placeholders in the shape of the content that is coming, which reads as progress rather than as waiting.

Pattern · Content states

Apply the change immediately and reconcile with the server afterwards, so the interface never waits on the network.

Pattern · Content states

Getting someone to their first real outcome, which is a very different goal from explaining the interface.

Pattern · Adoption

Telling users something happened, where the default should be not to interrupt.

Pattern · Communication

Breaking a long task into steps, which reduces per-screen load but adds navigation cost and abandonment points.

Pattern · Forms

Acting on many items at once, which is the difference between a tool and a chore for anyone working at volume.

Pattern · Efficiency

A searchable list of every action, which serves novices as discovery and experts as an accelerator.

Pattern · Efficiency

A chronological record of what happened, which needs grouping and filtering to stay readable.

Pattern · Communication

User-contributed evaluations, which build trust only when the negative ones are visible too.

Pattern · Trust

Three ways to handle long result sets, each with a different cost, and the right choice depends on the task.

Pattern · Finding

Reversing the last action, which is the single highest-value safety mechanism in most products.

Pattern · Safety

Triggers an action. If it navigates somewhere, it should be a link instead.

Component · Actions

Navigates to a destination, and must look different from surrounding text.

Component · Actions

Free-form entry, where the label, the hint and the error placement do most of the work.

Component · Forms

Choosing one option from a known set, which is the wrong control below about five options.

Component · Forms

Independent on or off choices, where the label is part of the target.

Component · Forms

One choice from a small visible set, where seeing all the options is the point.

Component · Forms

An immediate on or off setting, which must actually take effect immediately.

Component · Forms

Selecting from a continuous range, which is imprecise by nature and needs a numeric partner.

Component · Forms

One of the hardest components to get right, and one where typing is often faster than picking.

Component · Forms

Blocks everything else, which is why it should be reserved for things that genuinely cannot wait.

Component · Overlays

A panel that slides in from an edge, keeping context visible while offering more room than a popover.

Component · Overlays

A small panel anchored to a trigger, for interactive content that does not deserve a modal.

Component · Overlays

A short description on hover or focus, which must never be the only place information lives.

Component · Overlays

A brief confirmation that disappears, which makes it unsuitable for anything the user must act on.

Component · Feedback

A persistent message tied to a context, which is where anything requiring action belongs.

Component · Feedback

Parallel views in one space, which works only when users never need to compare across them.

Component · Navigation

Collapsible sections that shorten a page, at the cost of hiding content from scanning and from search.

Component · Navigation

A list of actions revealed on demand, which is where infrequent operations belong.

Component · Navigation

Content revealed below a trigger, a term that covers three different components and causes confusion.

Component · Navigation

A trail showing where you are in a hierarchy, useful when the hierarchy is deeper than two levels.

Component · Navigation

Splitting results into pages, which preserves position and keeps the footer reachable.

Component · Navigation

A container that groups content about one object, and the most over-applied component in modern UI.

Component · Containers

A small marker of status, category or count, which must not look like something you can press.

Component · Containers

A visual identifier for a person or entity, which needs a name alongside it more often than not.

Component · Containers

The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.

Component · Data

Communicating how far through something the user is, which requires honesty about what you can measure.

Component · Feedback

Rotating content in one space, which performs poorly for anything the user needs to see.

Component · Containers

A visual encoding of data, which is only useful if the encoding matches the question being asked.

Component · Data

Signing in is a gate in front of the thing people came for, so every decision is about removing steps without removing safety.

Pattern · Account

The most scrutinised form in any product: total cost visible early, card entry forgiving, and failure states specific.

Pattern · Commerce

Group by the question people are trying to answer, decide one convention for saving, and treat defaults as the real design.

Pattern · Account

Multiple people in one document raises three questions: who else is here, who can do what, and what happens when two people change the same thing.

Pattern · Structure

The conventions phones have settled on, what each one is actually for, and where they break.

Pattern · Structure

A dashboard earns its place by supporting a decision. If nobody can name the decision, it is a report with a layout.

Pattern · Data

Shows where the reader is in a sequence, how much is left, and whether they can move between steps.

Component · Navigation

The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.

UX writing · UX writing

Say what happened, why if you know, and what to do next, in that order and in plain language.

UX writing · UX writing

Voice is who you are and stays constant. Tone is how you speak in a moment and must change with the situation.

UX writing · UX writing

Deciding what content a user needs and in what order, which is a design activity rather than a writing one.

UX writing · UX writing

Writing that does not exclude, misgender or make assumptions about the person reading it.

UX writing · UX writing

Designing so the product can be adapted to other languages and regions without being rebuilt.

UX writing · Localisation

Making content findable by search engines, which overlaps almost entirely with making it good for people.

UX writing · Content

Label the outcome, not the mechanism, and make the label make sense read on its own.

UX writing · UX writing

Say what the field wants, why it is needed, and what format is acceptable, before the reader gets it wrong.

UX writing · UX writing

Say why it is empty, and give exactly one thing to do about it.

UX writing · UX writing

Say what is happening, how long it will take if you know, and whether it is safe to leave.

UX writing · UX writing

Name the object, the scope and the reversibility, then label the button with the action rather than with agreement.

UX writing · UX writing

Front-load the specific thing that happened, because most notifications are read as a truncated line on a lock screen.

UX writing · UX writing

Ask at the moment the permission is needed, say what it enables, and make declining survivable.

UX writing · UX writing

Explain the thing that cannot be made obvious, and put the explanation where the decision happens.

UX writing · UX writing

Teach one thing at the moment it is needed, in the reader's words, and get out of the way.

UX writing · UX writing