Dashboard

1. Confirm the pattern matches the problem and constraints before copying the example.
2. Start from the anatomy and examples in references/pattern.md, then choose the smallest viable variation.
3. Apply accessibility, performance, and interaction guardrails before layering visual polish.
4. Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.

Accessibility guardrails

Keyboard Interaction

• Verify that dashboard layout can be completed using keyboard alone.
• Keep focus order logical when the pattern opens, updates, or reveals additional UI.
• Preserve a visible focus state that is still readable at high zoom.

Screen Reader Support

• Use semantic elements first, then add ARIA only where semantics alone are not enough.
• Announce state changes such as errors, loading, or completion in the right place and with the right politeness.
• Connect labels, hints, and status text with aria-describedby or structural headings when useful.

Visual Accessibility

• Do not rely on color alone to convey severity, completion, or selection state.

Performance guardrails

• Measure the cost of rendering the default view before adding richer adornments such as nested actions, charts, or inline filters.
• Use pagination, windowing, or progressive disclosure when the layout would otherwise render too many items at once.
• Stabilize heights and placeholder geometry so loading and data refresh states do not cause large layout shifts.

Common mistakes

Choosing the layout before the task

The Problem: Teams often pick a visually familiar pattern before confirming whether users need comparison, exploration, or scanning.

How to Fix It? Start from the user task, then map the layout to comparison, chronology, hierarchy, or overview needs.

Ignoring non-happy states

The Problem: A polished default view still feels broken when loading, empty, and error states are inconsistent.

How to Fix It? Design the data lifecycle up front, including empty, partial, stale, and failed results.

Shipping a desktop-only density model

The Problem: Large tables, dense dashboards, and heavy cards collapse quickly on small screens.

How to Fix It? Define a mobile strategy such as stacked cards, progressive disclosure, or alternate summaries before implementation.

Related patterns

• https://uxpatterns.dev/patterns/data-display/chart
• https://uxpatterns.dev/patterns/data-display/filter-panel
• https://uxpatterns.dev/patterns/data-display/statistics

For full implementation detail, examples, and testing notes, see references/pattern.md.

Pattern page: https://uxpatterns.dev/patterns/data-display/dashboard