{"slug":"progressive-disclosure","meta":{"title":"Progressive disclosure","slug":"progressive-disclosure","kind":"principle","summary":"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.","problem":"A screen gets built from the data outward — the model has twenty fields, so twenty fields go on the page, each with equal weight. Nothing on it is wrong and the page is still unusable, because with no hierarchy the eye has no entry point, so you must read everything to find anything.","principles":["progressive-disclosure"],"status":"stable","visibility":"public","related":[{"title":"Progressive Disclosure for Dense Detail Pages","url":"/cookbook/progressive-disclosure-detail-page","summary":"The implementation guide — layer budgets, tabs, collapsed rows."},{"title":"UX Principles Guide for Building Web Software","url":"/wiki/ux-principles-for-web-software","summary":"The customer-facing version, with a working slide-out panel demo."},{"title":"Master–Detail Drawer","url":"/patterns/master-detail-drawer","summary":"Disclosure that keeps the overview on screen instead of trading it away."}]},"body":"## Design from the job inward\n\nThe failure this principle prevents is **designing from the data outward** — you\nhave the fields, so you ask where to put them. The result has no hierarchy, and\nextraneous load falls on every person who uses the screen afterwards.\n\nThe alternative starts with one sentence: *a [who] doing [what, when] needs to\ndecide [one thing]*. Then one question the screen must answer without scrolling,\nreading prose, or clicking. Everything that does not answer that question is a\nlower layer **by default**. Most of the work is demoting things.\n\n## Four layers, and a budget that does the work\n\n| Layer | Cost to the user | What belongs there |\n|---|---|---|\n| **Glance** | free | The answer to the one question |\n| **Scan** | reading | Supporting context, in place |\n| **Demand** | one click | Full bodies, history, internals |\n| **Elsewhere** | navigation | Anything that already has its own page |\n\nThe glance layer holds about **five elements**, and that cap is the mechanism.\nTo promote a sixth, you must demote one. Without a fixed budget, every\nstakeholder's favourite field ends up at the top and the page is a data dump\nagain — this time with a design review attached.\n\n## Demote, never hide\n\nProgressive disclosure is not hiding. The distinction is mechanical: **every\nlower layer needs a visible door.** A chevron, a count, a \"12 earlier messages\"\nrow, a tab. Hidden-with-no-affordance is the classic mistake, and it produces\nsoftware where the useful part is folklore.\n\nA hover-only control is a door only for things a person already knows exist. It\nmay reveal *elaboration* of something visible; it must never be the only carrier\nof a fact.\n\n## Applications worth naming\n\n- **Kill the sideways scroll.** A table you scroll horizontally has hidden half\n  its data with no door at all. Cut columns to the ones people scan and put the\n  rest in the record — see [dense operational table](/patterns/dense-operational-table).\n- **Overview plus detail on demand.** A drawer or expandable row gives the full\n  record without a page jump, and keeps the overview — the strongest form,\n  because it defers detail without trading away context.\n- **Reveal on relevance.** A copy button does not need to sit on screen at all\n  times; show it when someone hovers the thing they would copy — and then tell\n  them it worked.\n\n## The tests\n\n- **Squint.** Blur your eyes or shrink the browser to 25%. Uniform grey mush\n  means no hierarchy. Confetti means too many colours.\n- **Five seconds.** Show someone the screen for five seconds, hide it, ask what\n  it is for and what needs doing. If they cannot say, the glance layer is wrong.\n- **Subtraction.** Name what you removed or demoted this round. If the list is\n  empty, you did not design — you accumulated.\n"}