UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Content Density Ladders

Content Density Ladders turns a frequent interface judgment into an executable constraint before generation.

densitycontentprogression

Design Principle

Density is not a whole-page property; it is a ladder that changes with task depth.

Principle Density is not a whole-page property; it is a ladder that changes with task depth.

Design action Show only judgment fields in overview; add history, relationships, raw data, and actions in details with a higher density.

Examples Positive example: Overview pages connect to detail pages, drawers, expanded rows, or drill-downs. Counterexample: Overview layers contain every field.

Apply when Overview pages connect to detail pages, drawers, expanded rows, or drill-downs. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.

Agent Directive

Show only judgment fields in overview; add history, relationships, raw data, and actions in details with a higher density.

Apply When

  • Overview pages connect to detail pages, drawers, expanded rows, or drill-downs.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Overview layers contain every field.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Visual Foundations
Quality
84%
Version
v1
Published
6/6/2026