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 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 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 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 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 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 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 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 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. 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. 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 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 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 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 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