gh-tachyon-beep-skillpacks-plugins-lyra-ux-designer/skills/using-ux-designer/ux-fundamentals.md

# UX Fundamentals

## Overview

This teaching skill explains core UX principles, terminology, and mental models. Use when users ask "What is X?" or need foundational understanding before applying other Lyra skills.

**Core Principle**: Understanding why design principles exist enables better application than memorizing rules.

## When to Use

Load this skill when:
- User asks "What is [UX concept]?"
- User needs explanation of design terminology
- User wants to understand UX thinking approach
- User is new to UX and needs orientation
- You need to explain rationale behind design recommendations

**Don't use for**: Specific design tasks (use specialized skills), detailed implementation guidance


## Core UX Principles

### 1. User-Centered Design

**Definition**: Design decisions driven by user needs, not business/technical constraints

**Key Concepts**:
- **Empathy**: Understand users' context, goals, frustrations
- **Iteration**: Design → Test → Refine → Repeat
- **Evidence-based**: Use research data, not assumptions

**In Practice**:
- Start with user research (interviews, observations)
- Test designs with real users early and often
- Prioritize user goals over feature lists

**Why it matters**: Designs that ignore users fail, regardless of technical excellence


### 2. Progressive Disclosure

**Definition**: Show only what users need now, reveal complexity gradually

**Key Concepts**:
- **Layers**: Basic → Intermediate → Advanced
- **Just-in-time**: Information appears when needed
- **Defaults**: Sensible defaults for common cases

**In Practice**:
- Simple interface by default, "Advanced" button for power features
- Tooltips on hover, not permanent labels everywhere
- Wizards guide through complex multi-step flows

**Why it matters**: Showing everything at once = cognitive overload


### 3. Affordances

**Definition**: Visual/physical properties that suggest how something is used

**Key Concepts**:
- **Perceived affordance**: Looks clickable/tappable (buttons raised, links colored)
- **Real affordance**: Actually is clickable/tappable
- **Signifiers**: Clues about functionality (icons, labels, shadows)

**In Practice**:
- Buttons look different from text (visual weight, borders)
- Links are colored and/or underlined
- Interactive elements change on hover (cursor, highlight)

**Why it matters**: Users shouldn't guess what's interactive


### 4. Feedback

**Definition**: System responds to user actions immediately and clearly

**Key Concepts**:
- **Immediate**: <100ms for most interactions (button press)
- **Appropriate**: Match feedback to action (subtle for minor, prominent for major)
- **Informative**: What happened? Success/failure? Next steps?

**In Practice**:
- Button depresses on click
- Loading spinner for async operations (>1s delay)
- Success messages confirm completion
- Error messages explain what went wrong + how to fix

**Why it matters**: No feedback = user repeats action = bugs/confusion


### 5. Consistency

**Definition**: Similar elements behave similarly throughout interface

**Key Concepts**:
- **Internal consistency**: Within your app (same patterns everywhere)
- **External consistency**: Match platform conventions (iOS vs Android)
- **Functional consistency**: Same action has same result

**In Practice**:
- All primary buttons same color/style
- Navigation pattern consistent across screens
- Keyboard shortcuts work the same everywhere

**Why it matters**: Inconsistency forces users to relearn patterns


### 6. Visibility of System Status

**Definition**: Users always know what's happening

**Key Concepts**:
- **Current state**: Where am I? (active nav item highlighted)
- **Process**: What's happening? (loading spinner, progress bar)
- **Outcome**: What happened? (success/error message)

**In Practice**:
- Active tab/page highlighted
- Progress indicators for multi-step flows (step 2 of 5)
- Breadcrumbs show navigation path
- Form validation shows which fields have errors

**Why it matters**: Users lost in interface = frustration


### 7. Error Prevention & Recovery

**Definition**: Design to prevent errors, make recovery easy when they happen

**Key Concepts**:
- **Prevention**: Constraints, validation, confirmations
- **Clear errors**: What went wrong? How to fix?
- **Undo**: Easy to reverse mistakes

**In Practice**:
- Disable "Submit" until form valid
- Confirm before destructive actions ("Delete all?")
- Undo/redo for content changes
- Auto-save to prevent lost work

**Why it matters**: Errors are frustrating, especially if unrecoverable


### 8. Recognition Over Recall

**Definition**: Minimize memory load by making information visible

**Key Concepts**:
- **Show, don't hide**: Visible options > memorized commands
- **Contextual help**: Information available when needed
- **Autocomplete**: Suggest options rather than require exact input

**In Practice**:
- Menus show available actions (vs. command-line memorization)
- Recently used items listed (vs. remembering file names)
- Autocomplete in search (vs. typing exact query)
- Date pickers (vs. typing date format)

**Why it matters**: Memory is fragile, recognition is easier


### 9. Flexibility & Efficiency

**Definition**: Support both novice and expert users

**Key Concepts**:
- **Novice path**: Simple, guided, obvious
- **Expert path**: Shortcuts, customization, speed
- **Progressive disclosure**: Novices aren't overwhelmed, experts aren't constrained

**In Practice**:
- Keyboard shortcuts for power users (Cmd+S)
- Command palettes (fuzzy search all actions)
- Customizable toolbars/workspaces
- Both clicking and keyboard navigation work

**Why it matters**: Users grow from novice → expert over time


### 10. Aesthetic & Minimalist Design

**Definition**: Remove unnecessary elements, focus on essentials

**Key Concepts**:
- **Signal vs. noise**: Every element competes for attention
- **White space**: Breathing room improves readability
- **Hierarchy**: Guide attention to important elements

**In Practice**:
- Remove decorative elements that don't serve purpose
- Use white space to group related items
- Single clear primary action per screen
- Reduce visual clutter (colors, borders, shadows)

**Why it matters**: Too much information = user misses important parts


## UX Terminology

### Mental Models

**Definition**: User's internal understanding of how system works

**Why it matters**: Design must match user's mental model, not system architecture

**Example**:
- Good: File structure matches user's mental organization (Projects → Project Name → Files)
- Bad: File structure matches database schema (table_id → foreign_key → blob_id)


### Information Architecture (IA)

**Definition**: Organizing and labeling content for findability

**Related skill**: `lyra/ux-designer/information-architecture`

**Key aspects**: Navigation structure, labeling, categorization, search


### Interaction Design

**Definition**: Defining how users interact with system (clicks, gestures, feedback)

**Related skill**: `lyra/ux-designer/interaction-design-patterns`

**Key aspects**: Touch targets, micro-interactions, state changes, animations


### Visual Hierarchy

**Definition**: Arranging elements to guide attention in order of importance

**Related skill**: `lyra/ux-designer/visual-design-foundations`

**Key aspects**: Size, color, contrast, spacing, typography


### Accessibility

**Definition**: Designing for people with disabilities (visual, motor, cognitive)

**Related skill**: `lyra/ux-designer/accessibility-and-inclusive-design`

**Key aspects**: WCAG compliance, screen readers, keyboard navigation, color contrast


### Usability

**Definition**: How easy and efficient it is to use a system

**Measured by**: Task success rate, time on task, error rate, satisfaction

**Related skill**: `lyra/ux-designer/user-research-and-validation` (testing)


### User Journey / User Flow

**Definition**: Path user takes to accomplish a goal

**Includes**: Entry point → Steps → Decision points → Outcome

**Related skill**: `lyra/ux-designer/user-research-and-validation` (journey mapping)


### Personas

**Definition**: Fictional characters representing user segments

**Includes**: Demographics, goals, behaviors, pain points, context

**Related skill**: `lyra/ux-designer/user-research-and-validation` (research methods)


### Wireframe

**Definition**: Low-fidelity layout sketch (structure, not visual design)

**Purpose**: Test IA and layout before investing in visual design

**Related skills**: `information-architecture`, `visual-design-foundations`


### Prototype

**Definition**: Interactive simulation of design (clickable, navigable)

**Purpose**: Test flows and interactions before development

**Types**: Low-fidelity (Balsamiq), high-fidelity (Figma with interactions)


### Heuristic Evaluation

**Definition**: Expert review against usability principles (heuristics)

**Common framework**: Nielsen's 10 Usability Heuristics

**Related skill**: `lyra/ux-designer/user-research-and-validation` (validation methods)


## Design Thinking Process

### 1. Empathize (Understand Users)

**Goal**: Deep understanding of user needs, context, pain points

**Methods**: Interviews, observations, diary studies

**Related skill**: `lyra/ux-designer/user-research-and-validation`

**Output**: User insights, pain points, opportunity areas


### 2. Define (Frame the Problem)

**Goal**: Synthesize research into clear problem statement

**Methods**: Affinity mapping, personas, journey maps

**Output**: Problem statement, design principles, success criteria


### 3. Ideate (Generate Solutions)

**Goal**: Explore many possible solutions without judgment

**Methods**: Brainstorming, sketching, co-design workshops

**Output**: Diverse design concepts


### 4. Prototype (Build to Test)

**Goal**: Make ideas tangible for testing

**Methods**: Wireframes, mockups, clickable prototypes

**Related skills**: All design skills (visual, IA, interaction)

**Output**: Testable prototypes (lo-fi or hi-fi)


### 5. Test (Validate with Users)

**Goal**: Learn what works, what doesn't, iterate

**Methods**: Usability testing, A/B testing, analytics

**Related skill**: `lyra/ux-designer/user-research-and-validation`

**Output**: Insights for iteration, validated design decisions


### 6. Iterate (Refine & Improve)

**Goal**: Continuously improve based on feedback

**Process**: Implement → Measure → Learn → Refine

**Output**: Improved design, new insights


## When to Use Each Lyra Skill

### lyra/ux-designer/using-ux-designer (Meta)

**When**: Starting any UX task, unsure which skill to load

**Purpose**: Routes to appropriate skills based on context


### lyra/ux-designer/ux-fundamentals (This Skill)

**When**: "What is...?", "Explain...", learning UX concepts

**Purpose**: Teaching and foundational knowledge


### lyra/ux-designer/visual-design-foundations

**When**: Color, typography, hierarchy, spacing, contrast issues

**Purpose**: Systematic framework for visual design evaluation

**Framework**: 6-dimension Visual Hierarchy Analysis (Contrast, Scale, Spacing, Color, Typography, Layout Flow)


### lyra/ux-designer/information-architecture

**When**: Navigation confusing, content organization, findability issues

**Purpose**: Structure content for discoverability

**Framework**: 4-layer Navigation & Discoverability Model (Mental Models, Navigation Systems, Information Scent, Discoverability)


### lyra/ux-designer/interaction-design-patterns

**When**: Touch targets, feedback, micro-interactions, button states

**Purpose**: Design clear, responsive interactions

**Framework**: 5-dimension Interaction Clarity Framework (Affordances, Feedback, Micro-interactions, State Changes, Touch Targets)


### lyra/ux-designer/accessibility-and-inclusive-design

**When**: WCAG compliance, colorblind-safe, keyboard nav, screen readers

**Purpose**: Ensure design works for everyone

**Framework**: 6-dimension Universal Access Model (Visual, Motor, Cognitive, Screen Reader, Temporal, Situational)


### lyra/ux-designer/user-research-and-validation

**When**: Need to understand users, test designs, validate decisions

**Purpose**: Research methods and usability testing

**Framework**: 5-phase User Understanding Model (Discovery, Generative, Evaluative, Validation, Post-Launch)


### lyra/ux-designer/mobile-design-patterns

**When**: iOS/Android app design, touch interactions

**Purpose**: Mobile-specific patterns and constraints

**Framework**: Mobile Interaction Evaluation Model (Reachability, Gesture Conventions, Platform Consistency, Performance Perception)


### lyra/ux-designer/web-application-design

**When**: Web app, dashboard, SaaS, data visualization

**Purpose**: Web-specific patterns (responsive, complex data)

**Framework**: Web Application Usability Framework (Data Clarity, Workflow Efficiency, Responsive Adaptation, Progressive Enhancement)


### lyra/ux-designer/desktop-software-design

**When**: Desktop app, Electron, multi-window, keyboard-first

**Purpose**: Desktop-specific patterns (windows, shortcuts)

**Framework**: Desktop Application Workflow Model (Window Organization, Keyboard Efficiency, Workspace Customization, Expert Paths)


### lyra/ux-designer/game-ui-design

**When**: Game, HUD, menu system, in-game interface

**Purpose**: Game-specific patterns (immersion, performance)

**Framework**: Game UI Integration Framework (Visibility vs Immersion, Input Method Optimization, Aesthetic Coherence, Performance Impact)


## Common UX Questions Answered

### "How do I know if my design is good?"

**Answer**: Test with users. Good design = users accomplish goals efficiently and satisfactorily.

**Objective measures**: Task success rate, time on task, error rate
**Subjective measures**: User satisfaction, perceived ease of use

**Related skill**: `user-research-and-validation`


### "Should I follow platform conventions (iOS HIG, Material Design)?"

**Answer**: Yes, with rare exceptions.

**Why follow conventions**:
- Users already know the patterns (less learning curve)
- Accessibility features work as expected
- Platform integration (gestures, navigation)

**When to deviate**:
- Strong brand identity requires custom patterns
- Unique use case not covered by conventions (games, creative tools)
- Cross-platform consistency is more important

**Related skill**: Platform extensions (mobile, web, desktop, game)


### "Design for mobile-first or desktop-first?"

**Answer**: Depends on your users' primary context.

**Mobile-first**: When most users on mobile, forces prioritization
**Desktop-first**: When desktop is primary, mobile is secondary

**Best practice**: Design for primary platform, adapt to others

**Related skills**: `mobile-design-patterns`, `web-application-design`


### "How do I balance aesthetics and usability?"

**Answer**: They're not in conflict. Good aesthetics enhance usability.

**Aesthetic benefits**:
- Visual hierarchy guides attention (usability)
- Consistent visual system reduces cognitive load
- Pleasant aesthetics increase trust and engagement

**Warning signs of conflict**:
- Low contrast text (aesthetic > accessibility = BAD)
- Hiding essential functions for "clean" look = BAD
- Decorative elements obscuring content = BAD

**Related skills**: `visual-design-foundations`, `accessibility-and-inclusive-design`


### "Should I use modals/popups?"

**Answer**: Sparingly. Modals interrupt users.

**When appropriate**:
- Requires user decision before proceeding (confirm destructive action)
- Focus needed (entering password, selecting from list)
- Contextual detail (lightbox for image, detail view)

**Alternatives**:
- Inline expansion (accordion, show/hide)
- Separate page (if lots of content)
- Toast notification (non-blocking feedback)

**Related skills**: `interaction-design-patterns`, platform extensions


### "How many clicks/taps is too many?"

**Answer**: 3-click rule is guideline, not law. Clarity > click count.

**What matters**:
- **Information scent**: Each step has clear clues to next
- **No dead ends**: Users can always proceed or go back
- **Progress visible**: Users know where they are in flow

**10 clear clicks > 2 confusing clicks**

**Related skill**: `information-architecture`


### "Should I use animation?"

**Answer**: Yes, purposefully. Animation guides attention and shows relationships.

**Good uses**:
- State transitions (show what changed)
- Drawing attention (new message, error)
- Showing relationships (element moves from A to B)

**Bad uses**:
- Gratuitous decoration (slows users down)
- Too slow (>500ms feels sluggish)
- Motion sickness triggers (parallax, constant movement)

**Related skill**: `interaction-design-patterns`


### "How do I design for accessibility without compromising design?"

**Answer**: Accessibility constraints make design BETTER, not worse.

**Examples**:
- High contrast = more readable for everyone
- Large touch targets = easier for everyone
- Clear labels = less confusion for everyone
- Keyboard navigation = faster for power users

**Accessibility IS good design.**

**Related skill**: `accessibility-and-inclusive-design`


## Related Skills

**All Lyra UX Designer skills**: This teaching skill references concepts explained in detail by specialized skills

**Cross-faction**:
- `muna/technical-writer/clarity-and-style` - Writing clear UI copy
- `ordis/security-architect/threat-modeling` - Security implications of UX decisions


## Further Learning

**Books**:
- "Don't Make Me Think" (Steve Krug) - Web usability fundamentals
- "The Design of Everyday Things" (Don Norman) - Affordances, mental models
- "About Face" (Alan Cooper) - Interaction design principles

**Frameworks**:
- Nielsen's 10 Usability Heuristics
- WCAG 2.1 Guidelines (accessibility)
- iOS Human Interface Guidelines
- Material Design Guidelines

**Practice**:
- Critique existing interfaces (what works? what doesn't?)
- Apply frameworks from other Lyra skills
- Test designs with real users (even 5 users find major issues)