Use user-controlled density when users choose how compact a surface appears; settings management when users need a durable configuration hub; data grid when rows and columns need managed interaction; and saved view when users save filters, columns, sorting, or grouping as a reusable data view.
Use user-controlled density when users choose how compact a surface appears; settings management when users need a durable configuration hub; data grid when rows and columns need managed interaction; and saved view when users save filters, columns, sorting, or grouping as a reusable data view.
Practice the judgment: Imagine this situation: A compact mode shrinks text, checkboxes, menus, and row actions until labels truncate and touch targets become unreliable. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | User-controlled density | Settings management | Data grid | Saved view |
|---|---|---|---|---|
| UI or UX | UI + UX - User-selectable compactness for rows, lists, cards, tables, grids, or work surfaces | UI + UX - Dedicated user or app configuration management surface | UI + UX - Interactive row-and-column data workspace | UI + UX - Persisted named presentation state for a data workspace |
| 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. | Render settings management as a durable configuration surface with a clear Settings or Preferences entry point, grouped categories, current values, setting descriptions, ownership or scope labels, dependencies, save or immediate-apply behavior, status feedback, search or section navigation for larger sets, and reset or restore defaults where appropriate. | Render the grid as a named work surface with visible headers, row identifiers, focus location, selection state, dirty and invalid cell markers, column controls, and status text for row count, sort, filter, and save state. | Render saved views as named, selectable workspace presentations with visible owner or visibility, active state, saved layout mode, columns or fields, grouping, sort, filters, and last-updated metadata. |
| 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. | Use settings management when users need to review and change persistent app, account, workspace, notification, privacy, display, integration, or system behavior outside the immediate task flow. | Use a data grid when cell-level interaction makes users faster and more accurate than opening each record separately. | Use saved view when users need to return to a complete operational presentation of a changing dataset rather than rebuilding columns, layout, grouping, filters, and sort every session. |
| Good UI | 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 notification settings page groups channels, quiet hours, digest frequency, and workspace scope; each row shows current value, effect, dependency, and whether changes save immediately. | An invoice-review grid shows frozen invoice IDs, column headers for Vendor, Amount, Due, Owner, and Status, one highlighted focused cell, two selected rows, a dirty edited amount, and a status line naming the current cell. | A support queue has saved views named My urgent tickets, Team backlog, and SLA breach risk, each showing columns, sort, filters, owner, and private or team visibility before users apply it. |
| Bad UI | A compact toggle removes secondary labels and status chips instead of only reducing spacing. | Users change the wrong scope because local, account, workspace, and organization settings look identical. | A static report uses role grid even though users only read values and ordinary table semantics would be clearer. | A saved view list mixes saved filters, saved searches, static exports, bookmarks, and recent pages under one generic Saved label. |
| Good UX | 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 user turns off weekly digest emails, sees the setting save immediately, keeps urgent security emails enabled, and understands the workspace-level override. | A user presses Arrow Right to move from Amount to Due, presses Enter to edit the due date, presses Escape to cancel, and focus returns to the same cell in navigation mode. | A manager opens SLA breach risk, sees the board layout, grouped Status lanes, five saved columns, and current result count, then changes density and saves a private copy instead of overwriting the team view. |
| Bad UX | A user shrinks density and accidentally clicks the wrong row action because target sizes collapsed. | A user changes a privacy setting thinking it affects only one project, but the value applies to the whole account. | The grid reports selection but the visual highlight is focus, or focus highlight is mistaken for selected data. | A user changes one column while reviewing a team queue and accidentally updates the shared default for everyone. |
| Best fit | Users need to switch between scanning many records and reading or editing with more space. | Users need to inspect and change persistent app, account, workspace, privacy, notification, display, integration, device, or system behavior. | Users repeatedly inspect or update many records in shared columns. | Users repeatedly return to a specific presentation of a changing data set. |
| Avoid when | Changing density would hide required information, reduce targets below usable sizes, or break focus. | The task is a one-time transaction, submission, setup wizard, or onboarding flow. | The data is read-only and ordinary table navigation is enough. | Only one current-session filter or sort choice needs to be changed. |
| Required state | Default density state | Settings overview with categories and current values | Default navigation state with labelled grid, column headers, row headers or row identifiers, focused cell, and row count context. | Saved view list with active, private, team, shared, pinned, default, owner, last-updated, and result-count states. |
| Accessibility burden | Expose selected density, scope, and reset state as text. | Use headings, section labels, fieldsets, and persistent labels so settings groups and controls have clear programmatic names. | Use grid semantics only for an interactive composite widget with managed focus. | Use labelled controls for view name, visibility, layout, columns, grouping, filters, sort, density, and sharing settings. |
| Common misuse | Treating density as a way to remove metadata, labels, helper text, or status instead of changing spacing. | Using settings as a dumping ground for unrelated navigation, billing, help, profile setup, onboarding, or destructive account actions. | Using role grid on a static table only to make it sound richer. | Saving current rows instead of presentation settings and dynamic criteria. |