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

Comparison Layout Clarity

Comparison Layout Clarity turns a frequent interface judgment into an executable constraint before generation.

comparisonlayoutdecision

Design Principle

Comparison value comes from visible differences along shared dimensions, not prettier object cards.

Principle Comparison value comes from visible differences along shared dimensions, not prettier object cards.

Design action Use a table or aligned cards with fixed comparison dimensions; highlight differences, limit copy length, and place actions near each option.

Examples Positive example: Plans, product variants, candidates, and vendors need decision support across objects. Counterexample: Cards have different heights so attributes misalign.

Apply when Plans, product variants, candidates, and vendors need decision support across objects. 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

Use a table or aligned cards with fixed comparison dimensions; highlight differences, limit copy length, and place actions near each option.

Apply When

  • Plans, product variants, candidates, and vendors need decision support across objects.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Cards have different heights so attributes misalign.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

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