| name | UX Design Evaluation |
| description | Apply the 30 Laws of UX to product design, UI/UX evaluation, and design critique. Use this skill whenever the user mentions UX principles, design evaluation, usability heuristics, cognitive psychology in design, user interface critique, design feedback, UX best practices, or wants to understand why a design does or doesn't work. Also trigger when users ask questions like "is this good UX?", "how can I improve this design?", "what's wrong with this interface?", or reference specific laws like Fitts's Law, Miller's Law, Jakob's Law, etc. |
UX Design Evaluation
A comprehensive guide to the 30 established Laws of UX and how to apply them in product design and interface evaluation.
What This Skill Covers
This skill helps you:
- Evaluate designs against proven UX principles
- Identify issues in interfaces and explain why they're problematic
- Apply psychology and cognitive science to design decisions
- Communicate UX concepts clearly to designers, developers, and stakeholders
- Prioritize which issues are critical vs minor
- Design better by understanding human perception, cognition, and behavior
The Laws of UX
Perception & Visual Design
1. Aesthetic-Usability Effect
Principle: Users often perceive aesthetically pleasing design as design that's more usable.
Application:
- Invest in visual polish - it builds user trust and tolerance
- Beautiful designs create positive emotional responses
- Users forgive minor usability issues in attractive interfaces
- BUT: Don't let aesthetics mask real usability problems
Evaluation Criteria:
- Visual hierarchy: Clear size/weight differentiation
- Color harmony: 3-5 colors maximum, intentional relationships
- Typography: 2-3 font families, consistent scale (4-6 sizes)
- Polish: Consistent shadows, borders, hover states, spacing
- Balance: Intentional symmetry or deliberate asymmetry
Common Issues:
- CRITICAL: No visual hierarchy, all elements same weight
- CRITICAL: >3 font families, >8 font sizes
- MINOR: >6 colors without clear purpose
- MINOR: Inconsistent spacing, irregular gaps
2. Von Restorff Effect (Isolation Effect)
Principle: When multiple similar objects are present, the one that differs is most likely to be remembered.
Application:
- Make primary CTAs visually distinct
- Use contrast to highlight important information
- Don't overuse - if everything is emphasized, nothing is
- Ensure distinctiveness has purpose
Evaluation Criteria:
- Primary CTA must stand out from secondary actions
- Important info uses visual distinction (color, size, weight)
- Maximum 2-3 distinct elements per screen
- Distinction matches importance hierarchy
Common Issues:
- CRITICAL: Primary CTA looks identical to secondary actions
- CRITICAL: No visual distinction for important information
- MINOR: Too many elements trying to stand out (3+)
3. Selective Attention
Principle: Users focus attention only on a subset of stimuli, usually those relevant to their goals.
Application:
- Design clear visual hierarchy
- Don't bury critical information
- Use contrast, size, color, position to guide focus
- Remove or de-emphasize unnecessary elements
Evaluation Criteria:
- Clear focal point on each screen
- Important elements visually prominent
- Size/color/position create attention flow
- Critical info not lost in visual noise
Common Issues:
- CRITICAL: No clear focal point or hierarchy
- CRITICAL: Important information buried/same weight as everything else
- CRITICAL: Multiple elements competing equally for attention
Information Architecture
4. Chunking
Principle: Information is easier to process and remember when broken into small, meaningful groups.
Application:
- Group related information together
- Use 5-9 items per chunk maximum
- Create visual separation between chunks (whitespace, cards, sections)
- Progressive disclosure for complex information
Evaluation Criteria:
- Related content visually grouped (cards, sections, whitespace)
- Chunks limited to 5-9 items each
- Clear visual boundaries between groups
- Whitespace creates breathing room (minimum 24-32px gaps)
Common Issues:
- CRITICAL: Related information scattered, not grouped
- CRITICAL: No visual separation between content groups
- CRITICAL: Information chunks >9 items without sub-grouping
- CRITICAL: Insufficient whitespace (<16px gaps)
5. Miller's Law
Principle: The average person can hold 7±2 items in working memory.
Application:
- Limit navigation menus to 5-9 items
- Break long lists into categories
- Don't require users to remember info across screens
- Use progressive disclosure for large datasets
Evaluation Criteria:
- Navigation menus ≤9 top-level items
- Lists >9 items are categorized or paginated
- No requirement to memorize info between screens
- Context always visible when needed
Common Issues:
- CRITICAL: Navigation with >9 items uncategorized
- CRITICAL: Lists with >9 items without grouping
- CRITICAL: Requiring users to remember codes/numbers across screens
6. Serial Position Effect
Principle: Users best remember the first and last items in a series.
Application:
- Place important actions at beginning or end of lists
- Position key navigation at start or finish
- Don't bury critical options in the middle
- Order lists intentionally
Evaluation Criteria:
- Important items at start or end positions
- Critical actions not in middle of long lists
- Intentional ordering (not arbitrary)
Common Issues:
- CRITICAL: Critical actions buried in middle of 7+ item lists
- MINOR: Random ordering when priority-based would be better
Gestalt Principles
7. Law of Common Region
Principle: Elements sharing a clearly defined boundary are perceived as a group.
Application:
- Use cards, boxes, backgrounds to group related content
- Create visual containers for sections
- Borders, backgrounds establish clear boundaries
Evaluation Criteria:
- Related elements within visible boundaries
- Clear distinction between regions
- Appropriate nesting (not overly complex)
Common Issues:
- CRITICAL: Related elements without visual grouping
- CRITICAL: Ambiguous boundaries between content sections
8. Law of Proximity
Principle: Objects close together are perceived as related.
Application:
- Place related items close together
- Use whitespace to create separation
- Keep labels near their inputs (4-8px gap)
- Group related actions together
Evaluation Criteria:
- Labels within 4-8px of inputs
- Related items closer than unrelated items
- Whitespace creates clear groupings
- Related actions adjacent
Common Issues:
- CRITICAL: Labels >16px from inputs
- CRITICAL: Related items spaced as far as unrelated items
- CRITICAL: Related actions separated by unrelated content
9. Law of Similarity
Principle: Elements with similar visual characteristics are perceived as related.
Application:
- Style similar elements consistently
- Differentiate element types through styling
- Maintain pattern consistency
- Same function = same appearance
Evaluation Criteria:
- Buttons of same type styled consistently
- Similar functions have similar appearance
- Different functions have different styling
- Patterns maintained throughout interface
Common Issues:
- CRITICAL: Same-level buttons styled differently
- CRITICAL: Different elements styled identically
- MINOR: Breaking established patterns without reason
10. Law of Prägnanz (Simplicity)
Principle: People interpret ambiguous or complex images in the simplest form possible.
Application:
- Design with simplicity in mind
- Use familiar, simple shapes
- Reduce visual complexity
- Avoid ambiguous elements
Evaluation Criteria:
- Simple, recognizable shapes
- No unnecessarily complex visuals
- Clear, unambiguous icons
- Minimal decoration
Common Issues:
- CRITICAL: Ambiguous icons or visuals
- MINOR: Overly complex elements that could be simplified
11. Law of Uniform Connectedness
Principle: Visually connected elements are perceived as more related.
Application:
- Use lines, arrows, backgrounds to show relationships
- Connect related elements explicitly
- Don't create misleading connections
Evaluation Criteria:
- Related elements connected when appropriate
- Clear relationship indicators
- No false connections
Common Issues:
- CRITICAL: Visual connections between unrelated elements
- MINOR: Missing connections where they'd clarify relationships
Decision Making & Choice
12. Choice Overload (Paradox of Choice)
Principle: Too many options overwhelm users and impair decision-making.
Application:
- Minimize options when speed/quality matters
- Use progressive disclosure
- Provide smart defaults or recommendations
- Categorize when many options necessary
Evaluation Criteria:
- ≤7 options without categorization
- Progressive disclosure for complex tasks
- Smart defaults provided
- Recommendations when helpful
Common Issues:
- CRITICAL: >7 uncategorized options
- CRITICAL: No defaults or recommendations when needed
- CRITICAL: All options shown at once in complex flows
13. Hick's Law
Principle: Decision time increases with number and complexity of choices.
Application:
- Reduce choices for faster decisions
- Break complex decisions into steps
- Highlight recommended options
- Use progressive disclosure
Evaluation Criteria:
- Choices minimized for time-sensitive tasks
- Complex decisions broken into steps
- Recommended options highlighted
- Clear differentiation between options
Common Issues:
- CRITICAL: Too many equal-priority options
- CRITICAL: Options difficult to compare
- MINOR: No recommended/default selection
14. Cognitive Bias
Principle: Systematic errors in thinking affect judgment and decisions.
Application:
- Be aware of common biases (confirmation, anchoring, availability)
- Use neutral language
- Present balanced information
- Test with diverse users
Evaluation Criteria:
- Neutral framing, not leading
- Both pros and cons presented
- No manipulation through bias
Common Issues:
- MINOR: Leading language manipulating choices
- MINOR: Only positive aspects shown
Interaction Design
15. Fitts's Law
Principle: Time to acquire a target = function of distance to and size of target.
Application:
- Touch targets ≥44x44px (mobile/touch)
- Mouse targets ≥32x32px minimum
- Place frequent actions close together
- Put important actions in easy-to-reach locations
- Use screen edges/corners (infinite targets)
Evaluation Criteria:
- Interactive elements ≥44x44px (touch) or ≥32x32px (mouse)
- Related actions close together (<200px)
- Primary CTA in optimal position
- Clickable area matches visual size
Common Issues:
- CRITICAL: Buttons <44x44px on touch interfaces
- CRITICAL: Related actions >200px apart
- MINOR: CTA not in expected/optimal location
16. Doherty Threshold
Principle: Productivity soars when system response <400ms.
Application:
- Keep response times <400ms
- Use perceived performance (skeleton screens, optimistic UI)
- Provide immediate feedback
- Show loading indicators for >400ms
Evaluation Criteria:
- Loading states for async operations
- Immediate feedback on all actions
- Skeleton screens for slow content
- Progress indicators when needed
Common Issues:
- CRITICAL: No loading indicators
- CRITICAL: No feedback on user actions
- MINOR: Blank screens vs skeleton loaders
17. Jakob's Law
Principle: Users prefer sites to work like all the other sites they know.
Application:
- Follow platform conventions
- Only innovate when providing clear value
- Match user expectations
- Test deviations carefully
Evaluation Criteria:
- Standard patterns for core interactions
- Innovation justified by value
- Platform conventions followed
- Expected locations for common elements
Common Issues:
- CRITICAL: Core interactions deviate from conventions
- CRITICAL: Navigation doesn't follow platform norms
- MINOR: Custom icons don't match universal meanings
18. Postel's Law (Robustness Principle)
Principle: Be liberal in what you accept, conservative in what you send.
Application:
- Accept varied input formats
- Auto-format when possible
- Provide clear, consistent output
- Flexible validation
Evaluation Criteria:
- Flexible input validation (phone, credit card, dates)
- Auto-formatting on blur
- Consistent output format
- Error recovery, not just rejection
Common Issues:
- CRITICAL: Rejecting valid inputs due to formatting
- CRITICAL: No attempt to parse/correct user input
- MINOR: Inconsistent output formats
Cognitive Load
19. Cognitive Load
Principle: The mental effort required to use an interface.
Application:
- Minimize unnecessary elements
- Use clear, simple language
- Progressive disclosure
- Avoid simultaneous complex tasks
Evaluation Criteria:
- Element density <5 per 100x100px
- Simple, clear language
- No jargon without reason
- Single-focus tasks
Common Issues:
- CRITICAL: High element density, visual clutter
- CRITICAL: Jargon, complex terminology
- CRITICAL: Multiple competing tasks
- MINOR: Decorative elements adding noise
20. Working Memory
Principle: Temporary system for holding information needed for tasks.
Application:
- Display relevant info in context
- Don't hide necessary context
- No cross-screen memory requirements
- Keep related info visible
Evaluation Criteria:
- Context always visible
- No hidden essential information
- Data needed for task is displayed
- No memorization between screens
Common Issues:
- CRITICAL: Hiding necessary context (tooltips for essential info)
- CRITICAL: Requiring memory across screens
- CRITICAL: System state not visible
21. Mental Model
Principle: Internal representation of how a system works.
Application:
- Align interface with user expectations
- Use familiar metaphors
- Clear feedback when behavior differs
- Reduce mismatch between user/system model
Evaluation Criteria:
- Behavior matches expectations
- Clear feedback for unexpected results
- Familiar metaphors used
- Consistent mental model
Common Issues:
- CRITICAL: Actions producing unexpected results
- CRITICAL: System feedback contradicting expectations
- MINOR: Unfamiliar metaphors without explanation
Motivation & Completion
22. Flow
Principle: Complete immersion in an activity.
Application:
- Remove interruptions
- Maintain clear goals
- Provide immediate feedback
- Balance challenge and skill
Evaluation Criteria:
- Minimal interruptions (modals, popups)
- Clear next steps
- Smooth task progression
- No unnecessary friction
Common Issues:
- CRITICAL: Unnecessary modals/interruptions
- CRITICAL: Unclear what to do next
- MINOR: Friction points breaking momentum
23. Goal-Gradient Effect
Principle: Motivation increases near goal completion.
Application:
- Show progress clearly
- Provide completion indicators
- Give users head start (10% vs 0%)
- Celebrate completion
Evaluation Criteria:
- Progress indicators in multi-step flows
- Clear completion feedback
- Visual progress representation
- Milestone acknowledgment
Common Issues:
- CRITICAL: Multi-step process without progress indication
- MINOR: No completion celebration
- MINOR: Missing artificial progress boost
24. Peak-End Rule
Principle: Experiences judged by peak moment and ending.
Application:
- Design memorable peak moments
- End on positive note
- Minimize pain at end
- Special attention to last impression
Evaluation Criteria:
- Memorable highlights in journey
- Positive ending experience
- No frustration at conclusion
- Celebration of completion
Common Issues:
- CRITICAL: Errors/friction at end of flow
- MINOR: No memorable moments
- MINOR: Flat ending without acknowledgment
25. Zeigarnik Effect
Principle: Incomplete tasks better remembered than completed.
Application:
- Show incomplete tasks/profiles
- Save progress, enable resume
- Use for motivation (not manipulation)
- Progress indicators
Evaluation Criteria:
- Save states in long processes
- Resume capability
- Incomplete indicators visible
- No lost progress
Common Issues:
- CRITICAL: No save/resume in multi-step processes
- MINOR: No incomplete task indicators
Other Principles
26. Occam's Razor
Principle: Simplest solution is usually best.
Application:
- Remove unnecessary features
- Keep interfaces simple
- Question every element
- Simple solutions over complex
Evaluation Criteria:
- No unnecessary features
- Minimal complexity
- Each element justified
- Simple solutions preferred
Common Issues:
- CRITICAL: Feature bloat, too many competing features
- MINOR: Complex solutions where simple works
- MINOR: Unjustified elements
27. Paradox of the Active User
Principle: Users don't read manuals, they jump right in.
Application:
- Design for immediate use
- Progressive disclosure, not tutorials
- Contextual help, not manuals
- Discoverable features
Evaluation Criteria:
- No forced tutorials
- Features discoverable without instructions
- Clear visual affordances
- Just-in-time guidance
Common Issues:
- CRITICAL: Long mandatory tutorials
- CRITICAL: Essential features requiring instructions
- CRITICAL: No visual affordances
28. Pareto Principle (80/20 Rule)
Principle: 80% of effects from 20% of causes.
Application:
- Focus on most-used features
- Optimize common tasks
- Don't let edge cases drive design
- Prioritize by usage
Evaluation Criteria:
- Common actions prominently placed
- Primary features emphasized
- Edge cases don't dominate
- Usage-based prioritization
Common Issues:
- CRITICAL: Common actions not prominent
- MINOR: All features given equal weight
- MINOR: Edge cases driving design
29. Parkinson's Law
Principle: Work expands to fill available time.
Application:
- Set time limits when appropriate
- Create urgency for time-sensitive tasks
- Don't let tasks drag indefinitely
- Clear deadlines/expectations
Evaluation Criteria:
- Time constraints for time-sensitive tasks
- Urgency indicators when needed
- Clear completion expectations
Common Issues:
- MINOR: No time expectations for tasks
- MINOR: Missing urgency for time-sensitive actions
30. Tesler's Law (Conservation of Complexity)
Principle: Every system has irreducible complexity.
Application:
- Identify inherent complexity
- Decide: UI complexity or system complexity
- Don't oversimplify to point of confusion
- Progressive disclosure for complex features
Evaluation Criteria:
- Essential complexity preserved
- Appropriate UI vs system complexity balance
- Not oversimplified
- Progressive disclosure available
Common Issues:
- CRITICAL: Hiding essential complexity, making tasks impossible
- CRITICAL: Oversimplification causing confusion
- MINOR: Technical complexity exposed unnecessarily
How to Use This Skill
For Design Evaluation
When evaluating a design:
- Identify the context - What type of interface? (Dashboard, form, landing page, mobile app)
- Consider relevant laws - Not all 30 apply to every design
- Look for violations - Check against evaluation criteria
- Classify severity:
- CRITICAL: Fundamentally breaks usability, accessibility, or user trust
- MINOR: Polish issues, optimization opportunities
- Explain why - Connect issue to psychological principle
- Suggest fixes - Concrete, actionable improvements
For Design Decisions
When making design choices:
- Consider the user's mental model
- Apply relevant laws proactively
- Balance competing principles (simplicity vs functionality)
- Test assumptions - Laws guide but don't replace user testing
- Iterate based on real user feedback
Communication Framework
When discussing UX with others:
For designers:
- Use principle names, they're familiar
- Focus on application, not theory
- Show examples, not just rules
For developers:
- Connect to implementation (button sizes, response times)
- Explain why, not just what
- Provide specific thresholds/numbers
For stakeholders:
- Connect to business impact (conversion, satisfaction, support costs)
- Use simple language
- Show before/after comparisons
Evaluation Priority Matrix
Always address CRITICAL issues first:
- Touch targets <44px
-
7 choices without categorization/defaults
- No visual hierarchy
- Labels far from inputs
- Navigation >9 items uncategorized
- Hidden essential information
- Actions producing unexpected results
- Oversimplified to point of unusability
Then address MINOR issues:
- Inconsistent spacing
- Too many colors/fonts
- Missing smart defaults
- Suboptimal CTA placement
- No progress indicators
- Overly decorative elements
Context-Specific Applications
Mobile vs Desktop
- Mobile: Fitts's Law critical (44px minimum), thumb zones important
- Desktop: Can use smaller targets (32px), hover states available
Forms
- Priority laws: Proximity (labels), Chunking (grouping), Miller's Law (field count), Postel's Law (input validation)
Navigation
- Priority laws: Miller's Law (item count), Jakob's Law (conventions), Serial Position (important items), Choice Overload
Dashboards
- Priority laws: Selective Attention (hierarchy), Chunking (grouping), Cognitive Load (density), Common Region (cards)
E-commerce
- Priority laws: Choice Overload, Hick's Law, Von Restorff (CTA), Peak-End (checkout), Flow
FigJam/Boards
- Relevant: Chunking, Miller's Law, Proximity, Hierarchy, Common Region
- Less relevant: Fitts's Law (no buttons), Doherty (no loading), Jakob's Law (no UI conventions)
Remember
- Laws are guidelines, not absolute rules
- Test with real users - laws inform, testing validates
- Context matters - consider your specific users and use case
- Balance is key - sometimes laws conflict, use judgment
- Simplicity wins - when in doubt, simpler is usually better
These laws are grounded in psychology and research, but human behavior is complex. Use them to make informed decisions, then validate with real users.
