D·All Concepts
10
D

Density

How much is too much?

1 min read·Community

Information density is the ratio of meaningful content to available space. Getting it right is one of the most underappreciated calibration problems in UI design — too sparse and the interface feels wasted; too dense and it becomes exhausting.

The Thought

Different contexts demand different densities. A data-heavy dashboard used by analysts for hours a day should be denser than a consumer app opened casually. The analyst's expert mental model can handle compression; the casual user's cannot. One of the most common design errors is applying consumer-grade density to professional tools, resulting in UIs that require excessive scrolling to accomplish tasks that should fit on one screen.

Edward Tufte's concept of "data-ink ratio" — the proportion of ink on a chart that represents actual data versus decorative or redundant elements — is a useful heuristic beyond charts. In any design, ask: what percentage of the visual surface is doing information work? Borders, backgrounds, padding, icons used as decoration — these are the density tax that reduces the ratio.

Density should be a deliberate design decision captured in a token, not an accident of layout choices made in isolation. The spacing scale — the set of fixed increments available for margins, paddings, and gaps — is the primary tool for controlling density systematically. A compact spacing scale produces a dense interface; a generous one produces an airy one. The choice should be made at the system level, not component by component.

Key Principles
  1. 01

    Match density to context: expert tools can be denser; casual contexts need more air.

  2. 02

    A consistent spacing scale enforces density decisions across the system.

  3. 03

    Progressive disclosure reduces apparent density — hide detail until it is needed.

  4. 04

    Whitespace is not wasted space — it is the density decision that makes content readable.

  5. 05

    If removing something does not reduce meaning, remove it.

Related