Book Cover

Universal Principles of Design: The Mandatory Book with the Science behind the Black Magic

This book is much better than a holy bible or some ten commandments of design: it goes beyond. It describes the what, answers the why, teaches the how and shows where it all came from.

After watching Joe Natoli's Fundamentals, Principles and Practices for Great UI Design course on Skillshare, I was really surprised that design black magic is actually mostly based on solid science and research. Universal Principles of Design goes through 125 guidelines built on top of decades of research in various scientific fields, always citing the essential bibliography to justify their assertions.

I wish I had read this book years ago, when starting my engineering studies, it would have been much more worthwhile than blindly reproducing dummy silly mandatory projects on AutoCAD. I think this book should be read by anyone, it would enable individuals to have a much more objective and productive way of criticizing our environment and society.

Anyway, let me share some of the most impressive principles and concepts I've learned from this universal top-shelf read — and, by the way, I'm not spoiling the book with the content below; I believe it actually creates more interest to it.

In alphabetical order, they are:

  1. 80/20 Rule
    • A high percentage of effects in any large system are caused by a low percentage of variables.
    • Also known as the Pareto Rule.
    • This is probably one of the most important and most not emphasized rules in life, it would be one of the first concepts I would ever teach to a child. In basically every practical human project, around 80% of the gains come from 20% of the effort:
      • 80 percent of a product’s usage involves 20 percent of its features.
      • 80 percent of a town’s traffic is on 20 percent of its roads.
      • 80 percent of errors are caused by 20 percent of the components.
  2. Alignment
    • The placement of elements such that edges line up along common rows or columns, or their bodies along a common center.
    • Two other principles closely related to Alignment are: Area Alignment and Mapping.
    • Most designers, including Joe Natoli, say that this is probably the most frequently broken principle in the real world. After a bit more than 1 month producing and reviewing designs, I would say I completely agree — just imagine the mess if all of these bullet points and numbered principles had the same indentation...
    • It is very impressive how much a design can improve by simply aligning its items in a way that groups and similarities are correctly in evidence. Doing the opposite can incur in disastrous consequences, as was the case of the Butterfly Ballot.
    • One very simple example of what not to do when it comes to alignment is long text with centered alignment: the left border alignment will be so irregular that the user will have to put extra effort into keeping track of it. In sum, only use centered text for one-liners or very short text.
  3. Biophilia Effect
    • Environments rich in nature views and imagery reduce stress and enhance focus and concentration.
    • One interesting finding is that this effect does not seem to require real plants in the environment, but mere imagery — window views, posters on the wall, and so forth seem to suffice.
    • Some examples of beautiful application of this principle are: Frank Lloyd Wright's Fallingwater and Mies van der Rohe's Farnsworth House.
  4. Cathedral Effect
    • A relationship between the perceived height of a ceiling and cognition. High ceilings promote abstract thinking and creativity. Low ceilings promote concrete and detail-oriented thinking.
    • Different ceilings, different perspectives, it is not really true that high ceilings are better:
      • High ceilings tend to improve focus on general product characteristics and creativity.
      • Low ceilings tend to improve focus on specific features and problem solving.
    • The Cathedral Effect is closely related to Priming.
  5. 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.
    • It used to be believed that the optimal number of short-term memory items is 7, but research has converged on actually 4 ± 1. So, try chunking related items in blocks of, at most, 4 ± 1.
  6. Cognitive Dissonance
    • A tendency to seek consistency among attitudes, thoughts, and beliefs.
    • People alleviate cognitive dissonance in one of three ways: by reducing the importance of dissonant cognitions, adding consonant cognitions, or removing or changing dissonant cognitions.
      • For example, advertising campaigns that urge people to show how much you care by buying diamonds seek to create cognitive dissonance in consumers — i.e., dissonance between the love that people have for others, and the pressure to prove that love by buying diamonds. In order to alleviate the dissonance, people can reduce the importance of the dissonant cognition (e.g., a diamond is, after all, just a bunch of pressed carbon), add consonant cognitions (e.g., recognize that the advertising campaign is trying to manipulate them using cognitive dissonance), or remove or change dissonant cognitions (e.g., show how much you care by doing something else or, of course, buying the diamonds).
    • When a situation involves incentives, it is interesting to note that incentives of different sizes yield different results. Too big an incentive and the person will change her behavior, but but diverge in her attitude.
  7. Cost-Benefit
    • An activity will be pursued only if its benefits are equal to or greater than the costs.
    • Very closely related to Cost-Benefit is the principle of Affordance.
    • If the costs associated with interacting with a design outweigh the benefits, the design is poor. If the benefits outweigh the costs, the design is good. For example, walking some distance to see a museum exhibit constitutes a cost. The level of interest in the exhibit constitutes a benefit. Thus, if the level of interest outweighs the cost of the walk, the exhibit design is good.
      • In the end, the ultimate way of evaluating an app is with a cost-benefit ratio. How many apps do you know which have a higher cost of usability than their benefits?
  8. Depth of Processing
    • A phenomenon of memory in which information that is analyzed deeply is better recalled than information that is analyzed superficially.
    • Having to perform analysis of a piece of information can make recall go to 2-3 times better than simply having to memorize something.
    • This phenomenon is frequently experienced when learning new vocabulary. Words that seem unfathomable are actually the ones people tend to remember the most, due to their first attempts at trying to initially understand what they meant.
  9. Design by Committee
    • A design process based on consensus building, group decision making, and extensive iteration.
    • Generally, specially among writers, it is believed that only bad designs can come from committees. The compromises are so inevitable and numerous that the end product is, supposedly, invariably mediocre at best.
    • However, with large products, nothing would be done if multiple inputs weren't accepted. If iterated correctly, these inputs and proper management will lead to a superior product.
      • Autocracy is linear and fast, but risky and prone to error. Democracy is iterative and slow, but careful and resistant to error.
  10. Desire Line
    • A design process based on consensus building, group decision making, and extensive iteration.
    • Desire lines generally refer to worn paths where people naturally walk — the beaten path that trails off the sidewalk, usually as a shortcut to a destination. But, more generally, they are said to be an unbiased indication of how an object or environment is actually used by people, which is valuable information that can be applied to the design or, in some cases, redesign of the object or environment.
      • Desire lines are being more and more incorporated into architectural designs, but they should also be present in apps.
  11. Face-ism Ratio
    • The ratio of face to body in an image that influences the way the person in the image is perceived.
    • Images depicting a person with a high face-ism ratio — the face takes up most of the image — focus attention on the person’s intellectual and personality attributes. Images depicting a person in a low face-ism ratio — the body takes up most of the image — focus attention on the physical and sensual attributes of the person. The face-ism ratio is calculated by dividing the distance from the top of the head to the bottom of the chin (head height) by the distance from the top of the head to the lowest visible part of the body (total visible height).
      • It is very common to see web pages being needlessly sexualized by using images with high face-ism ratios, when, in fact, it would have been more intellectually compelling to use low face-ism ratios.
  12. Flexibility-Usability Tradeoff
    • As the flexibility of a system increases, the usability of the system decreases.
    • The flexibility-usability tradeoff is related to the well-known maxim, jack of all trades, master of none. Flexible designs can perform more functions than specialized designs, but they perform the functions less efficiently. Flexible designs are, by definition, more complex than inflexible designs, and as a result are generally more difficult to use.
    • This is the cause of many web and mobile app failures. Managers tend to overextend the focus of an app and the quality of its usability sharply decreases.
  13. Form Follows Function
    • Beauty in design results from purity of function.
    • The form follows function corollary is interpreted in one of two ways — as a description of beauty or a prescription for beauty. The descriptive interpretation is that beauty results from purity of function and the absence of ornamentation. The prescriptive interpretation is that aesthetic considerations in design should be secondary to functional considerations. The corollary was adopted and popularized by modernist architects in the early 20th century, and has since been adopted by designers in a variety of disciplines, causing many misinterpretations and design disasters worldwide.
    • Both interpretations, when taken to the extreme, defeat any design. Beauty without function has no usability. A functional design without attractiveness will not make anyone want to use it.
      • Use beauty to improve the function, and the function to make the design useful.
  14. Hick's Law
    • The time it takes to make a decision increases as the number of alternatives increases.
    • All tasks consist of four basic steps:
      1. Identify a problem or goal
      2. Assess the available options to solve the problem or achieve the goal
      3. Decide on an option
      4. Implement the option. Hick’s Law applies to the third step: decide on an option.
    • This is a very interesting law for keeping the design as simple as possible. The more you bloat it with options, the more annoying and time-consuming it is to deal with it.
  15. Hierarchy of Needs
    • In order for a design to be successful, it must meet people’s basic needs before it can attempt to satisfy higher-level needs.
    • There are five levels of design:
      1. Functionality
      2. Reliability
      3. Usability
      4. Proficiency
      5. Creativity
    • It's a very common mistake to strive for creativity directly, where the perceived value is the highest. However, in doing so, people forget to put sufficient effort into the 4 prior levels.
  16. Highlighting
    • A technique for bringing attention to an area of text or image.
    • A good directive is to highlight at most 10% of the visible design. High percentages can actually have a negative effect on readability.
    • Bolding and italicizing are the most advisable ways of highlighting text. Underlining usually adds considerable noise and can sharply decrease readability.
  17. Horror Vacui
    • A tendency to favor filling blank spaces with objects and elements over leaving spaces blank or empty.
    • Two other interesting principles closely related to Horror Vacui are Scarcity and the Veblen Effect.
    • Horror Vacui means "fear of emptiness".
    • People tend to feel unease at emptiness. For example, an empty sheet is a common source of anxiety; once the sheet starts to get filled up, people will try to complete it with patterns resembling the original ones.
    • Nevertheless, it is important to keep in mind that the more things exist within a design, the perceived value of each particle decreases. That's one of the reasons for luxury brands to display fewer items than their cheaper competitors.
  18. Legibility
    • The visual clarity of text, generally based on the size, typeface, contrast, text block, and spacing of the characters used.
    • Readability is another useful topic for research in Legibility, which is also related to Highlighting.
    • For printed text, standard 9- to 12-point type is considered optimal, unless you're dealing with specific groups of people, like seniors.
    • There is no performance difference between serif and sans serif typefaces.
    • Performance is optimal when contrast levels between text and background exceed 70%.
    • Proportionally spaced typefaces are preferred over monospaced.
  19. Not Invented Here
    • A bias against ideas and innovations that originate elsewhere.
    • Four social dynamics underlie NIH:
      • Belief that internal capabilities are superior to external capabilities
      • Fear of losing control
      • Desire for credit and status
      • Significant emotional and financial investment in internal initiatives
    • The best way to address NIH is prevention. Incentivize open minds, encourage team members to interact with the wider community, use external reviewers, etc.
  20. Ockham's Razor
    • Given a choice between functionally equivalent designs, the simplest design should be selected.
    • The Ockham's razor is one of the most useful principles in life. It is also closely related to the Pareto (80/20) and the KISS (Keep It Simple, Stupid) programming rule. It is very common for overenthusiastic engineers and designers to overengineer products and systems.
    • Although the principle is named after William of Ockham, a 14th century Franciscan friar and logician, nobody has ever truly confirmed its origins.
    • Some related quotes coming from various different sources:
      • Entities should not be multiplied without necessity. — William of Ockham (1287 – 1347)
      • That is better and more valuable which requires fewer, other circumstances being equal. — Robert Grosseteste (circa 1175 – 1253)
      • Nature operates in the shortest way possible. — Aristotle (384 – 322 BC)
      • We are to admit no more causes of natural things than such as are both true and sufficient to explain their appearances. — Isaac Newton (1642 – 1726)
      • Everything should be made as simple as possible, but not simpler. — Albert Einstein (1879 – 1955)
  21. Personas
    • A technique that employs fictitious users to guide decision making regarding features, interactions, and aesthetics.
    • The design that seeks to accommodate everybody generally accommodates nobody well. So try to aim for one or more archetypal personas or users which would represent the target audience.
      • It is a very common mistake to only account for one persona when, in fact, there might be 2 or more different types of core customers for your service or product, resulting in an oversimplifed product which accomodates no one. Typically, products require around 3 primary personas in order to achieve good quality.
  22. Priming
    • The activation of specific concepts in memory for the purposes of influencing subsequent behaviors.
    • Whenever stimuli are received by the senses — sights, sounds, smells, touches, tastes — concepts are automatically activated in memory. Once concepts are activated, they stay activated for a period of time, capable of influencing subsequent thoughts, reactions, emotions, and behaviors.
    • In a classic experiment on the effects of priming, two groups of college students were given a series of written language tests. The language test for one group included words related to politeness, and the language test for the other group included words related to rudeness. Subjects were instructed to complete the test, and then go down the hall and find the test administrator to get instructions for their next task. When each student completed his or her test and went down the hall, the student found the test administrator engaged in a conversation with another person. Unbeknownst to the students, the real test regarded whether the students would interrupt the conversation, or wait politely until the conversation ended. The results were dramatic: 63 percent of the students primed with words related to rudeness interrupted, whereas only 17 percent primed with words related to politeness interrupted.
  23. Recognition over Recall
    • Memory for recognizing things is better than memory for recalling things.
    • Recognition memory is attained through exposure, and does not necessarily involve any memory about origin, context, or relevance. It is simply memory that something (sight, sound, smell, touch) has been experienced before. Recall memory is attained through learning, usually involving some combination of memorization, practice, and application. Recognition memory is also retained for longer periods of time than recall memory.
    • Decision-making is also greatly influenced by recognition. Easily recognized brands will probably feature better in rankings simply because people are used to them and not necessarily due to quality criteria.
  24. Scaling Fallacy
    • A tendency to assume that a system that works at one scale will also work at a smaller or larger scale.
    • Upon my death, if anyone asked what principle was broken most frequently during my lifetime, I'm certain I would answer that the biggest human disease is the Scaling Fallacy.
      • Every manager I've ever encountered — including me, of course —, from the lowest to the highest rank has made this mistake in his or her past: no, things almost always do not scale linearly; no, your product that works in a small scale will probably not work in the same way in a bigger scale.
    • There are two basic kinds of scaling assumptions to avoid when growing or shrinking a design:
      • Load assumptions occur when designers scale a design by some factor, and assume that the working stresses on the design scale by that same factor.
      • Interaction assumptions occur when designers scale a design, and assume that the way people and other systems interact with the design will be the same at other levels of scale.
  25. Serial Position Effects
    • A phenomenon of memory in which items presented at the beginning and end of a list are more likely to be recalled than items in the middle of a list.
    • The von Restorff Effect is another very interesting effect related to memory retention.
    • There are two major types of serial position effects:
      • Primacy effects occur because the initial items in a list are stored in long-term memory more efficiently than items later in the list.
      • Recency effects occur because the last few items in a list are still in working memory, and readily available.
    • The Serial Position Effect should be taught to anyone who's going to make a prsentation. The order in which the content is presented is going to completely alter how it will be memorized and, more importantly, interpreted.
    • For visual stimuli, items presented early in a list have the greatest influence; they are not only better recalled, but influence the interpretation of later items. For auditory stimuli, items late in a list have the greatest influence.
    • Present important items at the beginning or end of a list (versus the middle) in order to maximize recall. When the list is visual, present important items at the beginning of the list. When the list is auditory, present important items at the end. In decision-making situations, if the decision is to be made immediately after the presentation of the last item, increase the probability of an item being selected by presenting it at the end of the list; otherwise, present it at the beginning of the list.
    • As a curiosity, in the previously mentioned Butterfly Ballot disaster, being first on it was estimated to be worth between 1 percent and 4 percent of the vote.

Unfortunately, I won't cover many other brilliant principles, but here are some that didn't quite make the cut of the previous section — also in alphabetical order:

  1. Aesthetic-Usability Effect
    • Aesthetic designs are perceived as easier to use than less-aesthetic designs.
  2. Affordance
    • A property in which the physical characteristics of an object or environment influence its function.
  3. Attractiveness Bias
    • A tendency to see attractive people as more intelligent, competent, moral, and sociable than unattractive people.
  4. Closure
    • A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual elements.
  5. Expectation Effect
    • A phenomenon in which perception and behavior changes as a result of personal expectations or the expectations of others.
  6. Exposure Effect
    • Repeated exposure to stimuli for which people have neutral feelings will increase the likeability of the stimuli.
  7. Fitt's Law
    • The time required to move to a target is a function of the target size and distance to the target.
  8. Forgiveness
    • Designs should help people avoid errors and minimize the negative consequences of errors when they do occur.
  9. Interference Effects
    • A phenomenon in which mental processing is made slower and less accurate by competing mental processes.
  10. Inverted Pyramid
    • A method of information presentation in which information is presented in descending order of importance.
  11. Mapping
    • A relationship between controls and their movements or effects. Good mapping between controls and their effects results in greater ease of use.
  12. Mental Model
    • People understand and interact with systems and environments based on mental representations developed from experience.
  13. Propositional Density
    • The relationship between the elements of a design and the meaning they convey. Designs with high propositional density are more interesting and memorable than designs with low propositional density.
  14. Prospect-Refuge
    • A tendency to prefer environments with unobstructed views (prospects) and areas of concealment and retreat (refuges).
  15. Red Effect
    • A tendency to perceive women wearing red as more attractive and men wearing red as more dominant.
  16. Redundancy
    • The use of more elements than necessary to maintain the performance of a system in the event of failure of one or more of the elements.
  17. Rosetta Stone
    • A technique for communicating novel information using elements of common understanding.
  18. Savanna Preference
    • A tendency to prefer savanna-like environments to other types of environments.
  19. Stickiness
    • A method for dramatically increasing the recognition, recall, and unsolicited sharing of an idea or expression.
  20. Uncanny Valley
    • Anthropomorphic forms are appealing when they are dissimilar or identical to humans, but unappealing when they are very similar to humans.
  21. Uncertainty Principle
    • The act of measuring certain sensitive variables in a system can alter them, and confound the accuracy of the measurement.
  22. Waist-to-Hip Ratio
    • A preference for a particular ratio of waist size to hip size in men and women.
Book Cover
The new edition's front cover.