# UI / UX — First Principles **Version:** 1.0.0 **Status:** Foundational **Audience:** AI agents and humans designing user interfaces, components, pages, and flows. ## 1. Manifesto A user interface is a contract between a system and a person. The cost of a bad interface is paid by every user, every time they use it. The highest quality interface is one that a stranger can use correctly without instructions, regardless of their abilities. ## 2. The Principles ### P1. User Primacy The user's goal is the system's goal. The system never optimizes for itself at the user's expense. - A loading indicator exists because the user is waiting, not because the system is busy. - A default exists because the user would choose it, not because it is easiest to implement. - The system never makes the user do work the system could do. ### P2. Accessibility Every user can use the interface, regardless of ability or context. - Accessibility is not a feature; it is a property of correct interfaces. - Failure to be accessible is disqualifying — see `domains/uiux/accessibility.md`. - Every interactive element is keyboard-reachable and screen-reader announced. ### P3. Clarity The interface communicates what it does, what it did, and what will happen next. - Labels are nouns. Actions are verbs. States are adjectives. - The user should never wonder "what will this do?" - A confused user is a defect, not a user error. ### P4. Feedback Every user action produces an immediate, visible response. - The system always acknowledges input, even before it processes it. - Feedback is for the user, not the developer. A console log is not feedback. - See `domains/observability/` for the system-side complement. ### P5. Forgiveness User actions are reversible. Mistakes are recoverable. - Destructive actions require confirmation. Irreversible actions require double confirmation. - Undo is a first-class operation, not an afterthought. - The system never traps the user in a state they did not choose. ### P6. Performance The interface responds in the time the user expects, not the time the system takes. - Perceived performance beats measured performance when they diverge. - A 200ms response with feedback feels faster than a 50ms response without. - See `domains/performance/frontend.md` for the technical complement. ### P7. Hierarchy The interface communicates priority through structure, not decoration. - The most important thing is the most visible. - Hierarchy is visual: size, weight, position, contrast. Not noise. - A flat interface hides priority. A cluttered interface invents false priority. ### P8. Consistency The same action has the same result, the same name, and the same location, everywhere. - Consistency serves predictability: the user learns once, applies everywhere. - Inconsistency is a tax on the user's attention. - See `domains/uiux/components.md` for component-level consistency rules. ### P9. Simplicity The interface shows the user what they need, when they need it, and nothing more. - Progressive disclosure: show the common path, hide the rare path. - A simple interface is complete for its purpose. A simpler-than-necessary interface is not. - Simplicity serves clarity: a cluttered interface is unclear. ### P10. Reversibility The user can always go back, undo, or cancel. - Navigation is reversible. Data changes are reversible. Sessions are resumable. - The "back" button always works. The "cancel" button always cancels. - Reversibility serves forgiveness (P5): the cost of a mistake is bounded. ## 3. Conflict Resolution 1. Accessibility (P2) — never sacrificed. 2. Clarity (P3) — never sacrificed. 3. User Primacy (P1) — never sacrificed. 4. Forgiveness (P5) — sacrificed only when an action is genuinely irreversible by domain. 5. Feedback (P4) — sacrificed only for Performance (P6) with perceived-performance evidence. 6. Consistency (P8) — sacrificed for Clarity (P3) when a context demands a different pattern. 7. Hierarchy (P7) — sacrificed for Simplicity (P9) when an interface is simple enough to need no hierarchy. 8. Simplicity (P9) — sacrificed for Clarity (P3) when simplifying would obscure. 9. Performance (P6) — sacrificed for Feedback (P4) when the user needs to know the system is working. 10. Reversibility (P10) — sacrificed only for genuinely irreversible operations (e.g., account deletion), with explicit confirmation. Three of ten principles are non-tradeable: Accessibility, Clarity, User Primacy. These derive from core C1 (Correctness) and C2 (Clarity). ## 4. What Violates These Principles | Violation | Principle Breached | |-----------|-------------------| | A button that does nothing on click | P4 Feedback | | An image without alt text | P2 Accessibility | | A "delete" with no confirmation | P5 Forgiveness | | A 5-second spinner with no progress | P6 Performance, P4 Feedback | | Two "save" buttons that do different things | P8 Consistency | | A settings page with 50 options visible at once | P9 Simplicity | | A form that cannot be navigated by keyboard | P2 Accessibility | | An action that cannot be undone or cancelled | P10 Reversibility | | A label that says "Submit" when it deletes | P3 Clarity | | A system that optimizes its own load time over the user's wait | P1 User Primacy | ## 5. Relationship to Core Subordinate to `core/first-principles.md`. The three non-tradeable principles (P2, P3, P1) are promoted to C1-equivalent. See `matrix/principles-matrix.md` for the full derivation. Sibling to `domains/uiux/components.md` and `domains/uiux/accessibility.md`.