# UX Principles Reference

> **How to use this file:** Attach it alongside your design files when asking Claude for a review. Claude will use the principles below as an evaluation framework — checking which ones are well-applied, which are violated, and where opportunities exist to improve the design.

---

## How to Analyze a Design Using This Document

When reviewing a design, evaluate it against each relevant principle below. For each principle:
- Identify where the design **follows** it
- Identify where the design **violates** it
- Suggest a **concrete fix** for each violation

Not every principle will apply to every screen. Focus on the ones most relevant to the context.

---

## Part 1 — Laws & Psychological Principles

---

### Zeigarnik Effect

**Definition:** People remember uncompleted or interrupted tasks better than completed ones.

**What to check:**
- Are incomplete tasks or profiles surfaced to re-engage users?
- Is progress persistence used to return users to where they left off?
- Are incomplete states used ethically to motivate completion rather than to create anxiety?
- Is clear progress indication provided so users are motivated by proximity to completion?

---

### Law of Proximity

**Definition:** Objects near each other tend to be perceived as belonging together.

**What to check:**
- Are related elements placed close together, and unrelated elements spaced further apart?
- Does spacing accurately reflect the logical relationships between content?
- Could any unintended groupings be created by poor spacing choices?

---

### Parkinson's Law

**Definition:** Any task will inflate to fill the time available for its completion.

**What to check:**
- Does the design place reasonable constraints on time-intensive tasks (e.g. form length, checkout steps)?
- Is autofill, smart defaults, or pre-population used to reduce unnecessary user effort?
- Can the time required to complete key tasks be reduced through design decisions?

---

### Cognitive Load

**Definition:** The amount of mental resources required to understand and interact with an interface.

**What to check:**
- Is there unnecessary information, decoration, or UI chrome adding extraneous cognitive load?
- Does the interface require users to hold too much information in mind at once (intrinsic load)?
- Are distracting or irrelevant elements present that compete with the core task?
- Can any steps, fields, or decisions be eliminated without loss of function?

---

### Serial Position Effect

**Definition:** Users best remember the first and last items in a series, and are most likely to forget items in the middle.

**What to check:**
- Are the most important actions or navigation items placed at the beginning or end of lists and nav bars?
- Are the least critical items placed in the middle of sequences?
- In long lists or menus, is the most important item given a position that works in its favor?

---

### Postel's Law

**Definition:** Be liberal in what you accept, and conservative in what you send.

**What to check:**
- Does the interface accept flexible, varied input formats (e.g. phone numbers with or without spaces, dates in multiple formats)?
- Is user input translated into the required format rather than rejected and returned with an error?
- Is the output the system presents clean, precise, and consistent regardless of how messy the input was?
- Are field constraints and validation boundaries clearly communicated before users make mistakes?

---

### Mental Model

**Definition:** A compressed internal model of how a system works, built from prior experience and applied to new situations.

**What to check:**
- Does the interface align with the mental models users are likely to bring from analogous products or real-world experiences?
- Are metaphors and interaction patterns chosen that map to familiar concepts?
- Where a new model must be introduced, is sufficient guidance provided?
- Does user research inform whether the design matches actual user expectations?

---

### Fitts's Law

**Definition:** The time to acquire a target is a function of the distance to and size of the target.

**What to check:**
- Are interactive elements (buttons, links, inputs) large enough to tap or click easily?
- Is there sufficient spacing between touch targets to prevent accidental activation?
- Are frequently used actions placed in positions that are easy to reach (e.g. bottom of screen for mobile, near the cursor's natural resting position)?
- Are small or hard-to-click targets present for important actions?

---

### Pareto Principle

**Definition:** Roughly 80% of effects come from 20% of causes.

**What to check:**
- Are the most frequently used features and actions given the most prominent placement?
- Has design effort been concentrated on the tasks and flows that the majority of users will actually use?
- Are rare or advanced features accessible but not competing with primary use cases?

---

### Law of Uniform Connectedness

**Definition:** Elements that are visually connected are perceived as more related than elements with no connection.

**What to check:**
- Are related items connected through lines, shared color, enclosing shapes, or other visual connectors?
- Is connectedness used deliberately to show hierarchy or relationships between content?
- Does any use of visual connection inadvertently imply a relationship that isn't real?

---

### Aesthetic-Usability Effect

**Definition:** Users often perceive aesthetically pleasing design as design that's more usable.

**What to check:**
- Does the visual design create a positive first impression?
- Could aesthetic appeal be masking usability issues that would go unnoticed in testing?
- Is visual polish being used as a substitute for genuine usability, rather than complementing it?

---

### Chunking

**Definition:** A process by which individual pieces of information are broken down and grouped together into meaningful wholes.

**What to check:**
- Is related content visually grouped together?
- Are large blocks of information broken into smaller, scannable sections?
- Is there a clear hierarchy that helps users process content in logical steps?
- Do visual separators, spacing, and groupings reflect the underlying relationships between content?

---

### Peak-End Rule

**Definition:** People judge an experience based primarily on how they felt at its most intense point and at its end — not on the average of the whole experience.

**What to check:**
- Are the highest-stakes or most emotionally significant moments in the flow designed with special care?
- Does the final step of key flows (e.g. order confirmation, onboarding completion) end on a positive note?
- Are negative peaks (errors, wait times, friction points) minimized or softened?
- Is the emotional quality of the ending of each key journey considered explicitly?

---

### Hick's Law

**Definition:** The time it takes to make a decision increases with the number and complexity of choices.

**What to check:**
- Is the number of choices at any decision point kept to the minimum necessary?
- Are complex tasks broken into smaller, sequential steps?
- Is a recommended or default option highlighted to guide users?
- Is progressive disclosure used to hide advanced options until they are needed?
- Has simplification gone too far, abstracting away options users legitimately need?

---

### Law of Prägnanz

**Definition:** People perceive and interpret ambiguous or complex images as the simplest form possible, as it requires the least cognitive effort.

**What to check:**
- Are UI elements and icons reduced to their simplest, most recognizable forms?
- Is the overall visual composition clean, or are there competing elements creating unnecessary complexity?
- Do users have to work to interpret any visual elements, or are meanings immediately apparent?

---

### Working Memory

**Definition:** A cognitive system that temporarily holds and manipulates information needed to complete tasks, limited to roughly 4–7 chunks for 20–30 seconds.

**What to check:**
- Are users required to remember information from one screen or state to apply it in another?
- Is critical information carried forward across steps rather than requiring recall?
- Does the design favor recognition over recall (visible options over memorized commands)?
- Are visited states and previous selections surfaced to reduce memory burden?

---

### Goal-Gradient Effect

**Definition:** The tendency to approach a goal increases as proximity to the goal increases.

**What to check:**
- Does the design provide clear, visible progress indicators for multi-step tasks?
- Is there any artificial or earned progress shown early in a process to motivate completion?
- Do users receive positive reinforcement as they get closer to completing a task?
- Are incomplete tasks or profiles surfaced with clear indicators of remaining steps?

---

### Occam's Razor

**Definition:** Among solutions that achieve the same goal, the one with fewest assumptions and least complexity should be preferred.

**What to check:**
- Can any element, step, field, or feature be removed without diminishing the core function?
- Is every element on the screen earning its presence?
- Has the design reached the point where nothing can be removed — rather than just where nothing can be added?

---

### Selective Attention

**Definition:** The process of focusing attention only on a subset of stimuli in an environment — usually those related to one's goals.

**What to check:**
- Does the visual hierarchy guide users toward the most important content and actions?
- Is there content that visually resembles advertising (banner blindness risk)?
- Are there competing changes or animations that may distract attention from the primary action?
- Are significant changes in the interface made visually prominent to avoid change blindness?

---

### Law of Common Region

**Definition:** Elements sharing an area with a clearly defined boundary are perceived as a group.

**What to check:**
- Are related elements visually contained within a shared region (card, panel, bordered section)?
- Is background color or border used consistently to signal grouping?
- Could any groups of elements be made clearer by adding or adjusting a containing boundary?

---

### Cognitive Bias

**Definition:** A systematic error in thinking or judgment that influences perception and decision-making, often through mental shortcuts built from past experience.

**What to check:**
- Are there patterns in the design that might exploit or inadvertently trigger biases (e.g. confirmation bias, anchoring, defaults)?
- Does the design nudge users toward choices in a transparent and ethical way?
- Are default states and pre-selections chosen thoughtfully, given that users often accept them without scrutiny?

---

### Jakob's Law

**Definition:** Users spend most of their time on other products. They prefer your interface to work the same way as those they already know.

**What to check:**
- Does the design follow established platform conventions (navigation patterns, icon meanings, form behavior)?
- Are familiar interaction patterns used wherever possible, rather than novel ones for their own sake?
- When deviating from convention, is there a strong justification and a clear learning path for users?
- If a redesign is being evaluated, is there a transition path that eases users away from the old model?

---

### Von Restorff Effect (Isolation Effect)

**Definition:** When multiple similar objects are present, the one that differs most from the rest is most likely to be remembered.

**What to check:**
- Are the most important actions (primary CTA) visually distinct from secondary actions?
- Is visual emphasis used sparingly, so that differentiated elements truly stand out?
- Does emphasis rely only on color, excluding users with color vision deficiencies?
- Could any visually distinctive elements be mistaken for ads (causing users to ignore them)?

---

### Flow

**Definition:** The mental state of full immersion and energized focus during an activity, achieved when challenge and skill are in balance.

**What to check:**
- Does the interface match task difficulty to the user's likely skill level?
- Is there unnecessary friction or interruption that breaks concentration?
- Does the system provide clear, timely feedback so users always know what they've accomplished?
- Are features and content surfaced progressively to avoid overwhelming users while keeping them engaged?

---

### Tesler's Law (Law of Conservation of Complexity)

**Definition:** Every system has an irreducible amount of complexity. It cannot be eliminated — only shifted between the system and the user.

**What to check:**
- Has complexity been absorbed by the system (through smart defaults, automation, validation) rather than pushed onto the user?
- Is there inherent complexity in the task that cannot be simplified away, and has the design handled it gracefully?
- Is the design built for real users rather than an idealized rational user who reads documentation?

---

### Doherty Threshold

**Definition:** Productivity soars when a computer and its users interact at a pace under 400ms — ensuring neither has to wait on the other.

**What to check:**
- Is system feedback provided within 400ms of user actions?
- Are loading states, progress indicators, or animations present to acknowledge longer operations?
- Does the design use perceived performance techniques (e.g. skeleton screens, optimistic UI) to reduce the feeling of waiting?
- Are progress bars or status indicators used during longer processes?

---

### Choice Overload

**Definition:** The tendency for people to get overwhelmed when presented with a large number of options.

**What to check:**
- Is the number of options on the screen appropriate, or does it create decision paralysis?
- Where comparison is needed, are items presented side-by-side to make evaluation easier?
- Are search, filtering, or other narrowing tools available when many options exist?
- Is there a featured or recommended option to reduce the burden of choosing?

---

### Miller's Law

**Definition:** The average person can only keep approximately 7 (±2) items in working memory at once.

**What to check:**
- Are lists, navigation items, and option sets kept to a manageable number?
- Is content organized into chunks to reduce the number of items users must hold in mind simultaneously?
- Are short-term memory demands minimized by carrying key information across screens rather than requiring users to remember it?

---

### Law of Similarity

**Definition:** The human eye tends to perceive similar elements as a group, even when they are separated.

**What to check:**
- Do elements that share a function look similar (consistent color, shape, size, style)?
- Are interactive elements (links, buttons, inputs) visually differentiated from non-interactive content?
- Could any visual similarity create confusion by implying a relationship that doesn't exist?

---

### Paradox of the Active User

**Definition:** Users never read manuals — they start using software immediately, even at the cost of efficiency.

**What to check:**
- Is the interface navigable without reading any documentation?
- Are tooltips, inline help, and contextual guidance available at the moment of need?
- Does the design support self-discovery, so users can learn by doing rather than by reading?
- Is onboarding progressive, revealing complexity only as users are ready for it?

---

## Part 2 — Usability Heuristics

---

### Heuristic 1 — Visibility of System Status

**Definition:** The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

**What to check:**
- Does every user action receive a timely response from the system?
- Are loading, processing, saving, and error states clearly communicated?
- Does the user always know where they are within a flow or hierarchy?
- Are state changes (selected, active, disabled, completed) visually communicated?

---

### Heuristic 2 — Match Between System and the Real World

**Definition:** The design should speak the users' language, using words, concepts, and conventions familiar to them — not internal jargon.

**What to check:**
- Is the language used one that the target user would immediately understand?
- Do icons, metaphors, and labels map to real-world concepts the user already knows?
- Does information appear in a natural and logical order, consistent with user expectations?
- Has internal terminology, developer language, or system-speak crept into the UI?

---

### Heuristic 3 — User Control and Freedom

**Definition:** Users often perform actions by mistake and need a clearly marked way to exit or undo without going through an extended process.

**What to check:**
- Are undo and redo available for reversible actions?
- Is there a clear Cancel or Back option at every step of a multi-step flow?
- Can users exit modals, overlays, and processes without losing significant progress?
- Are exits labeled clearly and placed where users expect them?

---

### Heuristic 4 — Consistency and Standards

**Definition:** Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

**What to check:**
- Are labels, terminology, and interaction patterns used consistently throughout the product?
- Does the design follow platform conventions (e.g. OS-level patterns for mobile)?
- Does it follow industry conventions for the product category?
- Are visual treatments for the same type of element (e.g. all primary buttons, all error states) identical across the product?

---

### Heuristic 5 — Error Prevention

**Definition:** The best designs prevent problems from occurring in the first place — by eliminating error-prone conditions or confirming before commitment.

**What to check:**
- Are high-risk or irreversible actions protected by a confirmation step?
- Do constraints guide users toward valid input before errors occur?
- Are smart defaults set to the most common or safest option?
- Are obvious slips (typos, accidental taps) anticipated and guarded against?

---

### Heuristic 6 — Recognition Rather Than Recall

**Definition:** Minimize the user's memory load by making elements, actions, and options visible. Users should not have to remember information from one part of the interface to another.

**What to check:**
- Are options and actions visible in context, rather than requiring users to remember them?
- Are previously visited states, selections, or inputs surfaced when relevant?
- Is contextual help available at the point of need, rather than only in a separate documentation section?
- Does the interface avoid requiring users to memorize sequences or codes?

---

### Heuristic 7 — Flexibility and Efficiency of Use

**Definition:** Shortcuts and accelerators — hidden from novice users — may speed up interaction for expert users. The design should cater to both.

**What to check:**
- Are power-user shortcuts available (keyboard shortcuts, gestures, bulk actions)?
- Can frequent tasks be customized or streamlined for returning users?
- Does the interface serve both new and experienced users without sacrificing either?
- Are advanced options accessible without cluttering the experience for beginners?

---

### Heuristic 8 — Aesthetic and Minimalist Design

**Definition:** Interfaces should not contain irrelevant or rarely needed information. Every extra element competes with relevant content and reduces its relative visibility.

**What to check:**
- Does every element on the screen serve a clear purpose in the current context?
- Is there any content, decoration, or UI chrome that could be removed without loss?
- Are visual elements focused on supporting the user's primary goal?
- Does the design communicate hierarchy through restraint rather than addition?

---

### Heuristic 9 — Help Users Recognize, Diagnose, and Recover from Errors

**Definition:** Error messages should be in plain language, precisely indicate the problem, and constructively suggest a solution.

**What to check:**
- Are error messages written in plain, human language (not error codes or technical terms)?
- Do error messages clearly state what went wrong?
- Do error messages suggest a concrete next step or solution?
- Are errors visually prominent and positioned near the source of the problem?

---

### Heuristic 10 — Help and Documentation

**Definition:** Even if the system should be usable without documentation, it may be necessary to provide help. It should be easy to search, focused on the user's task, and list concrete steps.

**What to check:**
- Can the interface be used effectively without external documentation?
- Where help is needed, is it available in context at the moment of need?
- Is help content focused on tasks rather than features?
- Is help searchable, concise, and written in plain language?

---

*This document is intended as a design review framework. When sending designs for analysis, include this file and describe the context: who the users are, what task the screen supports, and any known usability concerns you want examined.*