From ui-ux
The 30 Laws of UX from lawsofux.com — psychological principles governing how users perceive, interact with, and remember interfaces. Apply these when designing components, pages, flows, and interactions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-ux:laws-of-uxThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Reference: [lawsofux.com](https://lawsofux.com)
Reference: lawsofux.com
Fitts's Law — Time to reach a target = f(distance, size). Make primary CTAs large and close to where the cursor already is. Small, distant buttons slow users down. Touch targets: minimum 44x44px.
Hick's Law — Decision time increases with number and complexity of choices. Limit options to 5-7 per group. Use progressive disclosure for advanced options. Provide smart defaults to eliminate unnecessary decisions.
Miller's Law — Working memory holds 7 (±2) items. Chunk information into digestible groups. Don't display more than 5-9 navigation items, table columns, or filter options without grouping.
Occam's Razor — The simplest solution is usually best. Among designs that solve the problem equally well, choose the one with fewest elements. Remove until it breaks, then add one back.
Pareto Principle — 80% of effects come from 20% of causes. Identify the 20% of features users rely on most and optimize those. Don't give equal visual weight to rarely-used actions.
Law of Proximity — Elements near each other are perceived as a group. Use spacing to create visual relationships. Related form fields should be closer together than unrelated sections.
Law of Similarity — Similar-looking elements are perceived as related. Consistent styling (color, shape, size) signals that elements share function. Break similarity to distinguish different actions.
Law of Common Region — Elements sharing a bounded area are perceived as grouped. Cards, bordered sections, and background color changes create visual containers that organize content.
Law of Uniform Connectedness — Visually connected elements are perceived as more related. Lines, arrows, shared backgrounds, and borders create relationships stronger than proximity alone.
Law of Prägnanz — People interpret complex visuals in the simplest way possible. Minimize visual noise. Ambiguous layouts force cognitive work — make the structure immediately obvious.
Von Restorff Effect (Isolation Effect) — The element that differs from the rest is most remembered. Use contrast to make primary CTAs stand out. A single colored button among gray ones draws the eye. Use sparingly — if everything stands out, nothing does.
Serial Position Effect — Users best remember the first and last items in a series. Place the most important navigation items at the beginning and end. Middle items get forgotten.
Chunking — Break information into meaningful groups. Phone numbers (555-867-5309), credit card fields (4 groups of 4), step indicators (3 of 5). Chunked information is easier to scan, remember, and process.
Working Memory — The cognitive scratchpad holds information temporarily during tasks. Minimize what users must remember between steps. Show context, keep form labels visible, display selections persistently.
Selective Attention — Users focus on stimuli relevant to their current goal and ignore everything else. Don't rely on users noticing peripheral changes. Use motion, color, or modals to break selective attention when critical.
Zeigarnik Effect — Incomplete tasks are remembered better than completed ones. Progress indicators, partially-filled profiles, and "2 of 5 steps complete" motivate completion. Show users what's unfinished.
Peak-End Rule — Experiences are judged by their peak intensity and ending. Design delightful moments at completion points (success animations, confetti, encouraging copy). A strong ending redeems a mediocre middle.
Jakob's Law — Users expect your site to work like sites they already know. Follow established patterns (hamburger = menu, heart = favorite, cart icon = shopping). Innovate on content, not conventions.
Aesthetic-Usability Effect — Beautiful interfaces are perceived as more usable. Users forgive minor usability issues when design is polished. But beauty can mask real problems — test with real users, not just screenshots.
Doherty Threshold — System response under 400ms keeps users in flow. Optimistic UI updates, skeleton loaders, and instant transitions prevent the perception of waiting. If something takes >400ms, show progress.
Flow — The state of full immersion in an activity. Minimize interruptions (unnecessary modals, permission requests). Match challenge to skill level. Provide clear goals and immediate feedback.
Goal-Gradient Effect — Motivation increases as users approach a goal. Progress bars accelerate near completion. Show "almost done" states. Pre-fill the first step of onboarding to create momentum.
Paradox of the Active User — Users skip instructions and learn by doing. Don't gate features behind tutorials. Design interfaces that are safe to explore. Use inline hints and contextual help, not upfront manuals.
Cognitive Bias — Systematic errors in thinking affect all users. Design to counteract biases: anchoring (first price seen sets expectations), confirmation bias (users seek information confirming existing beliefs), bandwagon effect (social proof influences decisions).
Cognitive Load — Total mental effort required to use an interface. Reduce by: eliminating unnecessary choices, using familiar patterns, providing defaults, showing only relevant information, and maintaining consistency.
Mental Model — Users' internal understanding of how a system works. Match your UI to users' existing mental models. File/folder metaphors, shopping cart patterns, and timeline views work because users already understand them.
Tesler's Law (Conservation of Complexity) — Every system has irreducible complexity. The designer's job is to absorb complexity so the user doesn't have to. Spend an extra week in development to save millions of users a minute each.
Choice Overload — Too many options paralyze users. Limit visible choices. Use filters, search, and progressive disclosure to manage large option sets. Curate recommended/popular options.
Postel's Law (Robustness Principle) — Be liberal in what you accept, conservative in what you send. Accept varied input formats (dates, phone numbers). Display output consistently and predictably.
Parkinson's Law — Tasks expand to fill available time. Set deadlines and constraints in UI flows. Time-limited offers, countdown timers, and focused single-task views create productive urgency.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub connorbell133/ui-ux-plugins --plugin ui-ux