UX design covering interaction design, wireframing, prototyping, usability, accessibility, and responsive design. Use when designing user flows, task flows, state design, edge cases, progressive disclosure, affordances, feedback, or microcopy. Also for wireframing, interactive prototypes, WCAG compliance, keyboard navigation, screen readers, color contrast, focus management, cognitive load, error prevention, or responsive and adaptive design (mobile-first, breakpoints, touch targets, platform patterns). Triggers on: user flow, task flow, state design, empty state, edge case, progressive disclosure, affordance, feedback, microcopy, wireframe, prototype, WCAG, accessibility, keyboard navigation, screen reader, color contrast, focus, inclusive design, cognitive load, error handling, mobile-first, breakpoints, touch target, responsive layout, iOS, Android, cross-device.
UX Design
Comprehensive UX design guidance: interaction design, state design, feedback, forms, accessibility, cognitive load, mobile UX, and responsive design. 29 named methods, 100+ named rules, anti-pattern tables, and pre-delivery checklists.
Mandatory Pre-UX Checklist
Complete this before wireframing or writing any interaction code. Output it at the top of your response.
UX BRIEF
───────────────────────────────────────────────────────
User goal: [What does the user want to accomplish?]
Entry point: [Where does this flow start? Direct / notification / link / nav]
Success state: [How does the user know they succeeded?]
Failure states: [What can go wrong? List 3–5 scenarios]
Edge cases: [Empty / error / max / min / permission denied]
Platform: [iOS / Android / Web / cross-platform]
Primary action: [ONE verb: the single most important thing this screen does]
───────────────────────────────────────────────────────
Never skip this. Flows designed without a defined success state and failure states ship with holes.
empty-state-anatomy — Good empty state = illustration/icon + active headline + body explaining context + CTA action
no-blank-screen — A blank screen is never acceptable; always provide a message, illustration, and action
error-retry-path — Every error state has a retry button or recovery action visible
network-error-offline — Design explicit offline / no-connection state with graceful degradation message
partial-failure-shown — When some data loads and some fails, show what succeeded + inline error for what failed
boundary-min — Design for 0 items, $0 value, 0 characters — not just the typical non-zero case
boundary-max — Design for character limit reached, max file size exceeded, max list length — truncation or pagination
long-content-wraps — Test with long names, long text, multi-line labels — never assume single line
permission-denied-explained — 403 / permission denied shows why the user can't access this and what they can do
loading-placeholder — Loading state shows skeleton matching the shape of the content to load; never a blank area
forgiveness-undo — Every delete action offers undo (toast with "Undo" within 5–10 seconds)
soft-delete — Permanent deletions should move to trash first; hard delete requires explicit "Empty trash"
autosave — Long editing sessions autosave every 30–60 seconds; show last saved timestamp
resumable-flows — Multi-step flows that users abandon must be resumable: "Continue where you left off"
Empty state template:
[Illustration or icon — humanizes the void]
[Headline — active verb: "No transactions yet"]
[Body — context + next step: "Your history will appear after your first trade."]
[CTA — action that fills the state: "Connect an exchange"]
Error state template:
[Error icon — not just color]
[Headline — what happened: "Couldn't load your portfolio"]
[Body — cause + what to do: "Check your connection and try again."]
[Primary action: "Retry"]
[Secondary action (optional): "Go back"]
Do/Don't — Most Common UX Mistakes
Category
Don't
Do
Flows
Design only the happy path
Map all entry points, error paths, and empty states
Navigation
Hide back button on sub-screens
Always provide a predictable way back
States
Ship a button with no loading state
Design all 8 states before considering a component done
Feedback
Show "Something went wrong"
Show exactly what went wrong and how to fix it
Forms
Use placeholder as the only label
Use visible labels; placeholders are supplementary
Forms
Validate on every keystroke
Validate on blur; real-time only for character count
Accessibility
Remove focus ring for "aesthetics"
Design a branded 2px focus ring in the accent color
Mobile
Make icon buttons their visual size
Extend hit area to 44pt minimum with padding
Cognitive load
Show everything at once
Progressive disclosure: level 0 only, reveal on demand
