UX Designer

UX Designer Skill

Apply the following UX/UI principles when designing or reviewing interfaces.

When to Apply This Skill

Use this skill when:

• Designing or reviewing user interfaces, components, and mobile-first layouts
• Implementing accessibility features or auditing against WCAG 2.2 AA
• Creating forms, navigation, search, and other interactive elements
• Writing UI copy and microcopy
• Planning user research, or building and maintaining design systems
• Designing collaborative/multiplayer features (presence, real-time editing, sharing, permissions, version history)
• Building canvas-based or whiteboard applications
• Designing AI-powered interfaces (chat, copilots, agents, generative UI)
• Evaluating designs for dark patterns, ethical compliance, and user trust
• Creating onboarding flows, activation funnels, and first-run experiences
• Designing notification systems and attention management
• Building dashboards and data visualizations
• Internationalizing/localizing UI or adding right-to-left (RTL) language support
• Designing voice, multimodal, or cross-device input experiences

Core Design Philosophy

User-Centered Design

1. Understand users first - Research before designing
2. Reduce cognitive load - Keep interfaces simple and intuitive
3. Provide feedback - Every action should have a visible response
4. Maintain consistency - Follow established patterns users expect
5. Design for accessibility - Include all users from the start

Calm & Clarity Over Complexity

• Cognitive clarity over sensory richness - Calm, legible interfaces beat busy, flashy ones. Motion, color, and density should earn their place by aiding understanding, not by impressing.
• AI as a respectful copilot, not an autopilot - Offer AI assistance optionally (sidebars, overlays, suggestions); keep the user in control and every AI action reversible and transparent. See references/14-ai-ux-patterns.md.
• Responsible adaptation over hyper-personalization - Adapt to genuine user needs and context; avoid manipulative or opaque personalization.
• Depth and judgment over polish - As UI becomes a commodity, the value is in research, correctness, and knowing when not to add something.

The UX Hierarchy of Needs

1. Functional - Does it work?
2. Reliable - Is it dependable?
3. Usable - Is it easy to use?
4. Convenient - Is it frictionless?
5. Pleasurable - Is it delightful?

Core Guidelines

Before Designing

• Understand user goals and pain points
• Review existing patterns in the codebase
• Consider accessibility requirements (WCAG 2.2 AA)
• Define success metrics

Visual Design

• One dominant element per screen — the primary action outranks all others in size and contrast
• Consistent typography (16px+ body, 1.3-1.6x heading scale)
• Sufficient color contrast (4.5:1 for text)
• Spacing drawn from a single scale (4px or 8px base unit)

Interaction Design

• Touch targets minimum 44×44px (iOS) / 48×48dp (Android)
• Important actions in thumb-friendly zones (bottom/center on mobile)
• Every interaction produces a visible response
• Response appears within 100ms of input
• Smooth animations (300-500ms duration)
• Support prefers-reduced-motion

Forms

• Inline validation (on blur, not during typing)
• Clear error messages near the field
• Required fields marked with asterisk (*)
• Logical field order and grouping

Navigation

• Limited top-level items (7±2 rule)
• Current location always visible
• Mobile: bottom navigation preferred
• Consistent navigation across pages

Accessibility

• All interactive elements reachable and operable by keyboard
• Every control has an accessible name and role exposed to screen readers
• Color not sole conveyor of information
• Focus states visible
• Alt text for images

Collaborative Features

• Presence indicators (cursors, avatars, typing)
• Clear conflict prevention/resolution
• Offline state communication
• Client-specific undo/redo
• Permission levels clearly communicated

Canvas/Spatial Apps

• Cursor-centered zoom (not screen center)
• Smart guides and snapping with toggle
• Minimap for large canvases
• Full keyboard navigation support
• Viewport culling for performance

AI Interfaces

• AI-generated content clearly labeled
• Source attribution for AI claims
• User feedback mechanism (thumbs up/down)
• Stop/cancel generation control
• Human override always available

Onboarding

• First-run experience guides users to "aha moment"
• Empty states provide clear next actions
• Onboarding is skippable and won't re-show
• Sign-up collects only essential fields

Notifications

• Notification severity matches visual treatment
• Push permission requested in context (not on first visit)
• Users can control notification preferences per channel
• Toasts auto-dismiss within 4-8s
• Toasts carrying an undoable action expose that action as a button

Ethical Design

• Accept/reject buttons have equal visual prominence
• No pre-checked optional consent boxes
• Cancellation is as easy as subscription
• No confirmshaming in decline copy

Internationalization

• RTL-ready (logical CSS properties, layout verified in dir="rtl")
• Tolerant of ~30-40% text expansion (no fixed-width labels/buttons)
• No text baked into images; all strings externalized
• Locale-aware date/number/currency formatting via Intl
• Pluralization handled with ICU plural rules, not string concatenation
• Language switcher uses endonyms, not flags

Decision Trees

Modal vs. Side Panel vs. Full Page

What is the user doing?
├── Quick confirmation or simple input (1-3 fields)?
│   └── → Modal dialog
├── Viewing/editing details while keeping main context visible?
│   ├── Content is narrow (form, properties, chat)?
│   │   └── → Side panel
│   └── Content needs significant width?
│       └── → Full-page overlay (with back navigation)
├── Multi-step workflow or complex form?
│   ├── Steps are short (2-3 fields each)?
│   │   └── → Modal with stepper
│   └── Steps are long or need reference to other content?
│       └── → Full page with stepper
└── Creating a new complex entity (document, project)?
    └── → Full page (dedicated creation flow)

Notification Type Selection

What needs the user's attention?
├── Immediate action required?
│   ├── Blocking (must resolve before continuing)?
│   │   └── → Modal dialog (confirmation, error recovery)
│   └── Non-blocking but urgent?
│       └── → Banner (top of page, persistent until dismissed)
├── Feedback on a completed action?
│   ├── Success or low-importance info?
│   │   └── → Toast (auto-dismiss 4-8s)
│   └── Warning or error?
│       └── → Toast with action button (manual dismiss)
├── Background event (new message, update from others)?
│   ├── User is in the same context?
│   │   └── → Badge + subtle inline indicator
│   └── User is elsewhere in the app?
│       └── → Badge on nav item + optional push notification
└── System status (maintenance, connectivity)?
    └── → Persistent banner (top or bottom of viewport)

Detailed Documentation

• For core UX principles and heuristics, see references/01-core-principles.md
• For Laws of UX quick reference, see references/02-laws-of-ux.md
• For WCAG 2.2 accessibility compliance, see references/03-accessibility.md
• For visual design patterns, see references/04-visual-design.md
• For information architecture, see references/05-information-architecture.md
• For interaction design patterns, see references/06-interaction-design.md
• For form and input design, see references/07-forms-and-inputs.md