UX Patterns Guide
UI + UX Personalization And Preference established

User-controlled density

Provide a scoped density control that changes spacing and row height without changing content meaning, preserves task state, respects accessibility constraints, and lets users preview, save, reset, or keep density temporary.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Users need to switch between scanning many records and reading or editing with more space.
  • The same content surface can support multiple spacing levels without changing meaning or task state.
  • The product can preserve state and accessibility guarantees while density changes.

Avoid when

  • Changing density would hide required information, reduce targets below usable sizes, or break focus.
  • The user needs to save filters, columns, sort, or grouping as a view rather than adjust spacing.
  • A responsive layout or text-size control is the real need.
  • The product cannot define clear scope or preserve current task state.
  • A regulated or high-risk task requires fixed spacing for review accuracy.

Problem it prevents

Information-dense products need to support both scanning and comfortable reading, but fixed spacing forces every user into the same tradeoff or lets compact modes break readability, target size, focus, and state preservation.

Pattern anatomy

What a strong implementation has to make clear

User need

Users scan tables, queues, lists, cards, logs, inboxes, dashboards, or admin records with different preferences, devices, zoom levels, and task urgency.

Pattern promise

Provide a scoped density control that changes spacing and row height without changing content meaning, preserves task state, respects accessibility constraints, and lets users preview, save, reset, or keep density temporary.

Required state

Default density state

Recovery path

Compact density hides labels, status, validation, or row actions.

Access contract

Expose selected density, scope, and reset state as text.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A case queue toolbar lets users switch Comfortable, Standard, and Compact row density, shows This table only, preserves selected rows, and keeps row actions readable.
  • A workspace setting lets each user choose default list density for their account while previewing row height and resetting to organization default.
  • A support agent switches a queue to Compact to scan SLA risk, keeps the focused row and filters intact, then returns to Comfortable before reading long notes.
  • A touch-screen user selects Spacious, and row actions remain reachable while the same data, sort, and filters stay in place.
Weak implementation

Vague, hidden, hard to recover from

  • A compact toggle removes secondary labels and status chips instead of only reducing spacing.
  • Changing density resets filters, selected rows, open rows, and unsaved edits.
  • A user shrinks density and accidentally clicks the wrong row action because target sizes collapsed.
  • A compact table hides validation messages, so users cannot see which row failed.
UI guidance
  • Render density as a visible segmented control, menu, or setting with named choices such as Comfortable, Standard, Compact, and Spacious, plus scope, preview, and reset feedback.
  • Keep content, order, filters, selection, edits, and row identity stable when density changes; only spacing, row height, padding, and related control sizing should change.
UX guidance
  • Use user-controlled density when different users or moments call for scanning more items versus reading with more breathing room on the same surface.
  • Protect readability and accessibility by maintaining labels, status text, focus indicators, row actions, touch targets, text scaling, and keyboard navigation across every density option.
Implementation contract

What the implementation must handle

States

  • Default density state
  • Comfortable or spacious density state
  • Standard density state
  • Compact density state

Interaction

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

Accessibility

  • Expose selected density, scope, and reset state as text.
  • Keep focus indicators, labels, validation, status, row actions, and selection affordances visible at every density.
  • Do not rely on visual spacing alone to indicate grouping; preserve headings, borders, or labels when spacing compresses.
  • Maintain keyboard navigation order and focus restoration when density changes.

Review

  • 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?
Interactive lab

Inspect the states before you copy the pattern

Switch display density without losing state

Change comfortable, standard, compact, and spacious density, preview before saving, save personal scope, reset to system default, handle managed and unsafe compact states, preserve focus, selection, edits, and filters, and compare hidden-labels, state-loss, shared-overwrite, saved-view-mix, target-shrink, mobile-scroll, and no-reset failures.

User-controlled density
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Default density state

Keyboard / Access

Tab reaches the density control, preview or save controls, reset control, and returns to the affected surface without focus loss.

Avoid Generating

Treating density as a way to remove metadata, labels, helper text, or status instead of changing spacing.
Evidence trail

Source-backed claims behind this guidance

Cloudscape content density

Cloudscape Design System - checked

Cloudscape documents comfortable and compact content density modes.

Full agent/debug reference

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?
Accessibility
  • Expose selected density, scope, and reset state as text.
  • Keep focus indicators, labels, validation, status, row actions, and selection affordances visible at every density.
  • Do not rely on visual spacing alone to indicate grouping; preserve headings, borders, or labels when spacing compresses.
  • Maintain keyboard navigation order and focus restoration when density changes.
  • Respect browser zoom, OS text size, touch target needs, and high-contrast modes.
  • Announce density changes through a stable status region when the visual layout shifts.
Keyboard Behavior
  • Tab reaches the density control, preview or save controls, reset control, and returns to the affected surface without focus loss.
  • Arrow keys may move within a segmented density control when semantic roles support it.
  • Enter or Space applies the selected density according to native control behavior.
  • After applying density, focus remains on the invoking control or returns to the previously focused row or item according to the stated contract.
  • Escape closes density menus and returns focus to the density trigger.
Variants
  • Table density selector
  • Grid density menu
  • List compactness toggle
  • Card spacing preference
  • Comfortable reading mode
  • Compact scanning mode
  • Spacious touch mode
  • Personal density setting
  • Workspace-managed density
  • Temporary density preview

Verification

Last verified: