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

Readable Dashboard Charts

Readable Dashboard Charts turns a frequent interface judgment into an executable constraint before generation.

chartsdashboardreadability

Design Principle

Operational charts are often scanned quickly; small-chart readability matters more than expressive form.

Principle Operational charts are often scanned quickly; small-chart readability matters more than expressive form.

Design action Small charts keep title, unit, time range, and anomaly labels; reduce categories and place legends near data.

Examples Positive example: Sparklines, KPI charts, and small analytics panels need trend readability at small sizes. Counterexample: Charts lack axis, unit, or time range.

Apply when Sparklines, KPI charts, and small analytics panels need trend readability at small sizes. 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

Small charts keep title, unit, time range, and anomaly labels; reduce categories and place legends near data.

Apply When

  • Sparklines, KPI charts, and small analytics panels need trend readability at small sizes.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Charts lack axis, unit, or time range.
  • 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