User-controlled density

Problem Context

• Users scan tables, queues, lists, cards, logs, inboxes, dashboards, or admin records with different preferences, devices, zoom levels, and task urgency.
• The same surface may need compact scanning for triage and comfortable spacing for review, editing, touch, or accessibility.
• Density may be temporary for one table, persisted for one user, inherited from a workspace setting, or unavailable on narrow screens.
• Changing density can affect row height, header height, batch action bars, checkboxes, menus, inline validation, focus rings, and open detail rows.

Selection Rules

• Choose user-controlled density when users need to decide how much vertical or horizontal spacing a surface uses without changing which data is included.
• Use settings management when density is part of a broader durable configuration area rather than the primary pattern.
• Use saved view when users are saving filters, columns, sort, grouping, or dataset scope rather than spacing alone.
• Use data grid when the hard problem is managed cell focus, editing, selection, or row-and-column semantics.
• Use responsive layout when screen size requires a different structure; density should not be the only mobile adaptation.
• Offer compact density only where labels, icons, focus rings, row actions, status, and targets remain perceivable and operable.
• Show whether the density change is temporary, this surface only, this device, account-wide, workspace-wide, or organization-managed.
• Preserve current filters, sort, selected rows, expanded rows, edited values, scroll anchor, and focused item across density changes.
• Provide reset or system default recovery and avoid coupling density reset with unrelated layout, theme, saved view, or filter resets.
• Disable or adapt density choices when content length, touch mode, high zoom, screen width, or accessibility settings make compact spacing unsafe.

Required States

• Default density state
• Comfortable or spacious density state
• Standard density state
• Compact density state
• Preview-before-save state
• Temporary density state for current surface
• Saved personal density state
• Workspace or organization-managed density state
• Reset to system default state
• Unavailable or unsafe compact state
• Mobile or narrow-screen density fallback state
• Focus, selection, expanded-row, and edited-value preservation state

Interaction Contract

• Changing density updates row height, padding, and compatible controls without reordering data, changing filters, clearing selection, or discarding edits.
• The control announces the selected density and scope before and after change.
• Persisting density is a distinct action when the scope is broader than the current surface.
• Reset restores only the density value for the named scope.
• Managed or inherited density values explain who owns them and where to request a change.
• Compact density keeps required labels, status, focus indicators, validation messages, and row actions available.

Implementation Checklist

• Define density tokens for row height, header height, padding, gaps, icon placement, batch actions, expanded content, and touch targets.
• Decide supported scopes: current table, current product area, device, account, workspace, or organization policy.
• Keep density state separate from saved view state, filters, sort, column visibility, layout arrangement, zoom, and text-size settings.
• Preserve focus, scroll anchor, selected rows, expanded rows, drafts, and validation when density changes.
• Provide preview, save, reset, inherited, unavailable, and unsafe-compact states.
• Test keyboard use, screen readers, high zoom, touch, long labels, localized strings, open row details, row actions, validation messages, and virtualized rows in every density.

Common Generated-UI Mistakes

• Treating density as a way to remove metadata, labels, helper text, or status instead of changing spacing.
• Making compact mode the only way to use the product efficiently.
• Saving personal density as a team or organization setting without consent.
• Coupling density to saved filters, columns, theme, layout arrangement, or zoom.
• Shrinking hit targets, focus outlines, or row actions below usable sizes.
• Resetting table state or losing edits when density changes.
• Offering compact density on mobile while forcing horizontal scrolling and hidden row identity.

Critique Questions

• What exactly changes when density changes: row height, padding, gaps, controls, or content?
• What stays invariant: data, filters, sort, selection, focus, edits, row identity, and open details?
• Is this density preference temporary, personal, device-specific, workspace-scoped, or managed by policy?
• Can users preview, save, reset, and recover the density choice without affecting saved views or filters?
• Do compact and spacious modes still meet keyboard, touch, zoom, localization, and screen-reader needs?
• Should the narrow-screen experience use a different layout instead of exposing desktop compact density?