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 hierarchy

---

4. 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 items

Similarity - Similar objects are perceived as a group

🎨 Application:
- Use consistent styling for similar elements
- Color-code related functions
- Maintain visual consistency in layouts

Closure - Mind fills in missing information

🎨 Application:
- Use partial borders to define sections
- Create implied lines with aligned elements
- Progressive disclosure patterns

Continuity - 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 states

---

5. 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 design

---

7. 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 indicators

---

8. 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 celebrations

---

9. 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 importance

---

10. 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

• Identify primary user tasks and goals

• Map user mental models and expectations

• Define information hierarchy

• Plan progressive disclosure strategy

During Design

• Apply Hick's Law to limit choices

• Use Fitts's Law for target sizing

• Implement Gestalt principles for grouping

• Follow established conventions (Jakob's Law)

• Simplify complex interfaces (Prägnanz)

After Design

• Test with real users

• Measure psychological impact

• Iterate based on feedback

• Monitor long-term user behavior

---

🎯 Key Takeaways

1. Psychology is Fundamental: All good design is based on understanding human behavior

2. Laws Work Together: Combine multiple principles for maximum effect

3. Context Matters: Apply laws appropriately to specific situations

4. Test Everything: Validate psychological assumptions with real users

5. 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.

---

← Back to Main Index | Next Chapter: Visual Psychology →