Design User-Centered Interfaces: Create products that prioritize user needs and behaviors
Conduct User Research: Plan and execute qualitative and quantitative research studies
Evaluate Usability: Assess interfaces using established heuristics and testing methods
Ensure Accessibility: Design inclusive experiences that work for users with diverse abilities
Optimize User Flows: Improve task completion rates and reduce friction in user journeys
Measure UX Performance: Define and track meaningful metrics for user experience quality
Apply Design Thinking: Solve complex problems through human-centered design processes
Create Information Architecture: Organize content in ways that match user mental models
Run Usability Testing: Plan, conduct, and analyze user testing sessions
Build Personas and Journey Maps: Document user behaviors, needs, and pain points
Core Concepts
User-Centered Design (UCD)
User-centered design is a framework that places users at the center of the design process through iterative cycles of research, design, testing, and refinement.
Four Fundamental Principles:
Early Focus on Users and Tasks
Understand user characteristics, needs, and goals before designing
Observe users in their natural environment
Identify tasks users need to accomplish
Map current workflows and pain points
Empirical Measurement
Test designs with real users performing real tasks
Collect quantitative and qualitative data
Use objective metrics (task completion, time, errors)
Gather subjective feedback (satisfaction, preferences)
Iterative Design
Design, test, measure, and redesign in cycles
Start with low-fidelity prototypes
Refine based on user feedback
Continuously improve until goals are met
Integrated Design
Consider the entire user experience holistically
Balance user needs, business goals, and technical constraints
Involve multidisciplinary teams
Design for consistency across touchpoints
Design Thinking
Design thinking is a human-centered approach to innovation that integrates user needs, technological possibilities, and business viability.
Five-Stage Process:
Empathize: Understand users through research and observation
Define: Synthesize findings into clear problem statements
Ideate: Generate diverse solutions through brainstorming
Prototype: Build tangible representations of ideas
Test: Gather feedback and refine solutions
Key Principles:
Focus on human values and needs
Show don't tell (use prototypes)
Create clarity from complexity
Get experimental and take risks
Be mindful of process and bias toward action
Radical collaboration across disciplines
Usability Heuristics
Nielsen's 10 Usability Heuristics
Jakob Nielsen's heuristics are foundational principles for evaluating interface usability.
Visibility of System Status
Principle: The system should always keep users informed about what is going on through appropriate feedback within reasonable time.
Guidelines:
Provide immediate feedback for user actions
Use progress indicators for operations taking >1 second
Show system state clearly (loading, processing, saved)
Display current location in navigation
Indicate selected items, active states, and modes
Examples:
Loading spinners during data fetches
"Saving..." then "Saved" confirmations
Progress bars for uploads/downloads
Breadcrumb navigation showing current page
Highlighted active tab or menu item
2. Match Between System and Real World
Principle: The system should speak the users' language, using words, phrases, and concepts familiar to them rather than system-oriented terms.
Guidelines:
Use terminology from the user's domain
Follow real-world conventions
Present information in natural, logical order
Use metaphors that match user mental models
Avoid jargon, acronyms, and technical language
Examples:
Shopping cart icon for e-commerce
Trash/recycle bin for deleted items
Folders for file organization
"Inbox" instead of "Message Queue"
Date formats matching user's locale
3. User Control and Freedom
Principle: Users often choose system functions by mistake and need a clearly marked "emergency exit" to leave unwanted states without going through an extended dialogue.
Guidelines:
Provide undo and redo functionality
Allow users to cancel operations
Enable easy navigation backward and forward
Support escape from modal states
Make exit options obvious
Examples:
Undo/redo buttons in editors
Cancel button on forms
Back button in navigation
"X" to close modals and overlays
Ctrl+Z keyboard shortcut
4. Consistency and Standards
Principle: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Guidelines:
Use consistent terminology throughout
Maintain visual consistency (colors, fonts, spacing)
Follow platform conventions (iOS, Android, Web)
Use standard UI patterns and components
Create and follow a design system
Examples:
Blue underlined text for links
Submit buttons on the right, Cancel on the left
Search icon as magnifying glass
Settings gear/cog icon
Consistent button styles and behaviors
5. Error Prevention
Principle: Even better than good error messages is careful design that prevents problems from occurring in the first place.
Guidelines:
Eliminate error-prone conditions
Use constraints and validation
Provide helpful defaults
Ask for confirmation before destructive actions
Design for forgiving interactions
Examples:
Date pickers instead of text input
Disabling invalid options
Inline form validation
"Are you sure?" confirmations for delete
Auto-save functionality
6. Recognition Rather Than Recall
Principle: Minimize the user's memory load by making objects, actions, and options visible. Users should not have to remember information from one part of the dialogue to another.
Guidelines:
Make options and actions visible
Show recently used items
Display context and helpful information
Use visual aids and previews
Provide tooltips and inline help
Examples:
Autocomplete in search boxes
Recently opened files list
Visible menu items vs. hidden commands
Color palette showing available colors
Form field placeholders with examples
7. Flexibility and Efficiency of Use
Principle: Accelerators—unseen by novice users—may speed up interaction for expert users, allowing the system to cater to both inexperienced and experienced users.
Guidelines:
Provide keyboard shortcuts for power users
Allow customization and personalization
Support multiple ways to accomplish tasks
Offer both simple and advanced features
Enable bulk operations and automation
Examples:
Keyboard shortcuts (Ctrl+C, Ctrl+V)
Quick actions and gestures
Advanced search filters
Customizable toolbars
Templates and saved preferences
8. Aesthetic and Minimalist Design
Principle: Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information competes with relevant units and diminishes their visibility.
Guidelines:
Keep content focused and relevant
Remove unnecessary elements
Use white space effectively
Prioritize information hierarchy
Progressive disclosure for advanced features
Examples:
Clean, uncluttered interfaces
Collapsible sections for details
Focus on primary actions
Minimal decoration and ornamentation
Clear visual hierarchy
9. Help Users Recognize, Diagnose, and Recover from Errors
Principle: Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution.
Guidelines:
Write clear, human-readable error messages
Explain what went wrong and why
Suggest specific solutions
Use appropriate visual indicators (color, icons)
Avoid technical codes and jargon
Examples:
"Email address is required" vs. "Error 422"
Highlighting the field with the error
Suggestions: "Did you mean gmail.com?"
Specific guidance: "Password must be at least 8 characters"
Recovery actions: "Try again" or "Reset password"
10. Help and Documentation
Principle: Even though it's better if the system can be used without documentation, it may be necessary to provide help. Such information should be easy to search, focused on the user's task, and list concrete steps.
Guidelines:
Make help easily accessible
Provide context-sensitive help
Use clear, concise language
Include visual examples
Enable searching and browsing
Examples:
Question mark icons for contextual help
Interactive tutorials and walkthroughs
Searchable knowledge base
Video demonstrations
FAQ sections organized by task
Gestalt Principles in UI Design
Gestalt principles describe how humans perceive visual elements as organized patterns rather than separate components.
Key Principles:
Proximity: Elements close together are perceived as related
Group related form fields
Space navigation items by category
Cluster related content blocks
Similarity: Similar elements are perceived as part of a group
Use consistent styling for related actions
Match colors for similar functionality
Apply uniform shapes to category items
Continuity: Elements arranged on a line or curve are perceived as related
Align form labels and inputs
Create visual flow with layouts
Use lines to connect related items
Closure: Humans complete incomplete shapes in their minds
Use subtle borders or backgrounds
Implied boundaries for cards
Negative space to define areas
Figure/Ground: Elements are perceived as either foreground or background
Use contrast to emphasize primary content
Blur backgrounds for modal focus
Layer elements with depth
User Psychology
Cognitive Load
Cognitive load refers to the amount of mental effort required to use an interface. Reducing cognitive load improves usability and user satisfaction.
Types of Cognitive Load:
Intrinsic Load: Inherent complexity of the task
Cannot be eliminated, only managed
Break complex tasks into smaller steps
Provide scaffolding and support
Extraneous Load: Unnecessary mental effort from poor design
Can and should be eliminated
Caused by confusing layouts, unclear labels, inconsistency
Reduce through good UX practices
Germane Load: Effort required to learn and internalize patterns
Beneficial cognitive load
Supports skill development and mastery
Invest in onboarding and progressive learning
Strategies to Reduce Cognitive Load:
Chunking: Group related information (phone numbers: 123-456-7890)
Recognition over Recall: Show options instead of requiring memory
Progressive Disclosure: Reveal complexity gradually
Defaults: Provide sensible pre-selections
Visual Hierarchy: Guide attention to important elements
Familiar Patterns: Use known conventions and metaphors
Clear Labels: Use descriptive, unambiguous text
Minimize Choices: Apply Hick's Law (more options = longer decision time)
Mental Models
A mental model is a user's internal representation of how something works. Effective UX design aligns with user mental models.
Understanding Mental Models:
Formed through prior experience and learning
May not match actual system implementation
Vary across different user groups
Influence expectations and predictions
Drive user behavior and decisions
Designing for Mental Models:
Research User Expectations
Conduct user interviews
Observe task completion attempts
Ask users to predict outcomes
Map user workflows
Match or Teach
Align design with existing mental models when possible
When innovation required, teach new models explicitly
Use familiar metaphors as bridges
Provide clear conceptual models
Test Assumptions
Validate mental model alignment through testing
Identify mismatches and confusion points
Iterate to improve alignment
Document common misconceptions
Common Mental Model Mismatches:
File systems vs. search-based organization
Hierarchical navigation vs. networked information
Linear processes vs. flexible workflows
Technical accuracy vs. user understanding
Affordances and Signifiers
Affordances: Properties of an object that show what actions can be performed with it.
Perceived affordances matter more than actual affordances in UI
Buttons afford clicking through their appearance
Text fields afford typing through cursor changes
Sliders afford dragging through visible handles
Signifiers: Cues that communicate where action should take place.
Visual indicators of affordances
Underlines on links (signify clickability)
Pointer cursor change (signify interaction)
Button shading and borders (signify pressability)
Drag handles (signify movability)
Design Implications:
Make interactive elements look interactive
Provide visual feedback on hover and focus
Use consistent signifiers throughout interface
Don't make non-interactive elements look clickable
Test with users to validate perceived affordances
Fitts's Law
Principle: The time to acquire a target is a function of the distance to and size of the target.
Formula: T = a + b × log₂(D/W + 1)
T = time to move to target
D = distance to target
W = width of target
a, b = empirically determined constants
UI Design Applications:
Large Targets: Make clickable elements bigger
Minimum touch target: 44×44 pixels (Apple), 48×48 pixels (Android)
Larger buttons for primary actions
Expand hover areas beyond visible boundaries
Proximity: Place related items close together
Position tooltips near triggers
Keep form labels adjacent to inputs
Group related actions in toolbars
Edge Cases: Screen edges are easy targets (infinite width)
macOS menu bar at top edge
Windows start button at bottom corner
Mobile navigation at screen bottom
Context Menus: Appear at cursor location
Zero distance to travel
Faster than menu bar navigation
Right-click or long-press patterns
Hick's Law
Principle: The time it takes to make a decision increases logarithmically with the number of choices.
Formula: T = b × log₂(n + 1)
T = time to make decision
n = number of choices
b = empirically determined constant
Design Implications:
Reduce Options: Show only necessary choices
Progressive disclosure for advanced options
Smart defaults to eliminate decisions
Remove rarely used features
Categorize: Group options into logical categories
Mega menus with organized sections
Filters and facets for narrowing
Stepped navigation (breadth vs. depth)
Prioritize: Highlight recommended or popular options
"Most popular" indicators
"Recommended for you" suggestions
Default selections for common choices
Context: Show relevant options for current task
Contextual menus based on selection
Adaptive interfaces based on usage
Role-based views and permissions
Miller's Law
Principle: The average person can hold 7 (±2) items in working memory.
Design Applications:
Chunk Information: Group content into 5-9 items
Navigation menu items
Dashboard widgets
List items before requiring scrolling
Break Down Complex Tasks: Divide into steps
Multi-step forms with progress indicators
Wizards for complex configurations
Onboarding flows with clear stages
Use Visual Aids: Reduce memory requirements
Icons alongside text labels
Color coding for categories
Visual grouping of related items
Provide References: Make information available
Tooltips for additional context
Inline help and examples
Summary views of previous inputs
User Research
Research Methods Overview
Qualitative Methods: Explore motivations, behaviors, and mental models
User interviews
Contextual inquiry
Focus groups
Diary studies
Think-aloud protocols
Quantitative Methods: Measure behaviors and validate hypotheses
Surveys and questionnaires
Analytics and metrics
A/B testing
Card sorting (with statistical analysis)
Tree testing
User Interviews
Purpose: Deep understanding of user needs, goals, behaviors, and pain points.
Best Practices:
Preparation
Define research questions and objectives
Create discussion guide (not rigid script)
Recruit representative participants (5-8 per user segment)
Choose appropriate setting (user's environment often best)
During Interviews
Build rapport and trust
Ask open-ended questions
Use "5 Whys" technique to dig deeper
Observe behavior and environment
Avoid leading questions
Listen more than talk (80/20 rule)
Question Types
Background: "Tell me about your role..."
Behavior: "Walk me through how you currently..."
Pain points: "What's frustrating about..."
Goals: "What are you trying to accomplish..."
Workarounds: "How do you handle it when..."
Analysis
Transcribe or take detailed notes
Identify patterns across participants
Extract quotes for personas and presentations
Synthesize findings into themes
Validate with stakeholders
Surveys and Questionnaires
Purpose: Gather quantitative data from larger samples to measure attitudes, behaviors, and preferences.
Design Principles:
Question Design
Use clear, unambiguous language
Avoid double-barreled questions
Use balanced scales (Likert: 1-5 or 1-7)
Include "prefer not to answer" options
Randomize answer order to reduce bias
Survey Structure
Start with easy, engaging questions
Group related questions together
Place demographics at the end
Keep surveys as short as possible
Show progress indicator for longer surveys
Calculate required sample for statistical significance
Account for response rate (often 10-30%)
Ensure representative distribution
Consider stratified sampling for segments
Personas
Purpose: Create archetypal users based on research to guide design decisions and maintain user focus.
Components:
Demographics
Name and photo (make memorable)
Age, occupation, education
Location and living situation
Family status
Psychographics
Goals and motivations
Behaviors and habits
Pain points and frustrations
Values and attitudes
Technical proficiency
Context
Use scenarios and context
Devices and platforms used
When/where they use product
Frequency of use
Quote
Memorable statement capturing essence
Based on real user research data
Humanizes the persona
Best Practices:
Base on real research data, not assumptions
Create 3-5 primary personas (not too many)
Focus on differences that matter for design
Update as you learn more about users
Share widely with team and stakeholders
Use in design critiques and decision-making
Journey Mapping
Purpose: Visualize the complete user experience across touchpoints, revealing pain points and opportunities.
Components:
Stages: Phases of the user journey
Awareness → Consideration → Purchase → Use → Loyalty
Or task-specific: Discovery → Comparison → Selection → Checkout
Actions: What users do at each stage
Search for information
Compare options
Make purchase
Use product
Touchpoints: Where interactions occur
Website, mobile app
Email, social media
Customer support
Physical locations
Thoughts and Feelings: User emotional state
Excited, confused, frustrated, satisfied
Expectations and concerns
Moments of delight or pain
Pain Points: Friction and problems
Where users struggle
Abandonment points
Complaints and workarounds
Opportunities: Areas for improvement
How to reduce friction
Moments to exceed expectations
New features or touchpoints
Creation Process:
Define scope (which journey, which persona)
Gather research data (interviews, analytics, support tickets)
Map stages and actions
Identify touchpoints
Add emotions and pain points
Collaborate with stakeholders to validate
Identify priorities for improvement
Track improvements over time
Accessibility
WCAG Guidelines
Web Content Accessibility Guidelines (WCAG) provide standards for making web content accessible to people with disabilities.
Four Principles (POUR):
Perceivable: Information must be presentable to users in ways they can perceive
Operable: Interface components must be operable
Understandable: Information and operation must be understandable
Robust: Content must be robust enough to work with assistive technologies
Conformance Levels:
Level A: Minimum accessibility (basic)
Level AA: Addresses major barriers (recommended target)
Level AAA: Highest accessibility (ideal)
Key Accessibility Requirements
1. Text Alternatives (1.1.1, Level A)
Requirement: Provide text alternatives for non-text content.
Implementation:
Alt text for images:
Empty alt for decorative images:
Transcripts for audio
Captions for video
Labels for form inputs
2. Keyboard Access (2.1.1, Level A)
Requirement: All functionality available via keyboard.
Implementation:
Ensure logical tab order
Visible focus indicators
No keyboard traps
Skip navigation links
Keyboard shortcuts for common actions
3. Color Contrast (1.4.3, Level AA)
Requirement: Minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text.
Implementation:
Test with contrast checker tools
Ensure sufficient contrast in all states (hover, focus, disabled)
Don't rely on color alone to convey information
Provide additional indicators (icons, text, patterns)
4. Resize Text (1.4.4, Level AA)
Requirement: Text can be resized up to 200% without loss of content or functionality.
Implementation:
Use relative units (em, rem) instead of pixels
Test at different zoom levels
Ensure scrolling works properly
Avoid fixed-size containers that truncate content
5. Headings and Labels (2.4.6, Level AA)
Requirement: Headings and labels describe topic or purpose.
Implementation:
Use semantic heading hierarchy (h1 → h2 → h3)
Descriptive form labels
Clear button text
Meaningful link text (not "click here")
6. Focus Visible (2.4.7, Level AA)
Requirement: Keyboard focus indicator is visible.
Implementation:
Don't remove outline without replacement
Ensure sufficient contrast for focus indicators
Make focus indicators consistent
Test keyboard navigation flow
7. ARIA Landmarks (Implicit in 1.3.1)
Requirement: Use ARIA landmarks and roles to define page regions.