UX Laws & Psychology Skill
Based on Laws of UX: Psychological principles for building intuitive interfaces
What is it?
This skill provides essential psychological principles and cognitive laws that inform great user interface design. Understanding these laws helps create interfaces that align with how human brains naturally process information, make decisions, and perceive visual elements.
Why use it?
- •Psychology-Backed Design: Make decisions based on how humans actually think
- •Reduce Friction: Align interface with natural cognitive patterns
- •Increase Usability: Apply proven principles that improve task completion
- •Memorable Experiences: Design for how humans remember and perceive
- •Intuitive Interfaces: Match user expectations and mental models
Part 1: Core Laws Summary
Decision & Cognitive Load Laws
| Law | Principle | Staylook Application |
|---|---|---|
| Hick's Law | More choices = slower decisions | "One Highlight" reduces decision time |
| Miller's Law | ~7 items in working memory | Card layouts chunk information |
| Tesler's Law | Complexity must exist somewhere | Shift complexity to the system |
| Occam's Razor | Simplest solution is best | Minimal design philosophy |
Perception & Attention Laws
| Law | Principle | Staylook Application |
|---|---|---|
| Von Restorff Effect | Different items are remembered | Expressive element stands out |
| Selective Attention | Users filter stimuli | Standard fades, Expressive captures focus |
| Serial Position | First/last items remembered best | Primary actions at end (right) |
| Peak-End Rule | Experiences judged by peak+end | Delightful success states |
Visual Organization Laws (Gestalt)
| Law | Principle | Staylook Application |
|---|---|---|
| Proximity | Near objects seem grouped | 4px spacing grid |
| Common Region | Bounded elements grouped | Radius hierarchy (32→24→16) |
| Similarity | Similar styling = related | All buttons pill-shaped |
| Uniform Connectedness | Connected = related | Step indicators with lines |
| Prägnanz | Prefer simplest interpretation | Clean, minimal layouts |
Interaction & Performance Laws
| Law | Principle | Staylook Application |
|---|---|---|
| Fitts's Law | Bigger + closer = faster | Pill buttons maximize area |
| Doherty Threshold | Feedback within 400ms | 150ms/300ms/500ms animation scale |
| Goal-Gradient Effect | Motivation increases near goal | Expressive for completed steps |
User Expectation Laws
| Law | Principle | Staylook Application |
|---|---|---|
| Jakob's Law | Users expect familiar patterns | Familiar patterns + curved aesthetic |
| Mental Models | Users have preexisting beliefs | Cards = contained, Pill = action |
| Postel's Law | Accept varied input, consistent output | Flexible inputs, formatted display |
Memory & Aesthetics Laws
| Law | Principle | Staylook Application |
|---|---|---|
| Zeigarnik Effect | Incomplete tasks remembered | Progress indicators, incomplete highlights |
| Working Memory | Limited capacity | Keep context visible |
| Aesthetic-Usability | Beautiful = perceived usable | Premium curved aesthetic |
Part 2: Applying Laws to Staylook
Von Restorff + One Highlight Rule
The "One Highlight" rule is the Von Restorff Effect in action:
Principle: When multiple similar objects are present, the different one is remembered.
Implementation:
- •Use Expressive (accent) for exactly 1 element per screen
- •All other elements use Standard (
--color-text) color - •The highlight element captures attention first
- •Don't rely on color alone—combine with size/shape
Hick's Law + Button Hierarchy
Reduce decision time through clear hierarchy:
Principle: Fewer choices = faster decisions.
Implementation:
- •ONE Expressive button (the obvious choice)
- •Standard buttons for secondary options
- •Ghost buttons for tertiary "maybe later" actions
- •Progressive disclosure for complex options
Fitts's Law + Pill Buttons
Optimize touch/click targets:
Principle: Larger and closer targets are easier to acquire.
Implementation:
- •All buttons are pill-shaped (maximizes area)
- •Minimum 44px touch target on mobile
- •Primary actions are visually larger
- •FAB buttons leverage corner advantage
Proximity + Spacing Grid
Group related elements:
Principle: Near elements are perceived as related.
Implementation:
- •space-2 (8px): Tightly related (label-input)
- •space-4 (16px): Related group members
- •space-8 (32px): Between groups
- •space-12+ (48px+): Between sections
Common Region + Radius Hierarchy
Create visual containers:
Principle: Bounded elements are perceived as grouped.
Implementation:
- •Section: 32px radius (outermost)
- •Container: 24px radius (major wrapper)
- •Card: 16px radius (information group)
- •Nesting: Outer more rounded than inner
Doherty Threshold + Animation Scale
Provide timely feedback:
Principle: Feedback must arrive within 400ms.
Implementation:
- •Fast (150ms): Micro-interactions, hovers
- •Base (300ms): Standard transitions
- •Slow (500ms): Complex animations
- •
400ms: Show loading skeleton/spinner
Part 3: Application Checklist
Cognitive Load
- • Limited choices per screen (Hick's Law)
- • Content chunked into groups (Miller's Law)
- • Complexity handled by system where possible (Tesler's Law)
Visual Perception
- • Key action visually distinctive (Von Restorff)
- • Important items at start/end of lists (Serial Position)
- • Related items grouped together (Proximity)
- • Containers define visual regions (Common Region)
Interaction
- • Touch targets sized appropriately—44px+ (Fitts's Law)
- • Feedback provided within 400ms (Doherty Threshold)
- • Familiar patterns used (Jakob's Law)
Experience
- • Peak moments are delightful (Peak-End Rule)
- • End moments are satisfying (Peak-End Rule)
- • Aesthetic quality maintained (Aesthetic-Usability)
Part 4: Best Practices
Do:
- •Apply multiple principles together (they reinforce each other)
- •Use Von Restorff for primary actions (Staylook's "One Highlight")
- •Respect Fitts's Law for button sizing and placement
- •Follow Jakob's Law for familiar patterns
- •Create delightful peak and end moments
- •Use proximity and common region for visual organization
Don't:
- •Overwhelm with choices (violates Hick's Law)
- •Make all elements equally prominent (violates Von Restorff)
- •Use tiny touch targets (violates Fitts's Law)
- •Invent unfamiliar navigation patterns (violates Jakob's Law)
- •End experiences on negative notes (violates Peak-End Rule)
- •Leave users waiting without feedback (violates Doherty Threshold)
Further Resources
- •See references/LAWS-DETAILED.md for complete law descriptions
- •See references/QUICK-REFERENCE.md for one-line summaries
- •lawsofux.com - Full collection of UX laws with examples
UX Laws & Psychology Skill — Based on Laws of UX