ui-density

UI Density

Density describes how much information and how many interactive elements appear in a given area. The right density is not a universal standard — it depends on platform, user type, and session context.

Platform Defaults

Never port a dense desktop layout directly to mobile. Remove, collapse, or deprioritise features rather than shrinking them.

User Type and Density

A trading platform operator sits in the product for 8 hours a day and has learned every pixel — high density serves them. A user visiting a settings page once a month needs clear space and obvious labels.

Domain experts tolerate complexity — if it solves the right problem quickly.* People who know the domain (especially in internal tools) will happily use dense, complex, feature-rich interfaces, because the complexity maps to a mental model they already hold. Two conditions make this work rather than overwhelm:

• Terminology matches their vocabulary. The labels, abbreviations, and jargon are the ones they already use. A term that's opaque to a consumer is a precise, fast signal to an expert — don't dumb it down for an audience that isn't there.
• The outcome stays quickly reachable. Density is fine as long as the result — the answer they came for, or the action they need — is fast to see or do, typically through an obvious primary action (see [[visual-emphasis-and-hierarchy]]). Complexity that surrounds a clear path to the outcome is power; complexity that buries the outcome is clutter.

Design a power-user mode around this: high density, expert terminology, keyboard-driven, primary action always in reach — distinct from a casual/first-time mode that guides and unclutters. The same product may offer both; match the mode to who is actually using the view.

Density Tokens

Define spacing scale with density in mind. A compact variant reduces padding without changing structure:

/* Default density */
--density-row-height:    44px;
--density-cell-padding:  var(--space-3) var(--space-4);
--density-gap:           var(--space-4);

/* Compact (enterprise / data-heavy) */
[data-density="compact"] {
  --density-row-height:    32px;
  --density-cell-padding:  var(--space-2) var(--space-3);
  --density-gap:           var(--space-2);
}

/* Spacious (consumer / onboarding) */
[data-density="spacious"] {
  --density-row-height:    56px;
  --density-cell-padding:  var(--space-4) var(--space-6);
  --density-gap:           var(--space-6);
}

Feature Count by Platform

Not every feature belongs on every platform. For each feature ask: does a mobile user need this right now?

Density and Feature Reduction on Mobile

Sections and features can be removed, collapsed, or repositioned on smaller viewports — not just resized.

• Remove: Decorative sidebars, secondary data columns, promotional banners
• Collapse: Filters, advanced options, secondary navigation into accordions or bottom sheets
• Reposition: Toolbars move from top to bottom (thumb reach), sidebars move to drawers
• Simplify: A multi-column data table becomes a card list; a full chart becomes a single key metric

Progressive disclosure is the principle: show the minimum needed to complete the primary task, reveal more on demand.

Reading Is Time

The most under-counted cost in a dense UI is reading. Every word the user must read to orient themselves is time spent, and it compounds — the more there is to read, the slower the whole interface feels, on every visit. Density is not just "how much fits on screen"; it's "how much the user has to read to act." Reduce that load:

• Cut words before you shrink them. The fix for a cramped screen is usually less content, not smaller type (see [[modular-scale-typography]]).
• Let recognisable icons replace reading where a concept has an unambiguous, standard icon — the eye recognises a shape faster than it reads a word (see [[brand-visual-language]]).
• But don't over-ice with icons. A wrong or decorative icon adds a thing to interpret instead of removing one; and an icon on everything is its own noise. Right icon, relevant place only.
• Front-load the scannable bit. Put the word or number the user scans for at the start of the line/label, so they don't read the whole thing to find it.

The goal: a user should be able to glance, not read, to know where they are and what to do next.

Review Checklist

• [ ] Is the density appropriate for the primary platform (desktop = can be denser, mobile = must be sparse)?
• [ ] Is the density appropriate for the user type (power user = higher density, consumer = more space)?
• [ ] Are spacing tokens used to define density — not one-off padding values?
• [ ] On mobile: are secondary features collapsed, repositioned, or removed rather than shrunk?
• [ ] Are touch targets ≥ 44×44px even in compact density variants?
• [ ] Is a density toggle offered for enterprise tools where users have strong personal preferences?