Usability Heuristics
Interaction quality rules that ensure patterns are usable, accessible, and predictable.
Canonical design foundation knowledge is maintained in the UI Foundations Vault. This repository only documents implementation-specific usage.
Vault reference: configured vault usability heuristics
Local heuristic IDs
These IDs are implementation hooks for pattern-rule citations and validation. The durable heuristic definitions live in the vault.
| ID | Name | Implementation usage |
|---|---|---|
heuristic.feedback |
Feedback | Used when a pattern must expose state, messages, focus, or updated content. |
heuristic.consistency |
Consistency | Used when related controls must share naming, placement, state, or interaction behavior. |
heuristic.error-prevention |
Error Prevention | Used when labels, grouping, required cues, disabled states, or constraints reduce avoidable mistakes. |
heuristic.recognition |
Recognition | Used when actions and context must be visible rather than hidden behind memory or convention. |
heuristic.user-control |
User Control | Used when a pattern needs reversible choices, cancellation, recovery, or clear current state. |
heuristic.accessibility |
Accessibility | Used when semantic HTML, accessible names, keyboard access, visible focus, or assistive state communication are required. |
Traceability
- Pattern rules must cite the heuristic IDs they rely on.
- Component rules must implement the cited heuristics with semantic markup, state classes, tokens, or documented behavior.
- Validation prefers deterministic checks tied to these IDs.
Usage in Pattern Rules
When documenting a pattern rule, reference heuristics like this:
Cites: heuristic.feedback, heuristic.accessibility
Rationale: Checkbox checked state must be communicated via
:checked pseudo-class AND aria-checked for screen readers.