Logos52
wiki / Design / Universal Principles and Design Techniques — Master Scorecard

Universal Principles & Design Techniques — Master Scorecard

resource-catalog updated 2026-06-30

Universal Principles & Design Techniques — Master Scorecard

Every principle from Universal Principles of Design (200) and every rule from Refactoring UI (50), scored on the Human vs AI Capability Lens: two independent 1–5 axes — H (human ownership) and AI (machine executability) — plus two relevance columns, B (Build = Tsumugu) and L (Learning = your growth), with a derived Zone.

HumanBuildAILearning

This page · profile of the catalog itself.

Zones (derived from H × AI): Own — yours to make, agents can’t. Augment — both high; the agent drafts, you judge and own. Delegate — hand to the agent. Low-leverage — neither pulls hard.

Grades are dated judgment calls (last-audited), graded against the current frontier; the AI column drifts up as models improve. Detail on the axes and facets: Human vs AI Capability Lens; the source extraction: Design Two-Track Extraction.

Own it — the human moat

High human ownership, agents can’t carry it. Sorted by Human, then Learning.

PrincipleHAIBLZoneGloss
Ackoff’s Law5125OwnIt is better to do the right things wrong than the wrong things right
Box’s Law5225OwnAll models are wrong, but some are useful
Causal Reductionism5225OwnA tendency to fixate on one cause when solving problems, ignoring the reality of multiple
Chesterton’s Fence5235OwnSeek to understand why things exist the way they do before changing or removing them
Confirmation Bias5225OwnA tendency to favor information that confirms pre-existing views
Creator Blindness5235OwnThe inability of a creator to see fundamental flaws in their creation
Dunning-Kruger Effect5225OwnA tendency for unskilled people to overestimate their competence and performance
First Principles5235OwnThings we know for certain to be true and that are not derived from anything else
Gall’s Law5245OwnAll successful complex things begin as simple things and become complex through iteration
Knowing-Doing Gap5135OwnThe divide that exists between knowing how to do something and actually doing it
Leverage Point5235OwnA place within a system where small changes produce big effects
Maslow’s Hammer5235OwnThe tendency to approach problems based on the tools and expertise at hand
Nirvana Fallacy5235OwnThe tendency to disregard good solutions because they fall short of perfection
Ockham’s Razor5245OwnGiven a choice between functionally equivalent designs, the simplest design should be sele
Perverse Incentive5225OwnAn incentive that unintentionally worsens the problem it seeks to solve
Process Eats Goal5235OwnA situation in which people follow a process that undermines the greater goal
Satisficing5245OwnA problem-solving strategy that seeks a satisfactory versus optimal solution
Selection Bias5325OwnA bias in the way evidence is collected that distorts analysis and conclusions
Status Quo Bias5225OwnA preference for things as they are, even when a change would improve things
Streetlight Effect5225OwnA bias to search for things where it is easiest
Sunk Cost Effect5235OwnThe tendency to keep investing in an endeavor because of past investments in that endeavor
Survivorship Bias5225OwnThe tendency to overemphasize things that survive a selection process
Back of the Dresser5244OwnAll parts of a design, visible and nonvisible, should be held to the same standard of qual
Paradox of Great Ideas5124OwnGreat ideas are indistinguishable from crazy ideas when first introduced
User-Centered vs. User-Driven Design5244OwnA focus on understanding and meeting user needs versus simply implementing user requests

Augment — the collaboration sweet spot

Both axes high: the agent drafts and scales, you judge and own.

PrincipleHAIBLZoneGloss
Storytelling5445AugmentEvoking imagery, emotions, and understanding through the presentation of events
Framing5435AugmentA method of presenting choices in specific ways to influence decision-making and judgment
Mental Model4454AugmentA mental simulation of how things work
Desire Line4444AugmentTraces of use or wear that indicate preferred methods of interaction
Error, Design4444AugmentA design-caused action or inaction that yields an unintended or undesirable result
Error, Human4444AugmentAn action, or omission of action, that leads to an unintended result
Five Hat Racks4444AugmentA metaphor representing the five ways information can be organized
Iteration4444AugmentDesigning things in phases, each phase building on the last, until a desired result is ach
Minimum-Viable Product4444AugmentA version of a product with just enough features to evaluate customer demand
Nudge4444AugmentA method of influencing behavior without restricting options or changing incentives
Prototyping4444AugmentBuilding low-fidelity models to explore ideas and deeply understand problems
Rosetta Stone4444AugmentA strategy for communicating novel information using elements of common understanding
Anchoring4434AugmentThe subconscious influence of reference points on decision-making and judgment
Cost-Benefit4435AugmentValue is a function of the costs of acquisition and use versus the benefits provided
Feedback Loop4434AugmentA cycle in which output feeds back into a system as input, changing subsequent output
Kano Model4433AugmentA model for understanding customer needs and then prioritizing design features accordingly
Pareto Principle4435AugmentA small percentage of variables in any large system is responsible for most of its behavio
Priming4434AugmentActivating specific concepts in memory to influence subsequent thoughts and behaviors
Root Cause4435AugmentThe key initiating cause in a sequence of events that leads to an event of interest
Stickiness4434AugmentProperties of information that increase recognition, recall, and voluntary sharing

Delegate — hand to the agent

High AI, low human ownership. Sorted by Build relevance.

PrincipleHAIBLZoneGloss
Alignment2552DelegateThe arrangement of elements along a common axis based on their edges, centers, or areas
Constraint3553DelegateLimiting the actions that can be performed to simplify use and prevent error
Feedback3553DelegateInformation about status or performance used for confirmation, decision-making, and improv
Proximity2552DelegateThe brain automatically assumes elements that are close together are related
Similarity2552DelegateThe brain automatically assumes elements that look alike are related
Spacing & sizing scale (base 16, =>25% jumps)2552DelegateNon-linear scale; no two values closer than ~25%.
px/rem, never em, for the type scale2551Delegateem compounds on nesting and drops off the scale.
Type scale, hand-picked & non-linear2552DelegateConstrained set; round any modular fractions.
Line length 45-75 characters2552Delegate~20-35em for readable measure.
Weight floor 400; two weights2552Delegate400/500 body, 600/700 emphasis.
Contrast minimums (WCAG 4.5:1 / 3:1)2553DelegateFlip contrast when white-on-color goes too dark.
Accessibility3453DelegateThings should be designed to be usable, without modification, by as many people as possibl
Affordance3453DelegateThe physical characteristics of a thing that influence its function and use
Color Theory3452DelegateA body of practical knowledge regarding the application and mixing of colors
Consistency3453DelegateUsability and learnability improve when similar things have similar meanings and functions
Forgiveness3453DelegateDesigns should help people avoid errors and protect them from harm when they do occur
Legibility3452DelegateThe visual clarity of text, generally based on size, typeface, contrast, line length, and
Mapping3453DelegateA correspondence in layout and movement between controls and the things they control
Performance Load3453DelegateThe greater the effort required to complete a task, the less likely the task will be compl
Progressive Disclosure3453DelegateA method of managing complexity in which only necessary or requested information is displa
Readability3454DelegateThe ease with which text can be understood, based on the complexity of words and sentences
Recognition over Recall3454DelegateMemory for recognizing things is better than memory for recalling things
Signal-to-Noise Ratio3454DelegateThe ratio of relevant to irrelevant information
Visibility3453DelegateLocate important controls, information, and items to be clearly visible
Define value systems; choose by elimination3453DelegatePick from fixed sets; guess then compare neighbours.

Pure human moat (Human 5)

The standouts — candidates for their own page.

PrincipleHAIBLZoneGloss
Gall’s Law5245OwnAll successful complex things begin as simple things and become complex through iteration
Ockham’s Razor5245OwnGiven a choice between functionally equivalent designs, the simplest design should be sele
Satisficing5245OwnA problem-solving strategy that seeks a satisfactory versus optimal solution
Storytelling5445AugmentEvoking imagery, emotions, and understanding through the presentation of events
Chesterton’s Fence5235OwnSeek to understand why things exist the way they do before changing or removing them
Creator Blindness5235OwnThe inability of a creator to see fundamental flaws in their creation
First Principles5235OwnThings we know for certain to be true and that are not derived from anything else
Framing5435AugmentA method of presenting choices in specific ways to influence decision-making and judgment
Knowing-Doing Gap5135OwnThe divide that exists between knowing how to do something and actually doing it
Leverage Point5235OwnA place within a system where small changes produce big effects
Maslow’s Hammer5235OwnThe tendency to approach problems based on the tools and expertise at hand
Nirvana Fallacy5235OwnThe tendency to disregard good solutions because they fall short of perfection
Process Eats Goal5235OwnA situation in which people follow a process that undermines the greater goal
Sunk Cost Effect5235OwnThe tendency to keep investing in an endeavor because of past investments in that endeavor
Ackoff’s Law5125OwnIt is better to do the right things wrong than the wrong things right
Box’s Law5225OwnAll models are wrong, but some are useful
Causal Reductionism5225OwnA tendency to fixate on one cause when solving problems, ignoring the reality of multiple
Confirmation Bias5225OwnA tendency to favor information that confirms pre-existing views
Dunning-Kruger Effect5225OwnA tendency for unskilled people to overestimate their competence and performance
Perverse Incentive5225OwnAn incentive that unintentionally worsens the problem it seeks to solve
Selection Bias5325OwnA bias in the way evidence is collected that distorts analysis and conclusions
Status Quo Bias5225OwnA preference for things as they are, even when a change would improve things
Streetlight Effect5225OwnA bias to search for things where it is easiest
Survivorship Bias5225OwnThe tendency to overemphasize things that survive a selection process
Back of the Dresser5244OwnAll parts of a design, visible and nonvisible, should be held to the same standard of qual
User-Centered vs. User-Driven Design5244OwnA focus on understanding and meeting user needs versus simply implementing user requests
Rebuild interfaces from scratch (eye training)5144OwnMatching the original surfaces the invisible tricks.
Look for decisions you wouldn’t have made5144OwnCollect the unintuitive moves on designs you like.
Paradox of Great Ideas5124OwnGreat ideas are indistinguishable from crazy ideas when first introduced
Choose a personality5243OwnFont, color, radius, tone cohere to one character.
Wabi-Sabi5133OwnAn aesthetic style that emphasizes naturalness, simplicity, and subtle imperfection

Universal Principles — by category

Interaction & UI (48)

PrincipleHAIBLZoneGloss
Desire Line4444AugmentTraces of use or wear that indicate preferred methods of interaction
Error, Design4444AugmentA design-caused action or inaction that yields an unintended or undesirable result
Error, Human4444AugmentAn action, or omission of action, that leads to an unintended result
Five Hat Racks4444AugmentA metaphor representing the five ways information can be organized
Mental Model4454AugmentA mental simulation of how things work
Control4343OwnThe level of user control should be related to the proficiency and experience of the user
Constraint3553DelegateLimiting the actions that can be performed to simplify use and prevent error
Feedback3553DelegateInformation about status or performance used for confirmation, decision-making, and improv
Rule of Thirds3542DelegateA technique of composition in which a medium is divided into thirds
Accessibility3453DelegateThings should be designed to be usable, without modification, by as many people as possibl
Affordance3453DelegateThe physical characteristics of a thing that influence its function and use
Closure3442DelegateThe brain automatically completes recognizable forms when they are interrupted or incomple
Color Theory3452DelegateA body of practical knowledge regarding the application and mixing of colors
Comparison3443DelegateA method of highlighting relationships by depicting information in controlled ways
Consistency3453DelegateUsability and learnability improve when similar things have similar meanings and functions
Figure-Ground3442DelegateThe brain automatically makes elements objects of focus or background
Forgiveness3453DelegateDesigns should help people avoid errors and protect them from harm when they do occur
Iconic Representation3442DelegateThe use of pictorial images to improve recognition and recall
Legibility3452DelegateThe visual clarity of text, generally based on size, typeface, contrast, line length, and
Mapping3453DelegateA correspondence in layout and movement between controls and the things they control
Performance Load3453DelegateThe greater the effort required to complete a task, the less likely the task will be compl
Poka-Yoke3443DelegateA thing designed to prevent defects and errors
Progressive Disclosure3453DelegateA method of managing complexity in which only necessary or requested information is displa
Readability3454DelegateThe ease with which text can be understood, based on the complexity of words and sentences
Recognition over Recall3454DelegateMemory for recognizing things is better than memory for recalling things
Signal-to-Noise Ratio3454DelegateThe ratio of relevant to irrelevant information
Symmetry3442DelegateA property of similar or exact correspondence between the configuration of elements
Visibility3453DelegateLocate important controls, information, and items to be clearly visible
Entry Point3342Low-levA point of physical or attentional entry that sets the emotional tone for subsequent inter
Five Tenets of Queuing3322Low-levFive principles for improving the experience of waiting in lines
Learnability3344Low-levThe ease with which a new thing can be understood and productively used
Wayfinding3343Low-levThe process of using spatial and environmental information to navigate to a destination
Alignment2552DelegateThe arrangement of elements along a common axis based on their edges, centers, or areas
Confirmation2542DelegateA technique for preventing errors by requiring verification before actions are performed
Highlighting2542DelegateA technique for focusing attention on an area of text or image
Proximity2552DelegateThe brain automatically assumes elements that are close together are related
Similarity2552DelegateThe brain automatically assumes elements that look alike are related
Top-Down Lighting Bias2541DelegateA tendency to interpret objects as being lit from a single light source from above
Apparent Motion2431DelegateThe illusion of motion created when images are displayed in rapid succession
Common Fate2431DelegateThe brain automatically assumes elements moving in similar ways are related
Fitts’ Law2442DelegateThe time required to touch a target is a function of the target size and the distance to t
Good Continuation2431DelegateThe brain automatically assumes elements in motion continue in their established direction
Gutenberg Diagram2441DelegateA diagram that describes the pattern followed by the eyes when looking at a page of inform
Hick’s Law2442DelegateTime to make a decision increases as the number of decision options increases
Orientation Sensitivity2431DelegateCertain line orientations are more quickly and easily processed and discriminated than oth
Perspective Cues2431DelegateVisual properties that create the perception of depth and three-dimensionality
Uniform Connectedness2441DelegateThe brain automatically assumes elements connected by lines or boxes are related
WYSIWYG2442DelegateWhat a person sees in a design context should be what they get in a delivery context

Aesthetics & Form (26)

PrincipleHAIBLZoneGloss
Wabi-Sabi5133OwnAn aesthetic style that emphasizes naturalness, simplicity, and subtle imperfection
Aesthetic-Usability Effect4243OwnAesthetic things are perceived to be easier to use than ugly things
Archetypes, Psychological4223OwnPatterns that elicit a reflexive attentional or emotional response in humans
Progressive Subtraction4244OwnReducing the number of perceptible elements in a design over time
Propositional Density4243OwnThe number of independent meanings conveyed by a design
Horror Vacui3443DelegateA tendency to fill blank spaces with things rather than leaving spaces empty
Self-Similarity3432DelegateA property in which a thing is composed of similar patterns at multiple levels of scale
Anthropomorphism3322Low-levThe attribution of humanlike characteristics to nonhuman things
Color Effects3332Low-levThe cognitive and behavioral effects triggered by exposure to colors
Contour Bias3332Low-levA tendency to favor things with contoured features over angular or rectilinear features
Gloss Bias3332Low-levA preference for glossy versus dull objects People find glossy objects more interesting an
MAFA Effect3311Low-levThe average face of a local population is more attractive than any individual face
Mimicry3333Low-levCopying properties from familiar things in order to realize benefits of those properties
Uncanny Valley3333Low-levAbstract and realistic depictions of human faces are appealing but faces in between are no
Baby-Face Bias3212Low-levA tendency to see things with baby-faced features as having the characteristics of babies
Biophilia Effect3223Low-levA state of reduced stress and improved concentration resulting from nature views
Phonetic Symbolism3232Low-levThe meaning conveyed by the sounds of words
Prospect-Refuge3222Low-levA preference for environments where people can see without being seen
Savanna Preference3212Low-levA preference for savanna-like environments over other types of environments
Fibonacci Sequence2532DelegateA sequence of numbers that forms patterns commonly found in nature
Golden Ratio2532DelegateA ratio within the elements of a form, such as height to width, approximating 0
Aposematism2321Low-levThe use of conspicuous markings to grab attention and signal danger
Magic Triangle2321Low-levA triangular relationship between facial features that creates the illusion of sentience
Visuospatial Resonance2311Low-levA phenomenon in which different images are visible at different distances
Defensible Space2211Low-levAn environment designed to signal ownership and deter crime
Waist-to-Hip Ratio2211Low-levA preference for a particular ratio of waist size to hip size in men and women

Cognition & Perception (23)

PrincipleHAIBLZoneGloss
Framing5435AugmentA method of presenting choices in specific ways to influence decision-making and judgment
Causal Reductionism5225OwnA tendency to fixate on one cause when solving problems, ignoring the reality of multiple
Confirmation Bias5225OwnA tendency to favor information that confirms pre-existing views
Dunning-Kruger Effect5225OwnA tendency for unskilled people to overestimate their competence and performance
Status Quo Bias5225OwnA preference for things as they are, even when a change would improve things
Anchoring4434AugmentThe subconscious influence of reference points on decision-making and judgment
Priming4434AugmentActivating specific concepts in memory to influence subsequent thoughts and behaviors
Cognitive Dissonance4224OwnA state of mental discomfort due to incompatible attitudes, thoughts, and beliefs
Expectation Effects4234OwnChanges in perception or behavior resulting from personal expectations or expectations of
Habituation4234OwnRepeated exposure to a stimulus reduces the response to that stimulus
Inattentional Blindness4234OwnA failure to perceive an unexpected stimulus presented in clear view
Peak-End Rule4244OwnPeople remember and judge an experience based on its most intense moment and its end
Zeigarnik Effect4234OwnIncomplete or interrupted tasks are more likely to hold attention and be remembered
Appeal to Nature4114OwnThe tendency to believe natural things are inherently better than human-created things
Normal Distribution3424DelegateA bell-shaped curve formed by plotting the frequency of a variable within a population
von Restorff Effect3443DelegateThe most distinctive or isolated item in a set is the most remembered
Interference Effects3333Low-levThings that trigger conflicting thought processes, reducing reaction and thinking efficien
Threat Detection3322Low-levThreatening things are detected more efficiently than nonthreatening things
Freeze-Flight-Fight-Forfeit3113Low-levThe ordered, instinctive response to acute stress
Miller’s Law2443DelegateThe number of objects an average person can hold in working memory is 7± 2
Face Detection2321Low-levThe tendency to find or see human faces in objects and patterns
Number-Space Associations2332Low-levThe intuition that serial information is spatially organized by magnitude along an axis
Cathedral Effect2212Low-levHigh ceilings promote abstract thinking

Learning & Communication (9)

PrincipleHAIBLZoneGloss
Storytelling5445AugmentEvoking imagery, emotions, and understanding through the presentation of events
Rosetta Stone4444AugmentA strategy for communicating novel information using elements of common understanding
Stickiness4434AugmentProperties of information that increase recognition, recall, and voluntary sharing
Depth of Processing4225OwnThinking hard about a thing improves the likelihood that it can be recalled
Flow4235OwnA state of immersion so intense that awareness of the real world is lost
Inverted Pyramid3444DelegateThe presentation of information from most important to least important
Serial Position Effects3444DelegateThings at the beginnings and ends of sequences are more memorable than things in the middl
Mnemonic Device3325Low-levTechniques for making things more meaningful and memorable
Picture Superiority Effect3334Low-levPictures are remembered better than words

Strategy & Decision (40)

PrincipleHAIBLZoneGloss
Selection Bias5325OwnA bias in the way evidence is collected that distorts analysis and conclusions
Box’s Law5225OwnAll models are wrong, but some are useful
Chesterton’s Fence5235OwnSeek to understand why things exist the way they do before changing or removing them
Creator Blindness5235OwnThe inability of a creator to see fundamental flaws in their creation
First Principles5235OwnThings we know for certain to be true and that are not derived from anything else
Maslow’s Hammer5235OwnThe tendency to approach problems based on the tools and expertise at hand
Nirvana Fallacy5235OwnThe tendency to disregard good solutions because they fall short of perfection
Ockham’s Razor5245OwnGiven a choice between functionally equivalent designs, the simplest design should be sele
Process Eats Goal5235OwnA situation in which people follow a process that undermines the greater goal
Satisficing5245OwnA problem-solving strategy that seeks a satisfactory versus optimal solution
Streetlight Effect5225OwnA bias to search for things where it is easiest
Sunk Cost Effect5235OwnThe tendency to keep investing in an endeavor because of past investments in that endeavor
Survivorship Bias5225OwnThe tendency to overemphasize things that survive a selection process
User-Centered vs. User-Driven Design5244OwnA focus on understanding and meeting user needs versus simply implementing user requests
Ackoff’s Law5125OwnIt is better to do the right things wrong than the wrong things right
Knowing-Doing Gap5135OwnThe divide that exists between knowing how to do something and actually doing it
Paradox of Great Ideas5124OwnGreat ideas are indistinguishable from crazy ideas when first introduced
Cost-Benefit4435AugmentValue is a function of the costs of acquisition and use versus the benefits provided
Kano Model4433AugmentA model for understanding customer needs and then prioritizing design features accordingly
Minimum-Viable Product4444AugmentA version of a product with just enough features to evaluate customer demand
Pareto Principle4435AugmentA small percentage of variables in any large system is responsible for most of its behavio
Gates’ Rule of Automation4335OwnAutomation applied to an operation will magnify both its efficiencies and deficiencies
KISS4345OwnSimple designs work better and are more reliable than complex designs
Feature Creep4244OwnA continuous expansion or addition of new product features beyond the original scope
Form Follows Function4244OwnAesthetic considerations should be secondary to functional considerations
Hanlon’s Razor4214OwnNever attribute to malice what can be adequately explained by incompetence
Icarus Matrix4213OwnA 2 × 2 matrix representing the possible success- failure outcomes of a design iteration
Iron Triangle4234OwnA model that proposes three constraints for all projects: time, cost, and scope
Levels of Invention4213OwnA model that classifies inventions based on complexity, nonobviousness, and impact
MAYA4244OwnA strategy for determining the most commercially viable aesthetic for a design
Not Invented Here4234OwnA tendency to oppose ideas and innovations that originate outside of your social group
Paradox of Unanimity4214OwnExtreme agreement in a diverse population is more likely the result of error than of conse
Performance vs. Preference4234OwnIncreasing performance does not necessarily increase desirability
Scaling Fallacy4234OwnThe assumption that designs that work at one scale will work at smaller or larger scales
Uncertainty Principle4224OwnMeasuring things can change them, often making the results invalid
Clarke’s Laws4113OwnThree maxims that offer insights into the nature of innovation
Design by Committee4123OwnA design process based on consensus building, group decision-making, and extensive iterati
Faith Follows Function4123OwnIdeological and spiritual considerations should be secondary to functional considerations
Hierarchy of Needs3343Low-levA hierarchy of user-centered goals that a design must satisfy to achieve optimal success
Product Life Cycle3223Low-levThe common stages of life for products

Process & Systems (30)

PrincipleHAIBLZoneGloss
Back of the Dresser5244OwnAll parts of a design, visible and nonvisible, should be held to the same standard of qual
Gall’s Law5245OwnAll successful complex things begin as simple things and become complex through iteration
Leverage Point5235OwnA place within a system where small changes produce big effects
Feedback Loop4434AugmentA cycle in which output feeds back into a system as input, changing subsequent output
Iteration4444AugmentDesigning things in phases, each phase building on the last, until a desired result is ach
Prototyping4444AugmentBuilding low-fidelity models to explore ideas and deeply understand problems
Root Cause4435AugmentThe key initiating cause in a sequence of events that leads to an event of interest
Brown M&M’s4324OwnThe use of covert, embedded tests to verify that quality standards have been met
Reverse Salient4334OwnAn element that limits the overall performance of the system of which it is part
Archetypes, System4224OwnUniversal structures and resulting patterns of behavior found across system types
Brooks’ Law4224OwnFor certain types of projects, adding people to speed things up inadvertently slows them d
Conway’s Law4234OwnThe structure of an organization is expressed in the design of the things it produces
Don’t Eat the Daisies4234OwnThe fallacy that exhaustive requirements and specification documents lead to better design
Flexibility Tradeoffs4234OwnAs the flexibility of a design increases, the performance of the design decreases
Premature Optimization4244OwnMaking elements of a design efficient before they are recognized as important or even need
Garbage In – Garbage Out3434DelegateThe quality of output depends on the quality of input
Modularity3444DelegateManaging system complexity by dividing large systems into smaller, self-contained systems
Bus Factor3323Low-levThe number of team members who, if lost, would put a project in jeopardy
Factor of Safety3323Low-levThe design of a system beyond expected loads to offset unknowns and prevent failure
Maintainability3343Low-levThe ease with which a thing can be accessed, inspected, repaired, and serviced
No Single Point of Failure3333Low-levThe design of systems to be able to continue operating even when components fail
Redundancy3333Low-levUsing backup or fail-safe elements to maintain system performance in the event of failure
Swiss Cheese Model3334Low-levA model describing how risks combine to cause accidents and other bad outcomes
Weakest Link3323Low-levAn element designed to fail in order to protect more important elements from harm
Convergence3213Low-levA tendency for similar characteristics to evolve independently in similar environments
Testing Pyramid2442DelegateA multilayered framework to systematize testing and reduce defects
Abbe Principle2311Low-levMeasure things so that the measuring scale is aligned with the distance being measured
Development Cycle2332Low-levThe stages of product creation: requirements, design, development, and testing
Saint-Venant’s Principle2311Low-levLocal effects of loads on structures have negligible global effects
Structural Forms2312Low-levThere are three ways to create rigid things: solids, frames, and shells

Persuasion & Social (24)

PrincipleHAIBLZoneGloss
Perverse Incentive5225OwnAn incentive that unintentionally worsens the problem it seeks to solve
Nudge4444AugmentA method of influencing behavior without restricting options or changing incentives
Exposure Effect4333OwnThe more people are exposed to a thing, the more they like and trust it
Scarcity4323OwnThings become more desirable when they are in short supply or occur infrequently
Social Proof4333OwnWhen people don’t know how to act, think, or feel, they tend to copy others
Attractiveness Bias4213OwnA tendency to view attractive people as intelligent, competent, moral, and sociable
Death Spiral4213OwnA phenomenon in which a social organization persists in behaviors that lead to self-destru
Diffusion of Innovations4223OwnA theory describing how new things gain acceptance in a population over time
Groupthink4214OwnA decision-making phenomenon that occurs when group harmony is overprioritized
IKEA Effect4224OwnThe act of creating a thing increases the perceived value of that thing to the creator
Identifiable Victim Effect4213OwnA single, identifiable victim elicits more helping behaviors than a group of anonymous vic
Reciprocity4224OwnThe tendency for people to give back to those who have given to them
Social Trap4214OwnA tendency to pursue short-term gains that create long-term losses for the greater group
Supernormal Stimulus4223OwnAn exaggerated feature that elicits a stronger response than the real feature
Veblen Effect4213OwnA tendency to find a product more desirable because it has a high price
Classical Conditioning3322Low-levA method of influencing how a person viscerally responds to a thing
Crowd Intelligence3313Low-levAn emergent intelligence arising from the unwitting collaboration of many people
Face-ism Ratio3321Low-levThe ratio of face to body in an image that influences how the person is perceived
Gamification3333Low-levUsing gaming strategies in nongame contexts to enhance experience and modify behavior
Operant Conditioning3323Low-levUsing rewards and punishments to change the frequency and durability of a behavior
Shaping3323Low-levTraining a target behavior by reinforcing successive approximations of that behavior
Dunbar’s Number3213Low-levThe maximum number of relationships a person can comfortably maintain
Play Preferences3212Low-levA tendency for male children and female children to like different kinds of play
Left-Digit Effect2422DelegatePeople give more weight to the left-most digits of prices in buying decisions

Refactoring UI — executable rules (50)

Mostly Interaction & UI; the production half of the design work.

PrincipleHAIBLZoneGloss
Contrast minimums (WCAG 4.5:1 / 3:1)2553DelegateFlip contrast when white-on-color goes too dark.
Line length 45-75 characters2552Delegate~20-35em for readable measure.
Spacing & sizing scale (base 16, =>25% jumps)2552DelegateNon-linear scale; no two values closer than ~25%.
Type scale, hand-picked & non-linear2552DelegateConstrained set; round any modular fractions.
Weight floor 400; two weights2552Delegate400/500 body, 600/700 emphasis.
px/rem, never em, for the type scale2551Delegateem compounds on nesting and drops off the scale.
Author color in HSL2542DelegateBrowsers take HSL, not HSB.
Baseline-align mixed font sizes2541DelegateAlign on the baseline, never center.
Text alignment for readability2542DelegateLeft for LTR; right-align numerals; hyphenate justified.
Tame user-uploaded images2532DelegateFixed container, cover; inner shadow for bleed.
Avoid ambiguous spacing3452DelegateMore space around a group than within it.
Button hierarchy; destructive treatment3452DelegatePrimary solid, secondary outline, tertiary link.
Define shades up front (100-900)3452DelegateFill from the edges; no runtime lighten/darken.
Define value systems; choose by elimination3453DelegatePick from fixed sets; guess then compare neighbours.
Hierarchy via weight + color, not size alone3452Delegate2-3 text colors, 2 weights.
Line-height is proportional3452DelegateTaller for small/narrow text, ~1 for headlines.
Never encode meaning in color alone3453DelegatePair with icon/text; distinguish by contrast.
~100ms feedback; guard double-fire3453DelegateOptimistic UI; debounce; disable-on-submit.
Don’t fill the screen; use max-width3442DelegateGive elements only the space they need.
Elevation shadow system (~5 steps)3442DelegateTight=raised, large/blurred=closer.
Fixed vs fluid widths3442DelegateFixed when it shouldn’t scale; flex the rest.
Keep saturation up at the extremes3442DelegateRaise saturation as lightness leaves 50%.
Letter-spacing: tighten headlines, widen caps3442DelegateOtherwise leave the designer’s default.
Light comes from above (raised/inset)3442DelegateLighter top edge + dark bottom shadow.
No grey text on colored backgrounds3442DelegateHand-pick a same-hue color; never white+opacity.
Not every link needs a color3442DelegateWeight/darker color in link-dense UI.
Palette size (~10 colors x 5-10 shades)2442DelegateGreys 8-10; primaries & accents 5-10 each.
Separate visual from document hierarchy3442DelegatePick the tag for meaning; style independently.
Shadow as interaction cue3442DelegatePress shrinks, drag adds shadow.
Everything has an intended size (images)3432DelegateDon’t scale icons up or screenshots down.
Flat depth via color or solid shadow3432DelegateLighter=raised, darker=inset.
Text-on-image contrast3432DelegateOverlay, lower contrast, colorize, or text-shadow glow.
Two-part shadows3431DelegateLarge soft (direct) + tight dark (ambient).
Emphasize by de-emphasizing4353OwnSoften competitors instead of pushing the focal harder.
Balance weight against contrast4342OwnHeavy elements get lower contrast.
Empty states as first impressions4343OwnIllustration + emphasized CTA; hide idle controls.
Font-picking heuristics4343OwnNeutral sans / system stack; filter to 10+ styles.
Labels are a last resort4342OwnDrop or fold into the value when format implies it.
Shift brightness by rotating hue (=<30 deg)4342OwnToward 60/180/300 to lighten.
Supercharge the defaults4342OwnIcon bullets, accent borders, custom controls.
Use fewer borders4342OwnPrefer shadow, second bg color, or spacing.
Greys carry temperature4332OwnTint warm or cool, consistently across shades.
Overlap elements to build layers4332OwnInvisible border to stop image clash.
Choose a personality5243OwnFont, color, radius, tone cohere to one character.
Design in grayscale first4242OwnForce spacing/contrast/size to carry hierarchy.
Design the smallest shippable version4244OwnWork in cycles; don’t imply unbuilt functionality.
Start with a feature, not a layout4244OwnFrame the real problem before the shell.
Start with too much whitespace4242OwnDefault generous, then subtract.
Look for decisions you wouldn’t have made5144OwnCollect the unintuitive moves on designs you like.
Rebuild interfaces from scratch (eye training)5144OwnMatching the original surfaces the invisible tricks.

Sources

  • Lidwell, W., Holden, K. & Butler, J. Universal Principles of Design, 3rd ed. (2023) — raw/sources/design/Universal Principles of Design.pdf.
  • Wathan, A. & Schoger, S. Refactoring UIraw/sources/design/Refactoring UI.pdf.