Universal Principle of Design is a deep dive on human motivation and thinking. It provides a foundation to designing intuitive, simple products.

The book is composed of 125 principles of human thinking and behavior. It describes each principle in a quick 3-5 page chapter and explores its ramifications when designing products.

“The concepts in this book, broadly referred to as ‘principles’, consist of laws, guidelines, human biases, and general design considerations… Use Universal Principles of Design as a resource to increase your cross-disciplinary knowledge and understanding of design.”

I have sampled a few of my favorite principles below. Check out the full book for all 125!

Aesthetic-Usability Effect

A design which is aesthetic is perceived to be easier-to-use than an unaesthetic design. It can evoke a positive, emotional response from the user. Visual design is not frivolous!

Edge Alignment

Edge-alignment works for symmetrical, regular shapes, but for any irregular or asymmetrical shape, edge-alignment will yield a strange looking outcome.

Instead opt for area-alignment. Do so by finding the center of the irregular shape such that if the shape had weight, it could balance perfectly on that point.

Biophilia Effect

Being around views of nature – real or not (photos, fake plants) – improves concentration, focus, and reduces stress.

Good to know when designing physical environments – anywhere you work, for instance, but most importantly, anywhere people go to heal or relax.

Cathedral Effect

Relationship between ceiling height and cognitive ability: high ceiling promotes creativity whereas low ceiling promotes detail-oriented work.

Use this to determine the environment you should be in when running a meeting or working – do you need to be creative or detailed?

Counter Bias

Humans have a natural preference for objects with rounded corners compared to objects with sharp edges.

This is been validated with fMRI studies, where the amygdala, the part of the brain that responds to fear, is increasingly activated when the subject is presented with sharper or more angular objects.

In your designs, use contoured features to make a positive subconscious association.

Desire Lines

Desire lines are like the beaten path off of a sidewalk. The sidewalk is where the designer expected people to walk, but the foot path is where they wanted to walk.

Desire lines are useful because they clearly indicate the user’s preferences and behavior.

Desire lines exist in the physical world and digital world. In the physical world, you have cues such as the footpaths described above. In the digital world, analytics tools can show how users use a tool and how it might differ from its intended design.

When the desire line is different from the intended design, consider the cost of that divergence. Does it significantly affect the experience? Is it increasing complexity or making the user frustrated? Consider desire lines when making user experience improvements.

Entry Points

“People do judge books by their covers, Internet sites by their first pages, and buildings by their lobbies.”

The first impression your product makes is crucial. It defines how they’ll approach future interactions with your product (or if there will be any future interactions.)

Consider three things to have a positive first impression: minimize barriers to entry, orient the user, and progressively lure people into the product.

Barriers to entry can be physical (a salesperson at the doorway) or digital (slow load times, pop-up ads, full-screen email-signup prompts).

Orient the user with clear navigation signs. That can be a good navigation menu on your website or easily visible aisle signs at your store.

Progressive lures keep the user excited and interested about what’s to come, compelling them to continue through your product.

Errors

Just like in Design of Everyday Things, “human error” is attributed not to humans, but to bad design.

There are two types of errors: slips and mistakes. A slip is an unintentional action, whereas a mistake is when the action is deliberate but incorrect.

Good design should prevent errors and be forgiving when errors take place. Forgiveness is a major component of Google’s Material Design. A common example is when the user is given the option to undo their last action, such as sending an email or deleting a file.

Ways to increase the forgiveness of products:

• Good affordances: “physical characteristics of the design that influence its correct use”
• Ability to undo and reverse an action
• Minimize negative impact of errors
• Confirm critical actions to verify intent (“Are you sure you want to factory reset your computer?”)
• Provide warnings
• Easily accessible help via tool tips, documentation, or customer service

“The preferred methods of achieving forgiveness in a design are affordances, reversibility of actions, and safety nets. Designs that effectively use these strategies require minimal confirmations, warnings, and help—i.e., if the affordances are good, help is less necessary; if actions are reversible, confirmations are less necessary; if safety nets are strong, warnings are less necessary.”

Flexibility-Usability Trade-Off

The more a design can do, the less efficiently it can do it. Making a design more flexible increases complication because it must accommodate more use cases and has more design requirements. This leads to an increase in compromises and an overall less usable product.

“The ability of an audience to anticipate future uses of a product is a key indicator of how they will value flexibility versus usability in design. When an audience can clearly anticipate its needs, more specialized designs that target those needs will be favored. When an audience cannot clearly define its needs, more flexible designs that enable people to address future contingencies will be favored.”

A personal computer is more flexible and more capable than a video game player. As such, it’s harder to use but also better able to handle unexpected situations. You may buy a personal computer to play games, but can also do spreadsheet work if necessary. A video game system may be a better gameplay experience, but lacks that flexibility.

Form Follows Function

A popular saying, but flawed.

It can be interpreted two ways. One is descriptive, that beauty results from purity of function. The other is prescriptive, that beauty should be considered secondary to function.

The descriptive interpretation is derived from the belief that form follows function in nature. This isn’t true, as there is no such thing as “design” in nature.

“Functional aspects of a design are less subjective than aesthetic aspects and, therefore, functional criteria represent a more objective aesthetic than alternative approaches. The result is designs that are more timeless and enduring, but also frequently perceived by general audiences as simple and uninteresting.”

The prescriptive interpretation is also flawed.

“The question should not be, “What aspects of form should be omitted or traded for function?” but rather, “What aspects of the design are critical to success?” These success criteria, not a blind allegiance to form or function, should drive design specifications and decisions.”

Garbage In – Garbage Out

If you put garbage as input, your output will be garbage.

There are two types of garbage in. One is type. If a field requests username but you enter a phone number, the output will be garbage. The second is quality. If you enter the wrong username into that field, though it’s the correct type, the output will be garbage as the input is still incorrect.

The solution to garbage out is to minimize garbage in. Use tools described in Forgiveness, like affordances, warnings, previews and confirmations, in order to prevent garbage in.

Gutenberg Diagram

A Gutenberg diagram divides a display into four quadrants based on how the Western reader’s eye travels. Western readers begin at the primary area in the top-left, then move across, and finally, move down.

When designing following a Gutenberg Diagram, place information such that it’s importance mirrors how the eye travels.

Horror Vacui

Latin for “fear of emptiness”, it manifests itself in designs that leave no empty space. It tends to be correlated with lower perceived value.

“For example, in a survey of more than 100 clothing stores that display merchandise in shop windows, the degree to which the shop windows were filled with mannequins, clothes, price tags, and signage was inversely related to the average price of the clothing and brand prestige of the store. Bulk sales shops and chain stores tended to fill window displays to the maximum degree possible, using every inch of real estate to display multiple mannequins, stacks of clothes, and advertising promotions, whereas high-end boutiques often used a single mannequin, no hanging or stacked clothes, no signage, and no price tags—if passersby need to know the price, they presumably could not afford it.”

One theory to explain this is that for individuals of good means, to have less is more, but for those who are accustomed to having less, more is more.

Use minimalism to promote a feeling of high value and elegance.

Iconic Representation

An icon is a pictorial image that “reduces performance load, conserves display and control area, and makes signs and controls more understandable across cultures.”

There are four kinds of icons.

Similar icons are visually similar to what they represent. For example, a sign for a windy road looks like a windy road.

An example icon is like using an icon of a plane to indicate an airport, as opposed a pictogram of an airport itself.

A symbolic icon is a higher level of abstraction than what it represents. For instance, a car key has a padlock on it, even though the locking mechanism not a padlock.

Arbitrary icons have no clear relation to what they represent, but are useful for anything that must be universally recognized. The symbol for radiation is a good example. It cannot be confused for any cultural artifact and is globally recognized.

Different scenarios require a different kind of icon. Picking an icon type should be based on what will reduce cognitive load and promote usability.

Inverted Pyramid

Inverted pyramid is a method of information presentation that starts with the important takeaways and then continues to background information. This is in contrast to the pyramid method, that starts with background and then concludes with the critical information.

Inverted pyramid is useful when the goal is efficient communicating. By presenting the critical information upfront, it provides context for the background to follow. It also makes information easier to skim.

The primary downside of the inverted pyramid is that it doesn’t make a great narrative structure. It minimizes suspense and eliminates any chance of a surprise ending by putting critical information at the front.

Modularity

Modular structures take complex systems and break them into interdependent, self-contained clusters, or modules.

Modular systems are great for reducing complexity in a large system. It makes it easier to both debug complex systems as well as improve them, by upgrading modules independently based on need.

A good modular system disguises complexity and is comprised of modules that can communicate to each other easily through clear and simple interfaces.

Most Advanced Yet Acceptable

A framework to determine the most commercially viable aesthetic for a design.

Consumers reward and prefer familiarity, while also being attracted to novelty.

Noted industrial designer Raymond Loewy posited that the ideal aesthetic for commercial success lies between familiarity and novelty. The most advanced, novel form of a familiar design will perform best.

“Consider MAYA [Most Advanced Yet Acceptable] when designing commercially for mass audiences. When introducing innovative products that essentially define a new category consider incorporating elements that reference familiar forms. In contexts where aesthetic assessments are made by design or art experts (e.g., design competitions refereed by expert judges), MAYA does not apply —emphasize novelty, as it will be weighed more heavily than typicality.”

Performance Versus Preference

Users often prefer designs that are less performant.

This is because a number of factors are involved in why someone purchases and uses a product: aesthetics, usability, familiarity, impact on self-esteem, to name a few.

The takeaway here is to understand the relative importance of performance and preference for your product.

One example that comes to mind is a multi-page form. Although a single-page form is more efficient, as a user can quickly tab from one field to the next, multi-page forms are often more pleasant to use. This could be due to reduced distraction with fewer items on the screen, better aesthetics thanks to increased whitespace, progressive disclosure, or something else entirely, which is more important to the user than efficiency and performance.

Picture Superiority Effect

Pictures are more easily recognized and remembered than words. Pictures and words together are superior to pictures alone.

Use pictures and words together in advertising, instructional materials, technical manuals, important warnings, and any other information where recall is important.

Recognition over Recall

People are better at recognizing things than recalling things. This is because recall requires learning and internalizing information in order to reproduce it, where as recognition is merely acknowledging that something has been experienced before.

Take advantage of recognition over recall by designing interfaces that require as little recall as possible. For example, command line tools are significantly more difficult to use than a graphical user interface because they depend entirely on recall.

Layers of sub-menus also complicate products by requiring recall of where things are located.

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.“

When an object appears to be lit from the top, it feels natural. When lit from the bottom, it feels unnatural.

Objects that are dark on the top and light on the bottom are perceived to be concave, and those that are light on top and dark on the bottom are perceived to be convex.

Use top-down shadowing to create natural and comfortable feeling interface elements.

Wabi-Sabi

“Wabi-sabi is at once a world view, philosophy of life, type of aesthetic, and, by extension, principle of design. The term brings together two distinct Japanese concepts: wabi, which refers to a kind of transcendental beauty achieved through subtle imperfection, such as pottery that reflects its handmade craftsmanship; and sabi, which refers to beauty that comes with time, such as the patina found on aged copper. In the latter part of sixteenth-century Japan, a student of the Way of Tea, Sen no Rikyu, was tasked to tend the garden by his master, Takeno Jo-o. Rikyu cleared the garden of debris and scrupulously raked the grounds. Once the garden was perfectly groomed, he proceeded to shake a cherry tree, causing a few flowers and leaves to fall randomly to the ground. This is wabi-sabi.”

‍