UX/UI design principles for building and critiquing interfaces. Use for accessibility audits (WCAG, EAA), microcopy, forms, navigation, onboarding, internationalization and RTL, voice and AI interfaces, and design systems.

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](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 Notification Type Selection Detailed Documentation For core UX principles and heuristics, see [references/01 core principles.md](references/01 core principles.md) For Laws of UX quick reference, see [references/02 laws of ux.md](references/02 laws of ux.md) For WCAG 2.2 accessibility compliance, see [references/03 accessibility.md](references/03 accessibility.md) For visual design patterns, see [references/04 visual design.md](references/04 visual design.md) For information architecture, see [references/05 information architecture.md](references/05 information architecture.md) For interaction design patterns, see [references/06 interaction design.md](references/06 interaction design.md) For form and input design, see [references/07 forms and inputs.md](references/07 forms and inputs.md) For mobile UX best practices, see [references/08 mobile ux.md](references/08 mobile ux.md) For UX writing and microcopy, see [references/09 ux writing.md](references/09 ux writing.md) For user research methods, see [references/10 user research.md](references/10 user research.md) For design system creation, see [references/11 design systems.md](references/11 design systems.md) For collaborative presence, live cursors, and awareness indicators, see [references/12a presence awareness.md](references/12a presence awareness.md) For conflict resolution, sync, sharing, and offline UX, see [references/12b conflict resolution sync.md](references/12b conflict resolution sync.md) For canvas navigation, zoom, pan, and object manipulation, see [references/13a canvas navigation.md](references/13a canvas navigation.md) For canvas elements, layers, performance, and whiteboard patterns, see [references/13b canvas objects performance.md](references/13b canvas objects performance.md) For AI and LLM interface design (chat, copilots, agents), see [references/14 ai ux patterns.md](references/14 ai ux patterns.md) For ethical design and dark pattern avoidance, see [references/15 ethical design.md](references/15 ethical design.md) For onboarding flows and user activation, see [references/16 onboarding.md](references/16 onboarding.md) For notification systems and attention management, see [references/17 notifications.md](references/17 notifications.md) For data visualization and dashboard design, see [references/18 data visualization.md](references/18 data visualization.md) For search interface design and autocomplete, see [references/19 search ux.md](references/19 search ux.md) For emotional design and trust building patterns, see [references/20 emotional design.md](references/20 emotional design.md) For data tables, sortable lists, pagination, and bulk actions, see [references/21 data tables.md](references/21 data tables.md) For loading states, skeleton screens, optimistic updates, and perceived performance, see [references/22 performance ux.md](references/22 performance ux.md) For internationalization, localization, and RTL design, see [references/23 internationalization.md](references/23 internationalization.md) For voice, multimodal, and cross device input patterns, see [references/24 voice and multimodal.md](references/24 voice and multimodal.md) Reference Values Layout & Typography Metric Value Context Touch target 44 48px Minimum tappable area Body text 16px+ Minimum readable size Line height 1.2 1.45 Optimal readability Line length 50 75 chars Ideal for reading Contrast ratio 4.5:1 WCAG AA for normal text Contrast ratio 3:1 WCAG AA for large text Working memory 7±2 items Miller's Law Text expansion ~30 40% Translation growth (DE/FI/RU) Interaction & Animation Metric Value Context Animation 300 500ms Natural feeling duration Touch feedback < 100ms Perceived instant response Form abandonment 81% Users who start but don't finish Canvas zoom range 10% 4000% Typical design tool range Smart guide snap 2 8px Distance before snapping Canvas render 60fps Target during pan/zoom Collaboration Metric Value Context Cursor update rate 50 100ms Smooth live cursor movement Cursor label max 12 chars Truncate longer usernames Avatar stack 3 5 visible Use "+N" for overflow AI Interfaces Metric Value Context AI first token < 1s Perceived responsiveness AI streaming 30 80 tok/s Natural reading pace Copilot accept rate 25 35% Suggestion usefulness Engagement Metrics Metric Value Context Onboarding completion 65% Checklist finish rate Time to first value < 5 min Sign up to activation Toast duration 4 8s Auto dismiss timing Search success 70% Users finding results NPS 50 User sentiment Anti Patterns to Avoid 1. Dark patterns Deceptive UI that tricks users → see [15 ethical design.md](references/15 ethical design.md) 2. Infinite scroll without context No sense of progress → see [21 data tables.md](references/21 data tables.md) 3. Hidden navigation Hamburger menus on desktop → see [05 information architecture.md](references/05 information architecture.md) 4. Autoplaying media Unexpected sound/video → see [03 accessibility.md](references/03 accessibility.md) 5. Disabled buttons without explanation Confusing blocked states → see [06 interaction design.md](references/06 interaction design.md) 6. Walls of text No visual hierarchy or chunking → see [04 visual design.md](references/04 visual design.md) 7. Color only feedback Excludes colorblind users → see [03 accessibility.md](references/03 accessibility.md) 8. Tiny touch targets Frustrating on mobile → see [08 mobile ux.md](references/08 mobile ux.md) 9. No loading states Users think system is broken → see [22 performance ux.md](references/22 performance ux.md) 10. Popup/modal overuse Interrupts user flow → see [06 interaction design.md](references/06 interaction design.md) 11. No presence indicators Users don't know who else is working → see [12a presence awareness.md](references/12a presence awareness.md) 12. Silent sync failures Data loss without warning → see [12b conflict resolution sync.md](references/12b conflict resolution sync.md) 13. Cursor overload Too many live cursors create visual noise → see [12a presence awareness.

ux-designer