{"slug":"grouped-list","meta":{"title":"Grouped List","slug":"grouped-list","kind":"pattern","summary":"One collection divided into labelled sections with counts, so the shape of the set is visible before any individual row is read.","problem":"A flat list of eighty items hides its own structure. Sixty are routine and twenty need attention, and the only way to learn that is to read all eighty — so people either read everything or miss the twenty.","family":["scan"],"data_shape":["collection","tabular"],"principles":["progressive-disclosure","minimize-distance","orientation"],"interaction":["scanning","disclosure"],"density":"medium","complexity":"low","status":"stable","visibility":"public","use_when":["Records fall into a small number of meaningful groups people already think in.","Group membership changes what someone does with a record.","The distribution across groups is itself useful information."],"avoid_when":["Groups would be many and small — twenty groups of two is a worse list than one of forty.","People compare across the whole set on one metric. Grouping breaks the single sorted order that makes that possible.","Membership is arbitrary, so the headings teach nothing."],"alternatives":[{"slug":"filter-bar","when":"People want one group at a time rather than all of them at once."},{"slug":"dense-operational-table","when":"A single sort order across the whole set answers the question better than sections do."}],"ask_leo":"Group this list into labelled sections.\n\n- Group by the attribute that changes what someone does — usually status,\n  owner, or due window. Not by an attribute that is merely true.\n- Give every group a heading with its name and a count.\n- Order the groups deliberately, most urgent or most actionable first. Do not\n  order them alphabetically unless that genuinely is the priority.\n- Keep group headings visible while their rows scroll.\n- Let groups collapse, remember which are collapsed, and keep the count\n  visible on a collapsed group so nothing disappears silently.\n- Always show a group that is empty but meaningful — \"Overdue (0)\" is\n  information. Hide groups that are empty and merely possible.\n- Sort inside each group by the same rule, so the sections read consistently.\n","related":[{"title":"Dense Operational Table","url":"/patterns/dense-operational-table","summary":"The ungrouped baseline — grouping is a layer on top of it."},{"title":"Progressive disclosure","url":"/patterns/progressive-disclosure","summary":"Collapsed groups are disclosure with a visible door."}]},"body":"## Anatomy\n\n```\n▾ Needs attention (3)                      ← ordered by urgency, not A–Z\n    INV-1041  Riverside Fit-Out   12d overdue\n    INV-1043  Kestrel Joinery      4d overdue\n    INV-1046  Kestrel Marine       9d overdue\n▾ Due this week (2)\n    INV-1049  Marlow \u0026 Sons        due Thu\n    INV-1051  Harbour Depot        due Fri\n▸ Paid (14)                                ← collapsed, count still visible\n▾ Overdue over 90 days (0)                 ← empty but MEANINGFUL, so shown\n```\n\n- **Counts on every heading.** The counts are often more useful than the rows;\n  they are the summary the list would otherwise make people compute.\n- **Deliberate group order.** Alphabetical is a decision not to have decided.\n- **A collapsed group keeps its count**, so collapsing hides detail without\n  hiding existence.\n- **Meaningful empty groups stay.** \"Overdue (0)\" is a fact worth reading.\n\n## Why it works\n\nIt turns a list into a **shape**. Before reading any row, a person learns the\ndistribution — three urgent, two soon, fourteen done — and that distribution is\nusually the actual answer to why they opened the screen.\n\nIt is progressive disclosure applied horizontally rather than vertically: the\nheadings are the overview layer, the rows are the detail, and collapsing is the\nvisible door between them. Because the door carries a count, nothing is ever\nhidden without leaving a trace.\n\nGrouping also places related things adjacent, which is the\n[minimize distance](/patterns/minimize-distance) principle doing its work — the\nthree overdue invoices are next to each other, so comparing them costs a glance.\n\n## The trade you are making\n\nGrouping **destroys the single sorted order**. In a flat table, \"the largest\namount\" is the top row. In a grouped list it is the largest within one of five\nsections, and finding it means scanning all five.\n\nSo group when the *category* drives the work, and keep it flat when a *metric*\ndoes. Both are legitimate; the mistake is grouping by habit and then wondering\nwhy the list is harder to compare.\n\n## Getting it wrong\n\n- **Too many groups.** Twenty sections of two rows is more chrome than content.\n- **Alphabetical group order** on categories that have an obvious urgency order.\n- **Counts missing**, which throws away most of the benefit for none of the\n  cost saved.\n- **Collapsed groups that forget**, so every visit starts with the same\n  re-collapsing.\n- **Hiding empty groups indiscriminately**, so \"no overdue invoices\" — good news\n  someone wants — silently looks identical to the group not existing.\n\n## Exemplars\n\n**Gmail's date grouping** — Today, Yesterday, Earlier — is grouping by the\nattribute that actually changes behaviour, and it is why the inbox reads as a\nshape rather than a stream.\n\n**Linear's grouped issue list** lets the grouping attribute be switched\n(status, assignee, priority) which makes the trade explicit: you choose which\nquestion the list is currently good at answering.\n\n**Things and other task managers** converge on Today / Upcoming / Someday, which\nis the same insight — the grouping people want is the one that maps to when they\nwill act.\n\nThe extractable rule: **group by what changes the work, and put the count in the\nheading.** If the headings do not change anyone's behaviour, the list was better\nflat.\n"}