UX Design

User experience is the foundation. Visual aesthetics built on poor UX will fail. This skill ensures structural soundness before surface polish.

Related skills:

• aesthetic-ui-designer — Visual execution after UX decisions are made
• persona-creation — Deep user research, personas, JTBD, journey mapping
• accessibility-auditor — Comprehensive WCAG 2.2 AA audits

Design Thinking Framework

A pragmatic approach: Design Thinking structure with Lean UX speed.

Empathize → Define → Ideate → Prototype → Test → Iterate
    ↑                                              |
    └──────────────────────────────────────────────┘

Quick Process Guide

For detailed process guidance: See references/design-thinking-process.md

Core UX Principles

1. User Control & Freedom

• Always provide escape routes (cancel, undo, back)
• Don’t trap users in flows
• Confirm destructive actions, but don’t over-confirm routine ones

2. Consistency & Standards

• Follow platform conventions (web vs iOS vs Android)
• Internal consistency: same action = same result everywhere
• Use familiar patterns before inventing new ones

3. Error Prevention > Error Messages

• Disable invalid actions rather than allowing then rejecting
• Use constraints (date pickers vs free text)
• Provide smart defaults

4. Recognition Over Recall

• Show options, don’t require memorization
• Persistent navigation and context
• Recently used items, search history

5. Flexibility & Efficiency

• Shortcuts for experts, guidance for novices
• Customizable workflows
• Progressive disclosure: simple default, advanced available

6. Feedback & Visibility

• Every action needs acknowledgment
• System status always visible
• Loading states, progress indicators, success confirmations

7. Help Users Recover

• Clear error messages: what happened, why, how to fix
• Preserve user input on errors
• Offer alternatives when primary path fails

Information Architecture

Structure content so users find what they need.

Navigation Principles

• 7±2 rule: Limit top-level items to 5-9
• 3-click guideline: Major content within 3 clicks (flexible, not rigid)
• Clear labeling: User language, not internal jargon
• Visible location: Users should always know where they are

Navigation Patterns

For detailed IA guidance: See references/information-architecture.md

Implementation Patterns

Forms

Structure:

• One column layouts outperform multi-column
• Group related fields visually
• Logical order (don’t ask shipping before cart)

Inputs:

• Label above field (not placeholder-only)
• Appropriate input types (email, tel, date)
• Inline validation after field blur, not while typing

Actions:

• Primary action visually dominant
• Destructive actions require confirmation
• Disabled submit until valid (with clear indication why)

Feedback States

Every interactive element needs:

• Default: Resting state
• Hover: Mouse over (desktop)
• Focus: Keyboard navigation (accessibility critical)
• Active: Being pressed/clicked
• Disabled: Unavailable, with clear reason
• Loading: Processing, with indicator
• Success/Error: Outcome confirmation

Loading & Empty States

Loading:

• Skeleton screens over spinners
• Progress indicators for long operations
• Optimistic UI where safe

Empty states:

• Explain why empty
• Guide toward first action
• Never just blank space

Error Handling

[Clear icon] What went wrong
             Why it happened (briefly)
             [Primary action to fix] [Secondary: help/retry]

• Position near the source
• Don’t blame the user
• Offer recovery path

Onboarding

• Delay account creation until necessary
• Value first, signup second
• Progressive profiling over long forms
• Skippable for returning users

For detailed patterns: See references/patterns.md For modern patterns (AI, dark mode, animation): See references/modern-patterns.md

Mobile-Specific UX

Touch Targets

• Minimum 44×44pt (iOS) / 48×48dp (Android)
• Spacing between targets to prevent mis-taps
• Primary actions in thumb zone (bottom of screen)

Gestures

• Swipe for delete/archive (with undo)
• Pull-to-refresh for lists
• Pinch-to-zoom for images/maps
• Avoid gesture-only actions; provide visible alternatives

Mobile Navigation

• Bottom tab bar for primary nav (≤5 items)
• Stack navigation for hierarchical content
• Modal for focused tasks (with clear dismiss)
• Avoid hamburger menus as primary nav

Performance UX

• Perceived performance matters more than actual
• Instant feedback, background processing
• Offline states and graceful degradation

Accessibility Essentials

Accessibility improves UX for everyone. For comprehensive audits, use the accessibility-auditor skill.

Quick Checklist

Perceivable:

• Text alternatives for images (alt text)
• Color contrast: 4.5:1 for text, 3:1 for large text
• Don’t convey info by color alone

Operable:

• Full keyboard navigation
• Visible focus indicators
• Touch targets ≥44px
• No keyboard traps

Understandable:

• Clear error messages with recovery path
• Labels for all form inputs
• Consistent navigation

Robust:

• Semantic HTML (use right elements)
• ARIA only when HTML isn’t sufficient

For implementation details: See references/accessibility.md For full WCAG 2.2 AA audits: Use the accessibility-auditor skill

Responsive Design

Breakpoint Strategy

• Design mobile-first, enhance upward
• Content determines breakpoints, not devices
• Common: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)

What Changes Per Breakpoint

• Navigation pattern (tabs → sidebar → topnav)
• Grid columns
• Touch vs hover interactions
• Content density

What Stays Consistent

• Core functionality
• Information hierarchy
• Brand identity
• Accessibility

UX Anti-Patterns

Navigation Anti-Patterns

Form Anti-Patterns

Feedback Anti-Patterns

Onboarding Anti-Patterns

Mobile Anti-Patterns

General Anti-Patterns

UX Decision Trees

Modal vs Page vs Drawer

Is the task focused and short?
├── Yes: Does user need to reference background content?
│   ├── Yes → Drawer/Panel (side sheet)
│   └── No → Modal
└── No: Is the task a full workflow?
    ├── Yes → Full page
    └── No: Is it contextual actions?
        ├── Yes → Bottom sheet (mobile) / Dropdown (web)
        └── No → Consider page or panel

Tabs vs Accordion vs Sections

Is content mutually exclusive (only one visible at a time)?
├── Yes: Are items few (≤5) and parallel?
│   ├── Yes → Tabs
│   └── No → Accordion
└── No: Should all content be scannable?
    ├── Yes → Stacked sections (all visible)
    └── No → Progressive disclosure (expand on demand)

Pagination vs Infinite Scroll

Does user need to find specific item or reach specific point?
├── Yes → Pagination (URL stability, can bookmark)
└── No: Is content time-based / feed-like?
    ├── Yes: Is list long and exploratory?
    │   ├── Yes → Infinite scroll + "back to top"
    │   └── No → Load more button
    └── No → Pagination with visible page count

Toast vs Inline vs Modal (for messages)

Is immediate action required?
├── Yes → Modal with action buttons
└── No: Is it an error related to specific field?
    ├── Yes → Inline (near field)
    └── No: Is it a success/info message?
        ├── Yes → Toast (auto-dismiss ok)
        └── No: Is it a system-level warning?
            ├── Yes → Banner (top of page)
            └── No → Toast or inline

UX Checklist

Before finalizing any interface:

Structure

• Clear information hierarchy
• Intuitive navigation
• User always knows their location
• Important actions are prominent

Interaction

• Every action has feedback
• Error states are helpful
• Loading states are present
• Empty states guide users

Accessibility

• Keyboard navigable
• Screen reader compatible
• Sufficient color contrast
• Touch targets adequate

Mobile

• Thumb-zone friendly
• Touch targets ≥44pt
• Works offline or degrades gracefully
• No hover-dependent functionality

References:

• references/design-thinking-process.md — Full process, research methods, ideation, testing
• references/information-architecture.md — Site structure, navigation, content organization
• references/patterns.md — Detailed implementation patterns with decision guidance
• references/modern-patterns.md — AI UX, dark mode, animation, i18n, data visualization
• references/accessibility.md — Accessibility implementation essentials