Notes on Universal Principles of Design

These are my personal notes while taking the Universal Principles of Design course at Lynda.com.

The course follows a simple and structured approach, going through a few principles, one by one.

Each principle is represented by a video, that begins narrating some story (related to the concept being explained), then, the principle is re-introduced, and then a few recommendations for when to use that principle or not.

The fact that the content is structured in the same way on all the videos, makes it quite straightforward to go back and revisit any of them.

Flexibility Trade-offs

When to make something flexible or not.

Performance and usability are traded for flexibility. When the value of flexibility outweighs these tradeoffs, then it’s worth it

When are flexibility tradeoffs justified? You can use this five question test.

Is suboptimal good enough?
Is the performance environment stable, meaning does it stay the same over time?
Are performance and user requirements similar?
Can functions be modularized in the design?
Does the value of flexibility justify the performance tradeoffs?

If the answer to any of these questions is No, then it’s not worth it.

Alignment

Every element in a design, should align with at least one other element.

No element in a design should be dangling out there on its own

Follow the top down -> left right flow (LTR case)

Feature Creep

A continuous expansion or addition of new product features beyond original scope.

One of the most common causes of cost and schedule overruns

Frequently occurs because:

Features are easy or convenient to add
Features accumulate over multiple generations of a product
Features are added to appease internal project stakeholders

Adding features, adds complexity, and complexity costs.

Be on the lookout for feature creep in design and development, and educate your peers about the trap.
Ensure features are linked to customer needs, and are not added out of convenience or appeasement.
When doing updated versions of a design, ask not just what can be added, but what can be subtracted.
Create a project milestone to formally freeze the product specification… Freeze means no more changes.

Desire lines

Always explore the road most traveled. There is much to be learned there.

reddit: desire paths

Top-down lighting bias

Tendency to interpret object as being lit from a single light source from above.

Use a single top-left light source

Iteration

All complex systems that work evolved from simpler systems that worked

Garbage in-Garbage out (GIGO)

Quality of system output is largely dependent on the quality of system input

Type Problems. When the data is entered in the wrong place.

Quality Problems. When the incorrect data is entered in the correct place

Prevent bad input. Strong data validation of all fields before sumbitting
Correct bad input.
Prevent bad output. For example a preview.
Correct bad output. Detect and correct bad output after it occurs. e.g. Including a Pre-paid return label in a delivered package

Hick’s Law

The time it takes to make a decision increases with the number of options.

It applies to any simple decision with multiple options

Hicks Law does not apply to complex decision making or decisions requiring reading, scanning, searching, or extended deliberation.

Practical Implications of Hick’s Law

When response time is critical keep the nuber of options small, arround 5 or less.
While people say they want more options with products and services, once they actually get them, they rarely find joy
Abundant choice not onl slows response time, but users feel frustrated and dissatisfied

Keep It Simple Stupid (KISS)

Simple systems are more effective than complex systems

Left-Digit Effect

Not always effective. Prices ending in 99 seem low quality. While round number look good quality

99 could be good for Walmart but not super for Neiman Marcus

I non western-cultures, the added complexity of the 99, is perceived as deception or trickiness

Root Cause

Understand the causal chain that led to the observed problem.

Most problems, especially, difficult problems, have multiple causes, and their proximal causes are rarely their root causes.

Technique: The Five Whys. Asking why an event occured 5 causes deep

The Sunk Cost Effect

There is great power in knowing When to Quit

The tendency to continue investing in an endeavor because of past investments of time, effort, or moeny in that endeavor, even when the payoff or return on investment is not longer available.

Past investments or sunk costs should not influence decision-making

Only the cost-benefits of current options should influence decisions.

People let past investments influence future decisions all the time. Because they feare failure more than they desire success, they don’t wanna feel or appear wastefull

How to detect:

Listen to telltale phrases

We have too much invested to quit
We owe it to those who have sacrificed to stay the course
We can’t quit now after all we’ve put into this

Selection Bias

A bias in the evidence we collected that distorts our analyisis and conclusions

Ikea Effect

The act of creating a thing increseases the perceived value of that thing to the creator

Red Effects

Culturally, red make both genders attractive to the opposite sex

Red impairs productivity Red should be avoided in environments that require testing, learning and cooperation

Black Effects

Black effects are a set of cognitive and behavioral effects triggered by exposure to color black.

Black objects are generally perceived to be classey, high-value and timeless.

You can use black to increase perceived value in products.

If you want to offer a premium version of your product, black should be in your considerations

White effects

Idem Black effects.

It is the color of choice for minimalistic aesthetic

You can also use white to increase perceived approachability and peacefulness.

Weakest link

The Weakest link principle is the use of elements in a system designed to fail in order to protect more important elements in that system from harm.

A properly designed weakest link in a chain is the most important link

If you decide to add a weak link to a design, test and verify that link only fails under appropriate predefined conditions.

Supernormal Stimuli

Designing with instincts in mind

A supernormal Stimulus is a variation of a familiar stimulus that elicits a response stronger than the stimulus for which it evolved.

You can identify supernormal stimuli by exploring well-established biases and preferences

Performance Load

The mental and physical effort required to complete a task

Mental Load: Mental effort required to accomplish a goal

Kinematic Load Effort: Physical effort required to accomplish a goal

Generally, when the performance load is high, errors and time to perform tasks increase.

The general goal in Design, is to minimze performance load.

Reduce visual complexity
Reduce the number of things that need to be remembered to perform tasks.
Automate memory and computational tasks when possible.

For tasks requiring a prescribed amount of effort, consider different user levels, for example, novice verses expert that vary the complexity of the interaction, and a significant amount of testing and tweaking to dial in the right load for the job.

Forgiveness

Forgiveness means, the design should help people avoid errors whenever possible and protect them from harm when they do occur. Forgiveness should always be considered a priority in design briefs, requirements documents, and design specifications. Errors and failures will occur,and good design prevents these events from causing harm.

5 strategies not mutually inclusive

Prevent harmful conditions from occuring using affordances and constraints
Warn people of harmful conditions before they occur using alerts.
Request confirmations when people make choices that can cause harm.
When harmful conditions do occur, allow them to be reversed when possible.
When all else fails, provide a safety net as a last-ditch catch-all to prevent harm.

Forgiving designs provide a sense of security and stability, which in turn fosters a willingness to learn, explore, and really use the design. Forgiveness also cultivates loyalty. When people become accustomed to forgiving designs, there is no going back to less forgiving alternatives

Figure-ground

which means that the brain tries to separate the perceived world into two categories: a figure, which is the object of focus, and a ground, which is the periphery, or background.

When images are stable, we perceive the figure and ground in one way. When the figure-ground relationships are bi-stable, we switch back-and-forth between the various images,struggling to find stability.

Figure elements receive more attention and are better remembered than ground elements. When figures are clearly established in design,the design is more efficiently processed and recalled.

The goal is to create stable figure-ground relationships, strategically placing elements to be perceived as figures to focus attention and aid recall.

Crowd intelligence

Crowd intelligence is an emergent intelligence arising from the unwitting collaboration of many people.

This intelligence is expressed as an average. And this average is typically better than any individual response from that group.

Strong, authoritative, or social influences within a group undermine its crowd intelligence.

Crowd intelligence works best on simple problems that have clear right and wrong answers but is less effective at solving problems requiring creativity or innovation.

Despite this, there are many examples of crowd-based design initiatives, but a quick perusal of their designs will confirm that crowd intelligence is generally a poor tool for producing quality design.

Errors

An error is defined as an action that yields an unintended result. That simple. And there are three types. Slips, lapses, and mistakes.

Slips are referred to as errors of action or errors of execution. They occur when an action performed is not what was intended. For example, in this texting exchange between Amanda and her friend, Amanda accidentally types Blind instead of Blonde.
Lapses are referred to as errors of attention. They occur when a person forgets to perform an action. Typically due to distractions or the passage of time.
Mistakes are referred to as errors of intention or errors of planning. They occur when an intention to do something is incorrect or inappropriate. This can be due to incorrect knowledge about something or an incorrect assessment of a situation.

How to prevent them?

For slips, we design the look and arrangement of controls.
For lapses, we use alarms and checklists. Alarms are usful to grab attention when people are distracted or multitasking. And checklists are excellent at reducing lapses and mistakes.
For mistakes, we provide clear and timely feedback, not cryptic error codes,intuitive control layouts that are easy to use and learn and appropriate levels of training.

Aesthetic-usability effect

The aesthetic-usability effect describes a phenomenon in which beautiful objects are perceived to be easier to use than ugly objects, whether they are or not.

That is, given two functionally equivalent designs, for example, two mobile phones that requirethe same number of steps and same amount of time to perform various functions, the moreaesthetically pleasing phone is perceived to be easier to use.

Beautiful designs foster more positive attitudes than ugly designs, making people more caring in their treatment, more loyal to their brands, and more patient and tolerant when things go wrong.

The implication is that perceptions matter, influencing how people think and feel about using a product. And once these responses are formed, they’re hard to change.

The 80/20 rule

also known as the Pareto Principle and the Law of the VItal Few. It states that in any large complex system, a large percentage of the effects are caused by a small percentage of the variables. For example, 80% of a web site’s usage involves 20% of its content.

The implications of this principle to designers are profound. For example, in redesigning a website the 80/20 Rule could mean you develop and refine the most used 20% and potentially cut or at least ignore the remaining 80%.

The idea is that focusing on the critical 20% lets you make a high impact for a low cost. Whereas focusing on the non-critical 80% lets you, at best, make a low impact at a high cost.

It’s always hard to implement in practice. But of all of the tools in the designer’s toolbox it’s among the most powerful. The key is to begin by asking the right question. What is the critical 20% of the design that drives 80% of the effects?

80/20 is just a rule of thumb. It could be 70/30, 90/10, and so on. The specific breakdown is not important. What is important is that a small number of variables drives the bulk of the performance.

Baby-face bias

It’s a tendency to see things with baby-faced features as having the cuteness and personalitycharacteristics of babies. This is an instinctive preference that operates beneath our conscious awareness. People and things with round features, large eyes, small noses, high foreheads, short chins and light hair and skin are perceived to be more naive, helpless, and honest than those with mature features.

The bias applies to all anthropomorphic things, including people, animals and cartoon characters and products such as bottles, appliances and vehicles. Depending on the design context, these attributes can help or hurt you.

However, if the design does not benefit from these perceptions, think more dominant and aggressive designs like hero characters and lamborghinis, then round baby-faced features aren’t the way to go. You want less round and more angular treatments.

Cognitive dissonance

Cognitive dissonance is a state of mental discomfort that results from incompatible attitudes,thoughts, or beliefs. When a person experiences cognitive dissonance, they seek to make their incompatible thoughts or values compatible to one another, to reconcile the mental conflict.

They seek an “out.” When this “out” is by design, then cognitive dissonance can be used as a means of persuasion.

Once a person does a small favor for you, they experience after-the-fact cognitive dissonance, and subconsciously ask themselves, “Why did I just do a favor for this person?” Give the person a little bit of time, and they typically conclude that they must like you,which greatly increases the probability that they do the large favor.

Consistency

Consistency enables people to efficiently transfer knowledge to new contexts, learn new things more quickly, and focus attention on the relevant aspects of a task. Consistency also signals that things have been well designed and not cobbled together. One of the telltale signs of bad design and low quality is inconsistency. There are four types of consistency we need to consider:

Visual consistency, which means that the same or similar elements are depicted the same way. Visual consistency increases understanding, and communicates relatedness. For example, buttons on a control panel should observe consistent graphical, labeling, and typeface conventions.

Functional consistency, which means that the same or similar controls function the same way. Functional consistency increases predictability, and creates a sense of security and safe use. For example, the undo function in a piece of software should work the same way all of the time, versus working on some functions and not others.

Internal consistency, which means that the same or similar elements are visually and functionally the same inside a system. Internal consistency improves usability and learnability within that system– elements look and work the same throughout allowing knowledge of one part of the system to transfer to other parts of the system. For example, all STOP signs within a countryshould be the same.

And External consistency, which means that the same or similar elements are visually and functionally the same outside a system. External consistency extends the benefits of internal consistency to other things– elements look and work the same across multiple systems, allowing knowledge of one system to transfer to another.

A good rule of thumb is to design elements to appear and behave in such a way that least surprises your users. This is called the Principle Of Least Astonishment or Least Surprise. The idea is that intuitive designs don’t surprise us– they just work, and the way to avoid surprise is to make sure designs align with user expectations. One of the most powerful tools we have to achieve this kind of alignment is the principle of consistency.

Design by committee

Design by committee refers to a design process based on consensus building, group decision-making, and extensive iteration. The term has become pejorative in most design circles,because the process is inherently inefficient and frustrating, costly in terms of both time and budget, and produces designs generally lacking in aesthetic appeal and innovation.

Design by dictator, by contrast, should be favored when projects are time- or budget-driven, requirements are relatively straightforward, consequences of error are tolerable, and stakeholder buy-in is less important.

The process is slow and expensive, but the complexity of the requirements is high, the tolerance for risk has gone down over time, the consequences of error are severe, and the need for stakeholder buy-in is critical.Design by committee should be favored when requirements are highly complex, tolerance for risk is low, consequences of error are serious, and stakeholder buy-in is important.

Here’s another way of thinking about it. If you want stakeholder buy-in, you need a design by committee model. If you want innovation, you need a design by dictator model. You generally can’t have both. Use design by committee when error mitigationand stakeholder acceptance are the priorities and when there is plenty of time and budget for iteration.

Use a design by dictator model when time and budget considerations are paramount, and when innovation is key to success. The process is optimal when the dictator has strong generalist knowledge of the relevant design domains, the dictator is a good leader with talented, loyal people supporting them, and when performance is valued over politics. Design by dictator is fast but risky. Design by committee is slow but careful. Both models have their place depending on the context.

Expectation Effects

The term expectation effects broadly refers to a change in a person’s perception or behavior by making them aware of an expected outcome. There are many types of expectation effects. You may have heard of a few of them.

For example, you have the Halo Effect. Employers rate the performance of certain employees more highly than others based on their overall positive impression of those employees.

You have the Hawthorne Effect, where employees are more productive based on their belief that changes made to the environment will increase their productivity.

The Pygmalion Effect, where students perform better or worse, based on the expectations of their teacher.

The Placebo Effect, where patients experience treatment effects, based on their belief that a treatment will work, even when that treatment is just a sugar pill.

Demand Characteristics, where participants in an experiment or interview provide responses and act in ways they believe are expected by the experimenter or interviewer.

Knowledge about expected outcomes influences perceptions and behaviors, which then influence actual outcomes.

In research context, we must guard against expectation effects when conducting interviews, testing, and analyzing data.

Even the most honest and diligent researchers have expectations about what experiments or testing will reveal. These expectations can bias them in ways that help them confirm their expectations.

Factors of Safety

Factor of safety refers to designing components or systems beyond expected loads to offset the effects of unknown variables and prevent failure.

A factor of safety of one, means a component or system can handle the anticipated load and no more.

A factor safety of two, means a component or system can handle twice the anticipated load. A factor safety of three, means three times the anticipated load, and so on. For example, for durable but non-life-critical product designs, like a pair of binoculars, a factor of safety of just over one is common practice.

An engine crankshaft is often engineered with a factor of safety of 30 or more. Modern elevator cables have a factor of safety of 12 plus. Structural steel work in bridges, is typically in the five to seven range. Passenger aircraft components, come in around 1.5 to 2.5.

As a failed bridge or aircraft would certainly have a greater negative impact than a failed engine or elevator. The reason, adding factors of safety usually means adding weight.

So the trade off has to be considered more carefully. The size of the factor of safety should correspond to the consequences of catastrophic failure, and the level of uncertainty in the design. Increasing the factor of safety of a design is the go-to method for preventing catastrophic failure. When ignorance about design parameters is high, your factors of safety should be high. As your ignorance about the design parameters decreases with time and experience, your factors of safety can be reduced.

Similarly when the consequences of catastrophic failure are high, your factors of safety should be high. When the consequences of catastrophic failure are lower, your factors of safety can be lower. The principle doesn’t just apply to physical loads. You can incorporate factors of safety in network or web site design to accommodate unexpected traffic loads.

Adding factors of safety almost always adds cost, weight, and complexity.

Gloss bias

The Gloss Bias refers to a general human preference for glossy versus dull objects. For example, people prefer glossy lipsticks, jewelry, paper, and paints, to their matte counterparts.

This preference is likely an evolutionary artifact. The theory goes that the ability to find water sources provided our early human ancestors with an adaptive advantage. Since glossy surfaces suggested nearby water sources, early humans who found such surfacesinteresting or appealing, had an advantage in locating water.

This preference has been passed down in the form of an innate, unconscious bias, meaning that our visceral, unthinking preference is for glossy, even if our conscious thinking brain favors matte. This explains why even people who declare a preference for matte or who know that matte is better functionally, will still often buy glossy, especially when the purchases are impulse buys, where the two computer displays were presented sided by side. These contexts favor instinctive biases.

The bias is stronger in general audiences, and weaker in audiences with experience with different finishes. When designing for the mass market, the default finish should be glossy. When designing for a niche audience, with experience with different finishes, consider matte, if it helps to differentiate your product.

When in doubt, or when all other variables are equal, the default rule should be to go glossy. A clear exception to this rule is when designing objects that pose a potential mouthing or swallowing hazard, to young children. In these cases, glossy reflective finishes should be avoided. If you have young children around, put away the glossy marbles. Conversely, if you’re designing objects that you want young children to mouth, like a teething ring, for example, a glossy wet look is best.

Golden ratio

The golden ratio is a ratio within the elements of a form, such as height to width, which approximates 1.618. For example, the UK-A standard dimensions for a mass-market paperback are 110 millimeters wide and 178 millimeters tall. Take 178 and divide it by 110 and you get 1.618.

The UK-A standard is a golden rectangle because the ratio of its height to width is a golden ratiobut the ratio within the elements of a form don’t have to be a perfect golden ratio, just a decent approximation, say 1.6 or so. Anything beyond this level of precision is getting outside our visual capability to detect.

The golden ratio is commonly believed to be an inherently aesthetic proportion,primarily due to its prevalence in nature, apparent use in great artistic and architectural works,and its unique mathematical properties.

Is there any psychological evidence that we find golden ratio proportions in linear forms more aesthetic? The short answer is yes. Though the effect is small and many of the studies are old and their methods are not as solid as we would like, and hypothesizing why a preference for a liner golden ratio might exist, we need look no further than our own bodies.

What about psychological evidence for golden rectangle preferences? Again, the short answer is yes, but again, the effect is small and unlike linear proportions, a causal hypothesis for why we favor golden rectangles is more elusive as we rarely see such rectangles in nature.

What about psychological evidence for golden ratio preferences in more complex shapes and geometries,such as golden triangle spirals, et cetera? This one is easy.

There is no credible evidence that golden ratio proportions are preferred outside of lines and rectangles. Therefore, it’s reasonable to consider golden ratio proportions in linear and rectangular designs but because the preference is small, probably not at the expense of other design objectives. Exploring golden ratios in non-linear and non-rectangular forms, however, is not justified by the evidence.

MAFA

The Most-Average-Facial-Appearance-Effect describes the fact that people find the most average facial appearance of a population more attractive than faces that deviate from the average.

Population refers to the group in which a person lives or was raised. The effect may be due to the fact that evolution tends to select out extremes or that average features signal greater genetic diversity, so a preference for averageness, which results in increased symmetry may have evolved as an indicator of fitness.

Whatever the reason, the average face of a population is generally perceived to be more attractive than the vast majority of the individual faces from that same population.