Decision time grows logarithmically with the number of equally likely choices, so the tenth option costs far less than the second.
Law · Decision making
Explore everything
The whole library in one place. Filter by type, category or level, or start from a tag if you already know the territory.
485 entries across 12 sections
Or start from what you are designing
14 surfaces, each with the laws, foundations, patterns, components, accessibility requirements and checklists that apply to it.
Or start from what is going wrong
13 common symptoms, their usual causes, and the entries that address each one. No terminology required.
Type
Category
Level
485 entries
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 · Motor control
People spend most of their time on other products, so they expect yours to work the way those do.
Law · Conventions
Working memory holds a small number of chunks, so the design lever is what counts as a chunk, not the raw item count.
Law · Memory
Every system has irreducible complexity. The only question is whether the user absorbs it or the product does.
Law · Complexity
Below roughly 400 milliseconds of system response, people stop waiting on the machine and productivity rises sharply.
Law · Performance
People judge an experience by its most intense moment and its ending, not by the average of the whole thing.
Law · Memory
Items at the start and end of a list are remembered best, which makes the middle of any list the weakest position.
Law · Memory
The item that differs from its neighbours is the one that gets noticed and remembered.
Law · Attention
Unfinished tasks stay mentally active, which is why visible progress pulls people back to complete them.
Law · Motivation
People perceive attractive interfaces as easier to use, and forgive small problems in them more readily.
Law · Perception
Be liberal in what you accept and conservative in what you send, which for interfaces means accepting messy input and returning clean output.
Law · Robustness
Work expands to fill the time available, which is why open-ended tasks in an interface tend to sprawl.
Law · Behaviour
Effort increases as a visible goal gets nearer, and artificial early progress accelerates the whole journey.
Law · Motivation
Time to complete a task falls as a power function of repetitions, so expert speed depends on the interface staying stable.
Law · Learning
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 · Motor control
The eye resolves complex arrangements into the simplest, most stable interpretation available.
Law · Perception
Among competing solutions that meet the requirement, prefer the one with fewest assumptions and moving parts.
Principle · Complexity
A small share of features carries most of the use, which is a prompt to go and measure rather than an excuse to cut.
Principle · Prioritisation
The interface should always tell the user what is going on, through timely and appropriate feedback.
Heuristic · Nielsen heuristics
Use the words, concepts and order that your users already have, not the ones your database has.
Heuristic · Nielsen heuristics
Users make mistakes and change their minds, so every state needs a clearly marked way out.
Heuristic · Nielsen heuristics
The same thing should look and behave the same way everywhere, and follow platform convention where one exists.
Heuristic · Nielsen heuristics
Better than a good error message is a design in which the error cannot occur.
Heuristic · Nielsen heuristics
Recognising something on screen is far easier than remembering it, so keep the information visible.
Heuristic · Nielsen heuristics
Accelerators that experts use and novices ignore let one interface serve both populations.
Heuristic · Nielsen heuristics
Every extra element competes with the ones that matter, so content should earn its place on the screen.
Heuristic · Nielsen heuristics
Error messages should say what happened, why, and what to do next, in plain language.
Heuristic · Nielsen heuristics
Aim for a product that needs no explanation, then write help for the cases where that is impossible.
Heuristic · Nielsen heuristics
Show the common case first and reveal the rest on request, so complexity is available without being present.
Principle · Complexity
Every action needs a perceivable response that says it was received and what it did.
Principle · Interaction
A capability that users cannot find does not exist, no matter how well it is built.
Principle · Interaction
An interface people can explore without fear produces confident users and fewer support tickets.
Principle · Interaction
An affordance is what an object makes possible. A signifier is the cue that tells you so.
Principle · Interaction
Controls should be arranged to match the thing they control, so the relationship needs no explanation.
Principle · Interaction
Restricting what is possible is the cheapest way to prevent an entire class of error.
Principle · Interaction
Two gaps break interfaces: not knowing how to do the thing, and not knowing whether it worked.
Principle · Interaction
Working memory is a narrow channel, and interfaces spend it on three kinds of work, only one of which is useful.
Psychology · Attention and memory
More options can reduce satisfaction and completion, but the effect is much less reliable than the popular version suggests.
Psychology · Decision making
Users act on their belief about how the system works, not on how it actually works.
Mental model · Understanding
People learn to ignore anything that looks like an advertisement, including your own content when it looks like one.
Psychology · Attention
Focused attention makes people miss things in plain sight, including changes to the interface they are using.
Psychology · Attention
Absorbed, effortless concentration occurs when challenge and skill are balanced, and interruptions destroy it.
Psychology · Engagement
The first number a person sees shapes every judgement that follows, even when it is obviously arbitrary.
Cognitive bias · Judgement
Losing something feels worse than gaining the same thing feels good, which shapes how people react to change.
Cognitive bias · Judgement
The same fact produces different decisions depending on whether it is expressed as a gain or a loss.
Cognitive bias · Judgement
Most people accept whatever is preselected, which makes defaults the most powerful control in an interface.
Cognitive bias · Judgement
People prefer things to stay as they are, which is why every redesign starts with a deficit.
Cognitive bias · Judgement
People look to others' behaviour when deciding, especially under uncertainty.
Psychology · Influence
People give disproportionate weight to a source that appears authoritative, including visual markers of authority.
Cognitive bias · Influence
People value things more once they own them, and more still once they have put work into them.
Cognitive bias · Judgement
Once you know how something works you cannot accurately imagine not knowing, which is why teams misjudge their own interfaces.
Cognitive bias · Judgement
People seek and weight evidence that supports what they already believe, which quietly corrupts research findings.
Cognitive bias · Research integrity
Analysing only the people who made it through hides everything the failures would have told you.
Cognitive bias · Research integrity
People judge how likely something is by how easily an example comes to mind, which favours the recent and the vivid.
Cognitive bias · Judgement
Adding a deliberately inferior third option changes which of the original two people choose.
Cognitive bias · Judgement
A strong impression in one area spills over into unrelated judgements about the same thing.
Cognitive bias · Judgement
Users start acting immediately rather than reading, even when reading would be faster, so design has to teach through doing.
Psychology · Learning
Interfaces engineered to make users act against their own interest, now regulated in several jurisdictions.
Principle · Ethics
Learning spread over time is retained far better than the same amount of learning crammed into one session.
Psychology · Learning
Repeated exposure to something increases preference for it, which is why redesigns feel wrong before they feel right.
Psychology · Perception
Past investment that cannot be recovered still drives decisions, in users and in product teams alike.
Cognitive bias · Judgement
The claim that decision quality degrades over a sequence of choices. Popular, intuitive, and on much shakier experimental ground than its usage suggests.
Psychology · Attention and effort
Judge a design by the outcome it produces for a person and for the business, not by whether the request was delivered.
Mental model · Product
The order in which elements are noticed, controlled by size, weight, colour, position and space.
UI foundation · Visual design
Difference is what makes anything perceivable, and it is measurable for text against its background.
UI foundation · Visual design
Shared edges create invisible lines that organise a layout and make it feel deliberate.
UI foundation · Visual design
Things placed close together are read as belonging together, before anything is read.
UI foundation · Gestalt principles
Elements that look alike are assumed to behave alike, which makes visual language a promise.
UI foundation · Gestalt principles
A shared boundary or background binds elements together more strongly than proximity does.
UI foundation · Gestalt principles
The eye completes incomplete shapes, which is why a partially visible item signals that there is more.
UI foundation · Gestalt principles
Elements arranged along a line or curve are read as a connected sequence.
UI foundation · Gestalt principles
The eye separates an object from its background, and interfaces use that separation to signal layers.
UI foundation · Gestalt principles
Repeating visual treatments builds a language users learn once and apply everywhere.
UI foundation · Visual design
Distributing visual weight so a composition feels stable, whether or not it is symmetrical.
UI foundation · Visual design
Relative size is the fastest signal of importance and the easiest one to overuse.
UI foundation · Visual design
Consistent ratios between sizes make a layout feel considered, without needing any particular mystical ratio.
UI foundation · Visual design
How the parts are arranged on the whole surface, which determines where the eye goes and in what order.
UI foundation · Visual design
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
UI foundation · Visual design
How much information occupies a given area, which should follow the user's expertise and task rather than a house style.
UI foundation · Visual design
Repeating spacing intervals create a pulse that makes long pages feel ordered.
UI foundation · Visual design
Making one thing stand out, which only works if most things do not.
UI foundation · Visual design
The working subset of colour theory for screens: three dimensions, a handful of harmonies, and perceptual colour spaces that behave predictably.
UI foundation · Color
The attribute that names a colour, and the one that carries cultural and semantic meaning.
UI foundation · Color
How pure a colour is, and the dial that most often needs turning down in interface work.
UI foundation · Color
The dimension that determines contrast, hierarchy and whether text can be read at all.
UI foundation · Color
Colours assigned a fixed meaning, which only works if the assignment is consistent and never the only signal.
UI foundation · Color
A brand colour chosen for a logo usually needs adjustment before it can survive as an interface accent.
UI foundation · Color
Most of an interface is neutral, which makes the grey ramp the most used and least discussed part of a palette.
UI foundation · Color
A structured palette of ramps and semantic aliases, so colour decisions are made once rather than per screen.
UI foundation · Color
Not an inversion. A second theme with its own contrast, elevation and saturation rules.
UI foundation · Color
Around one in twelve men has a colour vision deficiency, so colour has to be reinforced by something else.
UI foundation · Color
Charts need three kinds of palette, and the choice between them is determined by the data, not by taste.
UI foundation · Color
Interface typefaces are chosen for legibility at small sizes and complete character coverage, not for character.
UI foundation · Typography
A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.
UI foundation · Typography
Using size, weight, colour and space to make the structure of text visible before it is read.
UI foundation · Typography
The most space-efficient hierarchy lever, and the one most often limited by the typeface.
UI foundation · Typography
The space between lines, which governs whether a paragraph is readable and is a WCAG requirement.
UI foundation · Typography
Small adjustments that matter most at the extremes of size, and that should be left alone in between.
UI foundation · Typography
How easily continuous text can be read, governed mostly by size, line length, leading and contrast.
UI foundation · Typography
One file containing a continuous range of weights and widths, usually smaller than the static weights it replaces.
UI foundation · Typography
Type that adapts to viewport and container without breaking user zoom or the accessible minimum.
UI foundation · Typography
A shared structure that makes alignment automatic and layout decisions repeatable.
UI foundation · Layout
How many vertical divisions the content occupies, which affects scanning as much as it affects fit.
UI foundation · Layout
The constraint that stops content spreading to unusable widths, and increasingly the unit that components respond to.
UI foundation · Layout
A fixed set of spacing values, so every gap in the product comes from the same vocabulary.
UI foundation · Layout
One layout that reflows across sizes, ideally driven by content limits rather than by device categories.
UI foundation · Layout
Distinct layouts for distinct contexts, justified when the task genuinely differs rather than merely the screen size.
UI foundation · Layout
The widths at which the layout changes, chosen from where the content breaks rather than from a device list.
UI foundation · Layout
Corner treatment and silhouette carry tone, and a product should commit to one system rather than mixing several.
UI foundation · Form and depth
Lines that separate, which should be the second choice after space rather than the first.
UI foundation · Form and depth
A system of layers that says what sits above what, expressed visually and enforced in code.
UI foundation · Form and depth
Simulated light, which reads as physical only when it follows one consistent light source.
UI foundation · Form and depth
Icons speed recognition for concepts users already know and create guesswork for everything else.
UI foundation · Form and depth
Images either carry information or they do not, and the ones that do not are costing you load time.
UI foundation · Form and depth
Animation should explain a change, and anything that does not explain something is delay.
UI foundation · Form and depth
Every interactive element needs a defined appearance for every state it can be in, and most designs specify only two.
UI 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.
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
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
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
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
Research method · Evaluative
Experts reviewing an interface against a defined set of principles, which is fast and cheap but not a substitute for users.
Research method · Evaluative
Structured conversations about what people actually did, which is far more reliable than what they say they will do.
Research method · Generative
Good for measuring how widespread something is, and poor for discovering what that something is.
Research method · Quantitative
Asking users to group content, which reveals their mental model of a domain rather than your org chart.
Research method · Information architecture
Testing whether people can find things in a structure, with no visual design to confound the result.
Research method · Information architecture
Measuring where people click first, which predicts task success better than almost any other single measure.
Research method · Evaluative
Showing a design briefly and asking what people remember, which tests hierarchy and clarity of message.
Research method · Evaluative
Comparing variants with real traffic, which tells you what happened without telling you why.
Research method · Quantitative
Measuring what people do at scale, which tells you where problems are and never why they exist.
Research method · Quantitative
Measuring progression through a sequence, where the largest drop is rarely the biggest opportunity.
Research method · Quantitative
Watching people work in their own environment, which surfaces the context that interviews miss.
Research method · Generative
Participants record their own experience over time, which captures things a single session cannot.
Research method · Generative
Turning raw observations into findings, which is where most of the value and most of the bias enters.
Research method · Analysis
Organising, labelling and structuring content so people can find it, which determines navigation rather than following from it.
Research method · Information architecture
Fast, informal testing with whoever is available, which is far better than no testing and worse than proper recruitment.
Research method · Evaluative
Measuring where people look, which is expensive, frequently over-interpreted, and occasionally irreplaceable.
Research method · Evaluative
Framing user needs as the progress someone is trying to make, which separates the need from any particular solution.
Research method · Generative
Study how others solved the same problem to learn the conventions your users already hold, not to assemble a feature list.
Research method · Evaluative
Group individual observations until themes emerge from the data instead of from the categories you brought with you.
Research method · Analysis
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
What the standard is, which version applies, and how the levels translate into design decisions.
Accessibility · Standards
Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.
Accessibility · Operable
The visible marker showing where keyboard focus is, which must never be removed.
Accessibility · Operable
Deliberately moving focus when the interface changes, so keyboard and screen reader users are not stranded.
Accessibility · Operable
Software that reads the interface aloud, navigating by structure rather than by layout.
Accessibility · Perceivable
Headings are the table of contents screen reader users navigate by, so levels must follow structure rather than appearance.
Accessibility · Perceivable
The text equivalent of an image, which depends on the image's purpose in that specific context.
Accessibility · Perceivable
What assistive technology announces for a control, which must match what a user would call it.
Accessibility · Robust
Telling assistive technology that something changed, when focus did not move to say so.
Accessibility · Robust
Colour may reinforce meaning but must never be the only thing carrying it.
Accessibility · Perceivable
Interactive targets need to be large enough and spaced enough to hit reliably.
Accessibility · Operable
Large-scale motion can cause nausea and dizziness, so the system preference must be honoured.
Accessibility · Operable
Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.
Accessibility · Perceivable
Text must scale to 200 percent without breaking, which means never sizing type in absolute units.
Accessibility · Perceivable
Users must be able to increase spacing without content being clipped or lost.
Accessibility · Perceivable
Errors must be identified in text, described specifically, and accompanied by a suggested fix where one is known.
Accessibility · Understandable
Every input needs a persistent label, and format requirements must be stated before the user types.
Accessibility · Understandable
Content that appears on hover or focus must be dismissible, hoverable and persistent.
Accessibility · Perceivable
Single-character shortcuts must be switchable off, remappable, or active only on focus.
Accessibility · Operable
Named values that carry design decisions, so a change happens once rather than in every consuming file.
Design system · Foundations
The props a component exposes determine whether it gets used correctly or forked, which is the main failure mode of design systems.
Design system · Components
Documentation is the product. An undocumented system is a component library nobody can adopt correctly.
Design system · Practice
Who decides what goes in, how changes are proposed, and how the system stays coherent as more people touch it.
Design system · Practice
A system nobody uses is a cost centre, and adoption is won by making the system the easiest path rather than by mandate.
Design system · Practice
How the system changes without breaking the products built on it.
Design system · Practice
How work gets from a product team into the shared system without either blocking the team or degrading the system.
Design system · Practice
Supporting several visual identities from one system, which is a token architecture problem before it is a design problem.
Design system · Foundations
A component is finished when its parts, its states and the reason each variant exists are all written down.
Design system · Components
Two libraries claiming to be the same system will diverge. Decide where truth lives, and make the other side derive from it.
Design system · Practice
Count what is actually in production before deciding what the system should contain.
Design system · Practice
Structured feedback against stated objectives, which is a different activity from a decision meeting.
Workflow · Practice
Getting a design built correctly, which works better as a conversation than as a document.
Workflow · Practice
Checking the built thing against the intent, before release rather than after.
Workflow · Practice
A structured assessment against WCAG, combining automated tooling with the manual testing that finds most real problems.
Workflow · Practice
Working out what problem to solve before deciding how, which is where most product failure is actually prevented.
Workflow · Practice
Speed is a usability property, and the metrics that matter are the ones measured on real devices.
UI foundation · Performance
Choosing how finished a prototype needs to look, which is decided by the question you are asking rather than by taste.
Workflow · Practice
Deciding what to fix first, using evidence rather than the volume of the most recent complaint.
Workflow · Practice
Turn a pile of research into one statement narrow enough to design against and wide enough to allow more than one answer.
Workflow · Process
Generate enough distinct options that the first idea has to compete, then converge deliberately rather than by exhaustion.
Workflow · Process
Map the decisions, states and exits before drawing screens, because most missing work hides in the branches nobody drew.
Workflow · Process
Work out structure and priority while changes are still cheap, and stop before the fidelity starts answering questions you have not asked.
Workflow · Process
Pick one behavioural measure per goal, pair it with a quality measure, and decide the threshold before you look.
Workflow · Process
Using a vision model for a first-pass heuristic review, which is good at obvious defects and blind to context.
AI workflow · Evaluation
Turning a requirements document into a draft flow, which is most useful for the edge cases the document forgot.
AI workflow · Definition
Assisted coding of qualitative data, which speeds up the first pass and must not replace the analysis.
AI workflow · Research
Expanding a rough idea into a structured specification, which is mainly useful as a completeness check.
AI workflow · Definition
Using a model alongside automated tooling, which extends coverage a little and does not approach a real audit.
AI workflow · Evaluation
Generating and reviewing interface copy, which works well for volume and badly for voice.
AI workflow · Content
Drafting component documentation from code, which handles the mechanical parts and not the judgement.
AI workflow · Design systems
Generating structural options early, which is useful for breadth and unreliable for quality.
AI workflow · Exploration
Use a model as a fast first reviewer against a named framework, then treat every point as a hypothesis rather than a finding.
AI workflow · Review
Models produce working interfaces quickly, and default to generic components with missing states. Supply the system, then review the parts they always get wrong.
AI workflow · Build
A retailer required registration before purchase to build its customer database, and lost the sales it was trying to capture data about.
Case study · Ecommerce
A payments product added security badges and lost conversion, then recovered it by removing them and explaining what actually happens to the money.
Case study · Fintech
A system team built a complete component library that nobody adopted, then changed the strategy from mandate to migration path.
Case study · Design systems
A generous, modern-looking redesign made a dashboard slower for the people who used it all day.
Case study · Data products
Hiding columns on small screens made the table tidy and removed the data field staff had opened it to see.
Case study · Data products
A large share of searches returned nothing, and the fix was vocabulary rather than the search engine.
Case study · Search
Every team that added a feature added a notification, and users responded by turning all of them off.
Case study · Collaboration
A retention gauntlet kept subscribers for one more month and produced public complaints, regulatory attention and worse reactivation.
Case study · Subscriptions
Splitting a long form into steps did not raise completion until the team also saved progress and let people come back.
Case study · Forms
An accurate suggestion feature went unused until it explained itself and became easy to reject.
Case study · AI products
A review pass for any form, covering structure, labelling, validation, errors and accessibility.
Checklist · Forms
A practical WCAG 2.2 AA review pass, ordered so the checks that find the most problems come first.
Checklist · Accessibility
Touch targets, reach, input, performance and the assumptions that only fail on a phone.
Checklist · Mobile
Whether a dashboard answers a question or just displays numbers.
Checklist · Data products
Whether a new user reaches real value, and how much you make them do before they get there.
Checklist · Adoption
Product pages, cart and checkout, covering the decisions that determine whether people buy.
Checklist · Ecommerce
Accounts, teams, permissions, billing and the surfaces every SaaS product needs and few design well.
Checklist · SaaS
A structured pass across the whole product, organised by the same categories as the audit tool.
Checklist · Evaluation
The pass before shipping, covering states, edge cases, accessibility, performance and the things that only break in production.
Checklist · Release
Whether the design serves the user's interest, including where that now overlaps with legal obligation.
Checklist · Ethics
A review pass for anything that lives at a URL: addressability, navigation, performance, content and the browser behaviours people expect.
Checklist · Web
Defines the question, the method and the decision the research will inform, before any data is collected.
Template · Research
A structured set of questions anchored in past behaviour rather than in hypothetical intention.
Template · Research
A research-grounded description of a user type, focused on goals and behaviour rather than demographics.
Template · Research
The stages a person moves through, with what they do, think and feel, and where the experience breaks.
Template · Research
Every path through a task, including the error paths and the states most flows forget.
Template · Definition
The user's activities across the top, the supporting detail beneath, sliced into releases that each work end to end.
Template · Definition
A session script with tasks phrased as goals, and moderator prompts that do not lead.
Template · Research
A recording sheet for expert review, with severity rated from frequency, impact and persistence.
Template · Evaluation
A report structure that leads with themes and priorities rather than an undifferentiated list of issues.
Template · Evaluation
The problem, the constraints and the success measures, agreed before design starts.
Template · Definition
A feature specification that covers states, edge cases and accessibility rather than only the happy path.
Template · Definition
A session structure that produces useful feedback instead of opinions, with the framing written in advance.
Template · Practice
The default interface design tool for most product teams, built around multiplayer editing in the browser.
Tool · design
The tool that defined modern interface design, now a native macOS app with a web companion.
Tool · design
Design tool that publishes real websites, with genuine interaction and animation capability.
Tool · design
Visual web development producing production sites, with a CMS and a real understanding of the box model.
Tool · design
The most widely adopted collaborative whiteboard, with heavy facilitation and template support.
Tool · whiteboard
Deliberately rough-looking diagramming, which keeps early sketches from reading as decided.
Tool · whiteboard
High-fidelity prototyping with real conditional logic, variables and device sensors, without code.
Tool · prototyping
Long-established tool for complex, data-driven prototypes and detailed specifications.
Tool · prototyping
Node-based prototyping for precise interaction and motion behaviour.
Tool · prototyping
Research repository for storing, tagging and searching qualitative data across studies.
Tool · research
Research analysis and repository tooling focused on the synthesis step itself.
Tool · research
Participant recruitment from a panel, plus tooling for managing your own participant pool.
Tool · research
The standard toolkit for card sorting, tree testing and first-click studies.
Tool · testing
Open-source product analytics with session replay, experiments and feature flags in one place.
Tool · analytics
Session replay and behavioural analytics with retroactive search across sessions.
Tool · analytics
The most widely used automated accessibility testing engine, available in browsers and in CI.
Tool · accessibility
Built into Chrome, covering performance, accessibility, SEO and best practices in one run.
Tool · accessibility
Detailed performance testing from real devices and locations, with filmstrips that show what the page looked like while it loaded.
Tool · testing
Guided manual accessibility testing, not just an automated scan.
Tool · accessibility
Free, widely used Windows screen reader, and the most practical starting point for manual testing.
Tool · accessibility
The standard workshop for developing and documenting components in isolation.
Tool · design-systems
Design system documentation aimed at the whole team, not only engineers.
Tool · design-systems
Design system platform with token pipelines and documentation generation.
Tool · design-systems
Open-source build tool that transforms one token source into every platform format.
Tool · design-systems
Inspection, measurements and code references for developers working from Figma files.
Tool · handoff
Flexible documents and databases, used by many teams as a lightweight research repository.
Tool · collaboration
Enterprise documentation, usually chosen because the organisation already runs Jira.
Tool · collaboration
Issue tracking with a strong keyboard-first interface, frequently cited as a craft benchmark.
Tool · collaboration
Async screen recording, useful for walking through designs across time zones.
Tool · collaboration
General assistant with strong long-document handling, useful for synthesis, writing and structured review.
Tool · ai
Research that tells you why, usually by watching or talking to people.
Term · Research
Asking people to say what they are thinking as they use something.
Term · Research
A tiny interaction like a toggle switching or a like button filling in.
Term · Interaction design
Showing the result straight away and fixing it if the request fails.
Term · Interaction design
The rules your eye follows automatically when grouping things.
Term · Visual design
A named value like a colour or spacing step, defined once and used everywhere.
Term · Design systems
Difficulty telling some colours apart, affecting around one in twelve men.
Term · Accessibility
Designing one thing that works for everyone rather than a special version.
Term · Accessibility
Announcing that something is going away and helping people move off it.
Term · Design systems
Version numbers that tell you whether an update will break things.
Term · Design systems
The smallest thing you can build to find out whether the idea works.
Term · Product management
The smallest version people would actually be pleased to use.
Term · Product management
The mess that builds up when design decisions are rushed or never revisited.
Term · Product management
The moment a new user actually gets something out of the product.
Term · Product management
How many people did the thing you wanted, out of everyone who could have.
Term · Product management
Google's three measurements of whether a page feels fast and stable.
Term · Performance
Building it so it can be translated later without breaking.
Term · Content
Browse by tag
Tags cut across shelves, which is where most of the interesting connections are. Useful when you know the territory but not the name of the entry.
glossary137accessibility109tools52forms46research45layout28content27design-systems26mobile23testing23navigation21performance19Research19onboarding18collaboration17tokens17typography17UI17ux-writing17color16wcag16ai15Product management15UX15conversion14feedback14responsive14analytics13bias13ethics13process13workflow13Accessibility12components12copy12prototyping12template12checklist11documentation11errors11attention10audit10enterprise10nielsen10trust10Content9Design systems9ecommerce9hierarchy9input9labels9states9contrast8defaults8i18n8keyboard8patterns8qualitative8spacing8tables8charts7dark-mode7density7gestalt7governance7information-architecture7loading7motion7norman7notifications7open-source7prioritisation7privacy7product-thinking7quantitative7search7Typography7validation7adoption6analysis6compliance6css6decision-making6design6focus6free6memory6Performance6progress6safety6touch6checkout5cognitive-load5data5definition5Definition5engineering5filtering5flows5interaction5Interaction design5perception5planning5semantics5seo5status5strategy5structure5synthesis5undo5Visual design5whiteboard5complexity4consent4consistency4dashboards4destructive4dialogs4efficiency4empty-states4Ethics4evaluation4grouping4handoff4heuristics4learning4mental-models4menus4metrics4migration4perceived-performance4Process4retention4specification4theming4activation3aria3buttons3choice3containers3conventions3data-visualization3discovery3editing3elevation3emphasis3findability3generative3icons3integrity3Layout3legibility3modals3organisation3overlays3permissions3power-users3preferences3pricing3product3quality3rhythm3scale3settings3shortcuts3tooltips3visual-design3visual-hierarchy3