Universal Principles of Design

By

William Lidwell

My Thoughts

A great resources for any kind of designer. It's filled with concepts of psychology, architecture, human factors and interaction design.

Highlights & Summary Notes

The concepts in this book, broadly referred to as “principles,” consist of laws, guidelines, human biases, and general design considerations.

Affordance

A property in which the physical characteristics of an object or environment influence its function.

e.g. Stairs are better suited than fences for climbing; therefore, stairs are said to better afford climbing.

Images of common physical objects and environments can enhance the usability of a design. For example, a drawing of a three-dimensional button on a computer screen leverages our knowledge of the physical characteristics of buttons and, therefore, appears to afford pressing.

Attractiveness Bias

A tendency to see attractive people as more intelligent, competent, moral, and sociable than unattractive people.

For example, in studies presenting images of attractive and unattractive people to babies (two-months-old and six-months-old), the babies looked longer at the attractive people regardless of their gender, age, or race.

Baby-Face Bias

A tendency to see people and things with baby-faced features as more naïve, helpless, and honest than those with mature features.

Chunking

A technique of combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember.

The maximum number of chunks that can be efficiently processed by short-term memory is four, plus or minus one.

Chunk information when people are required to recall and retain information, or when information is used for problem solving. Do not chunk information that is to be searched or scanned.

Familiar words are easier to remember and chunk together than unfamiliar words.

Chunking large strings of numbers into multiple, smaller strings can help.

Classical Conditioning

A technique used to associate a stimulus with an unconscious physical or emotional response.

Because the lab workers feed the dogs, their presence (neutral stimulus) had become associated with food (trigger stimulus), and, therefore, elicited the same response as the food itself (salivation).

Classical conditioning is commonly used in animal training (e.g., associating chemical traces of TNT with sugar water to train bees to detect bombs), behavior modification in people (e.g., associating smoking with aversive images or tastes), and marketing and advertising (i.e., associating products or services with attractive images or feelings).

behavior modification in people (e.g., associating smoking with aversive images or tastes),

Use classical conditioning to influence the appeal of a design or influence specific kinds of behaviors. Repeated pairings of a design with a trigger stimulus will condition an association over time.

Cognitive Dissonance

Cognitive dissonance is the state of mental discomfort that occurs when a person’s attitudes, thoughts, or beliefs (i.e., cognitions) conflict.

Consistency

The usability of a system is improved when similar parts are expressed in similar ways.

  • Aesthetic consistency — style and appearance
  • Functional consistency — meaning and action (e.g. traffic light show yellow before red)
  • Internal consistency — other elements in the system
  • External consistency — other elements in the environment

Development Cycle

Successful products typically follow four stages of creation:

  • Requirements — formally through market research, customer feedback, focus groups and usability testing. Informally through direct knowledge and experience
  • Design — translated into form that yields a set of expectations
  • Development — goal of development is to precisely meet the design specifications.
  • Testing — product is tested to ensure that it meets design requirements and specifications

Entry Point

A point of physical or attentional entry into a design. People do judge books by their covers.

  • Minimal barriers — should not encumber entry points
  • Points of prospects — entry points should allow people to become oriented and clearly survey available options. (e.g. internet pages that provide good orientation cues and navigation options).
  • Progressive lures — get people to incrementally approach, enter, and move through the entry point.

Errors

An action or omission of action yielding an unintended result.

  • Slips — occur when an action is not what was intended.
  • Mistakes — occur when an intention is inappropriate.

Expectation Effect

A phenomenon in which perception and behavior changes as a result of personal expectations or the expectations of others. (e.g. halo effect, placebo effect)

  • e.g. Hawthorne effect — employees are more productive based on their belief that changes made to the environment will increase productivity.

Exposure Effect

Repeated exposure to stimuli for which people have neutral feelings will increase the likeability of the stimuli.

Face-ism Ratio

The ratio of face to body in an image that influences the way the person in the image is perceived.

Gestalt Principles of Perception

  • Closure — the tendency to perceive information in this way is automatic and subconscious; it is likely a function of an innate preference for simplicity over complexity, and pattern over randomness.
  • Common Fate — elements that move in the same direction are perceived to be more related than elements that move in different directions or are stationary.
  • Figure-Ground Relationships — elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field).
  • Good Continuation — elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve.
  • Law of Pragnanz — tendency to interpret ambiguous images as simple and complete, versus complex and incomplete.
  • Proximity — elements that are close together are perceived to be more related than elements that are farther apart.
  • Similarity — elements that are similar are perceived to be more related than elements that are dissimilar.
  • Uniform Connectedness — elements that are connected by uniform visual properties, such as colour, are perceived to be more related than elements that are not connected.

Flexibility-Usability Tradeoff

As the flexibility of a system increases, its usability decreases.

Flexible designs can perform more functions than specialised designs, but they perform the functions less efficiently.

Forgiveness

Designs should help people avoid errors and minimise the negative consequences of errors when they do occur. ****(e.g. undo, back-ups, roll-backs).

Garbage In—Garbage Out

The quality of system output is dependent on the quality of system input.

The best way to avoid garbage out is to prevent garbage in. Use affordances and constraints to minimise problems of type. Use previews and confirmations to minimise problems of quality.

Golden Ratio

A ratio within the elements of a form, such as height to width, approximating 0.618.86

Geometries of a design should not be contrived to create golden ratios, but golden ratios should be explored when other aspects of the design are not compromised.

Guttenberg Diagram

A diagram that describes the general pattern followed by the eyes when looking at evenly distributed, homogeneous information.

Hick's Law

The time it takes to make a decision increases as the number of alternatives increases.

For example, when a pilot has to press a particular button in response to some event, such as an alarm, Hick’s Law predicts that the greater the number of alternative buttons, the longer it will take to make the decision and select the correct one.

Iconic Representation

The use of pictorial images to improve the recognition and recall of signs and controls.

There are four types of iconic representation:

  • Similar — images that are visually analogous to an action, object, or concept.
  • Example — images of things that exemplify or are commonly associated with an action, object, or concept (e.g. airport sign is an airplane)
  • Symbolic — images that represent an action, object, or concept at a higher level of abstraction (e.g. padlock on car door lock button)
  • Arbitrary — images that bear little or no relationship to the action (e.g. radiation icon)

Interference Effects

A phenomenon in which mental processing is made slower and less accurate by competing mental processes.

  • Stroop Interference — an irrelevant aspect of a stimulus triggers a mental process that interferes with processes involving a relevant aspect of the stimulus.
  • Garner Interference — an irrelevant variation of a stimulus triggers a mental process that interferes with processes involving a relevant aspect of the stimulus.
  • Proactive Interference — existing memories interfere with learning.
  • Retroactive Interference — learning interferes with existing memories.

Legibility

The visual clarity of text, generally based on the size, typeface, contrast, text block, and spacing of the characters used.

  • Size — printed text, standard 9- to 12-point type is considered optimal.
  • Typeface — no performance difference between serif and sans serif typefaces. Use dark text on a light background or vice versa.
  • Text blocks — For 9- to 12-point type, a line length of 3 to 5 inches (8 cm to 13 cm) is recommended, resulting in a maximum of about 10 to 12 words per line, or 35 to 55 characters per line.
  • Spacing — proportionally spaced typefaces are preferred over monospaced

Lifecycle

All products progress sequentially through four stages of existence:

  • Introduction — official birth of a product. Design focus: monitor early use of the design to ensure proper performance.
  • Growth — most challenging phase. Design focus: scale the supply and performance of the product to meet the growing demand.
  • Maturity — peak of the product life cycle. Design focus: enhance and refine the product to maximise customer satisfaction and retention.
  • Decline — end of the life cycle. Design focus: minimise maintenance costs and develop transition strategies to migrate customers to new products.

Operant Conditioning

A technique used to modify behaviour by reinforcing desired behaviours, and ignoring or punishing undesired behaviours.

  • Positive reinforcement increases the probability of a behavior by associating the behavior with a positive condition.
  • Negative reinforcement increases the probability of a behavior by associating the behavior with the removal of a negative condition.
  • Punishment decreases the probability of a behavior by associating the behavior with a negative condition.

Use operant conditioning in design contexts where behavioural change is required. Focus on positive or negative reinforcement, rather than punishment whenever possible.

Recognition Over Recall

Memory for recognising things is better than memory for recalling things.

It is easier to recognise things than recall them because recognition tasks provide memory cues that facilitate searching through memory.

Scaling Fallacy

A tendency to assume that a system that works at one scale will also work at a smaller or larger scale.

An ant scaled to human size would only be able to lift about 50 pounds, assuming it could move at all. The effect of gravity at small scales is minuscule, but the effect increases exponentially with the mass of an object.

Shaping

A technique used to teach a desired behavior by reinforcing increasingly accurate approximations of the behavior.

Storytelling

A method of creating imagery, emotions, and understanding of events through an interaction between a storyteller and an audience.

  • Setting — orients the audience, providing a sense of time and place for the story
  • Characters — character identification is how the audience becomes involved in the story, and how the story becomes relevant.
  • Plot — ties events in the story together, and is the channel through the story can flow.
  • Invisibility — the awareness of the storyteller fades as the audience focuses on a good story. When engaged in a good movie or book, the existence of the medium is forgotten.
  • Mood — music, lighting, and style of prose create the emotional tone of the story.
  • Movement — in a good story, the sequence and flow of events is clear and interesting. The storyline doesn’t stall.

Top-Down Lighting Bias

A tendency to interpret shaded or dark areas of an object as shadows resulting from a light source above the object.

Interestingly, there is evidence that objects look most natural and are preferred when lit from the top-left, rather than from directly above. This effect is stronger for right-handed people than left-handed people, and is a common technique of artists and graphic designers.

Wayfinding

The process of using spatial and environmental information to navigate to a destination.

Four stages

  • Orientation — determining one’s location relative to nearby objects and the destination.
  • Route decision — choosing a route to get to the destination.
  • Route monitoring — monitoring the chosen route to confirm that it is leading to the destination.
  • Destination recognition — recognising the destination.