This is the complete collection of Laws of UX 2.0 compiled by Jon Yablonski — it translates decades of experimental conclusions from cognitive psychology (many derived from classic studies in the 1950s–1980s) into design principles you can directly apply when building interfaces. Most of these are not original to Yablonski; they are well-established laws “borrowed” from psychology and human factors engineering (Fitts, Hick, Miller, Kahneman…). Yablonski’s contribution is reframing them specifically for digital product design.
How to read it: Don’t memorize the 28 laws as 28 isolated facts. They are all repeatedly hammering home the same set of underlying truths— the human brain has limited processing power, attention is scarce, people rely on shortcuts to make judgments, navigate by habit, and perception matters more than objective fact. They are grouped into 6 clusters by these underlying intents:
- Cognitive Load(The brain has limited processing power): Subtract ruthlessly, and shift complexity from the user to the system.
- Decision Friction(Choices have a cost): More options make decisions slower and more anxiety-inducing; wording skews judgment; users don’t read manuals.
- Gestalt Grouping(The brain automatically groups things): Use spacing, borders, color, and similarity to control “what looks like it belongs together.”
- Time Perception and Motivation(Perception > Fact): The felt experience of speed, progress, and endings determines satisfaction more than actual time spent.
- Familiarity and Resilience(Users come with old habits): Work the same way other products do, and accept all kinds of input leniently.
- Attention and Aesthetics(The eye automatically filters): Highlight what matters, avoid ad-like styling, and remember that attractive things make people think things work better.
This set of laws is highly intertextual with NNGroup’s 19 UX Principles / Maxims (You Are Not the User / Keep It Simple / Less Is More / Why Beats What / It Depends … clustered into 5 major themes + mindsets and counterexamples): The slogans are mantras to “remind the team not to drift in mindset,” while the laws are rules “backed by psychology experiments that can predict user behavior.” Jargon is explained in-line when it first appears.
1. Cognitive Load: The brain has limited processing power, which forces you to subtract
Underlying truth: Working memory (the brain’s “buffer” that temporarily holds information needed for the current task) can only hold 4–7 chunks of information at a time, and clears them in about 30 seconds. The more crowded an interface is, the harder it is for users to scan, remember, and make decisions — error rates go up, efficiency drops, and people get frustrated. Every law in this cluster essentially answers one question:How to make users think less.
| Law (EN / CN) | Definition | One-line mindset |
|---|---|---|
| Cognitive Load Cognitive Load | The total amount of mental effort required to understand and operate an interface | There are two types: intrinsic load (difficulty inherent to the task itself) + extraneous load (extra difficulty added by useless decoration/interference); the part you can cut is the extraneous part |
| Working Memory Working Memory | The brain system that temporarily stores and processes information for the current task | Small capacity (4–7 chunks), short retention (seconds-scale); don’t make users “remember something from the previous page to fill out the next page” |
| Miller's Law Miller's Law | The average person can hold 7±2 items in working memory | The key point is “chunking,” not the number 7; don’t use the “magic number seven” as an excuse to cut navigation items |
| Chunking Chunking | Breaking scattered information apart and regrouping it into small units by meaning | Put related things together, separate unrelated things with spacing, sort by importance — three tricks to make information fit how the brain processes it |
| Tesler's Law Tesler's Law (Law of Conservation of Complexity) | Every system has a core amount of complexity that cannot be eliminated; it can only be shifted between the user and the system | Let the system carry more, the user less (autofill, smart suggestions); don’t offload a problem an engineer could fix in a week onto millions of users wasting one minute every day |
| Occam's Razor Occam's Razor | When multiple solutions can solve the same problem, choose the one with the fewest assumptions / the simplest one | Start from the plainest version, cut until “cutting any more would break it”; watch out for “complexity bias” (mistaking complexity for cleverness) |
| Law of Prägnanz Law of Prägnanz (Law of Simplicity) | People automatically interpret complex/ambiguous images as the simplest possible form (because it uses the least mental effort) | Simple shapes are easier to understand and remember; actively simplify complex data/graphics |
Why the brain “overloads”: Working memory is like a sticky note with only a few slots. When the slots fill up, people work slower, miss details, make mistakes easily, and subjectively feel “tired/annoyed.” In 1956, psychologist George Miller found that young adults can remember a maximum of about 7 items in the short term (regardless of how much information each item contains) — but what he really cared about was not “7,” it was chunking: writing 19195552743 as 1-919-555-2743, the total amount of information doesn’t change, but the memory burden drops sharply. Remember:Miller's Law is not “navigation can’t have more than 7 items”— navigation is “browsing,” not “memorizing.” It can have dozens of items, as long as they are grouped, have white space, and are separated by lines (Nike’s website has many navigation items but they are clearly grouped, which actually makes it usable).
Why “Conservation of Complexity” is the master switch for this cluster (Tesler's Law): Sending an email must have a sender + a recipient; that complexity can’t be deleted — but modern email clients autofill the sender, guess recipients from contacts, and use Smart Compose to finish your sentences, shifting complexity from the user to the system backend. Amazon Go stores swallowed the inherently complex task of “checkout” entirely into the system using computer vision + AI, so users can just take items and leave. Tesler once convinced Apple to accept “software can be more complex as long as the user has it easier” with one line:“If millions of users waste one minute every day solving a problem an engineer could fix in a week, you are making users pay for the engineer’s convenience.”
Counterexample (oversimplification is also a trap): The other half of Tesler's Law is “you can’t cut necessary complexity for the sake of simplicity.” Reddit’s repeated redesigns “removed more than they added,” cleaning up the interface but hollowing out functionality; when users couldn’t find what they wanted, they left for more specialized alternatives. Hick's Law also reminds us:Too few options actually make things harder to find— simplicity ≠ hiding things away.
Six tricks to reduce load (pushing down extraneous cognitive load): ① Cut useless decoration (every element consumes mental effort); ② Use familiar design patterns (users don’t have to learn new things); ③ Reduce things users have to do (default options, autofill from past input); ④ Reduce choices (especially in navigation/forms/dropdowns); ⑤ Display options centrally instead of hiding them (if hidden, users think “that’s all there is”); ⑥ Make content readable (font/font size/white space).
Decision guide (PM version): Every time you add something to an interface, first ask “Is this helping the user complete the core task, or adding extraneous cognitive load?”; every time a flow feels cumbersome, first ask “Can the system carry this complexity, instead of dumping it on the user?”. Form fields, confirmation popups, double entry — automate what you can instead of making users do it manually.
2. Decision Friction: Choices have a cost
Underlying truth: Every additional option increases decision time and psychological burden; moreover, people rely heavily on “mental shortcuts” when making judgments, get swayed by how options are presented, and are too lazy to read any manual. This cluster is about:Don’t dump all the hard work of “making a decision” on the user.
| Law (EN / CN) | Definition | One-line mindset |
|---|---|---|
| Hick's Law Hick's Law | Decision time increases logarithmically with the number and complexity of options | More options = slower decisions; breaking into steps, recommending defaults, and progressive onboarding all reduce friction |
| Choice Overload Choice Overload | Too many options make people confused, anxious, and give up (also called the “paradox of choice”) | Don’t just blindly cut options; instead,arrange/recommend them better (guidance > restriction) |
| Cognitive Bias Cognitive Bias | Systematic patterns of deviation in judgment that affect how we see the world and make decisions | The same data, phrased differently, can change the conclusion; before important decisions, deliberately reframe, add context, and slow down |
| Paradox of the Active User Paradox of the Active User | Users never read manuals; they jump right in and start using (even if they hit walls because of it) | Don’t expect users to watch tutorials; embed help directly into use (tooltips / progressive onboarding) |
Why more options make you slower (Hick's Law): In 1952, Hick and Hyman found that reaction time increases logarithmically with the number of options — formula RT = a + b·log₂(n+1) (n is the number of options). Intuition check: Netflix found users spend an average of 18 minutes picking something to watch, because too many choices cause indecision, so it uses “Trending Now / Popular” to help you narrow down quickly. The Apple TV remote keeps very few buttons, pushing complexity to the TV-side menus that unfold step by step, so it feels effortless to pick up. Three ways to apply it:Break into steps (slice complex tasks into simple steps),Highlight recommended options (Notion’s new user checklist teaches step by step, Calendly’s three-tier plan table comparison),Progressive onboarding (Slack uses bots, only showing “send a message” first, then revealing advanced features once you’ve learned that).
Why Choice Overload is a double-edged sword (Choice Overload): The famous jam experiment in 2000 — when a supermarket displayed 24 varieties of jam, many people looked but few bought; when it displayed 6 varieties, more people actually paid. But don’t go to extremes: research also shows people don’t like having only one option (can’t compare), and three options are easier to decide between than two (the “decoy effect”); Starbucks has hundreds of combinations and is still popular. The conclusion is Barry Schwartz’s line:"When freedom has no limits at all, people instead get lost." The key is not to cut down to the absolute minimum, but rather Choice Architecture: just as supermarkets place healthy food in prominent spots, arrange and recommend options so people can choose more easily (Netflix recommends based on your taste, instead of dumping a pile of movies on you to get lost in).
Why wording can bias even experts (Cognitive Bias): NNGroup ran an experiment with over 1000 UX practitioners — for the same test result, comparing "4 out of 20 people could not find the search function" (negative framing) against "16 out of 20 people found it" (positive framing), people who saw the negative framing were 31% more likely to say it needed a redesign. This is the Framing Effect, which comes from Kahneman's "System 1 (fast intuition) / System 2 (slow thinking)": System 1 is fast but biased; we cannot avoid it, we can only stay alert at critical moments. Three ways to counter it:Hold back from jumping to conclusions(testing 20 people took 40 hours; spending a few extra minutes to state results clearly is worth it),Add context before making decisions(if data is insufficient, dare to say "I'm not sure yet"),Deliberately switch frames to look again(look at both success rate vs failure rate, percentages vs absolute numbers). A side note:16/20=80% don't take conclusions from such small samples seriously; statistically the true success rate could lie between 58%–93%.
Why users don't read manuals (Paradox of the Active User): In 1987 Rosson and Carroll found that new users simply don't read the manual, they jump right in, even if they hit obstacles along the way. Ironically, spending a little time learning first saves more time in the long run — but people's immediate motivation always overrides long-term rationality. That's why product tours that make you click through a string of intro popups before using the product get skipped by most people. The correct approach is to embed help into the usage flow: tooltips (lightweight tips that appear on hover), progressive onboarding (Slack's Slackbot), starter templates/checklists (Notion — learn while using, come back to check anytime), without interrupting the instinct to "get started right away".
Decision guidance (PM version): When facing "should we add this option / this step", first think of Hick's Law — will it slow down the main path? When operations/bosses say "users will definitely read the announcement/tutorial", push back with the Paradox of the Active User — they won't; build guidance into the flow. When facing data arguments in review meetings, watch out for the Framing Effect — require that the same set of data be presented from both positive and negative sides, in both relative and absolute terms, before drawing conclusions.
III. Gestalt Grouping: The human brain automatically "sorts things into groups"
Underlying fact:Gestalt psychology (Gestalt, German for "whole/configuration")found that the human brain is innately driven to automatically organize scattered visual elements into meaningful wholes — you don't need to teach it; it judges on its own "these few belong to one group, those few to another". The designer's job is to leverage this automatic grouping instinct so that the interface's visual grouping = the logical grouping you intend to convey. Gestalt has a set of classic principles (proximity, similarity, common region, connectedness, closure, symmetry, continuity); the ones below are the most commonly used in UX.
| Law (EN / CN) | Definition | One-sentence core principle |
|---|---|---|
| Law of Proximity Principle of Proximity | Elements that are close to each other are perceived as a group | Spacing is a grouping signal: keep related items close, separate unrelated items with distance |
| Law of Similarity Law of Similarity | Elements that look alike (color/shape/size) are perceived as the same category | Use the same style for the same function; don't reuse styles across different functions; clickable items must look clearly different from plain text |
| Law of Common Region Law of Common Region | Elements that share a clearly bounded region are grouped together | Draw a box / give a block a background color, and you can forcibly group a set of things together (cards, posts) |
| Law of Uniform Connectedness Principle of Uniform Connectedness | Elements with visual connections (lines/borders/same color) have a stronger perceived relationship than unconnected ones | The strongest grouping method; use lines/arrows/unified color schemes to explicitly connect related content |
Why spacing is the most cost-effective grouping tool (Proximity): A row of evenly spaced list items on the left = "they have equal importance and belong to one group"; a larger gap between two groups on the right = the brain automatically reads them as "two separate groups". Google Search results rely on spacing to both improve readability and make each result its own information group.Counterexample: On a CA.gov form, the "Add" button was placed next to a bunch of unrelated buttons, too far from the main form body, so users couldn't find it at all.Responsive trap: Proximity relationships change across screens — Transport for London placed two pieces of low-emission zone information together on desktop, but on mobile automatic layout split them far apart, and the sense of grouping was lost. So responsive design must specifically check "after changing screen size, are things that should be together still together?"
Why similar = same category, different = different category (Similarity): Elements with consistent color/shape/size/icons are perceived as belonging together. Used well: Asos uses rounded boxes for subcategories and right-angled boxes for filters, so you can tell the two sets of functions apart at a glance; every clickable item has an arrow, so even if text styles differ you know "these are all clickable". Used poorly: Tribute.co used the same red for decorative icons and clickable buttons, so users mistakenly thought the icons were clickable; on Martha Stewart's page a video was too similar in size and shape to an adjacent ad, so users treated it as an ad and ignored it (this also hits "banner blindness" in the sixth cluster).The most frequent takeaway: On web pages clickable links/buttons must look clearly different from ordinary text, otherwise users can't find them.
Why a single box can forcibly group things (Common Region & Uniform Connectedness): Common region is "stronger" than proximity — even if elements are not that close, as long as they are enclosed in the same bounded region (drawn frame / given background color), they are treated as a group. On Facebook, the like and comment controls for each post sit within the post boundary, so they are clearly distinguished from other posts; the print dialog uses borders to split options into three groups — "printer/page range/copies" — so you don't confuse the "1" in the bottom-left (page number) with the "1" in the bottom-right (number of copies). Uniform connectedness is the strongest of all grouping methods: the three lights of a traffic signal are physically separate, but they are connected by the same housing boundary + share a consistent color scheme, so you perceive them as one whole.Counterexample (too much of a good thing): The mobile version of Backcountry drew boxes around every group of filters, which was actually unnecessary — appropriate spacing (proximity) is enough, and borders instead make the interface cluttered.So the priority is: if white space (proximity) can solve it, don't draw boxes; boxes are a reinforcement for when "spacing isn't enough".
Why the brain "fills in the blanks" (Closure / Symmetry / Good Figure): Gestalt has several other principles that explain logo design —Closure: even if corners are left open you can mentally fill it in as a complete square (the WWF panda and IBM's striped logo both rely on this);Symmetry: the brain prefers symmetry; the two buttons on the Google homepage are nearly mirror images;Good Figure / Prägnanz: a cluster of red dots will be seen as a single overall diamond shape (this is in fact the Law of Prägnanz).Rubin's Vase — when the background is white you see a vase, when the background is black you see two faces — is the classic demonstration of figure/ground multistability.
Decision guidance (PM version): When checking whether an interface "is grouped correctly", don't ask the designer "does it look good", ask "will users treat these two unrelated things as a group, or miss an element they should see?" Responsive mockups must always recheck proximity relationships at mobile sizes. Save borders/background colors where you can; try white space first.
IV. Time Perception and Motivation: Perception matters more than facts
Underlying fact: Users' judgments of "how fast it is, how much further there is to go, how good the whole experience was"are almost always subjective perceptions, not real data. A system that responds in 399ms and one that responds in 401ms feel worlds apart; how good an experience is, what you remember is only the peak and the end. This cluster covers how to shape perception (in a positive sense) to make a product feel faster, more motivating, and more memorable.
| Law (EN / CN) | Definition | One-sentence core principle |
|---|---|---|
| Doherty Threshold Doherty Threshold | When a system responds within <400ms, neither human nor machine waits on the other, and productivity surges | If you truly can't hit 400ms, use "perceived performance" to get past it (skeleton screens/progress bars/instant feedback) |
| Flow Flow State | A mental state of complete immersion, focus, and enjoyment (can multiply productivity by 5) | Entered when difficulty matches ability; clear next step + instant feedback + no distractions are the three prerequisites |
| Goal-Gradient Effect Goal-Gradient Effect | The closer you are to a goal, the stronger your motivation to rush toward it | Give a "virtual head start" to create a sense of progress (car wash cards with 2 stamps pre-applied), and people will be more motivated to finish |
| Zeigarnik Effect Zeigarnik Effect | Unfinished tasks are remembered better than finished ones | Progress bars, unread red dots, and auto-playing the next episode all use the "tension of the unfinished" to pull you back |
| Parkinson's Law Parkinson's Law | Work expands to fill the time available for its completion | The more space/time you give, the easier it is for things to bloat; set limits proactively (auto-fill, limit steps, timeouts) |
| Peak-End Rule Peak-End Rule | Memory of an experience ≈ peak moment + end moment, not the average of the whole experience | Focus on polishing "the most satisfying moment" and "the final moment"; negative peaks are more damaging |
| Serial Position Effect Serial Position Effect | In a sequence of information, people remember the beginning and the end best | Put key items at the start and end, secondary items in the middle; place key navigation actions at the far left/far right |
Why 400ms is a line (Doherty Threshold): In 1982, Doherty at IBM found that when system response is fast enough that human and computer don't wait on each other,productivity and satisfaction both rise significantly, and the tipping point is 400 milliseconds. Beyond that, users start to feel delay, get distracted, and have their rhythm broken. But what if you truly can't hit it? — rely on Perceived Performance (making people "feel it's fast" rather than actually being fast): Skeleton Screens (show gray placeholder frames first, fill in data when it arrives, used by Instagram), blurred progressive image loading (show a low-res blurry version first then swap to high-res), progress bars (even inaccurate ones ease anxiety), instant feedback (Instagram shows "Posted" instantly when you post a comment, while the backend processes it slowly in the background).Reverse tactic: Sometimes deliberately adding delay actually increases trust — Google's privacy checkup is intentionally a little slower + paired with explanatory copy, to make you feel "the system is working carefully", so you're more willing to set things thoughtfully.
Why flow can 5× efficiency (Flow): Flow (proposed by Csikszentmihalyi in 1975) is the state of complete immersion when "difficulty exactly matches your ability" — too hard causes anxiety, too easy causes boredom. Three design prerequisites:① The next step is obvious(after archiving an email in Superhuman it jumps straight to the next one, no need to think "what do I do next"; after archiving in Gmail it returns to the inbox, forcing a new decision every time and breaking flow),② Instant feedback with no distractions(response <100ms, minimal interface so nothing else distracts),③ Balance of challenge and skill(give users goals of appropriate difficulty). Flow and the Doherty Threshold are tied together — slow responses kick people right out of flow.
Why a "virtual head start" works (Goal-Gradient + Zeigarnik): These two are the golden pair of motivation design, evidenced by that 2006 car wash card experiment —
- Group A: 10-slot card, 2 stamps pre-applied (20% progress), requiring 8 more washes
- Group B: 8-slot card, 0 stamps, also requiring 8 washes
- Result:34% of Group A completed redemptions, only 19% of Group B
It was still 8 washes either way, but Group A was more motivated because of the "sense of progress". This is the combination of Goal-Gradient Effect(the closer to the finish line the faster you run, originating from Hull's 1934 rat maze experiment — rats ran faster as they neared the cheese) + Zeigarnik Effect(unfinished tasks loop in your mind, creating psychological tension that urges you to complete them). Applications are everywhere: LinkedIn's "profile completeness progress bar", unread message red dots, Netflix auto-playing the next episode (reinforcing the "not finished" tension to keep you binging), coffee shop stamp cards (purchase frequency rises noticeably before the 9th stamp). Uber also layers on boredom avoidance(showing animations while you wait so you don't get bored) + operational transparency(telling you how ETA is calculated, to make you feel it's trying hard).
Why time expands (Parkinson's Law): "Work expands to fill the time available for its completion" — give a designer a large screen and they can't help stuffing things onto it (bloated interface); give users unlimited time to fill out a form and the process drags. The countermeasure is Proactively set limits: progress indicators that urge users forward, auto-save/session timeouts, cutting unnecessary steps, and limiting the number of steps in guided flows (Trello lets users get started with core features immediately, no lengthy onboarding).
Why only peaks and endings are remembered (Peak-End Rule): Kahneman's 1993 cold water experiment — Group A kept their hand in 14°C water for 60 seconds; Group B kept their hand in 14°C water for 60 seconds then kept it in for 30 more seconds at 15°C(longer and more unpleasant), yet Group B was more willing to repeat the experience, because the slight warming at the end improved their memory of it. Therefore, when polishing the experience you should focus your fire on two points: the most satisfying peak (Spotify Wrapped annual recap, Duolingo completion animation + mascot, TurboTax post-filing celebration illustration) and a graceful ending (don't pop up sales pitches at the finish, use humor to defuse 404 pages).Key warning: negative peaks are far more damaging than positive ones — the Maytag appliance website has complex, easy-to-mistap navigation; the strong frustration users feel after a few failed attempts will dominate their impression of the entire brand, and even smooth experiences later can't salvage it. Therefore eliminate negative peaks first, then build positive peaks. The supporting tool is the User Journey Map: map out the user's emotional curve across the entire journey to find where peaks and troughs lie.
Why the middle is easiest to forget (Serial Position Effect): Ebbinghaus found that when memorizing a sequence of information,the beginning (Primacy Effect) and the end (Recency Effect) are remembered best, and the middle is most easily lost. So place key items at the start and end, tuck secondary items in the middle; put the most important navigation actions at the far left/far right; Apple landing pages put core selling points at the start, details in the middle, and the purchase button at the end. This law and the "end" of the Peak-End Rule, plus the "recency effect" among cognitive biases, actually share the same root — they all come from the brain's preference for "most recent/first encountered".
Decision guidance (PM version): When evaluating experiences, don't just look at "average load time in seconds, average steps to completion"; look for peaks and endings — is the most satisfying moment satisfying enough, is the ending clean enough, are there hidden negative peaks (errors/dead links/complex forms)? When building growth/retention features, prioritize using a "sense of progress" (goal gradient + Zeigarnik effect) rather than simply sending out discounts. If you truly can't optimize speed, roll out perceived performance first (skeleton screens/progress bars).
V. Familiarity and Resilience: Users Come With Old Habits
Underlying fact: Users spend the vast majority of their time on other people's products, and will directly apply the habits (mental models) they formed there to your product. Designing in line with those habits = zero learning cost for users; designing against them = high cognitive load, churn. At the same time, real user input is always messier than you think (all kinds of name formats, extra-long text, weird images), and the system must be tolerant enough to handle it.
| Law (EN / CN) | Definition | One-sentence core principle |
|---|---|---|
| Jakob's Law Jakob's Law | Users spend most of their time on other websites, so they expect your website to work the same way as others | Follow common conventions (search bar at the top, shopping cart in the corner); think through the cost before innovating |
| Mental Model Mental Model | A person's simplified internal model of "how a system works" | Design must match users' existing wayfinding habits; mismatches cause confusion and errors |
| Postel's Law Postel's Law (Robustness Principle) | Be liberal in what you accept, conservative in what you send | Tolerantly accept all kinds of messy input (name formats/extra-long text/all screen sizes), and make your own output standardized and reliable |
Why familiarity is gold (Jakob's Law): Proposed by Jakob Nielsen (co-founder of NNGroup) in 2000 — users already have a ready-made set of expectations in their heads for "how websites should work", and don't want to re-learn every time they visit a new site. That's why e-commerce sites all look similar (search bar at the top, fixed menu positions, standard checkout flow); it's not a lack of creativity, it's because this pattern is proven to be more usable; Etsy follows the familiar "find item → add to cart → checkout" flow, so it feels intuitive right away.Counterexample (the cost of changing too much): Snapchat's major 2018 redesign merged "Stories" and "Chat" into one place all at once, with no gradual transition and insufficient testing; as a result users were furious, large numbers moved to Instagram, and ad impressions/revenue/user counts all dropped.Positive example (giving users choice): Google/YouTube redesigns allow users to voluntarily switch to the new interface, try it first, and switch back to the old version if they don't like it — this kind of gradual transition effectively eases mental model misalignment.
Power Law of Learning — hard data supporting Jakob's Law: When people repeat the same task, completion time decreases following a power law(appears as a straight line on a logarithmic scale); the more they practice the faster they get, but improvements diminish. This means: the more consistent your interface is with others, the more users can reuse the proficiency they built elsewhere, effectively starting at the high point of an existing learning curve; if you change it, they get knocked back to the start of the curve to climb again. Therefore ask yourself three questions before innovating: ① After users learn it, will the new design deliver clear benefits? If not, don't change it. ② Will users stick with learning it all the way? If they might give up halfway, don't change it. ③ Can you make learning faster (increase usage opportunities/simplify)? Acceptable scenarios for innovation: you have loyal users (e.g. Apple), the brand is worth users spending time to learn, the product is used at high frequency every day, or the innovation is already widely adopted (e.g. swipe left to delete on phones).
Why match mental models (Mental Model): A mental model = the simplified model of how a user thinks something works (proposed by Craik in 1943). Because designers know their own product so well, they feel "everything is easy to understand", but ordinary users have limited models and are easily confused or make errors — this is the "model gap" between designers and users.Counterexamples: shopping carts that default to checked shipping insurance requiring you to manually uncheck it (doesn't match online shopping habits), trying to close a popup with the browser back button only to jump back two pages, the University of Michigan Library having two search boxes (one for library administration, one for academic materials) leaving people unsure which to use.So talk to users more before building new features, figure out how they "think it should work", instead of making assumptions. (Mental models and Jakob's Law are two sides of the same coin: Jakob's Law says "users' mental models come from other websites".)
Why be liberal in what you accept (Postel's Law): Proposed by Jon Postel when writing the TCP protocol as the Robustness Principle: "Be strict with yourself, tolerant with others" — strictly follow rules when sending data, and be tolerant of imperfect but clear input when receiving data. This later spread to UX: people aren't always focused/rule-abiding when using products, so design must anticipate all kinds of behaviors rather than assuming users follow a script. Implementation: forms accept name orders from different cultures (Western given name first, Asian family name first), don't use overly strict format restrictions; Face ID removes the need to type a password (tolerant on the input side);responsive design and Progressive Enhancement (ensure basic functionality works for everyone first, then add enhancements like voice/animation where supported)are both manifestations of "tolerantly receiving all kinds of devices/internet speeds".Design Resiliency You also need to guard against a host of placeholder data pitfalls: test copy that's too short (in practice "Settings" might become "Application Preferences" and burst the button), user avatars of inconsistent sizes, tag counts ranging from 3 to 25, English translated to Italian after internationalization potentially becoming 300% longer, layouts breaking when users enlarge fonts —test with the longest copy + extreme data volumes from the start, expose problems early and fix them early.
Decision guidance (PM version): When proposing "let's build an interaction different from everyone else's", first pull out Jakob's three questions to calculate the cost of innovation — unless you have loyal users/high-frequency usage/clear benefits, follow conventions. During design reviews specifically check "does this match the habits users bring from elsewhere?"; don't test prototypes with clean, short fake data, flood them with extra-long text, huge numbers of tags, and weird images to stress-test it.
VI. Attention and Aesthetics: The Eye Filters Automatically, Good Looks Make People Misjudge Usability
Underlying fact: User attention is a scarce resource; the brain automatically filters out things that "look irrelevant"(including real content that looks like ads); at the same time, people judge products by appearance within 50 milliseconds, and good-looking ones are assumed to be more usable. This cluster covers how to grab attention, avoid blind spots, and use aesthetics to add points (but don't be fooled by it).
| Law (EN / CN) | Definition | One-sentence core principle |
|---|---|---|
| Selective Attention Selective Attention | Focus only on a small subset of stimuli relevant to the current goal, automatically ignoring the rest | Beware of "banner blindness" and "change blindness"; don't make important content look like ads, don't let key changes happen silently |
| Von Restorff Effect Von Restorff Effect (Isolation Effect) | Among a group of similar elements, the one that stands out is remembered best | If you want users to remember/click something, make it stand out visually (but don't overuse contrast) |
| Aesthetic-Usability Effect Aesthetic-Usability Effect | Good-looking designs are perceived as more usable | Aesthetics are a real competitive advantage; but good looks can cover up problems and contaminate usability testing, so stay alert |
| Pareto Principle Pareto Principle (80/20 Rule) | Roughly 80% of outcomes come from 20% of causes | Pour resources into that critical 20% (high-frequency features/high-occurrence problems); but don't only build 20% |
Why users "turn a blind eye" to ads (Selective Attention):Banner Blindness — users automatically ignore any content that looks like an ad, even if it contains useful information. In eye-tracking research, when 26 people looked for "how to remove a bottle label", they almost completely ignored the top and right ad zones (even when there was useful information there); on one page an ad zone took up 25% of the layout but received only 0.8% of fixations.Two killers: ① Banner blindness — if navigation/buttons look like ads, they'll be ignored outright (so don't make functional elements look like ads, don't place them near ad zones);② Change Blindness — if an interface change has no obvious cue, users won't notice it (in the Aldiko Android app, when tapping the hamburger menu, the top-right icon changed from "overflow menu" to "search" and users didn't notice at all). Psychological root:Cocktail Party Effect(being able to focus on one person at a noisy party) — the brain acts like a filter with limited energy, only allocating processing power to current goals (Kahneman 1973).
Why make key elements "stand out" (Von Restorff Effect): Also called the Isolation Effect — among a set of similar elements, the one that is most different is remembered best (von Restorff 1933). So if you want users to remember/click something, make it stand out visually: the red "Delete" button + warning icon in account deletion confirmation boxes (both helps people who want to delete find it, and prevents people who don't from accidental taps), Material Design's Floating Action Button (FAB, a high-contrast anchor fixed to the bottom-right), Notion's pricing table labeling "Plus" as "Most popular" with darker, larger styling, the high-contrast "Sign up" button on Dropbox's pale pages.Four takeaways/boundaries: ① Emphasize with restraint (multiple elements competing for attention = none stand out + visual fatigue); ② Don't stand out so much that it looks like an ad (otherwise it will be ignored by banner blindness); ③Don't rely on color alone(colorblind/low-vision users can't tell the difference; WCAG requires body text contrast ≥4.5:1, add non-color cues like borders/patterns/shapes); ④ Use motion carefully (users with vestibular disorders/epilepsy/migraines are sensitive to it).
Why good looks = perceived usability (Aesthetic-Usability Effect): The 1995 Hitachi ATM experiment — 252 people rated 26 interface layouts, and the results showed that "perceived usability" and "perceived attractiveness"were highly correlated, while correlation with actual usability was weak. That is, "even if a design isn't functionally easier to use, as long as it looks good, people think it works better". The mechanism is Kahneman's System 1:first impressions of a website form in just 50 milliseconds, and visual appeal is the main deciding factor; good looks put people in a better mood, make them more forgiving, more trusting. From Braun (Dieter Rams' "less but better") → Apple, this lineage turned aesthetics into a competitive advantage.But it's a double-edged sword — it contaminates usability testing: when testing the FitBit website, users ran into obstacles at every turn but still gave high scores, only gushing about "nice color palette, pretty photos", preventing researchers from finding real problems.Good looks only make people tolerate small problems, they can't cover up big problems(the Arcadis website's large background image looks stunning at first, but becomes annoying as you use it).Ways to work around it:① Before testing, make it clear that "you are not the designer / I want to hear your honest feedback";② Don't ask "Do you like it?", ask behavioral questions — "Was it easy to find what you were looking for?" "Is the content clear?" "What could be better?";③ Watch whether users' behavior matches their evaluations(praising the interface out loud while getting stuck repeatedly = aesthetics are masking problems).
Why: Focus on the critical 20% (Pareto Principle):80% of outcomes come from 20% of causes (Pareto found that 80% of Italy's wealth belonged to 20% of its population). This distribution appears everywhere in UX: when 222 people selected the most important tasks out of 94 options, the top 15 tasks (16%) received 41% of the votes; among 33 usability issues on a car rental website, 9 issues (27%) caused 72% of negative reviews; Microsoft fixed 20% of high-frequency bugs and eliminated 80% of crashes. Therefore, invest resources in the critical 20% (high-frequency features, high-occurrence problems, high-traffic pages). However,the real goal is "reducing effort", not "reducing clicks"— the core formula is:Total effort = Effort per operation × Operation frequency. High-frequency features must be fast (primary actions prominent, visible with one click, provide shortcuts for power users like Superhuman/Figma); low-frequency features can be placed deeper (overflow menus, settings pages, appear only in specific scenarios).Counterexamples / Boundaries:① Don't take "reducing clicks" to an extreme — Reddit removed more features than it added until the product felt hollow; ClickUp's top bar has 7 layers taking up 40% of the screen; feature overload makes it impossible for users to find things;② Don't only build that 20%— optimizing only the critical parts long-term will stagnate the product and ignore non-critical links that have cumulative value. Pareto is a "priority tool", not an "exclusion tool".
Decision-oriented guidance (PM version):If you want users to see/click something, ask "Does it stand out enough among a group of similar elements?" (Von Restorff effect) + "Will it be ignored as an ad?" (banner blindness). When usability tests are full of praise like "the interface looks really nice", don't get excited — it is very likely that aesthetics are masking problems, so follow up with detailed behavioral questions. Use the 80/20 rule to find the critical 20% when prioritizing, but reserve some resources to look after the long tail, don't hollow out the product.
String all 28 laws together in one sentence:The brain has limited computing power (Cluster 1) → so decisions must be effortless, don't pile up options or force users to read manuals (Cluster 2); the eyes automatically group elements (Cluster 3) → use spacing/borders/similarity to align visual grouping with logical grouping; what users actually remember and feel satisfied with is perception— speed, progress, peaks, and endings (Cluster 4); they come with habits formed elsewhere (Cluster 5) → follow conventions and accept inputs tolerantly; attention is scarce and easily biased by appearance (Cluster 6) → highlight key elements, avoid ad-like patterns, use aesthetics well but don't put blind faith in it.All 28 laws ultimately point to the same sentence: don't make users think more, exert more effort, or get lost more than necessary.
Derived from Jon Yablonski's *Laws of UX* 2.0 (Will's Design Notes, mixed Chinese-English layout + translation annotations), containing approximately 28 laws/psychological effects, each original entry includes definitions, origins, cases, applications, and counterexamples. This wiki restructures them into clusters based on 6 underlying intents, and removes images (original file paths contain spaces/Chinese characters and have been gitignored; key diagrams have been converted into text descriptions). It is highly intertextual with NNGroup UX slogans, see 19 NNGroup UX Principles / Golden Quotes (You Are Not the User / Keep It Simple / Less Is More / Why Beats What / It Depends … Clustered by 5 Themes + Mindsets/Counterexamples); images/original files are retained in the sources folder.
Sources and related materials
- 19 NNGroup UX Principles / Golden Quotes (You Are Not the User / Keep It Simple / Less Is More / Why Beats What / It Depends … Clustered by 5 Themes + Mindsets/Counterexamples)
- NNGroup Persuasive Design and Behavioral Psychology (Six Principles of Persuasion · Cognitive Biases · Attention Limits · Information Foraging and Wayfinding · Mental Models · Trust Hierarchy · Self-Determination Motivation · Privacy and Ethical Boundaries · 26 Articles)