A vocabulary of solved design problems

Pattern · Demo Activity Timeline A record's history as an ordered list of events — who did what, when — so "how did this get like this" is answerable without asking anyone. Scan & UnderstandInspectCoordinate Pattern · Demo Assign an Owner Exactly one named person is responsible for a record at any moment, visible on the record and filterable across the collection. CoordinateMove Through Workflow Pattern · Demo Autosave The system persists changes as they are made and reports the save state continuously, so "have I saved?" stops being a question anyone has to hold. Edit & ManipulateCreate & Capture Pattern · Demo Back Link A single explicit "back to where this came from" control on a leaf screen, so leaving does not depend on the browser's Back button or on remembering the route. Orient Anti-pattern · Demo Badge Soup Every attribute rendered as its own coloured pill, so the row is a wall of chips and colour has stopped separating anything. Scan & Understand Pattern · Demo Breadcrumbs A trail showing where the current screen sits in the hierarchy, with every ancestor clickable — the answer to "how did I get here" that survives a deep link. OrientFind & Navigate Pattern · Demo Card List Records shown as individual bordered blocks rather than table rows — right for a few important, visual or heterogeneous things, and wrong for forty similar ones. Scan & Understand Workflow topology · Demo Checklist Workflow A record advances by completing a named set of prerequisites rather than by moving through stages — the process is "what is still outstanding", not "where is it". Move Through WorkflowCoordinate Pattern · Demo Collapsible Section A named section that folds away, keeping its heading and a count visible — disclosure that lets someone open several sections at once, unlike tabs. OrientInspectScan & Understand Pattern · Demo Command Palette One keyboard-summoned box that searches records and actions together, so an expert reaches anything in the product without navigating to it. Find & NavigateAct & Decide Pattern · Demo Comments and Mentions A discussion attached to the record it is about, where naming someone notifies them — so context and conversation stay in the same place. Coordinate Decision guide · Demo Confirmation vs Undo Whether an action should ask "are you sure" or just happen with a way back. The answer is decided by reversibility and blast radius, not by how dangerous the verb sounds. Act & DecideFeedback & Recovery Anti-pattern · Demo Dashboard Disease Everything becomes a dashboard — numbers, charts and tiles — even though the people opening it came to do work, not to look at work. OrientScan & Understand Anti-pattern · Demo Data Dump Every field the model has, on one screen, at one level of importance — built from the data outward instead of from the job inward. Scan & UnderstandInspect Pattern · Demo Dense Operational Table A tight, scannable grid built for comparing many similar records at once — the default for operational work, and almost always better than cards. Scan & Understand Decision guide · Demo Drawer vs Modal vs Page The decision guide for where a record or task should open. Three surfaces, three different promises about context — pick on the conditions, not on taste. InspectAct & Decide Principle Eliminating friction Every click, screen and decision is a tax on the person doing the work. Get them to the outcome in as few steps as possible, and never make the path a secret. Pattern · Demo Empty State What a screen shows when it has nothing to show — which is either someone's first impression of the feature, or proof that their work is done. OrientFeedback & Recovery Pattern · Demo Filter Bar A row of controls above a collection that narrows it by attribute, with every active filter visible as a removable chip and the whole state carried in the URL. Find & NavigateScan & Understand Pattern · Demo Global Search One search box that looks across every kind of record in the product and returns them grouped by type, for the person who knows what they want but not where it lives. Find & Navigate Pattern · Demo Grouped List One collection divided into labelled sections with counts, so the shape of the set is visible before any individual row is read. Scan & Understand Workflow topology · Demo Handoff Workflow Work crosses a boundary between teams, and the transfer itself is the risky part — so the handoff is an explicit event with a receiver, a checklist and an acceptance. Move Through WorkflowCoordinate Anti-pattern · Demo Horizontal Scroll Table Thirty columns pushed sideways off the screen because nobody decided which ones mattered — so half the data is hidden with no door and no indication it exists. Scan & Understand Information architecture · Demo Hub and Spoke A central object with everything else hanging off it — the shape most business software actually is, and the one that decides what "home" means. OrientFind & Navigate Information architecture · Demo Inbox-First Application The app opens on what needs you, ordered, rather than on a summary of everything — so the first screen is a worklist you can empty, not a dashboard you look at. OrientAct & Decide Pattern · Demo Inline Editing Change a value where it is displayed, without leaving the screen or opening a form — the shortest possible distance between noticing something is wrong and fixing it. Edit & ManipulateScan & Understand Pattern · Demo Kanban Board Work shown as columns of cards, one column per stage, moved by dragging — the shape of the whole process visible at once, at the cost of everything a table is good at. Scan & UnderstandMove Through Workflow Pattern · Demo Lifecycle Status One named state per record, drawn from a small closed set that everyone in the business already says out loud — the single field that answers "what happens to this next". OrientMove Through Workflow Workflow topology · Demo Linear Workflow Work moves through a fixed sequence of stages in one direction — new, review, approved, complete — with one owner at a time and no branching. Move Through Workflow Pattern · Demo Loading Skeleton Grey placeholder shapes in the layout the real content will occupy, so a slow screen shows what is coming instead of a spinner or a blank. Feedback & RecoveryOrient Pattern · Demo Master–Detail Drawer Keep the list on screen and open the selected record in a panel beside it, so someone can inspect ten records without navigating ten times. Scan & UnderstandInspect Pattern · Demo Minimal Form Ask only for what is needed to create the thing, and collect everything else later in the context where it matters. Create & Capture Principle Minimize distance The eye has to travel to connect related things. The further apart two related items sit — vertically or horizontally — the more work a person does to tie them together. Anti-pattern · Demo Modal Maze A modal opens a modal opens a modal — each one blocking the context the next one needs, until nobody can see the record they are supposedly editing. InspectAct & Decide Pattern · Demo Notifications Telling someone that something needs them — with a strict rule about what earns an interruption, because the cost of a wrong one is that all of them get ignored. CoordinateFeedback & Recovery Pattern · Demo Object Identity Header A record page opens by saying what this record is, what state it is in, and the two or three facts that decide what you do next — before any detail. OrientInspect Principle One consistent pattern The same thing should look the same everywhere it appears, and you should be able to change it where it lives. Viewing and editing are one surface, not two mental models for one object. Pattern · Demo Optimistic Update Show the result of an action immediately, send it in the background, and reconcile honestly if it fails — so a fast action feels instant instead of waiting on a network round trip. Edit & ManipulateAct & DecideFeedback & Recovery Principle Orientation Every screen silently answers three questions — where am I, how did I get here, where can I go next. Answer them and people feel confident; fail and they feel lost even when nothing is broken. Pattern · Demo Persistent Navigation A navigation surface that is present and identical on every screen, so "where can I go" never has to be answered by the page itself. Orient Principle Progressive disclosure Show the essential few things up front and reveal the rest when it becomes relevant. You are deferring detail, not deleting it — and every deferred layer needs a visible door. Pattern · Demo Quick Add Create a record from one field, in the place the record belongs, without leaving the screen or opening a form. Create & Capture Pattern · Demo Review Queue A single ordered worklist that hands one person the next item to judge, with the decision available in the same view — built so the queue empties rather than so it can be browsed. Act & DecideMove Through Workflow Anti-pattern · Demo Save and Teleport Saving throws the person somewhere else — a list, a dashboard, the top of the page — so they lose their place and cannot tell whether it worked. Edit & ManipulateOrient Pattern · Demo Saved Views A named, reusable combination of filters, sort and columns — so the list someone rebuilds every morning becomes one click, and a team can agree on what "the overdue list" means. Find & NavigateCoordinate Visual grammar · Demo Semantic Colour Neutral is the default and colour is an exception that carries exactly one meaning — at most three semantic hues plus greys, and never colour on its own. Scan & Understand Pattern · Demo Smart Defaults Fill the field with the answer that is right most of the time, from context you already have — so the common case needs no decision and the exception is still easy. Create & CaptureEdit & Manipulate Visual grammar · Demo Spacing and Proximity Whitespace is the primary grouping mechanism. Things that belong together sit close; things that do not sit apart — and uniform padding everywhere is a decision not to have grouped anything. Scan & Understand Pattern · Demo Spreadsheet Import Bring an existing spreadsheet into the system by mapping its columns, previewing what will happen, and reporting per-row results — never all-or-nothing. Create & Capture Workflow topology · Demo Stage-Gated Workflow A record cannot advance to the next stage until stated conditions are met, and the interface says exactly which condition is blocking it. Move Through WorkflowAct & Decide Principle Surface, don't bury Prominence equals frequency times importance. The work people do every day should be the easiest to reach, and rarely-used things should live deeper — that is correct, not a bug. Pattern · Demo Tabs One record or screen split into a few named sections, only one visible at a time, with the section in the URL so a tab can be linked to. OrientInspect Pattern · Demo Unsaved Changes Guard The screen knows whether it holds work that is not saved, says so continuously, and intercepts anything that would throw it away. Edit & ManipulateFeedback & Recovery Pattern · Demo Validation Errors Tell someone a value is wrong next to that value, at the moment it can be fixed, in words that say what to do — and never take away what they typed. Create & CaptureEdit & ManipulateFeedback & Recovery Pattern · Demo Version History Previous states of a record kept, listed and restorable — so an edit is never the destruction of what came before. Edit & ManipulateFeedback & Recovery Visual grammar · Demo Visual Hierarchy Size, weight, colour and position are a currency with a fixed supply. Spend them in proportion to importance, and accept that emphasising everything emphasises nothing. Scan & Understand Exemplar What Airtable Figured Out That people already know how to use a grid, and that the winning move is to make the spreadsheet a real database rather than to replace it with forms. Edit & ManipulateScan & UnderstandCreate & Capture Exemplar What Gmail Figured Out That when an action is frequent and reversible, undo beats confirmation — and that changing an action's reversibility is better than adding friction to it. Act & DecideFeedback & Recovery Exemplar What Linear Figured Out That software used all day is a keyboard instrument, and that speed comes from removing round trips rather than from optimising them. Act & DecideEdit & ManipulateFind & Navigate Exemplar What Stripe Figured Out That money software is read far more often than it is written, so the product is built around inspecting a past event rather than performing a new one. InspectScan & Understand Pattern · Demo Wizard A long, genuinely required task broken into ordered steps with visible progress — so the person faces a few decisions at a time instead of forty at once. Create & CaptureMove Through Workflow Visual grammar · Demo Words and Labels The text is the interface. A button named after its outcome, a label in the customer's vocabulary and an error that says what to do next do more than any amount of layout. OrientAct & Decide