ux-design-principles

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

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.

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

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.

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

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

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

• 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)