Chapter 1: Fundamental Laws & Principles
The core psychological laws that govern all interface design
🎯 Learning Objectives
By the end of this chapter, you'll understand:
The 10 most important UI/UX psychology laws
How to apply each law in practical design scenarios
Common mistakes when implementing these principles
Real-world examples from successful products
📚 The Essential Laws
1. Hick's Law - Choice Paralysis
The time it takes to make a decision increases with the number and complexity of choices.
🧠 The Psychology
Cognitive Overload: Too many options overwhelm the brain
Decision Fatigue: Mental energy depletes with each choice
Analysis Paralysis: Users delay or avoid decisions entirely
Satisficing Behavior: People choose "good enough" options to avoid analysis
🎨 Design Applications
Navigation Menus: Limit to 7±2 items (Miller's Magic Number)
Product Catalogs: Use progressive filtering instead of showing all options
Forms: Break complex forms into smaller, sequential steps
CTAs: Present one primary action per screen/section
⚡ Quick Implementation Tips
❌ Bad: 15 navigation items in header
✅ Good: 5 main categories with organized sub-menus
❌ Bad: All product features on landing page
✅ Good: 3 key benefits with "Learn More" for details
❌ Bad: Multiple CTAs competing for attention
✅ Good: One primary CTA, secondary actions less prominent📊 Research Data
Amazon Study: Reducing choices from 24 to 6 increased conversions by 30%
Jam Study: 30% of people stopped at stall with 24 jams, only 3% bought. 40% stopped at 6-jam stall, 30% bought
Netflix: Uses algorithms to show only 40-50 personalized options instead of entire catalog
2. Fitts's Law - Target Acquisition
The time to acquire a target is a function of the distance to and size of the target.
🧠 The Psychology
Motor Control: Larger targets are easier to hit accurately
Speed-Accuracy Tradeoff: Faster movements are less accurate
Muscle Memory: Frequent actions develop automated responses
Edge Benefits: Screen edges act as infinite targets
🎨 Design Applications
Buttons: Make frequently used buttons larger and closer
Touch Targets: Minimum 44px (iOS) or 48dp (Android) for mobile
Navigation: Place important links in predictable locations
Forms: Increase input field click areas beyond visible borders
⚡ Quick Implementation Tips
Primary CTA: 48px+ height, prominent placement
Secondary Actions: 32px+ height, less prominent
Micro-interactions: 24px+ touch targets
Navigation: Place at screen edges or corners🧪 Testing Methods
Heat Maps: Track where users actually click
A/B Tests: Compare button sizes and placements
Task Completion Time: Measure time to complete actions
Error Rates: Track misclicks and failed interactions
3. Miller's Rule - Cognitive Capacity
The average person can only keep 7 (±2) items in their working memory.
🧠 The Psychology
Working Memory: Limited capacity for processing information
Chunking: Grouping information into meaningful units
Cognitive Load: Mental effort required to process information
Serial Position Effect: Remember first and last items best
🎨 Design Applications
Navigation: Limit main menu items to 5-7
Lists: Group items or paginate long lists
Form Fields: Break into logical sections
Progress Indicators: Show 3-5 steps maximum
⚡ Chunking Strategies
Phone Numbers: 555-123-4567 (not 5551234567)
Credit Cards: 1234 5678 9012 3456 (not 1234567890123456)
Navigation: Home | Products | About | Contact | Support
Content: Group related items with visual hierarchy4. Gestalt Principles - Visual Perception
The mind perceives objects as whole forms rather than individual parts.
🧠 The Core Principles
Proximity - Things close together are perceived as related
🎨 Application:
- Group related form fields
- Space out unrelated content sections
- Align related navigation itemsSimilarity - Similar objects are perceived as a group
🎨 Application:
- Use consistent styling for similar elements
- Color-code related functions
- Maintain visual consistency in layoutsClosure - Mind fills in missing information
🎨 Application:
- Use partial borders to define sections
- Create implied lines with aligned elements
- Progressive disclosure patternsContinuity - Eyes follow lines and paths
🎨 Application:
- Guide users through visual flow
- Use directional cues (arrows, lines)
- Create reading patterns (Z-pattern, F-pattern)Figure/Ground - Distinguish between foreground and background
🎨 Application:
- Use contrast to highlight important elements
- Create depth with shadows and layering
- Modal overlays and focus states5. Jakob's Law - User Expectations
Users spend most of their time on other sites, so they expect your site to work the same way.
🧠 The Psychology
Mental Models: Users form expectations based on experience
Transfer of Learning: Apply knowledge from familiar interfaces
Cognitive Ease: Familiar patterns require less mental effort
Convention Over Innovation: Users prefer predictable interactions
🎨 Common Conventions
✅ Logo in top-left corner (links to homepage)
✅ Search icon: magnifying glass
✅ Menu icon: hamburger (three lines)
✅ Shopping cart: top-right corner
✅ Pagination: numbered links at bottom
✅ Breadcrumbs: horizontal path navigation⚡ When to Break Conventions
Significant Improvement: New pattern is clearly better
Brand Differentiation: Strategic differentiation adds value
User Testing: Validate before launching unconventional designs
Gradual Introduction: Phase in new patterns slowly
6. Law of Prägnanz - Simplicity
People perceive and interpret ambiguous or complex images as the simplest form possible.
🧠 The Psychology
Cognitive Economy: Brain seeks efficient processing
Pattern Recognition: Simple patterns are easier to remember
Aesthetic-Usability Effect: Simple designs appear more usable
Minimalism: Less is often more effective
🎨 Design Applications
Visual Hierarchy: Clear information structure
White Space: Allow content to breathe
Icon Design: Simple, recognizable symbols
Layout: Grid-based, organized compositions
⚡ Simplification Techniques
Progressive Disclosure: Show only what's needed
Visual Hierarchy: Size, color, position to guide attention
Consistent Patterns: Reuse successful design solutions
Remove Decorative Elements: Focus on functional design7. Zeigarnik Effect - Incomplete Tasks
People remember interrupted or incomplete tasks better than completed ones.
🧠 The Psychology
Mental Tension: Unfinished tasks create psychological stress
Attention Bias: Incomplete items stay active in memory
Goal Completion: Strong drive to finish started tasks
Closure Need: Satisfaction from completing tasks
🎨 Design Applications
Progress Bars: Show completion status
Onboarding: Multi-step processes with clear progress
Profiles: "Complete your profile" prompts
Shopping: "Items in cart" reminders
⚡ Implementation Examples
LinkedIn: "Profile strength: 67% complete"
Duolingo: Daily streak counters
Slack: "Set up your workspace" checklist
Medium: Reading progress indicators8. Peak-End Rule - Memory Formation
People judge experiences based on their peak moment and how they ended.
🧠 The Psychology
Memory Bias: Not all moments are weighted equally
Emotional Peaks: High/low moments dominate memory
Recency Effect: Last impression strongly influences overall perception
Duration Neglect: Length of experience matters less than peaks/endings
🎨 Design Applications
Onboarding: Create positive first impressions
Error Handling: Turn frustrations into helpful moments
Completion: Celebrate successful task completion
Offboarding: End relationships positively
⚡ Creating Positive Peaks
Onboarding: Personalized welcome messages
Success States: Animated confirmations, celebrations
Error Recovery: Helpful, empathetic error messages
Completion: Achievement badges, progress celebrations9. Von Restorff Effect - Isolation Effect
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
🧠 The Psychology
Selective Attention: Different items grab focus
Memory Enhancement: Distinctive items are better remembered
Visual Salience: Contrast creates emphasis
Processing Fluency: Unique items are processed differently
🎨 Design Applications
Call-to-Action Buttons: Make primary CTAs visually distinct
Pricing Tables: Highlight recommended plans
Navigation: Emphasize current page location
Notifications: Use color/animation to draw attention
⚡ Contrast Techniques
Color: Bright button on neutral background
Size: Larger elements draw attention
Motion: Subtle animations highlight changes
Position: Break alignment to create emphasis
Typography: Bold or different fonts for importance10. Tesler's Law - Conservation of Complexity
For any system, there is a certain amount of complexity that cannot be reduced.
🧠 The Psychology
Inherent Complexity: Some tasks are fundamentally complex
Complexity Transfer: Can move complexity, not eliminate it
User vs. System: Decide who handles the complexity
Progressive Complexity: Reveal complexity gradually
🎨 Design Applications
Smart Defaults: Pre-fill forms with likely values
Automation: System handles complex calculations
Expert Modes: Advanced options for power users
Guided Workflows: Step-by-step complex processes
⚡ Complexity Management
❌ Bad: Hide all complexity (users feel powerless)
❌ Bad: Show all complexity (users feel overwhelmed)
✅ Good: Progressive disclosure based on user needs
✅ Good: Smart defaults with customization options🧪 Testing These Laws
Quantitative Methods
A/B Testing: Compare designs implementing different laws
Analytics: Measure task completion, time-to-action
Heat Maps: Understand user attention patterns
Conversion Funnels: Track drop-off points
Qualitative Methods
User Interviews: Understand decision-making processes
Think-Aloud Protocols: Observe real-time reactions
Card Sorting: Test mental models and categorization
Usability Testing: Identify friction points
📝 Implementation Checklist
Before Design
During Design
After Design
🎯 Key Takeaways
Psychology is Fundamental: All good design is based on understanding human behavior
Laws Work Together: Combine multiple principles for maximum effect
Context Matters: Apply laws appropriately to specific situations
Test Everything: Validate psychological assumptions with real users
Iterate Continuously: User psychology evolves with technology and culture
📖 Next Chapter
Continue to Chapter 2: Visual Psychology & Perception to dive deeper into how users process visual information and make split-second judgments about interfaces.
Last updated