Usability Heuristics
Interaction quality rules that ensure patterns are usable, accessible, and predictable.
These heuristics define what "good interaction" means in UI Foundations. Every pattern rule must cite at least one heuristic ID.
Heuristics
| ID | Name | Definition |
|---|---|---|
heuristic.feedback |
Feedback | User actions must produce visible, semantic, or assistive feedback through states, messages, focus, or updated content. |
heuristic.consistency |
Consistency | Similar controls and patterns must behave, read, and respond consistently across surfaces. |
heuristic.error-prevention |
Error Prevention | Structure should prevent avoidable mistakes before they happen through clear labels, grouping, required/optional cues, disabled states, and constrained choices. |
heuristic.recognition |
Recognition | Interfaces should make available actions and context visible instead of relying on memory, hidden conventions, or implied relationships. |
heuristic.user-control |
User Control | Users should be able to understand the current state, change reversible choices, cancel where appropriate, and recover from mistakes. |
heuristic.accessibility |
Accessibility | Patterns must preserve semantic HTML, programmatic names, keyboard access, visible focus, and assistive-technology state communication. |
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.