accessibility

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·002Law · Motor control

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·016Law · Motor control

The interface should always tell the user what is going on, through timely and appropriate feedback.

HEUR·001Heuristic · Nielsen heuristics

Error messages should say what happened, why, and what to do next, in plain language.

HEUR·009Heuristic · Nielsen heuristics

Every action needs a perceivable response that says it was received and what it did.

PRIN·004Principle · Interaction

An affordance is what an object makes possible. A signifier is the cue that tells you so.

PRIN·007Principle · Interaction

Focused attention makes people miss things in plain sight, including changes to the interface they are using.

PSY·004Psychology · Attention

Difference is what makes anything perceivable, and it is measurable for text against its background.

FND·002UI foundation · Visual design

The attribute that names a colour, and the one that carries cultural and semantic meaning.

FND·020UI foundation · Color

The dimension that determines contrast, hierarchy and whether text can be read at all.

FND·022UI foundation · Color

Colours assigned a fixed meaning, which only works if the assignment is consistent and never the only signal.

FND·023UI foundation · Color

A brand colour chosen for a logo usually needs adjustment before it can survive as an interface accent.

FND·024UI foundation · Color

Not an inversion. A second theme with its own contrast, elevation and saturation rules.

FND·027UI foundation · Color

Around one in twelve men has a colour vision deficiency, so colour has to be reinforced by something else.

FND·028UI foundation · Color

Charts need three kinds of palette, and the choice between them is determined by the data, not by taste.

FND·029UI foundation · Color

A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.

FND·031UI foundation · Typography

Using size, weight, colour and space to make the structure of text visible before it is read.

FND·032UI foundation · Typography

The space between lines, which governs whether a paragraph is readable and is a WCAG requirement.

FND·034UI foundation · Typography

Small adjustments that matter most at the extremes of size, and that should be left alone in between.

FND·035UI foundation · Typography

How easily continuous text can be read, governed mostly by size, line length, leading and contrast.

FND·036UI foundation · Typography

Type that adapts to viewport and container without breaking user zoom or the accessible minimum.

FND·038UI foundation · Typography

One layout that reflows across sizes, ideally driven by content limits rather than by device categories.

FND·043UI foundation · Layout

Icons speed recognition for concepts users already know and create guesswork for everything else.

FND·050UI foundation · Form and depth

Images either carry information or they do not, and the ones that do not are costing you load time.

FND·051UI foundation · Form and depth

Animation should explain a change, and anything that does not explain something is delay.

FND·052UI foundation · Form and depth

Every interactive element needs a defined appearance for every state it can be in, and most designs specify only two.

FND·053UI foundation · Form and depth

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

PAT·001Pattern · Structure

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

PAT·002Pattern · Finding

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

PAT·003Pattern · Finding

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

PAT·005Pattern · Finding

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

PAT·007Pattern · Forms

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

PAT·011Pattern · Content states

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

PAT·012Pattern · Content states

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

PAT·015Pattern · Communication

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

PAT·016Pattern · Forms

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

PAT·021Pattern · Finding

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

CMP·001Component · Actions

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

CMP·002Component · Actions

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

CMP·003Component · Forms

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

CMP·004Component · Forms

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

CMP·005Component · Forms

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

CMP·006Component · Forms

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

CMP·007Component · Forms

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

CMP·008Component · Forms

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

CMP·009Component · Forms

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

CMP·010Component · Overlays

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

CMP·011Component · Overlays

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

CMP·012Component · Overlays