10 design principles every designer should know

Simple rules guide you towards appropriate design decisions and help you make a more compelling case for decision-makers.

Taras Bakusevych
UX Collective

--

10 designs principles posters in blue colours

Design Principles are an assortment of considerations that form the foundation of any good product design. You can find many articles online listing various principles, but often they lack concrete examples from products we encounter daily. Here are ten principles that can help you create more usable, effective, and immersive designs.

Animation of 2 TV remote controls. One with many buttons and one with fe

The Flexibility-Usability tradeoff

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

Flexible designs support more functions and satisfy a wider set of requirements, but they perform those functions less efficiently than specialized tools.

When balancing flexibility versus usability, consider how well the needs of the users are understood, and how likely they are to evolve or change. Flexible products come with significant costs in terms of complexity, usability, adoption time, and investment requirements.

Adobe Photoshop is widely used by designers, graphic artists, photographers, and creative professionals. With every new version of the Photoshop feature set was expanding to accommodate a larger set of use cases, this resulted in a highly flexible but complex user interface. On the contrary, Figma is purposefully built for UI design and has a very lean feature set. Its minimalistic interface can be fully leveraged without much training.

Figma and Adobe Photoshop user interfaces

What to do:

  • Support more flexibility when the target audience’s needs cannot be clearly anticipated. Yet don’t forget to provide smart defaults and out of the box solutions
  • Understand that every new feature contributes to the complexity, prioritize and reduce the scope. Focus on the key product value proposition. With every new release try to improve the existing feature set and not only add new features
  • Limit the number of alternative approaches and views that support the same need. Design a more prescriptive user interface.
Hear beating and eyes following it animation

The Aesthetic-Usability Effect

Users have a tendency to perceive aesthetically pleasing designs as more usable. We tend to believe that products that look better will work better — even if they actually don’t.

In 1995 after testing 26 variations of an ATM UI, asked the 252 study participants to rate each design on ease of use, as well as aesthetic appeal. Researchers Masaaki Kurosu and Kaori Kashimura found that users are strongly influenced by the aesthetics of any given interface, affecting their perception of ease of use.

The GAP error page is quite usable in terms of, not using unfamiliar for a user’s error codes like “404” and listing possible reasons of why the error occurred. In addition, the page has a clear call to action and support contacts. Opposite to bland and straight-to-the-point Gap page, Pixar’s 404 page focuses on evoking positive relationships and emotions in this stressful scenario. Using a much richer visual and playful character from their universe they try to make you smile.

Pixar and GAP 404 pages screenshots

What to do:

  • Aspire to create aesthetic designs. Users are more likely to want to try a visually appealing product, and they’re more patient with minor issues. So it’s a worthy investment of time and money.
  • Beauty is in the eye of the beholder. What may seem aesthetically pleasing to you may not seem the same to your target audience. Invest in research and testing.
  • In your designs refer to principles like Attractiveness bias, Golden Ratio, Countour Bias, and rule of thirds to affect aesthetics.
Animation of pressing the button that results in explosion

Forgiveness

Good design should help users avoid errors and minimize the negative consequences of errors when they do occur.

We are human, and, consequently, we make all sorts of mistakes: Slips — when users act and get unexpected results, like typos. Mistakes — due to gaps in knowledge or an incorrect assessment of a situation. Or lapses — due to concentration, memory failures.

Amazon search forgiveness helps shoppers in a rush get the results they wanted. When detecting typos, the system will present results for the corrected search term. Gmail also is leveraging many methods to make its interface more forgiving. When sending an email app creates a tiny artificial delay to give users a chance to cancel it if they changed their minds. Or in case of mentioned “attachment”, upon sending app will remind them to actually include it in case they forgot.

Amazon and Gmail user interface screenshots

What to do:

  • The best way to avoid errors is to create designs with good affordance — physical characteristics of the design that influence its appropriate use.
  • Support the reversibility of actions, or build in “safety nets” — processes that prevent catastrophic errors or failures.
  • Make sure you demand confirmations for important and irreversible actions only.
Animation of balls disappearing with price proportionaly increasing

Scarcity

Products, services, and opportunities become more desirable when they are perceived to be in short supply or occur infrequently.

Brands use the scarcity principle to persuade people to purchase a product or take another desired action. Few principles move humans to action more effectively than scarcity.

Many physiological phenomenons contribute to this principle effect. Fear of missing out (FOMO) — the feeling of apprehension that one is either not in the know or missing out on information, events, experiences, or life decisions that could make one’s life better.

To the point where there are whole categories of products that are called “Veblen good” — a good for which demand increases as the price increases, because of its exclusive nature and appeal as a status symbol.

On the majority of travel booking sites, such as KAYAK or Booking, listings are displayed with a note that only a few seats/rooms/items are left at a certain price. New HYT watch limited to 5 pieces, is a classic “Veblen good” example that may sell better at 2–3X cost due to a perceived feeling of exclusivity.

Kayak and The Watch Pages website screeenshots

What to do:

  • Depending on the nature of the product or service employ various tactics to create scarcity:
    - Exclusive Information for a ”privileged” group of users,
    - Limited Access for a “privileged” group of users,
    - Limited Number of items,
    - The Suddenness of supply drop,
    - A clear indication of High demand communicated to customers.
  • Driving users to take action quickly, often without careful consideration of consequences may create a huge short-term gain for a business, but many of those tactics are considered as “dark UX” and can damage brand loyalty in a long run.
Animation of dial moving to adjust signal ratio

Signal to Noise ratio

the ratio of relevant to irrelevant information in an interface or communication channel.

Human-computer interaction is based on the transmission and reception of information. Any excessive styling or information that is presented inefficiently or inappropriately degrades the signal and adds noise to the designs. A high signal–to–noise ratio is a key goal for any UX designer.

Signal degradation occurs due to many reasons: absence of hierarchy, information overload, highly stylized typography or charts, unclear icons, and inappropriate visuals, etc.
Bellow, we see 3 examples of mobile e-commerce homepages with varying levels of noise. Aliexpress app manages to display a ton of information, links, and calls to action. Unfortunately, this paired with bright UI and flashy backgrounds result in excessive noise that makes it almost impossible to focus on something specific.

Screenshots of Aliexpress, Target ad Etsy mobile homepages

What to do:

  • Identify key user goals, and essential information needed to make a decision. Keep designs simple.
  • Balance size, contrast, and visual “weight” of every element in design. Use typography, color and to build a clear hierarchy and bring focus on information that should be communicated to the user.
80/20 pie charts animations

80/20 Rule

also known as the Pareto Principle, states that a high percentage of effects in any large system are caused by a low percentage of variables.

You can see this principle affects almost everywhere. Although the 80–20 axiom is frequently used in economics, you can apply the concept to User interfaces, quality control, and engineering.

Here are some examples. Approximately:

  • 80% of product’s usage involves 20% of its features
  • 80% of errors are caused by 20% of components
  • 80% of company revenue comes from 20% of its customers
  • 80% of progress comes from 20% of the effort
  • 80% of ideas will come from 20% of people

iOS Calculator app takes full use of the 80/20 rule. Key calculator features that correspond to the lion’s share of users’ tasks and usage volume are accessible in default portrait mode. Infrequently used features appear unobtrusively in landscape mode.

iOS calculator app

What to do:

  • Leverage product analytics to Optimize your design efforts!
    If the 20 percent of your customers correspond to 80% of company revenue. And they use 20% of the product features 80% percent of the time than this is where teams need to spend most of the time on research, design, and testing.
  • Always consider Return on Investment of time and money spent on design research activities and audience to be involved.

Most advanced yet acceptable

The most novel design that is still recognizable and familiar has the highest likelihood of becoming a commercial success.

In design new, and foreign experiences spark curiosity, originality is being valued above many things. Having said that, empiric research supports the fact that people prefer familiar experiences. Familiarity gives us a feeling of control and security.

“The adult public’s taste is not necessarily ready to accept the logical solutions to their requirements if the solution implies too vast a departure from what they have been conditioned into accepting as the norm.”
Raymond Loewy — acclaimed French-born American industrial designer, behind Coca-Cola bottle, Shell Oil logo, etc

Google Glass was a bold shot to bring the world a step further into the future. The marketing campaigns generated a lot of hype, but the product garnered considerable criticism, with concerns about its price, safety, and privacy. Google Glass seemed to lack the “cool” factor.
Fortune Magazine listed Nokia 7280 as one of the best products of 2004. Although its design was praised by many and even had some cult followers, generally had unsatisfactory sales.

What to do:

  • If you have to explain your design, or it requires extensive training and “help” features, your design is overly advanced or too complex. Aspire to create designs that will need little to no explanation.
  • Understand your target audience skill set, learning speed, and capacity for change
  • Advance design gradually, using an incremental approach to get to the ultimate vision.
Blocks moving animation

Immersion

A state of mental focus when awareness of the “real” world is lost and users are fully absorbed in an experience.

Immersion can occur while we playing a game, working on a captivating task, dancing. This feeling accompanied by a sense of joy is usually characterized by a modified sense of time or loss of self-consciousness. Those elements can occur independently of each other, but only in combination do they constitute a so-called flow state.

Pokemon Go — an app that took the world by storm in 2019, was one of the best examples of how to create an immersive experience through gamification, storytelling, and AR, so much so users were endangering themself in a rush to “catch them all”). Within 200 days, players had spent a record-breaking billion dollars on in-game upgrades.

IKEA Place lets you virtually place true-to-scale 3D models in your very own space. Combining the latest AR technology and IKEA’s smart home solutions you can experience IKEA like never before.

IKEA Place and Pokemon GO interface screenshots

What to do:

  • Design environments that minimize distractions, promote a feeling of control and provide feedback.
  • Provide clearly defined goals and challenges that can be overcome.
  • Leverage VR/AR/MR/XR to place the content and facilitate interaction in the virtual world, eliminating the abstraction between the content and its users.
Illustration of 2 funnels where poop icon enters and poor exits

Garbage in, garbage out

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

The principle is based on the observation that computers operate on strict logic, and good inputs generally result in good outputs, and bad inputs, result in faulty ones.

There may be many various problems of input:

As a result of mistakes — the inputs provided can be radically different from the input expected, like entering a phone number into a passport number field. Smaller slips can occur when the input type is correct, but there are errors, like misspellings.

A strict but guided process of publishing your experience on Airbnb truly helps improve the content on the platform and create consistency. Image quality requirements, references, word count limitations, and previews are just a fraction of mechanisms employed to assist users in the creation of the most attractive listing.

AirBnB web app screenshots

What to do:

  • Design for good affordances and constraints to avoid mistakes.
  • Enable previews, confirmations, and autocorrect to minimize the problems of data quality.
  • When doing user research or interviews, choose the right sample. Ask the right questions. Make sure that your questions are not biased, confusing, or with embedded assumptions.
Animations of scales

Cost-benefit

Activity will be pursued only if its benefits are equal to or greater than costs.

Users’ time, effort, expenses, and other resources constituents cost that will be compared against the potential benefits gained from using a service or product.

The cost-benefit principle is often used by product teams to assess the financial return associated with new features and elements, and establish features priority.

App Nuri, like many other startups, gives users monetary rewards for referrals. Other investing products like Robinhood gift stocks for opening an account with them. Priority Matrix — is a simple activity that helps teams access the value each feature brings vs the effort required to deliver it.

Screenshoot of Nuri Application and Prioirity Matrix

What to do:

  • Focus on streamlining the flows and think about how you can minimize effort for each task in the platform.
  • Don’t mistake features that excite stakeholders or designers with features valuable for customers. Focus groups and usability tests will help you find out what is truly valuable.

Follow for more design content 🤗
If you would like to read more about various design principles, check out “Universal Principles of Design” by William Lidwell, Kritina Holden, and Jill Butler.

--

--