Ux Designer

UX Designer Skill

You are a UX design expert with comprehensive knowledge of modern user experience best practices (2026). Apply these principles when designing or reviewing interfaces.

When to Apply This Skill

Use this skill when:

• Designing new user interfaces or components
• Reviewing existing UI/UX for improvements
• Implementing accessibility features
• Creating forms, navigation, or interactive elements
• Advising on mobile-first design
• Writing UI copy and microcopy
• Planning user research activities
• Building or maintaining design systems
• Designing collaborative/multiplayer features (real-time editing, presence)
• Building canvas-based or whiteboard applications
• Implementing sharing, permissions, or version control UX
• Designing AI-powered interfaces (chat, copilots, agents, generative UI)
• Evaluating designs for dark patterns and ethical compliance
• Creating onboarding flows, activation funnels, and first-run experiences
• Designing notification systems and attention management
• Building dashboards, data visualizations, and analytics interfaces
• Implementing search interfaces with autocomplete and filtering
• Applying emotional design principles and building user trust
• 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 (2026)

• 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?

Quick Reference Checklist

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

• [ ] Clear visual hierarchy (size, color, spacing)
• [ ] Consistent typography (16px+ body, 1.3-1.6x heading scale)
• [ ] Sufficient color contrast (4.5:1 for text)
• [ ] Adequate whitespace and breathing room

Interaction Design

• [ ] Touch targets minimum 44×44px (iOS) / 48×48dp (Android)
• [ ] Important actions in thumb-friendly zones (bottom/center on mobile)
• [ ] Clear feedback for all interactions (< 100ms response)
• [ ] 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

• [ ] Keyboard navigable
• [ ] Screen reader compatible
• [ ] 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 (4-8s) with action button option

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 (Intl); ICU plurals
• [ ] 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
• For mobile UX best practices, see references/08-mobile-ux.md
• For UX writing and microcopy, see references/09-ux-writing.md
• For user research methods, see references/10-user-research.md
• For design system creation, see references/11-design-systems.md
• For collaborative presence, live cursors, and awareness indicators, see references/12a-presence-awareness.md
• For conflict resolution, sync, sharing, and offline UX, see references/12b-conflict-resolution-sync.md
• For canvas navigation, zoom, pan, and object manipulation, see references/13a-canvas-navigation.md
• For canvas elements, layers, performance, and whiteboard patterns, see references/13b-canvas-objects-performance.md
• For AI and LLM interface design (chat, copilots, agents), see references/14-ai-ux-patterns.md
• For ethical design and dark pattern avoidance, see references/15-ethical-design.md
• For onboarding flows and user activation, see references/16-onboarding.md
• For notification systems and attention management, see references/17-notifications.md
• For data visualization and dashboard design, see references/18-data-visualization.md
• For search interface design and autocomplete, see references/19-search-ux.md
• For emotional design and trust-building patterns, see references/20-emotional-design.md
• For data tables, sortable lists, pagination, and bulk actions, see references/21-data-tables.md
• For loading states, skeleton screens, optimistic updates, and perceived performance, see references/22-performance-ux.md
• For internationalization, localization, and RTL design, see references/23-internationalization.md
• For voice, multimodal, and cross-device input patterns, see references/24-voice-and-multimodal.md

Key Numbers to Remember

Layout & Typography

Interaction & Animation

Collaboration

AI Interfaces

Engagement Metrics

Anti-Patterns to Avoid

1. Dark patterns - Deceptive UI that tricks users → see 15-ethical-design.md 2. Infinite scroll without context - No sense of progress → see 21-data-tables.md 3. Hidden navigation - Hamburger menus on desktop → see 05-information-architecture.md 4. Autoplaying media - Unexpected sound/video → see 03-accessibility.md 5. Disabled buttons without explanation - Confusing blocked states → see 06-interaction-design.md 6. Walls of text - No visual hierarchy or chunking → see 04-visual-design.md 7. Color-only feedback - Excludes colorblind users → see 03-accessibility.md 8. Tiny touch targets - Frustrating on mobile → see 08-mobile-ux.md 9. No loading states - Users think system is broken → see 22-performance-ux.md 10. Popup/modal overuse - Interrupts user flow → see 06-interaction-design.md 11. No presence indicators - Users don't know who else is working → see 12a-presence-awareness.md 12. Silent sync failures - Data loss without warning → see 12b-conflict-resolution-sync.md 13. Cursor overload - Too many live cursors create visual noise → see 12a-presence-awareness.md 14. Screen-center zoom - Disorienting; zoom at cursor instead → see 13a-canvas-navigation.md 15. No offline indication - Users think they're connected when not → see 12b-conflict-resolution-sync.md 16. Hidden AI - Users should always know when interacting with AI → see 14-ai-ux-patterns.md 17. Over-automation - AI changes applied without user awareness or consent → see 14-ai-ux-patterns.md 18. No AI undo - AI-applied changes must be reversible → see 14-ai-ux-patterns.md 19. Confirmshaming - Guilt-laden language on decline buttons → see 15-ethical-design.md 20. Asymmetric consent - Big "Accept" button, tiny "Reject" link → see 15-ethical-design.md 21. Mandatory lengthy tours - Forcing users through 10+ onboarding steps → see 16-onboarding.md 22. Notification carpet bombing - Every event as a push notification → see 17-notifications.md 23. Permission on first visit - Asking for push permission before user sees value → see 17-notifications.md 24. Hardcoded/untranslatable strings - Text baked into code/images, fixed-width containers, LTR-only layout → see 23-internationalization.md 25. Voice-only flows / hidden mic - No fallback modality, no recognition feedback, buried voice entry → see 24-voice-and-multimodal.md

Sources

This skill synthesizes best practices from:

• Laws of UX - Jon Yablonski
• Nielsen Norman Group - Usability research
• WCAG 2.2 - Accessibility guidelines
• Material Design - Google's design system
• Human Interface Guidelines - Apple
• Interaction Design Foundation
• Liveblocks - Real-time collaboration patterns
• Figma Engineering Blog - Multiplayer & canvas
• Ably - Collaborative UX
• Google PAIR Guidebook - AI design patterns
• Microsoft HAX Toolkit - Human-AI interaction
• Deceptive Design - Dark pattern catalog
• EU Digital Services Act - Platform regulation
• EU Accessibility Act - EN 301 549 / WCAG 2.1 AA mandate
• W3C Internationalization (i18n) Activity - i18n/l10n standards
• Baymard Institute - E-commerce UX research
• Edward Tufte - Data visualization
• ColorBrewer - Colorblind-safe palettes
• The A11y Project - Accessibility community resource
• web.dev - Core Web Vitals and performance UX
• Smashing Magazine - Practical UX/UI patterns

UX Designer Skill

A Claude Code skill that provides comprehensive UX/UI design guidance based on modern best practices (2026).

What It Does

Gives Claude deep knowledge of user experience design principles so it can:

• Design new interfaces and components with proper patterns
• Review existing UI/UX and frontend code for issues
• Apply WCAG 2.2 AA accessibility standards
• Guide interaction design, form design, and navigation
• Advise on mobile-first and responsive approaches
• Write effective UI copy and microcopy
• Design collaborative/multiplayer and canvas-based apps
• Build AI-powered interfaces (chat, copilots, agents)
• Evaluate designs for dark patterns and ethical compliance

Installation

Copy or symlink the ux-designer-skill/ directory into your Claude Code skills location:

~/.claude/skills/ux-designer/

The skill is invocable by both user (/ux-designer) and Claude (auto-triggered when UX topics arise).

Structure

ux-designer/
├── SKILL.md                              # Main skill definition (297 lines)
└── references/                           # 24 detailed reference files (~10,700 lines)
    ├── 01-core-principles.md             # Nielsen heuristics, Gestalt, UX hierarchy
    ├── 02-laws-of-ux.md                  # Fitts's, Hick's, Miller's, Jakob's, etc.
    ├── 03-accessibility.md               # WCAG 2.2 AA compliance
    ├── 04-visual-design.md               # Typography, color, spacing, hierarchy
    ├── 05-information-architecture.md    # Navigation, sitemaps, card sorting
    ├── 06-interaction-design.md          # Modals, tooltips, drag-and-drop
    ├── 07-forms-and-inputs.md            # Validation, field types, error handling
    ├── 08-mobile-ux.md                   # Touch targets, gestures, responsive
    ├── 09-ux-writing.md                  # Microcopy, tone, error messages
    ├── 10-user-research.md               # Interviews, usability testing, surveys
    ├── 11-design-systems.md              # Tokens, components, documentation
    ├── 12a-presence-awareness.md         # Live cursors, avatars, typing indicators
    ├── 12b-conflict-resolution-sync.md   # OT/CRDTs, locking, offline sync
    ├── 13a-canvas-navigation.md          # Zoom, pan, selection, manipulation
    ├── 13b-canvas-objects-performance.md  # Layers, snapping, LOD, culling
    ├── 14-ai-ux-patterns.md              # Chat UI, copilots, agents, generative UI
    ├── 15-ethical-design.md              # Dark patterns, consent, GDPR/DSA
    ├── 16-onboarding.md                  # First-run, activation, empty states
    ├── 17-notifications.md               # Toasts, badges, push, attention management
    ├── 18-data-visualization.md          # Charts, dashboards, KPIs
    ├── 19-search-ux.md                   # Autocomplete, filters, results ranking
    ├── 20-emotional-design.md            # Trust, delight, brand personality
    ├── 21-data-tables.md                 # Sorting, pagination, bulk actions, inline edit
    └── 22-performance-ux.md              # Skeletons, optimistic updates, CLS, lazy loading

SKILL.md Highlights

The main file (always loaded into context) includes:

• Quick reference checklists for visual design, interaction, forms, navigation, accessibility, collaboration, canvas, AI, onboarding, notifications, and ethical design
• Decision trees for choosing between modal/side panel/full page and notification types
• Key numbers grouped by category (layout, interaction, collaboration, AI, engagement)
• 23 anti-patterns with links to the reference file that shows the correct approach

Reference files are loaded on demand when the topic is relevant, keeping context usage efficient.

Coverage Areas

Sources

The skill synthesizes guidance from 19 authoritative sources including Nielsen Norman Group, WCAG 2.2, Material Design, Apple HIG, Laws of UX, Google PAIR, Microsoft HAX Toolkit, Baymard Institute, The A11y Project, and web.dev.

Core UX Principles & Usability Heuristics

Nielsen's 10 Usability Heuristics

Jakob Nielsen's heuristics are fundamental principles for interaction design, refined over decades of usability research.

1. Visibility of System Status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Implementation:

• Show loading states and progress indicators
• Confirm successful actions (saves, submissions)
• Display current location in navigation
• Show real-time status of processes

2. Match Between System and the Real World

The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.

Implementation:

• Use plain language, not technical terms
• Follow real-world conventions (calendar layouts, folder metaphors)
• Order information logically (chronological, alphabetical)
• Use familiar icons and symbols

3. User Control and Freedom

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.

Implementation:

• Provide undo/redo functionality
• Include clear cancel buttons
• Allow easy navigation back
• Support exiting flows at any point
• Auto-save work when possible

4. Consistency and Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

Implementation:

• Use consistent terminology throughout
• Maintain uniform visual design (colors, fonts, spacing)
• Follow platform conventions (iOS, Android, Web)
• Reuse the same components for similar functions

5. Error Prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place.

Implementation:

• Use constraints to prevent invalid input
• Provide confirmation dialogs for destructive actions
• Offer suggestions and autocomplete
• Disable unavailable options rather than showing errors after
• Use sensible defaults

6. Recognition Rather Than Recall

Minimize the user's memory load by making elements, actions, and options visible. Users should not have to remember information from one part of the interface to another.

Implementation:

• Show recently used items
• Provide contextual help and hints
• Display options visibly instead of requiring memorization
• Use descriptive labels, not codes
• Maintain visible navigation breadcrumbs

7. Flexibility and Efficiency of Use

Shortcuts—hidden from novice users—can speed up the interaction for expert users. Allow users to tailor frequent actions.

Implementation:

• Provide keyboard shortcuts
• Allow customization of interface
• Support both simple and advanced modes
• Remember user preferences
• Enable batch operations

8. Aesthetic and Minimalist Design

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information competes with relevant information and diminishes visibility.

Implementation:

• Remove unnecessary elements
• Use progressive disclosure
• Prioritize important content
• Use whitespace effectively
• Avoid decorative clutter

9. Help Users Recognize, Diagnose, and Recover from Errors

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

Implementation:

• Write human-readable error messages
• Explain what went wrong specifically
• Suggest how to fix the problem
• Avoid technical jargon and error codes
• Place errors near the relevant field

10. Help and Documentation

It's best if the system doesn't need any additional explanation. However, it may be necessary to provide documentation to help users complete their tasks.

Implementation:

• Provide contextual help (tooltips, inline hints)
• Make help searchable
• Focus documentation on user tasks
• List concrete steps
• Keep help concise and scannable

---

Core Design Principles

Clarity

Users should never have to stop and think about what something means or how to use it.

• Use clear, descriptive labels
• Avoid ambiguous icons without labels
• Make clickable elements look clickable
• Distinguish between primary and secondary actions

Simplicity

Remove everything that isn't essential to the user's goal.

• Start with the minimum viable interface
• Add complexity only when proven necessary
• Hide advanced features behind progressive disclosure
• One primary action per screen

Consistency

Predictability reduces cognitive load and learning time.

• Visual consistency (colors, typography, spacing)
• Functional consistency (same gestures = same results)
• Internal consistency (within your product)
• External consistency (with platform conventions)

Feedback

Every user action should have an immediate, visible response.

• Instant feedback (< 100ms) for direct manipulation
• Progress indicators for operations > 1 second
• Clear success and error states
• Confirmation for important actions

Hierarchy

Guide users' attention to what matters most.

• Visual weight indicates importance
• Size, color, and position create hierarchy
• Group related items together
• Separate distinct sections clearly

---

User-Centered Design Fundamentals

The UX Design Process

1. Research - Understand users, their goals, and context 2. Define - Synthesize findings into problems to solve 3. Ideate - Generate multiple possible solutions 4. Prototype - Create testable representations 5. Test - Validate with real users 6. Implement - Build the solution 7. Iterate - Continuously improve based on feedback

Understanding Users

User Research Methods:

• User interviews
• Contextual inquiry
• Surveys and questionnaires
• Analytics analysis
• Usability testing
• A/B testing

Key Questions:

• Who are the users?
• What are their goals?
• What are their pain points?
• What is their context of use?
• What do they already know?

Mental Models

Users approach your interface with expectations based on prior experience. Design should align with these mental models.

• Research how users think about the domain
• Use familiar patterns and metaphors
• When introducing new concepts, bridge from known ones
• Test assumptions about user understanding

---

Visual Hierarchy Techniques

Size

Larger elements attract more attention. Use size to indicate importance.

Heading 1 (32-48px) - Most important
Heading 2 (24-32px) - Section titles
Heading 3 (18-24px) - Subsections
Body text (16px) - Content
Small text (12-14px) - Metadata, captions

Color

Color draws attention and conveys meaning.

• Use accent colors sparingly for important elements
• Maintain sufficient contrast (4.5:1 minimum)
• Don't rely on color alone to convey information
• Consider cultural color associations

Position

Eye-tracking studies show predictable scanning patterns.

• F-pattern for text-heavy pages
• Z-pattern for minimal content
• Top-left receives most attention (LTR languages)
• Place critical elements in natural focal points

Contrast

Difference creates emphasis.

• High contrast for important elements
• Low contrast for secondary information
• Use contrast in typography (bold, italic, size)
• Combine multiple contrast techniques

Whitespace

Empty space is a design element, not wasted space.

• Creates breathing room
• Groups related elements
• Separates distinct sections
• Improves readability and comprehension

---

Sources

• Nielsen, J. (1994, 2020). "10 Usability Heuristics for User Interface Design"
• Norman, D. (2013). "The Design of Everyday Things"
• Krug, S. (2014). "Don't Make Me Think, Revisited"
• Nielsen Norman Group research articles

Laws of UX

Psychological principles that inform user experience design, collected and popularized by Jon Yablonski.

---

Fitts's Law

The time to acquire a target is a function of the distance to and size of the target.

Formulated by: Paul Fitts (1954)

Key Implications

1. Make important targets large - Buttons, links, and interactive elements should be big enough to click/tap easily 2. Reduce distance to targets - Place frequently used actions near common cursor/finger positions 3. Use screen edges and corners - These are effectively infinite in size (cursor stops at edge)

Application in UX

Good:
- Large, prominent CTAs
- Sticky navigation bars
- Context menus near cursor
- Floating action buttons on mobile

Avoid:
- Tiny click targets
- Important actions far from content
- Small close buttons on modals

Minimum Target Sizes

• Touch (mobile): 44×44px (Apple) / 48×48dp (Material Design)
• Mouse (desktop): 24×24px minimum, 44×44px recommended
• Spacing between targets: 8px minimum

---

Hick's Law (Hick-Hyman Law)

The time it takes to make a decision increases with the number and complexity of choices.

Formulated by: William Edmund Hick & Ray Hyman (1952)

Key Implications

1. Limit choices - Fewer options = faster decisions 2. Group and categorize - Break complex choices into simpler steps 3. Highlight recommendations - Guide users toward optimal choices 4. Progressive disclosure - Show only necessary options initially

Application in UX

Good:
- "Top 10" lists on Netflix
- 3-4 pricing tiers
- Stepped forms/wizards
- Clear default selections

Avoid:
- Overwhelming dropdown menus
- Too many navigation items
- Endless feature lists
- Choice paralysis situations

The Magic Number

Navigation menus should typically have 7±2 items at the top level, though research suggests 4-5 items may be optimal for quick scanning.

---

Miller's Law

The average person can only keep about 7 (±2) items in their working memory.

Formulated by: George A. Miller (1956)

Key Implications

1. Chunk information - Group related items into meaningful units 2. Limit simultaneous elements - Don't overwhelm working memory 3. Use recognizable patterns - Familiar structures reduce memory load 4. Provide external memory aids - Let the interface remember for users

Application in UX

Good:
- Phone numbers: (555) 123-4567
- Credit cards: 1234 5678 9012 3456
- Step indicators: Step 2 of 4
- Breadcrumb navigation

Avoid:
- Long strings of numbers/codes
- Too many form fields visible at once
- Complex multi-step processes without progress indication

---

Jakob's Law

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Named after: Jakob Nielsen

Key Implications

1. Follow conventions - Use established patterns users expect 2. Don't reinvent the wheel - Standard UI patterns exist for good reason 3. Meet expectations - Cart icon, hamburger menu, search bar placement 4. Innovate carefully - Novel interactions require learning investment

Application in UX

Conventional Patterns:
- Logo in top-left links to home
- Shopping cart in top-right
- Search bar in header
- Footer contains legal/contact links
- Underlined text = hyperlink
- Blue links (or clearly styled alternatives)

Risky Innovations:
- Non-standard navigation placement
- Unusual scroll behaviors
- Custom cursor styles
- Non-standard form controls

---

Peak-End Rule

People judge an experience largely based on how they felt at its most intense point (peak) and at its end, rather than based on the sum of every moment.

Formulated by: Daniel Kahneman

Key Implications

1. Design memorable moments - Create positive peaks in the experience 2. End on a high note - Final impressions disproportionately matter 3. Manage low points - Minimize negative peaks in user journeys 4. Focus on key moments - Not every interaction needs equal polish

Application in UX

Positive Peaks:
- Delightful animations on success
- Personalized welcome messages
- Achievement celebrations
- Surprise and delight moments

Strong Endings:
- Clear confirmation of completed tasks
- Helpful "what's next" suggestions
- Thank you messages
- Easy save/export of results

---

Tesler's Law (Law of Conservation of Complexity)

For any system there is a certain amount of complexity which cannot be reduced. The question is: who deals with it—the user or the designer?

Formulated by: Larry Tesler

Key Implications

1. Absorb complexity - Move complexity from users to the system 2. Don't oversimplify - Some complexity is inherent and necessary 3. Smart defaults - Handle common cases automatically 4. Progressive disclosure - Hide complexity until needed

Application in UX

System absorbs complexity:
- Auto-detecting location
- Pre-filling forms with known data
- Smart suggestions and autocomplete
- Automatic formatting (dates, phone numbers)
- Intelligent defaults

Don't remove necessary complexity:
- Tax filing requires certain information
- Medical forms need complete details
- Security requires authentication steps

---

Gestalt Principles

Principles of visual perception that explain how humans group visual elements.

Proximity

Elements close together are perceived as related.

Use for:
- Grouping form fields
- Organizing navigation
- Creating visual sections
- Associating labels with inputs

Similarity

Elements that look similar are perceived as related.

Use for:
- Consistent button styles
- Icon families
- Color coding categories
- Typography indicating function

Continuity

Elements arranged in a line or curve are perceived as related.

Use for:
- Progress indicators
- Timelines
- Navigation flows
- Reading direction

Closure

The mind fills in missing information to complete shapes.

Use for:
- Minimalist icons
- Loading indicators
- Implied boundaries
- Logo design

Common Region

Elements within a boundary are perceived as grouped.

Use for:
- Card designs
- Form sections
- Modal dialogs
- Feature groupings

Figure-Ground

The mind separates foreground from background.

Use for:
- Modal overlays
- Focus states
- Dropdown menus
- Image/text relationships

---

Additional Important Laws

Aesthetic-Usability Effect

Users often perceive aesthetically pleasing designs as more usable, even when they're not.

Doherty Threshold

Productivity increases when computer and user interact at a pace (< 400ms) that ensures neither has to wait on the other.

Law of Common Region

Elements tend to be perceived as groups if they share an enclosed area.

Law of Prägnanz

People interpret ambiguous images as simple and complete.

Mere Exposure Effect

The more exposure people have to something, the more they prefer it.

Occam's Razor

Among competing hypotheses, the one with the fewest assumptions should be selected.

Pareto Principle (80/20 Rule)

Roughly 80% of effects come from 20% of causes. Focus on the vital few features/screens.

Postel's Law

Be liberal in what you accept and conservative in what you send.

Serial Position Effect

Users best remember the first and last items in a series.

Von Restorff Effect (Isolation Effect)

Items that stand out are more likely to be remembered.

Zeigarnik Effect

People remember uncompleted tasks better than completed ones.

---

Sources

• Yablonski, J. (2020). "Laws of UX: Using Psychology to Design Better Products & Services"
• lawsofux.com
• Nielsen Norman Group research
• Kahneman, D. (2011). "Thinking, Fast and Slow"

Accessibility & WCAG 2.2

Accessibility ensures digital products are usable by people with disabilities. Beyond ethics and inclusion, it's increasingly a legal requirement.

---

WCAG 2.2 Overview

Web Content Accessibility Guidelines 2.2 is the latest W3C recommendation (October 2023, updated December 2024), now also an ISO standard (ISO/IEC 40500:2025).

Conformance Levels

Four Principles (POUR)

1. Perceivable - Information must be presentable in ways users can perceive 2. Operable - Interface components must be operable 3. Understandable - Information and operation must be understandable 4. Robust - Content must be robust enough for various assistive technologies

---

New Success Criteria in WCAG 2.2

Focus Not Obscured (Minimum) - 2.4.11 (AA)

When an element receives keyboard focus, it is not entirely hidden by other content.

/* Ensure focused elements aren't covered */
.modal {
  /* Don't cover the element that triggered focus */
}

/* Sticky headers should not cover focused content */
.sticky-header {
  /* Account for header height in scroll calculations */
}

Focus Not Obscured (Enhanced) - 2.4.12 (AAA)

When focused, no part of the element is hidden by author-created content.

Focus Appearance - 2.4.13 (AAA)

Focus indicators must have sufficient size and contrast.

Dragging Movements - 2.5.7 (AA)

Functionality using dragging can be operated with a single pointer without dragging.

<!-- Provide alternative to drag-and-drop -->
<div draggable="true">Item</div>
<button>Move Up</button>
<button>Move Down</button>

Target Size (Minimum) - 2.5.8 (AA)

Touch targets must be at least 24×24 CSS pixels, with exceptions for inline links, user agent controls, and essential presentations.

Accessible Authentication (Minimum) - 3.3.8 (AA)

Authentication processes don't require cognitive function tests (like remembering passwords) unless alternatives are provided.

Compliant methods:
- Password managers (paste allowed)
- Email/SMS verification codes
- Biometric authentication
- OAuth/social login

Accessible Authentication (Enhanced) - 3.3.9 (AAA)

No cognitive test required at all for authentication.

Redundant Entry - 3.3.7 (A)

Don't require users to re-enter information already provided in the same session.

---

Color and Contrast

Contrast Requirements

Testing Contrast

// Calculate contrast ratio
function getContrastRatio(l1, l2) {
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

Tools:

• WebAIM Contrast Checker
• Stark (Figma plugin)
• Chrome DevTools accessibility panel
• axe DevTools

Color Blindness

Approximately 8% of men and 0.5% of women have some form of color vision deficiency.

Never rely on color alone to convey:
- Error states (add icons, text)
- Success/failure (add icons, patterns)
- Required fields (add asterisks)
- Link differentiation (add underline)
- Data visualization (add patterns, labels)

---

Keyboard Navigation

Requirements

All functionality must be accessible via keyboard.

<!-- Ensure logical tab order -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Use tabindex appropriately -->
<div tabindex="0" role="button">Custom Button</div>
<div tabindex="-1">Programmatically focusable only</div>
<!-- Never use tabindex > 0 -->

Focus Management

/* Never hide focus outlines without replacement */
:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* For mouse users who don't need visible focus */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Keyboard Shortcuts

Standard expectations:
- Tab: Move to next focusable element
- Shift+Tab: Move to previous element
- Enter/Space: Activate buttons
- Arrow keys: Navigate within widgets
- Escape: Close modals/popups

---

Screen Reader Compatibility

Semantic HTML

<!-- Use semantic elements -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<article>...</article>
<aside>...</aside>
<footer>...</footer>

<!-- Not divs with roles -->
<div role="navigation">...</div> <!-- Less ideal -->

ARIA (Accessible Rich Internet Applications)

<!-- Labels -->
<button aria-label="Close dialog">×</button>

<!-- Descriptions -->
<input aria-describedby="password-hint" />
<p id="password-hint">Must be at least 8 characters</p>

<!-- States -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" aria-hidden="true">...</ul>

<!-- Live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true">
  <!-- Updates announced to screen readers -->
</div>

Image Accessibility

<!-- Informative images -->
<img src="chart.png" alt="Sales increased 20% in Q4 2024" />

<!-- Decorative images -->
<img src="divider.png" alt="" role="presentation" />

<!-- Complex images -->
<figure>
  <img src="diagram.png" alt="System architecture diagram" />
  <figcaption>
    Full description of the system architecture...
  </figcaption>
</figure>

---

Forms Accessibility

<form>
  <!-- Always associate labels -->
  <label for="email">Email address</label>
  <input type="email" id="email" name="email"
         aria-required="true"
         aria-describedby="email-error" />
  <span id="email-error" role="alert">
    Please enter a valid email address
  </span>

  <!-- Group related fields -->
  <fieldset>
    <legend>Shipping Address</legend>
    <!-- Address fields -->
  </fieldset>

  <!-- Required field indication -->
  <label for="name">
    Name <span aria-hidden="true">*</span>
    <span class="sr-only">(required)</span>
  </label>
</form>

Error Handling

<!-- Announce errors -->
<div role="alert" aria-live="assertive">
  Please correct the following errors:
  <ul>
    <li><a href="#email">Email is required</a></li>
  </ul>
</div>

---

Motion and Animation

Respecting User Preferences

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Or provide opt-out */
.animation {
  animation: slide-in 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

Auto-Playing Content

• Never auto-play video with sound
• Provide pause/stop controls for any auto-playing content
• Avoid flashing content (> 3 flashes per second can trigger seizures)

---

Touch Accessibility

Target Sizes (WCAG 2.2)

/* Minimum 24×24px for WCAG 2.2 AA */
/* Recommended 44×44px for comfortable tapping */
.button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
}

/* Adequate spacing between targets */
.button + .button {
  margin-left: 8px;
}

Touch Alternatives

<!-- Provide alternatives to complex gestures -->
<div class="carousel">
  <button aria-label="Previous slide">←</button>
  <!-- Content (also swipeable) -->
  <button aria-label="Next slide">→</button>
</div>

---

Legal Requirements

Accessibility is now a hard legal obligation in major markets, not just a best practice. The headline change is the European Accessibility Act.

European Accessibility Act (EAA)

• In force since: June 28, 2025 — enforcement is active now
• Applies to: A broad set of digital products and services sold in the EU —

e-commerce, banking, e-books, ticketing, transport, electronic communications, and consumer hardware/OS. Reach is extraterritorial: non-EU businesses (incl. US/UK companies) that sell to EU customers must comply.

• Technical baseline: EN 301 549, the harmonized EU standard, which

references WCAG 2.1 Level AA as its web/app floor (and adds requirements beyond WCAG, e.g. for hardware and documentation).

• Transition end: June 28, 2030 — a limited grace window for certain

pre-existing service contracts and self-service terminals already in use.

• Practical takeaway: Targeting WCAG 2.2 AA (covered above) meets and

exceeds the EAA's WCAG 2.1 AA floor, so a WCAG 2.2 AA product is well-positioned for compliance. Verify the EN 301 549 non-web clauses if you ship hardware, documents, or support channels.

Other Regulations

• US: ADA (case law increasingly treats websites as places of public

accommodation), Section 508 (federal procurement, aligned to WCAG 2.0 AA)

• EU: Web Accessibility Directive (public-sector sites/apps, EN 301 549)
• UK: Equality Act 2010
• Canada: AODA, ACA
• Australia: DDA

---

Testing Checklist

Automated Testing

• [ ] axe DevTools
• [ ] WAVE
• [ ] Lighthouse
• [ ] Pa11y

Manual Testing

• [ ] Keyboard-only navigation
• [ ] Screen reader testing (NVDA, VoiceOver, JAWS)
• [ ] 200% zoom level
• [ ] High contrast mode
• [ ] Reduced motion preference

User Testing

• [ ] Include users with disabilities
• [ ] Test with assistive technologies
• [ ] Gather feedback on pain points

---

Sources

• WCAG 2.2
• WAI-ARIA 1.2
• European Accessibility Act - EU directive 2019/882
• EN 301 549 - Harmonized EU accessibility standard
• WebAIM
• A11y Project
• Deque University

Visual Design

Visual design encompasses color theory, typography, layout, and the principles that make interfaces aesthetically pleasing and functional.

---

Color Theory

Color Psychology

Colors evoke specific emotions and influence user behavior.

The 60-30-10 Rule

A balanced color palette distribution:

60% - Dominant color (backgrounds, large areas)
30% - Secondary color (supporting elements)
10% - Accent color (CTAs, highlights)

Example:

:root {
  --color-dominant: #ffffff;    /* 60% - Background */
  --color-secondary: #f5f5f5;   /* 30% - Cards, sections */
  --color-accent: #0066cc;      /* 10% - Buttons, links */
}

Color Harmonies

Contrast for Accessibility

/* WCAG 2.2 Requirements */

/* Normal text (< 18pt) */
/* Minimum contrast: 4.5:1 (AA), 7:1 (AAA) */

/* Large text (≥ 18pt or 14pt bold) */
/* Minimum contrast: 3:1 (AA), 4.5:1 (AAA) */

/* UI Components */
/* Minimum contrast: 3:1 */

Colorblind-Safe Design

~8% of men and ~0.5% of women have color vision deficiency.

Best Practices:
- Don't use color alone to convey meaning
- Add icons, patterns, or text labels
- Test with colorblind simulation tools
- Use sufficient contrast between colors
- Avoid red/green combinations for critical info

Dark Mode Considerations

/* Use CSS custom properties for theming */
:root {
  --bg-primary: #ffffff;
  --text-primary: #1a1a1a;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --text-primary: #f5f5f5;
    --accent: #66b3ff;
  }
}

/* Reduce contrast slightly in dark mode */
/* Pure white (#fff) on black (#000) can cause eye strain */

---

Typography

Font Selection

Categories:

• Sans-serif: Clean, modern, screen-friendly (Roboto, Inter, SF Pro)
• Serif: Traditional, authoritative, editorial (Georgia, Merriweather)
• Monospace: Technical, code, data (Fira Code, JetBrains Mono)

Guidelines:

• Limit to 2-3 typefaces maximum
• Use web-safe fonts or system fonts for performance
• Consider font loading strategy (FOUT, FOIT)

/* System font stack for performance */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

Size Scale

/* Type scale with 1.25 ratio (Major Third) */
:root {
  --text-xs: 0.75rem;   /* 12px - Captions */
  --text-sm: 0.875rem;  /* 14px - Small text */
  --text-base: 1rem;    /* 16px - Body (minimum) */
  --text-lg: 1.25rem;   /* 20px - Large body */
  --text-xl: 1.5rem;    /* 24px - H3 */
  --text-2xl: 2rem;     /* 32px - H2 */
  --text-3xl: 2.5rem;   /* 40px - H1 */
  --text-4xl: 3rem;     /* 48px - Display */
}

Minimum sizes:

• Body text: 16px
• Mobile body: 16px (prevents zoom on iOS)
• Small text: 12px (use sparingly)

Line Height

/* Optimal line heights */
body {
  line-height: 1.5; /* 1.4-1.6 for body text */
}

h1, h2, h3 {
  line-height: 1.2; /* Tighter for headings */
}

.compact {
  line-height: 1.3; /* UI elements, buttons */
}

Line Length

Optimal reading: 50-75 characters per line

/* Constrain line length */
.prose {
  max-width: 65ch; /* ~65 characters */
}

/* Alternatively */
.content {
  max-width: 700px;
  padding: 0 1rem;
}

Text Alignment

Left-aligned (default):
- Best for readability
- Consistent starting point
- Recommended for body text

Center-aligned:
- Short text only (headlines, CTAs)
- Creates visual anchor

Right-aligned:
- Numbers in tables
- RTL languages
- Avoid for body text

Justified:
- Creates uneven word spacing
- Avoid for web (no hyphenation)
- WCAG discourages for accessibility

Fluid Typography

/* Responsive font sizes with clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

body {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

---

Visual Hierarchy

Establishing Hierarchy

1. Size - Larger = more important 2. Weight - Bolder = more important 3. Color - Contrast draws attention 4. Position - Top/left (LTR) = primary 5. Space - Isolation = emphasis 6. Depth - Shadows, layers

Heading Hierarchy

<!-- Single H1 per page -->
<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
      <h4>Detail</h4>
  <h2>Another Section</h2>

Visual Weight

/* Primary action - highest weight */
.btn-primary {
  background: var(--accent);
  color: white;
  font-weight: 600;
}

/* Secondary action - medium weight */
.btn-secondary {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

/* Tertiary action - lowest weight */
.btn-tertiary {
  background: transparent;
  color: var(--accent);
  text-decoration: underline;
}

---

Whitespace and Spacing

The Role of Whitespace

• Breathing room - Reduces visual clutter
• Grouping - Related items closer together
• Focus - Isolation creates emphasis
• Readability - Improves comprehension

Spacing Scale

/* Consistent spacing scale */
:root {
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
}

Applying Spacing

/* Consistent component spacing */
.card {
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* Related items closer */
.form-field label {
  margin-bottom: var(--space-xs);
}

/* Distinct sections further */
.section + .section {
  margin-top: var(--space-3xl);
}

---

Layout Principles

Grid Systems

/* CSS Grid for page layout */
.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
}

/* Flexbox for component layout */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

Responsive Breakpoints

/* Mobile-first breakpoints */
/* Base: Mobile (< 640px) */

@media (min-width: 640px) {
  /* Tablet portrait */
}

@media (min-width: 768px) {
  /* Tablet landscape */
}

@media (min-width: 1024px) {
  /* Desktop */
}

@media (min-width: 1280px) {
  /* Large desktop */
}

Content Alignment

/* Center content with max-width */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

---

2026 Trends

AI-Adaptive Interfaces

• Colors and layouts that adjust based on user behavior
• Personalized visual preferences
• Context-aware theming

Warm, Soft Colors

• Moving away from stark whites
• Beige, pale pink, peach tones
• Psychologically inviting

Fluid Design

• Dynamic, responsive everything
• Container queries
• Fluid spacing and typography

Glassmorphism (Continued)

• Frosted glass effects
• Subtle transparency
• Depth through blur

---

Tools and Resources

Color

• Coolors - Palette generator
• Adobe Color - Color wheel
• Contrast Checker

Typography

• Type Scale - Visual calculator
• Fontpair - Font combinations
• Google Fonts

Design Systems

• Tailwind UI
• Material Design
• Apple HIG

---

Sources

• Smashing Magazine - Color Psychology
• Interaction Design Foundation - Typography
• Practical Typography
• Refactoring UI

Information Architecture

Information Architecture (IA) is the structural design of shared information environments—how content is organized, labeled, and navigated.

---

IA Fundamentals

What is Information Architecture?

IA is the blueprint of a digital product, defining:

• How content is organized and categorized
• How users navigate between sections
• How information is labeled and described
• How users find what they're looking for

Core Components

1. Organization Systems - How content is grouped 2. Labeling Systems - How content is named 3. Navigation Systems - How users move through content 4. Search Systems - How users find specific content

---

Organization Structures

Hierarchical (Tree)

Most common structure. Content flows from broad to specific.

Home
├── Products
│   ├── Category A
│   │   ├── Product 1
│   │   └── Product 2
│   └── Category B
├── About
└── Contact

Best for: E-commerce, documentation, corporate sites

Sequential (Linear)

Content follows a specific order.

Step 1 → Step 2 → Step 3 → Step 4 → Done

Best for: Onboarding flows, tutorials, checkout processes

Matrix

Multiple navigation paths to the same content.

Products can be accessed by:
- Category
- Brand
- Price range
- New arrivals

Best for: E-commerce, catalogs, databases

Network (Web)

No fixed hierarchy; content interconnects freely.

Page A ←→ Page B
   ↕        ↕
Page C ←→ Page D

Best for: Wikis, knowledge bases, blogs

---

Navigation Patterns

Global Navigation

Consistent navigation across all pages.

Horizontal Navigation Bar:
┌────────────────────────────────────────┐
│ Logo   Home   Products   About   Contact│
└────────────────────────────────────────┘

Best for:
- Sites with 5-7 top-level sections
- Desktop-first designs
- Corporate/marketing sites

Local Navigation

Section-specific navigation.

Sidebar Navigation:
┌──────────┬─────────────────┐
│ Section  │                 │
│ ├─ Page 1│    Content      │
│ ├─ Page 2│                 │
│ └─ Page 3│                 │
└──────────┴─────────────────┘

Best for:
- Documentation sites
- Admin dashboards
- Settings panels

Contextual Navigation

Related content links within the page.

"Related Articles"
"Customers Also Bought"
"See Also"

Utility Navigation

Functional links (login, cart, search, settings).

┌─────────────────────────────────────────┐
│                    Search 🔍  Cart 🛒  👤│
└─────────────────────────────────────────┘

Hamburger Menu

Hidden navigation behind an icon (☰).

Pros:
- Saves space
- Clean interface
- Mobile-friendly

Cons:
- Reduces discoverability
- Adds interaction step
- Less suitable for desktop

Bottom Navigation (Mobile)

Tab bar at bottom of screen.

┌─────────────────────────────────────┐
│                                     │
│              Content                │
│                                     │
├─────────────────────────────────────┤
│  🏠    🔍    ➕    ❤️    👤        │
│ Home  Search Add  Saved  Profile   │
└─────────────────────────────────────┘

Best for:
- Mobile apps
- 3-5 primary destinations
- Frequent navigation actions

Breadcrumbs

Show the user's location in the hierarchy.

Home > Products > Electronics > Phones > iPhone

Best for:
- Deep hierarchies
- E-commerce
- When users may enter via search

---

Labeling Best Practices

Clarity Over Cleverness

Good: "Pricing"
Bad: "Investment Levels"

Good: "Contact Us"
Bad: "Let's Chat"

Good: "Settings"
Bad: "Command Center"

Consistency

Consistent verb forms:
- Create Project
- Edit Project
- Delete Project

Not:
- New Project
- Edit Project
- Remove

User Language

• Use terms users understand
• Test labels with real users
• Avoid internal jargon
• Research common search terms

Scannability

• Front-load important words
• Keep labels short (1-3 words)
• Use parallel structure
• Differentiate clearly

---

Search Design

Search Box Best Practices

<!-- Prominent, always visible -->
<form role="search">
  <label for="search" class="sr-only">Search</label>
  <input
    type="search"
    id="search"
    placeholder="Search products..."
    aria-label="Search products"
  />
  <button type="submit">
    <span class="sr-only">Search</span>
    🔍
  </button>
</form>

Guidelines:

• Place in expected location (header, top-right)
• Make it large enough to see query
• Use placeholder text to indicate scope
• Support autocomplete/suggestions
• Show recent searches

Search Results

Essential elements:
- Number of results
- Sorting options
- Filters/facets
- Clear result snippets
- Query highlighting
- Pagination or infinite scroll
- "No results" helpful message

Zero Results Page

"No results for 'xyz'"
- Check spelling
- Try different keywords
- Browse categories
- Contact support

---

IA Research Methods

Card Sorting

Users organize content into groups that make sense to them.

Open Card Sort:

• Users create their own category names
• Reveals mental models
• Good for new products

Closed Card Sort:

• Users sort into predefined categories
• Tests existing structure
• Good for validation

Tools: OptimalSort, Maze, physical cards

Tree Testing

Test if users can find items in your proposed structure.

Task: "Find the return policy"

Structure:
- Home
  - Shop
  - Account
  - Help Center ← Target
    - Shipping
    - Returns ← Success
    - Contact

Metrics:

• Success rate
• Directness (first click correct)
• Time to complete

Tools: Treejack, UserZoom

First-Click Testing

Measure where users first click to complete a task.

Insight: If the first click is wrong, only 46% eventually succeed.

---

2026 Trends

AI-Powered IA

• Dynamic categorization based on user behavior
• Personalized navigation paths
• Predictive search and recommendations
• Auto-tagging and organization

Voice and Conversational IA

• Structure content for voice interfaces
• Natural language navigation
• Question-based organization
• Conversational menus

Zero UI

• Interfaces that anticipate needs
• Reduce navigation through prediction
• Ambient computing integration
• Context-aware content delivery

---

IA Documentation

Sitemap

Visual representation of page hierarchy.

Homepage
├── Products
│   ├── Category A
│   ├── Category B
│   └── All Products
├── About
│   ├── Our Story
│   ├── Team
│   └── Careers
├── Blog
│   ├── Article List
│   └── Single Article
└── Contact

Tools: Figma, XMind, Lucidchart, Slickplan

Content Inventory

Spreadsheet of all existing content.

User Flow Diagrams

Map the paths users take through your product.

Entry → Landing Page → Product List → Product Detail
                ↓                         ↓
            Search          →      Add to Cart → Checkout → Success
                                       ↓
                                   Continue Shopping

---

Common IA Mistakes

1. Organizing by org structure - Users don't know your departments 2. Too deep - More than 3-4 levels becomes unwieldy 3. Too wide - Too many top-level options overwhelms 4. Duplicate content - Same info in multiple places 5. Vague labels - "Resources," "Solutions," "Services" 6. No search - Users often prefer search 7. Breaking conventions - Cart not in top-right 8. Mobile afterthought - IA must work for all devices

---

Sources

• Rosenfeld, L., Morville, P., & Arango, J. (2015). "Information Architecture: For the Web and Beyond"
• Nielsen Norman Group - IA
• Interaction Design Foundation - IA
• A List Apart - IA

Interaction Design

Interaction design (IxD) focuses on creating engaging interfaces with well-thought-out behaviors—how the system responds to user actions.

---

Micro-interactions

Small, contained moments that accomplish a single task while enhancing the user experience.

Dan Saffer's Four Components

1. Trigger

What initiates the micro-interaction.

User Triggers:

• Click/tap
• Swipe
• Hover
• Scroll
• Voice command
• Keyboard input

System Triggers:

• Time-based (notification)
• Location-based
• Data changes
• Error conditions

2. Rules

What happens once triggered.

Example: Like button
1. User taps heart icon
2. Icon changes to filled state
3. Color changes to red
4. Counter increments
5. Animation plays
6. Haptic feedback (mobile)
7. Data sent to server

3. Feedback

How the system communicates what's happening.

Visual: Color, shape, position changes Auditory: Sounds, voice Haptic: Vibration, force feedback Motion: Animation

4. Loops and Modes

How the interaction changes over time or in different states.

Loops:
- First use vs. repeated use
- Decay over time
- Escalation

Modes:
- Light/dark mode
- Editing mode
- Offline mode

---

Feedback States

Button States

/* Default state */
.button {
  background: #0066cc;
  color: white;
}

/* Hover state (desktop) */
.button:hover {
  background: #0052a3;
}

/* Focus state (keyboard navigation) */
.button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Active/pressed state */
.button:active {
  background: #004080;
  transform: scale(0.98);
}

/* Disabled state */
.button:disabled {
  background: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Loading state */
.button.loading {
  pointer-events: none;
  /* Show spinner */
}

Form Field States

/* Default */
.input { border: 1px solid #ccc; }

/* Focus */
.input:focus { border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0,102,204,0.2); }

/* Valid */
.input:valid { border-color: #28a745; }

/* Invalid */
.input:invalid { border-color: #dc3545; }

/* Disabled */
.input:disabled { background: #f5f5f5; cursor: not-allowed; }

System States

---

Animation Principles

Timing

/* Natural feeling durations */
.quick { transition-duration: 100ms; }   /* Hovers, immediate feedback */
.normal { transition-duration: 200ms; }  /* Standard transitions */
.smooth { transition-duration: 300ms; }  /* Panel transitions */
.slow { transition-duration: 500ms; }    /* Large/complex animations */

/* Maximum for focused attention */
.complex { animation-duration: 500ms; }  /* Don't exceed 500ms typically */

Easing Functions

/* Standard easing curves */
.ease-out { transition-timing-function: ease-out; }
/* Fast start, slow end - entering elements */

.ease-in { transition-timing-function: ease-in; }
/* Slow start, fast end - exiting elements */

.ease-in-out { transition-timing-function: ease-in-out; }
/* Smooth start and end - moving elements */

/* Custom bezier curves */
.bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

The 12 Principles of Animation (Disney)

Applied to UI:

1. Squash and Stretch - Subtle scaling on press 2. Anticipation - Brief pause before action 3. Staging - Direct attention to important elements 4. Straight Ahead/Pose to Pose - Keyframe animations 5. Follow Through/Overlapping - Elements don't stop all at once 6. Slow In/Slow Out - Easing functions 7. Arc - Natural curved motion paths 8. Secondary Action - Supporting animations 9. Timing - Speed conveys weight and emotion 10. Exaggeration - Subtle emphasis (don't overdo) 11. Solid Drawing - 3D consistency 12. Appeal - Pleasing, polished animations

---

Loading States

Skeleton Screens

<div class="card skeleton">
  <div class="skeleton-image"></div>
  <div class="skeleton-title"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text short"></div>
</div>

<style>
.skeleton * {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>

Progress Indicators

Determinate (known duration):
┌──────────────────────────────────────┐
│████████████░░░░░░░░░░░░░░░  45%      │
└──────────────────────────────────────┘

Indeterminate (unknown duration):
┌──────────────────────────────────────┐
│    ████████░░░░░░                    │ (moving)
└──────────────────────────────────────┘

Spinner Guidelines

• Show after 300ms delay (avoid flash for fast operations)
• Use on buttons during submission
• Disable interaction during loading
• Provide cancel option for long operations

---

Gesture Design

Standard Touch Gestures

Gesture Best Practices

1. Provide visual affordances
   - Swipe indicators
   - Drag handles
   - Touch hints

2. Offer alternatives (WCAG 2.5.7)
   - Buttons for swipe actions
   - Menus for gestures
   - Keyboard equivalents

3. Give feedback
   - Haptic response
   - Visual confirmation
   - Sound (optional)

4. Allow undo
   - Swipe to delete → Undo button
   - Accidental gestures happen

---

Transitions

Page Transitions

/* Fade transition */
.page-enter {
  opacity: 0;
}
.page-enter-active {
  opacity: 1;
  transition: opacity 200ms ease-out;
}
.page-exit {
  opacity: 1;
}
.page-exit-active {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

/* Slide transition */
.page-enter {
  transform: translateX(100%);
}
.page-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-out;
}

Modal Transitions

/* Backdrop */
.backdrop {
  opacity: 0;
  transition: opacity 200ms ease;
}
.backdrop.open {
  opacity: 1;
}

/* Modal */
.modal {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.modal.open {
  transform: scale(1);
  opacity: 1;
}

Accordion/Collapse

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out;
}
.accordion-content.open {
  max-height: 500px; /* Use calculated height for best results */
}

---

Reduced Motion

Respecting User Preferences

/* Check user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Alternative: provide reduced but not eliminated motion */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
    transition: opacity 0.01ms;
  }
}

When to Reduce Motion

• Vestibular disorders
• Motion sickness
• Cognitive load reduction
• Battery/performance concerns

---

Haptic Feedback

Mobile Haptics

// Web Vibration API
if ('vibrate' in navigator) {
  // Single vibration (ms)
  navigator.vibrate(50);

  // Pattern: vibrate, pause, vibrate
  navigator.vibrate([50, 100, 50]);
}

Haptic Patterns

---

2026 Trends

Functional Motion (motion earns its keep)

The dominant 2026 framing: motion should guide, not flash. Every animation must do a job—orient the user, show cause and effect, or maintain spatial continuity— otherwise it's decoration that adds cognitive load. Reserve flourish for moments that matter (success, first-run delight); keep everyday transitions calm and quick.

• Use motion to explain state change (where did this come from / go to?)
• Use motion to direct attention to what just changed
• Use motion to preserve context across views (shared-element transitions)
• Cut motion that exists only to look impressive—calm interfaces win in 2026

Giving Users Control Over Motion

prefers-reduced-motion (see Reduced Motion above) is the baseline, but it's an OS-level all-or-nothing switch many users never set. Mature products add an explicit in-product "Reduce motion" toggle in settings so users can dial motion down without touching system preferences.

Settings → Accessibility → Motion
  ○ Full motion (default)
  ● Reduced motion   ← respects this even if OS pref is unset
  ○ Off

• Default to the OS preference, then let the in-app setting override it
• Persist the choice per user/device; apply it everywhere, not just key screens
• Treat "reduced" as reduced (instant fades) not broken (no feedback at all)

AI-Driven Interactions

• Predictive UI that anticipates needs (offered, never forced)
• Personalized micro-interactions
• Adaptive animation complexity tuned to device performance

Voice + Multimodal

• Multimodal feedback (voice confirms visual action)
• Combining voice, touch, pointer, and keyboard input
• See 24-voice-and-multimodal.md for depth

---

Common Mistakes

1. Too much animation - Distracting, performance issues 2. Too fast/slow - Feels broken or sluggish 3. No feedback - Users unsure if action worked 4. Inconsistent timing - Jarring experience 5. Ignoring reduced motion - Accessibility failure 6. Blocking content - Loading spinners over everything 7. No cancel option - Trapped in loading state 8. Overusing haptics - Annoying, drains battery

---

Sources

• Saffer, D. (2013). "Microinteractions: Designing with Details"
• Material Design Motion Guidelines
• Apple Human Interface Guidelines - Motion
• UXDesign.cc - Motion Design
• CSS Tricks - Animation

Forms & Input Design

Forms are often where users complete their goals—signing up, checking out, submitting data. Good form design directly impacts conversion rates and user satisfaction.

---

Form Design Principles

Key Statistics

• 81% of users abandon forms after starting
• Reducing form fields by 20-60% often loses no necessary data
• Multi-step forms can increase completion by 86%

Fundamental Principles

1. Ask only what you need - Every field is friction 2. Group related fields - Logical chunking 3. One column is usually best - Easier scanning 4. Clear labels - No placeholder-only labels 5. Smart defaults - Pre-fill when possible 6. Progressive disclosure - Show fields when relevant

---

Labels and Placeholders

Labels

<!-- Always use labels (not just placeholders) -->
<div class="form-field">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" />
</div>

<!-- Label placement -->
<!-- Top-aligned: Best for long forms, mobile -->
<!-- Left-aligned: Good for short forms, scanning -->
<!-- Right-aligned: Avoid (harder to scan) -->

Best Practices:

• Position labels above inputs (top-aligned)
• Keep labels short and clear
• Don't end with colons (modern convention)
• Associate with for attribute

Placeholders

<!-- Use for hints, not labels -->
<input
  type="email"
  placeholder="you@example.com"
  aria-label="Email address"
/>

<!-- Never use as the only label -->
<!-- Disappears on focus, causing confusion -->

Placeholder Guidelines:

• Show example format, not label
• Use gray text (but not too light)
• Don't rely on it for critical info
• Disappears—users may forget what field is

---

Input Types

HTML5 Input Types

<!-- Use appropriate types for mobile keyboards and validation -->
<input type="text" />       <!-- Default -->
<input type="email" />      <!-- Email keyboard -->
<input type="tel" />        <!-- Phone keyboard -->
<input type="number" />     <!-- Numeric keyboard -->
<input type="url" />        <!-- URL keyboard -->
<input type="password" />   <!-- Hidden characters -->
<input type="search" />     <!-- Search field -->
<input type="date" />       <!-- Date picker -->
<input type="time" />       <!-- Time picker -->
<input type="datetime-local" /> <!-- DateTime picker -->

Input Attributes

<input
  type="email"
  name="email"
  id="email"
  required                    <!-- Validation -->
  aria-required="true"        <!-- Accessibility -->
  autocomplete="email"        <!-- Autofill hint -->
  inputmode="email"          <!-- Keyboard hint -->
  pattern="[^@]+@[^@]+\.[^@]+" <!-- Custom validation -->
  placeholder="you@example.com"
/>

Autocomplete Values

<!-- Enable browser autofill -->
<input autocomplete="given-name" />    <!-- First name -->
<input autocomplete="family-name" />   <!-- Last name -->
<input autocomplete="email" />
<input autocomplete="tel" />
<input autocomplete="street-address" />
<input autocomplete="postal-code" />
<input autocomplete="cc-number" />     <!-- Credit card -->
<input autocomplete="new-password" />  <!-- For password creation -->
<input autocomplete="current-password" /> <!-- For login -->

---

Validation

Validation Timing

Recommended Approach

// Validate on blur (when user leaves field)
// Don't validate while typing
// Re-validate on correction

input.addEventListener('blur', validate);
input.addEventListener('input', () => {
  // Only clear errors while typing if previously invalid
  if (hasError) validate();
});

Error Messages

<!-- Good: Specific, actionable -->
<span class="error">
  Please enter a valid email address (e.g., name@example.com)
</span>

<!-- Bad: Vague, unhelpful -->
<span class="error">Invalid input</span>

Error Message Guidelines:

• Place near the field (below or inline)
• Use red color + icon (not color alone)
• Be specific about what's wrong
• Suggest how to fix
• Use human-friendly language
• Don't blame the user

Visual Error Indicators

.input-error {
  border-color: #dc3545;
  background-color: #fff8f8;
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.error-message::before {
  content: "⚠️";
}

Accessibility for Errors

<div class="form-field">
  <label for="email">Email</label>
  <input
    type="email"
    id="email"
    aria-describedby="email-error"
    aria-invalid="true"
  />
  <span id="email-error" role="alert">
    Please enter a valid email address
  </span>
</div>

---

Required Fields

Marking Required Fields

<!-- Visual indicator -->
<label for="name">
  Name <span class="required" aria-hidden="true">*</span>
  <span class="sr-only">(required)</span>
</label>

<!-- Alternative: Mark optional fields -->
<label for="phone">
  Phone <span class="optional">(optional)</span>
</label>

Convention:

• If most fields required: mark optional
• If most fields optional: mark required
• Use asterisk (*) for required
• Explain asterisk at form start

---

Multi-Step Forms

When to Use

• Long forms (7+ fields)
• Complex processes (checkout, applications)
• Collecting different types of info
• Reducing cognitive load

Progress Indicator

<nav aria-label="Form progress">
  <ol class="steps">
    <li class="completed" aria-current="false">
      <span class="step-number">1</span>
      <span class="step-label">Personal Info</span>
    </li>
    <li class="current" aria-current="step">
      <span class="step-number">2</span>
      <span class="step-label">Shipping</span>
    </li>
    <li class="upcoming" aria-current="false">
      <span class="step-number">3</span>
      <span class="step-label">Payment</span>
    </li>
  </ol>
</nav>

Best Practices

• Show step count (Step 2 of 4)
• Allow going back to previous steps
• Save progress automatically
• Validate each step before proceeding
• Keep navigation visible
• Allow skipping optional sections

---

Specific Field Patterns

Password Fields

<div class="password-field">
  <label for="password">Password</label>
  <div class="input-wrapper">
    <input
      type="password"
      id="password"
      autocomplete="new-password"
      minlength="8"
    />
    <button type="button" class="toggle-visibility">
      Show
    </button>
  </div>
  <div class="password-strength" aria-live="polite">
    <!-- Strength indicator -->
  </div>
  <ul class="password-requirements">
    <li>At least 8 characters</li>
    <li>One uppercase letter</li>
    <li>One number</li>
  </ul>
</div>

Phone Numbers

<input
  type="tel"
  inputmode="numeric"
  autocomplete="tel"
  placeholder="(555) 123-4567"
/>

<!-- Consider: -->
<!-- - Auto-format as user types -->
<!-- - Accept various formats -->
<!-- - Show expected format -->

Credit Cards

<input
  type="text"
  inputmode="numeric"
  autocomplete="cc-number"
  pattern="[\d ]{13,19}"
  placeholder="1234 5678 9012 3456"
  maxlength="19"
/>

<!-- Auto-format with spaces -->
<!-- Detect card type from number -->
<!-- Show card icon -->

Addresses

<input
  type="text"
  autocomplete="address-line1"
  placeholder="Street address"
/>

<!-- Consider: -->
<!-- - Address autocomplete (Google Places) -->
<!-- - Country-specific formats -->
<!-- - Postal code lookup -->

Date Selection

<!-- Native date picker -->
<input type="date" />

<!-- Or custom for better UX -->
<input
  type="text"
  placeholder="MM/DD/YYYY"
  inputmode="numeric"
/>

<!-- Consider: -->
<!-- - Relative dates ("Today", "Tomorrow") -->
<!-- - Date range pickers -->
<!-- - Mobile-friendly selectors -->

---

Form Layout

Single Column

┌─────────────────────────────┐
│ First Name                  │
├─────────────────────────────┤
│ Last Name                   │
├─────────────────────────────┤
│ Email                       │
├─────────────────────────────┤
│ [Submit]                    │
└─────────────────────────────┘

Best for: Mobile, most web forms

Multi-Column (Use Sparingly)

┌──────────────┬──────────────┐
│ First Name   │ Last Name    │
├──────────────┴──────────────┤
│ Email                       │
├──────────────┬──────────────┤
│ City         │ State │ Zip  │
└──────────────┴──────────────┘

Use for: Related short fields
Avoid: Different topics side by side

Grouping

<fieldset>
  <legend>Shipping Address</legend>
  <!-- Address fields -->
</fieldset>

<fieldset>
  <legend>Billing Address</legend>
  <!-- Address fields -->
</fieldset>

---

Submit Buttons

Button Labels

<!-- Specific, action-oriented -->
<button type="submit">Create Account</button>
<button type="submit">Place Order</button>
<button type="submit">Send Message</button>

<!-- Avoid generic -->
<button type="submit">Submit</button>

Button States

<button type="submit" disabled>
  <!-- Before form is valid -->
  Create Account
</button>

<button type="submit" class="loading">
  <span class="spinner" aria-hidden="true"></span>
  <span>Creating Account...</span>
</button>

Button Placement

• Primary action on the right (or full-width on mobile)
• Cancel/back on the left
• Don't hide the submit button
• Ensure visible without scrolling

---

Accessibility Checklist

• [ ] Labels properly associated with inputs
• [ ] Error messages linked with aria-describedby
• [ ] Required fields marked with aria-required
• [ ] Invalid fields marked with aria-invalid
• [ ] Errors announced with role="alert"
• [ ] Keyboard navigation works correctly
• [ ] Focus management on errors
• [ ] Sufficient color contrast
• [ ] Touch targets at least 44×44px

---

Sources

• Nielsen Norman Group - Form Design
• Baymard Institute - Form Usability
• Luke Wroblewski - Web Form Design
• GOV.UK Design System - Forms

Mobile UX Design

Mobile-first design is essential in 2026, with over 60% of web traffic coming from mobile devices.

---

The Thumb Zone

Understanding Thumb Reach

Coined by mobile UX expert Steven Hoober, the Thumb Zone defines how users interact with phones using one hand.

┌─────────────────────────────┐
│  HARD      │      HARD     │  ← Top corners: Avoid CTAs
│            │               │
├────────────┼───────────────┤
│            │               │
│  STRETCH   │   STRETCH     │  ← Middle: Secondary actions
│            │               │
├────────────┼───────────────┤
│            │               │
│    EASY    │     EASY      │  ← Bottom: Primary actions
│            │               │
└─────────────────────────────┘

Zone Definitions

Modern Device Considerations

• Screen sizes exceed 6.5 inches
• One-handed use dominates
• Bottom navigation 20-30% faster than top
• Foldable devices require flexible layouts

---

Touch Target Sizes

Platform Guidelines

Implementation

/* Touch-friendly buttons */
.button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
}

/* Tap target expansion for small visual elements */
.small-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.small-icon::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  /* Invisible but tappable */
}

/* Adequate spacing between targets */
.button-group .button + .button {
  margin-left: 8px; /* Minimum 8px */
}

Touch vs. Click Considerations

/* Remove touch delay on mobile */
touch-action: manipulation;

/* Prevent accidental double-tap zoom */
html {
  touch-action: manipulation;
}

---

Mobile Navigation Patterns

Bottom Navigation Bar

<nav class="bottom-nav" role="navigation">
  <a href="/" class="nav-item active">
    <span class="icon">🏠</span>
    <span class="label">Home</span>
  </a>
  <a href="/search" class="nav-item">
    <span class="icon">🔍</span>
    <span class="label">Search</span>
  </a>
  <a href="/add" class="nav-item">
    <span class="icon">➕</span>
    <span class="label">Add</span>
  </a>
  <a href="/saved" class="nav-item">
    <span class="icon">❤️</span>
    <span class="label">Saved</span>
  </a>
  <a href="/profile" class="nav-item">
    <span class="icon">👤</span>
    <span class="label">Profile</span>
  </a>
</nav>

<style>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 8px 0;
  padding-bottom: env(safe-area-inset-bottom); /* iPhone notch */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 8px;
}
</style>

Best Practices:

• 3-5 items maximum
• Icons with labels (not icons alone)
• Clear active state
• Thumb-reachable position
• Consider safe areas for notched devices

Hamburger Menu

<button class="menu-toggle" aria-expanded="false" aria-controls="menu">
  <span class="sr-only">Menu</span>
  <span class="hamburger-icon"></span>
</button>

<nav id="menu" class="slide-menu" aria-hidden="true">
  <!-- Menu content -->
</nav>

When to Use:

• Many navigation items (6+)
• Secondary/utility navigation
• Space-constrained headers

When to Avoid:

• Primary navigation (use bottom bar)
• When discoverability is crucial
• E-commerce main categories

Floating Action Button (FAB)

.fab {
  position: fixed;
  bottom: 80px; /* Above bottom nav */
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

Use For:

• Single primary action (create, compose, add)
• Actions available on every screen
• Thumb-friendly access

---

Responsive Gestures

Standard Mobile Gestures

Tap         → Select, activate
Double tap  → Zoom, like
Long press  → Context menu, drag start
Swipe       → Navigate, dismiss, reveal actions
Pinch       → Zoom in/out
Pull down   → Refresh
Edge swipe  → Back navigation

Swipe Actions

<!-- Swipe-to-reveal actions -->
<div class="list-item swipeable">
  <div class="content">Item content</div>
  <div class="actions hidden">
    <button class="action-edit">Edit</button>
    <button class="action-delete">Delete</button>
  </div>
</div>

<!-- Always provide alternatives (WCAG 2.5.7) -->
<button class="action-menu">•••</button>

Pull-to-Refresh

.pull-indicator {
  height: 0;
  transition: height 200ms;
  overflow: hidden;
}

.pulling .pull-indicator {
  height: 60px;
}

.refreshing .pull-indicator .spinner {
  animation: spin 1s linear infinite;
}

---

Mobile Forms

Keyboard Optimization

<!-- Appropriate keyboard types -->
<input type="email" inputmode="email" />
<input type="tel" inputmode="tel" />
<input type="number" inputmode="decimal" />
<input type="text" inputmode="numeric" pattern="[0-9]*" />

<!-- Prevent zoom on focus (iOS) -->
<input type="text" style="font-size: 16px;" />

Form Layout

/* Stack labels above inputs */
.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

/* Full-width inputs */
.form-field input {
  width: 100%;
  padding: 12px;
  font-size: 16px; /* Prevent zoom */
}

/* Sticky submit button */
.submit-area {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

Mobile-Specific Patterns

<!-- Date picker alternatives -->
<select name="month">
  <option>January</option>
  <!-- ... -->
</select>

<!-- Stepper for quantities -->
<div class="stepper">
  <button>−</button>
  <input type="number" value="1" />
  <button>+</button>
</div>

<!-- Toggle instead of checkbox -->
<label class="toggle">
  <input type="checkbox" />
  <span class="toggle-slider"></span>
  Enable notifications
</label>

---

Performance on Mobile

Key Metrics

Mobile Performance Tips

<!-- Lazy load images -->
<img loading="lazy" src="image.jpg" alt="" />

<!-- Preload critical resources -->
<link rel="preload" href="font.woff2" as="font" crossorigin />

<!-- Reduce JavaScript -->
<script defer src="app.js"></script>

/* Optimize animations */
.animated {
  transform: translateZ(0);
  will-change: transform;
}

/* Reduce motion for performance/preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

---

Touch Feedback

Response Time

• < 100ms - Perceived as instant
• 100-300ms - Noticeable but acceptable
• > 300ms - Feels sluggish

Visual Feedback

/* Touch feedback */
.button:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* Ripple effect (Material) */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
}

Haptic Feedback

// Simple vibration
if ('vibrate' in navigator) {
  navigator.vibrate(10); // Light tap
}

// Success pattern
navigator.vibrate([10, 50, 10]);

// Error pattern
navigator.vibrate([50, 50, 50]);

---

Safe Areas

Handling Device Notches

/* iPhone notch and home indicator */
.container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Fixed bottom elements */
.bottom-bar {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Enable safe area support */
<meta name="viewport" content="viewport-fit=cover" />

---

Orientation and Adaptation

Responsive Layouts

/* Portrait (default) */
.container {
  flex-direction: column;
}

/* Landscape */
@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }

  /* Hide bottom nav, show sidebar */
  .bottom-nav {
    display: none;
  }

  .sidebar-nav {
    display: block;
  }
}

Foldable Devices

/* Detect foldable screen */
@media (horizontal-viewport-segments: 2) {
  /* Dual-screen layout */
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: env(viewport-segment-width 0 0);
  }
}

---

Common Mobile Mistakes

1. Touch targets too small - Use 44px minimum 2. Important actions at top - Place in thumb zone 3. Too much content - Prioritize ruthlessly 4. Desktop forms on mobile - Optimize for touch 5. Ignoring safe areas - Content hidden by notches 6. No offline support - Users lose connectivity 7. Heavy animations - Drains battery, causes jank 8. Zoom disabled - Accessibility violation 9. Horizontal scrolling - Confusing navigation 10. Pop-ups covering content - Interstitials annoy users

---

Testing Checklist

• [ ] Test on real devices (not just simulators)
• [ ] Check various screen sizes
• [ ] Test in portrait and landscape
• [ ] Verify touch targets are large enough
• [ ] Test with slow network (3G)
• [ ] Check offline behavior
• [ ] Verify safe area handling
• [ ] Test form keyboard interaction
• [ ] Check gesture conflicts
• [ ] Verify haptic feedback works

---

Sources

• Material Design - Mobile Guidelines
• Apple HIG - iOS
• Nielsen Norman - Mobile UX
• Hoober, S. (2017). "Touch Bigger"
• Google Web Fundamentals - Mobile

UX Writing & Microcopy

UX writing is the practice of crafting user-facing text that helps people use digital products. Every word in an interface is designed to enhance the user experience.

---

What is Microcopy?

Microcopy refers to the small bits of text throughout an interface:

• Button labels
• Error messages
• Form labels and hints
• Tooltips
• Empty states
• Confirmation messages
• Loading text
• Navigation labels
• Onboarding text

The Impact of Microcopy

Good microcopy:

• Reduces user errors
• Increases conversion rates
• Builds trust and brand personality
• Decreases support requests
• Guides users through complex tasks

---

Core Principles

Clarity

Users should instantly understand what they're reading.

Good: "Delete this file?"
Bad: "Are you sure you wish to proceed with the deletion of the selected item?"

Good: "Sign up"
Bad: "Get started on your journey"

Good: "Saved"
Bad: "Your changes have been successfully persisted to the database"

Conciseness

Use the fewest words needed to communicate clearly.

Good: "Password must be 8+ characters"
Bad: "Please ensure that your password contains a minimum of eight characters"

Good: "Email sent"
Bad: "Your email has been sent successfully"

Usefulness

Every word should help the user accomplish their goal.

Good: "Enter the 6-digit code from your authenticator app"
Bad: "Enter code"

Good: "We'll email you a receipt"
Bad: "Transaction complete"

Conversational (But Professional)

Write like you speak, while maintaining appropriateness.

Good: "Looks like that email doesn't exist. Want to create an account?"
Bad: "Error 404: User not found in database"

Good: "We couldn't find any results for 'xyz'"
Bad: "Your search query returned zero results"

---

Voice and Tone

Voice vs. Tone

Voice = Your brand's personality (consistent) Tone = How you adapt to context (varies)

Voice: Friendly, helpful, professional
Tone varies:
- Onboarding: Welcoming, encouraging
- Errors: Empathetic, solution-focused
- Success: Celebratory (subtly)
- Security: Serious, trustworthy

Developing Brand Voice

Document your voice characteristics:

Adapting Tone

Context: Error Message
Voice: Helpful
Tone: Empathetic + Solution-focused

"Something went wrong on our end. We're looking into it.
Your work has been saved—you won't lose anything."

---

Writing for Common UI Elements

Buttons

Good Button Labels:
- "Sign up" / "Log in" (standard actions)
- "Add to cart" / "Buy now" (specific actions)
- "Save changes" / "Save" (what happens)
- "Send message" (what it does)
- "Try free for 14 days" (value proposition)

Avoid:
- "Submit" (too generic)
- "Click here" (not descriptive, accessibility issue)
- "Yes" / "No" (require context)
- "OK" (too generic for important actions)

Error Messages

Structure: What happened + How to fix it

Good:
"We couldn't log you in. Check your email and password and try again."

"That email is already registered. Log in or reset your password."

"Your card was declined. Try a different payment method."

Avoid:
"Error"
"Invalid credentials"
"Error 422: Unprocessable entity"

Empty States

Components:
1. What this area is for
2. Why it's empty
3. How to fill it

Example:
"No projects yet

Projects help you organize your work. Create your first project
to get started.

[Create project]"

Success Messages

Good:
"Password updated" ✓
"Order placed! We'll email you when it ships."
"Welcome aboard! Let's set up your workspace."

Keep it brief—user wants to move on.
Provide next steps when helpful.

Loading States

Generic:
"Loading..."

Contextual (better):
"Finding nearby restaurants..."
"Saving your changes..."
"Connecting to server..."

Humorous (use carefully):
"Reticulating splines..."
"Convincing pixels to behave..."

Confirmation Dialogs

Structure:
- Clear headline stating action
- Brief explanation of consequences
- Actionable button labels

Example:
"Delete this project?

This will permanently delete 'Marketing Q4' and all its files.
This can't be undone.

[Cancel] [Delete project]"

Not:
"Are you sure?"
[Yes] [No]

---

Form Copy

Labels

Good:
"Email address"
"Password"
"First name"

Avoid:
"Your email address"
"Enter your password"
"Please provide first name"

Placeholder Text

Use for examples, not labels:
"you@example.com"
"555-123-4567"
"Search products..."

Don't use as the only label (disappears on focus)

Help Text

Place below input or as tooltip:
"Password must be at least 8 characters"
"We'll only contact you about your order"
"Optional—for faster shipping estimates"

Validation Messages

Specific and helpful:
"Enter a valid email (e.g., name@company.com)"
"Phone number must be 10 digits"
"Passwords don't match"

Not:
"Invalid input"
"Please check this field"
"Error in form"

---

Accessibility in Writing

Link Text

Good:
"Read our privacy policy"
"Download the report (PDF, 2.3 MB)"
"Learn more about pricing"

Avoid:
"Click here"
"Read more"
"Here" (as standalone link)

Alt Text

Informative images:
"Bar chart showing 40% increase in sales from Q3 to Q4 2024"

Decorative images:
alt="" (empty)

Functional images (buttons/links):
"Search" (not "magnifying glass icon")

Headings

Use logical hierarchy for screen readers:
<h1>Account Settings</h1>
  <h2>Profile</h2>
  <h2>Security</h2>
    <h3>Password</h3>
    <h3>Two-factor authentication</h3>

---

Localization Considerations

Writing for Translation

Avoid idioms:
"Piece of cake" → "Easy"
"Kill two birds" → "Accomplish both"
"Ball is in your court" → "Your turn to decide"

Keep text expandable (30-40% expansion typical):
English: "Settings"
German: "Einstellungen"

Avoid text in images (can't be translated)

Don't embed variables mid-sentence:
"You have 5 messages" (number placement varies by language)
→ "Messages: 5"

Cultural Sensitivity

• Date formats vary (MM/DD/YYYY vs. DD/MM/YYYY)
• Color meanings differ across cultures
• Gestures and icons may have different connotations
• Humor often doesn't translate

---

AI Tools for UX Writing

Content Generation

ChatGPT / Claude:

• Brainstorm alternative phrasings
• Generate variation options
• Check tone consistency

Writer / Jasper:

• Brand voice enforcement
• Style guide compliance
• Terminology consistency

Quality Checking

Grammarly:

• Grammar and spelling
• Clarity suggestions
• Tone detection

Hemingway Editor:

• Readability score
• Sentence complexity
• Passive voice detection

Important Note

AI is a co-pilot, not a replacement. Always:

• Review and edit AI suggestions
• Ensure brand voice consistency
• Test with real users
• Consider context AI might miss

---

Testing Microcopy

A/B Testing

Test button text:

A: "Sign up free"
B: "Get started"
C: "Create account"

Measure: Click-through rate, completion rate

Usability Testing

• Can users complete the task?
• Do they understand what's happening?
• Any confusion or hesitation?
• What do they expect to happen next?

Preference Testing

"Which of these messages is clearer?" "Which feels more appropriate for this situation?"

---

Content Design Process

1. Research

• Understand user needs and language
• Analyze existing content
• Review support tickets and FAQs
• Conduct user interviews

2. Strategy

• Define voice and tone
• Create content guidelines
• Map user journeys
• Identify content touchpoints

3. Write

• Draft multiple options
• Collaborate with design
• Iterate with feedback
• Consider edge cases

4. Validate

• Usability testing
• A/B testing
• Accessibility review
• Stakeholder review

5. Maintain

• Update as product evolves
• Track metrics
• Gather ongoing feedback
• Keep guidelines current

---

Resources

Books

• "Microcopy: The Complete Guide" - Kinneret Yifrah
• "Strategic Writing for UX" - Torrey Podmajersky
• "Conversational Design" - Erika Hall

Courses

• UX Content Collective - UX Writing Fundamentals
• UX Writing Hub - UX Writing Academy
• Coursera - Microcopy & UX Writing

Communities

• UX Writing Hub (Slack)
• Content Design (Slack)
• r/UXWriting (Reddit)

---

Sources

• UX Writing Hub
• Nielsen Norman Group - Writing for the Web
• Google Design - Writing
• Shopify Polaris - Voice and Tone

User Research Methods

User research is the systematic study of target users to understand their behaviors, needs, and motivations. It informs design decisions with evidence rather than assumptions.

---

Why User Research?

Benefits

• Reduce risk - Validate ideas before building
• Save resources - Avoid building unwanted features
• Improve usability - Design for real user needs
• Increase satisfaction - Create products people love
• Drive conversion - Remove friction in user journeys

Key Statistics (2025)

---

Research Categories

Qualitative vs. Quantitative

Generative vs. Evaluative

---

Core Research Methods

1. User Interviews

One-on-one conversations to understand user experiences, needs, and pain points.

When to use:

• Early discovery phase
• Understanding context of use
• Exploring new problem spaces
• Deep-diving into specific topics

Best Practices:

Preparation:
- Define clear research questions
- Write a discussion guide
- Recruit representative participants (5-8)
- Plan for 45-60 minute sessions

During:
- Ask open-ended questions
- Follow up with "why" and "how"
- Avoid leading questions
- Listen more than you talk
- Take notes or record (with permission)

Question Examples:
✓ "Tell me about the last time you..."
✓ "Walk me through how you..."
✓ "What was the hardest part about..."
✓ "Why did you choose that approach?"

✗ "Do you like feature X?" (leading)
✗ "Would you use this?" (hypothetical)
✗ "Isn't this confusing?" (leading)

2. Usability Testing

Observing users as they attempt to complete tasks with your product.

When to use:

• Validating design decisions
• Identifying usability issues
• Comparing design alternatives
• Before and after redesigns

Types:

Best Practices:

Task Design:
- Realistic scenarios
- Specific, measurable goals
- Avoid hints in wording
- Test critical paths

Metrics:
- Task success rate
- Time on task
- Error rate
- Satisfaction rating (SUS, NPS)
- Qualitative observations

Running the Test:
- "Think aloud" protocol
- Don't help unless stuck
- Note where users struggle
- Ask follow-up questions after tasks

3. Surveys

Collecting structured data from many users.

When to use:

• Measuring satisfaction (NPS, CSAT)
• Validating findings at scale
• Prioritizing features
• Segmenting users
• Benchmarking over time

Best Practices:

Question Design:
- One concept per question
- Avoid leading language
- Include "I don't know" option
- Mix question types

Question Types:
- Multiple choice (easy to analyze)
- Rating scales (1-5 or 1-7)
- Open-ended (qualitative insights)
- Matrix questions (use sparingly)

Keep It Short:
- 5-10 minutes maximum
- Front-load important questions
- Make it mobile-friendly
- Show progress indicator

Tools: Typeform, Google Forms, SurveyMonkey, Qualtrics

4. Card Sorting

Understanding how users categorize and label information.

When to use:

• Designing navigation
• Organizing content
• Creating taxonomies
• Validating IA decisions

Types:

Tools: OptimalSort, Maze, Miro

5. Tree Testing

Validating whether users can find items in your information architecture.

When to use:

• Testing navigation structure
• Validating IA changes
• Before/after IA redesigns

Process:

1. Create text-only sitemap (tree)
2. Write tasks: "Find where to return an item"
3. Users navigate the tree to find the target
4. Measure:
   - Success rate
   - Directness (first click correct)
   - Time to complete

Tools: Treejack, UXtweak

6. Analytics Review

Analyzing behavioral data to understand what users do.

When to use:

• Always (continuous)
• Identifying problem areas
• Measuring feature adoption
• Understanding user flows

Key Metrics:

Engagement:
- Page views, sessions
- Time on page
- Bounce rate
- Feature usage

Conversion:
- Conversion rate
- Drop-off points
- Funnel completion

User Behavior:
- Click patterns (heatmaps)
- Scroll depth
- Search queries
- Error rates

Tools: Google Analytics, Mixpanel, Amplitude, Hotjar, FullStory

7. A/B Testing

Comparing two or more versions to see which performs better.

When to use:

• Optimizing specific metrics
• Validating design changes
• Testing copy variations
• Resolving design debates

Requirements:

- Sufficient traffic/users
- Clear hypothesis
- Single variable testing (ideally)
- Statistical significance threshold
- Adequate test duration

Tools: Optimizely, VWO, Google Optimize (deprecated), LaunchDarkly

---

Research Planning

Research Questions

Good research questions:
- Specific and focused
- Answerable through research
- Actionable outcomes

Examples:
✓ "What prevents users from completing checkout?"
✓ "How do users currently track their expenses?"
✓ "Which onboarding flow leads to higher activation?"

Not:
✗ "Is our product good?"
✗ "What do users want?"
✗ "Should we build feature X?"

Participant Recruitment

Sample Sizes:

Recruitment Sources:

• Existing user base
• Recruitment platforms (UserTesting, Respondent.io)
• Social media
• Intercept surveys
• Panel providers

Screening:

• Demographics
• Relevant experience
• Product usage
• Technical requirements

---

Remote vs. In-Person Research

Remote Research

Advantages:

• Global reach
• Lower cost
• More convenient
• Larger sample sizes
• Natural environment

Challenges:

• Technical issues
• Harder to build rapport
• Less contextual observation
• Distractions

Tools: Zoom, UserTesting, Lookback, Maze

In-Person Research

Advantages:

• Deeper rapport
• Full context observation
• Non-verbal cues visible
• Better for complex tasks
• Prototype testing

Challenges:

• Geographic limitations
• Higher cost
• Scheduling difficulties
• Lab environment effect

---

Research Analysis

Affinity Mapping

Grouping observations to find patterns.

1. Write each observation on a sticky note
2. Group similar observations
3. Name the groups
4. Identify themes and patterns
5. Prioritize findings

Tools: Miro, FigJam, physical sticky notes

Thematic Analysis

1. Familiarize with data
2. Generate initial codes
3. Search for themes
4. Review themes
5. Define and name themes
6. Report findings

Quantitative Analysis

Basic:
- Descriptive statistics
- Task success rates
- Comparison of means

Advanced:
- Statistical significance testing
- Regression analysis
- Cohort analysis

---

Presenting Research Findings

Research Report Structure

1. Executive Summary
   - Key findings
   - Recommendations

2. Research Overview
   - Goals
   - Methods
   - Participants

3. Detailed Findings
   - Organized by theme
   - Evidence and quotes
   - Severity ratings

4. Recommendations
   - Prioritized actions
   - Design implications
   - Next steps

Making Findings Actionable

Instead of:
"Users were confused by the checkout flow"

Say:
"5 of 8 users couldn't find the promo code field.
Recommendation: Move promo code input above the order summary.
Impact: Could recover ~15% of abandoned carts."

---

2026 Trends

AI in Research

• Transcription: Otter.ai, Dovetail
• Analysis: Pattern recognition in qualitative data
• Synthesis: Summarizing findings across studies
• Moderation: AI-assisted interview guides

54% of researchers are experimenting with AI tools (2025 State of User Research)

Continuous Research

Moving from project-based to always-on research:

• Regular user touchpoints
• Embedded research in product teams
• Research repositories (Dovetail, Notion)
• Democratized research

Research Operations (ResOps)

• Standardized processes
• Participant panels
• Tool management
• Knowledge management
• Research training

---

Ethical Considerations

Informed Consent

Participants must know:
- Purpose of research
- How data will be used
- Their right to withdraw
- Recording/privacy details
- Compensation details

Privacy

- Anonymize data when possible
- Secure data storage
- Clear data retention policies
- GDPR/CCPA compliance
- Limit data access

Inclusive Research

- Recruit diverse participants
- Accommodate disabilities
- Consider cultural contexts
- Avoid biased questions
- Provide fair compensation

---

Tools Overview

---

Sources

• User Interviews - State of User Research 2025
• Nielsen Norman Group - Research Methods
• Portigal, S. (2013). "Interviewing Users"
• Kuniavsky, M. (2012). "Observing the User Experience"
• Maze - UX Research Methods

Canvas Apps: Navigation & Interaction

Canvas-based interfaces provide an infinite 2D workspace where users can freely place, move, and manipulate objects. Found in design tools (Figma, Sketch), whiteboards (Miro, FigJam), maps, and diagramming apps.

---

Canvas Navigation

Coordinate Systems

A canvas app has two coordinate systems:

// Screen coordinates: pixel position on display
const screenPoint = { x: 500, y: 300 };

// Canvas coordinates: position in the infinite canvas space
const canvasPoint = {
  x: (screenPoint.x - camera.x) / camera.zoom,
  y: (screenPoint.y - camera.y) / camera.zoom
};

// Camera state
const camera = {
  x: 0,      // Horizontal offset
  y: 0,      // Vertical offset
  zoom: 1    // Scale factor (1 = 100%)
};

Zoom UI

Zoom should feel natural, focusing on the cursor position.

function handleZoom(event) {
  event.preventDefault();

  const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1;
  const newZoom = clamp(camera.zoom * zoomFactor, MIN_ZOOM, MAX_ZOOM);

  // Zoom toward cursor position
  const cursorX = event.clientX;
  const cursorY = event.clientY;

  // Calculate new camera position to keep cursor point fixed
  camera.x = cursorX - (cursorX - camera.x) * (newZoom / camera.zoom);
  camera.y = cursorY - (cursorY - camera.y) * (newZoom / camera.zoom);
  camera.zoom = newZoom;

  render();
}

Zoom Controls

┌──────────────────────────────┐
│  [−]  ━━━●━━━━━━━━━  [+]     │  Slider
│           100%               │  Current level
│  [Fit] [50%] [100%] [200%]   │  Presets
└──────────────────────────────┘

Zoom Levels

Typical range: 10% to 4000%+
Common presets: 25%, 50%, 75%, 100%, 150%, 200%, 400%

Semantic zooming (content changes at different levels):
- 10-25%   → Show only shapes/outlines
- 25-50%   → Show basic content, hide details
- 50-100%  → Full content visible
- 100-200% → Pixel-perfect editing
- 200%+    → Sub-pixel precision work

Pan/Scroll

// Space + drag to pan
let isPanning = false;
let lastPanPoint = { x: 0, y: 0 };

function handleKeyDown(event) {
  if (event.code === 'Space' && !isPanning) {
    isPanning = true;
    document.body.style.cursor = 'grab';
  }
}

function handleMouseMove(event) {
  if (isPanning && event.buttons === 1) {
    camera.x += event.clientX - lastPanPoint.x;
    camera.y += event.clientY - lastPanPoint.y;
    document.body.style.cursor = 'grabbing';
    render();
  }
  lastPanPoint = { x: event.clientX, y: event.clientY };
}

Pan Methods

Minimap / Overview

Bird's-eye navigation for large canvases.

<div class="minimap">
  <canvas id="minimap-canvas"></canvas>
  <div class="minimap__viewport"></div>
</div>

.minimap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 200px;
  height: 150px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
}

.minimap__viewport {
  position: absolute;
  border: 2px solid #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  cursor: move;
}

Minimap Guidelines:

• Show at 5-10% of actual canvas scale
• Highlight current viewport area
• Allow click-to-navigate
• Allow drag viewport rectangle
• Consider hiding when zoomed to fit all

---

Object Selection

Selection Modes

// Click selection
function handleClick(event) {
  const hitObject = hitTest(event.x, event.y);

  if (event.shiftKey) {
    // Add to / remove from selection
    toggleSelection(hitObject);
  } else {
    // Replace selection
    clearSelection();
    if (hitObject) select(hitObject);
  }
}

// Marquee selection
function handleMarquee(startPoint, endPoint) {
  const rect = {
    x: Math.min(startPoint.x, endPoint.x),
    y: Math.min(startPoint.y, endPoint.y),
    width: Math.abs(endPoint.x - startPoint.x),
    height: Math.abs(endPoint.y - startPoint.y)
  };

  const contained = objects.filter(obj =>
    isContainedIn(obj.bounds, rect)
  );

  if (event.shiftKey) {
    addToSelection(contained);
  } else {
    setSelection(contained);
  }
}

Selection Visuals

/* Selected object */
.object--selected {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Selection marquee */
.selection-marquee {
  position: absolute;
  border: 1px solid #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  pointer-events: none;
}

/* Multi-selection bounding box */
.selection-bounds {
  position: absolute;
  border: 1px dashed #3b82f6;
}

Selection Keyboard Shortcuts

---

Object Manipulation

Transform Controls

        ┌─────────────────────────────────┐
    ◯───┤                                 ├───◯  ← Rotation handle
        │                                 │
    ◻───┤         Selected Object         ├───◻  ← Resize handles
        │                                 │
    ◯───┤                                 ├───◯
        └─────────────────────────────────┘
              ◻                     ◻

/* Resize handles */
.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border: 1px solid #3b82f6;
  border-radius: 2px;
}

/* Corner handles - resize */
.resize-handle--nw { cursor: nwse-resize; top: -4px; left: -4px; }
.resize-handle--ne { cursor: nesw-resize; top: -4px; right: -4px; }
.resize-handle--sw { cursor: nesw-resize; bottom: -4px; left: -4px; }
.resize-handle--se { cursor: nwse-resize; bottom: -4px; right: -4px; }

/* Edge handles */
.resize-handle--n { cursor: ns-resize; top: -4px; left: 50%; }
.resize-handle--s { cursor: ns-resize; bottom: -4px; left: 50%; }
.resize-handle--e { cursor: ew-resize; right: -4px; top: 50%; }
.resize-handle--w { cursor: ew-resize; left: -4px; top: 50%; }

/* Rotation handle */
.rotate-handle {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: white;
  border: 1px solid #3b82f6;
  border-radius: 50%;
  cursor: grab;
}

Drag and Drop

function handleDrag(object, event) {
  // Show ghost/preview at cursor
  showDragPreview(object, event.x, event.y);

  // Check drop targets
  const dropTarget = findDropTarget(event.x, event.y);
  if (dropTarget) {
    highlightDropTarget(dropTarget);
  }
}

function handleDrop(object, event) {
  const dropTarget = findDropTarget(event.x, event.y);

  // Animate to final position
  animateTo(object, {
    x: snapToGrid(event.x),
    y: snapToGrid(event.y)
  }, { duration: 100 });

  hideDragPreview();
}

Drag and Drop Guidelines:

• Show visual feedback during drag (elevation, shadow)
• Animate other elements moving out of the way
• Use 100ms animation for drop
• Provide clear drop zone indicators
• Support keyboard alternatives (WCAG 2.5.7)

Keyboard Movement

const MOVE_STEP = 1;       // Arrow key
const MOVE_STEP_LARGE = 10; // Shift + Arrow

function handleArrowKey(key, shiftKey) {
  const step = shiftKey ? MOVE_STEP_LARGE : MOVE_STEP;

  selectedObjects.forEach(obj => {
    switch(key) {
      case 'ArrowUp':    obj.y -= step; break;
      case 'ArrowDown':  obj.y += step; break;
      case 'ArrowLeft':  obj.x -= step; break;
      case 'ArrowRight': obj.x += step; break;
    }
  });
}

---

Key Metrics

---

Anti-Patterns

1. Fixed canvas size - Limiting creativity with artificial boundaries 2. Zoom at screen center - Disorienting; zoom at cursor instead 3. Sluggish pan/zoom - Must feel instant and smooth 4. Inconsistent shortcuts - Differs from industry standard 5. Poor touch support - Gestures should match platform conventions

---

Sources

• Steve Ruiz - Creating a Zoom UI
• NN/g - Drag and Drop
• Pencil & Paper - Drag & Drop UX Patterns
• Salesforce - 4 Patterns for Accessible Drag and Drop