UX Design Principles Skill
Psychological principles that guide design DECISIONS. For implementation patterns (colors, spacing, animations), see the corresponding ux-* skills.
Choice Architecture
Hick's Law: Decision Time
Decision time increases with the number and complexity of choices.
Do:
- Reduce options when quick decisions matter
- Break complex tasks into smaller steps
- Highlight recommended or default options
- Use progressive disclosure for advanced features
Don't:
- Present all options at once without guidance
- Oversimplify until purpose becomes unclear
Choice Overload
Too many choices overwhelm and paralyze.
Do:
- Limit options when quick decisions are important
- Provide comparison tools (e.g., side-by-side pricing)
- Prioritize content and offer filters to narrow choices
Don't:
- Present all possible options at once
- Force users through large unfiltered selection lists
Serial Position Effect
Items at the beginning and end of lists are remembered best.
Do:
- Place critical actions at the start or end of navigation
- Put key information first and last in lists
Don't:
- Bury important actions in the middle of menus
- Give equal prominence to all items
Cognitive Load
Cognitive Load Principle
Reduce information users must hold in working memory.
Do:
- Remove distracting elements that don't help task completion
- Distinguish essential information from nice-to-have
- Break complex information into digestible chunks
Don't:
- Present excessive details or decorative clutter
- Mix intrinsic complexity with unnecessary extraneous load
*Implementation: See ux-spacing-layout for visual chunking patterns.*
Law of Pragnanz (Simplicity)
People interpret complex images in the simplest form possible.
Do:
- Present information in simple, ordered forms
- Reduce visual complexity to aid comprehension
Don't:
- Overwhelm users with ambiguous or complex graphics
- Create layouts that require mental effort to parse
Tesler's Law (Conservation of Complexity)
Every process has irreducible complexity that must be handled somewhere.
Do:
- Handle inherent complexity in design/development, not on users
- Provide context-aware guidance within the interface
- Accept that users are not always rational
Don't:
- Push system complexity onto users
- Build only for idealized, rational behavior
Occam's Razor
Simplest solution is usually best.
Do:
- Eliminate unnecessary elements while maintaining function
- Continually refine until nothing can be removed without harm
Don't:
- Add features that complicate without clear user benefit
- Solve simple problems with elaborate solutions
Attention & Perception
Selective Attention
Users naturally filter out irrelevant content.
Do:
- Guide attention to relevant information
- Minimize distractions
- Ensure only one significant change occurs at a time
Don't:
- Style important content like advertisements (banner blindness)
- Introduce multiple simultaneous changes without cues
- Place essential info in areas typically ignored (ad zones)
Von Restorff Effect (Isolation)
Distinctive items are remembered better.
Do:
- Make important actions visually stand out
- Use emphasis sparingly so items don't compete
- Provide multiple contrast cues (shape, pattern, not just color)
Don't:
- Rely exclusively on color to convey importance
- Overuse emphasis (dilutes impact)
- Use motion effects that trigger discomfort
*Implementation: See ux-color-system for emphasis patterns.*
User Expectations
Jakob's Law
Users transfer expectations from familiar products.
Do:
- Design consistent with patterns users already know
- Leverage existing mental models
- When making major changes, offer temporary familiar alternatives
Don't:
- Radically alter established interactions without guidance
- Force users to relearn common patterns
Paradox of the Active User
Users jump into products without reading instructions.
Do:
- Expect users to start using immediately
- Provide contextual help, tooltips, and guidance in-place
Don't:
- Force users to read manuals before using
- Hide help or make it difficult to find
Aesthetic-Usability Effect
Beautiful design is perceived as more usable.
Do:
- Design interfaces that look appealing and polished
- Use aesthetics to create positive first impressions
Don't:
- Rely on visual polish to hide fundamental usability problems
- Assume beauty compensates for broken functionality
Progress & Motivation
Goal-Gradient Effect
People work faster as they sense completion is near.
Do:
- Display progress toward goals
- Provide "artificial progress" (e.g., start at 10% complete)
Don't:
- Leave users unsure how far they've progressed
- Hide progress information
*Implementation: See ux-feedback-patterns for progress indicator patterns.*
Zeigarnik Effect
Incomplete tasks stay in memory and motivate continuation.
Do:
- Clearly signify that more content/steps are available
- Provide artificial progress toward goals
- Show progress indicators
Don't:
- Leave tasks without visible progress indicators
- Hide future steps or content
*Implementation: See ux-feedback-patterns for progress patterns.*
Parkinson's Law
Tasks expand to fill available time.
Do:
- Set clear, reasonable time expectations
- Reduce task duration below what users expect
- Use time-saving features (autofill, shortcuts)
Don't:
- Allow simple processes to take longer than necessary
- Present long forms without automation
*Implementation: See ux-form-design for autofill patterns.*
Experience Design
Peak-End Rule
Experiences are judged by peak moments and endings.
Do:
- Design memorable peaks and strong endings
- Identify when your product is most helpful and add delight
- Minimize negative peaks (bad moments are remembered vividly)
Don't:
- Neglect the conclusion of user journeys
- Leave negative events unaddressed
Pareto Principle (80/20)
A small number of causes produce majority of outcomes.
Do:
- Identify and focus on high-impact areas
- Allocate resources where they benefit most users
Don't:
- Distribute efforts evenly across all tasks
- Over-invest in low-impact areas
Input & Error Handling
Postel's Law (Robustness)
Be tolerant of input, strict in output.
Do:
- Anticipate various user inputs and behaviors
- Translate diverse input to meet system requirements
- Provide clear feedback for edge cases
Don't:
- Rigidly enforce narrow input formats
- Send malformed or ambiguous output
*Implementation: See ux-form-design for validation patterns.*
Cognitive Bias Awareness
Cognitive Bias Principle
Mental shortcuts influence decision making.
Do:
- Recognize that heuristics save mental effort but can skew judgment
- Raise awareness of your own biases during design
- Challenge assumptions with your team
Don't:
- Ignore biases like confirmation bias
- Seek only information supporting preconceived beliefs
Quick Reference Matrix
| Situation | Apply |
|---|---|
| Too many options | Hick's Law, Choice Overload |
| Complex task | Tesler's Law, Cognitive Load |
| Users skip instructions | Paradox of Active User |
| Low completion rates | Goal-Gradient, Zeigarnik |
| Poor first impressions | Aesthetic-Usability |
| Users confused by changes | Jakob's Law |
| Important items ignored | Serial Position, Selective Attention |
| Long task times | Parkinson's Law |
| Poor memories of experience | Peak-End Rule |
| Resource allocation | Pareto Principle |
| Input validation issues | Postel's Law |
| Overly complex design | Occam's Razor, Pragnanz |
Related Skills
- ux-spacing-layout: Visual chunking, grouping (Law of Proximity/Common Region)
- ux-color-system: Emphasis, similarity (Von Restorff, Law of Similarity)
- ux-animation-motion: Response timing (Doherty Threshold)
- ux-accessibility: Touch targets, focus (Fitts's Law)
- ux-feedback-patterns: Progress, loading states (Working Memory)
- ux-user-flow: Navigation, mental models (Flow)
- ux-form-design: Input tolerance, validation (Postel's Law)