Core Principles

Our principles to design interfaces

This page contains the philosophy and psychology behind our user interfaces. Read on to learn about our design principles you’ll need to create intuitive and attractive interfaces. We encourage you to go beyond these guidelines. Most, if not all, of these principles are based on Apple Human Interface Guidelines (2005).

Consistency

In law, the latin phrase stare decisis (“to stand by things decided”) is often used to refer to the doctrine of precedent — the idea that, when deciding a case, a court should look to previous decisions made for cases with similar facts and scenarios. This principle serves as a foundation of the American legal system, and the English common law from which it derives.

NSHipster.

Consistency is about making users feel safe because the product behaves in a familiar fashion. It makes users feel in control, because they’ve already used the product in similar ways. It also helps to keep them focused on the task at hand, not distracted by having to learn again how something behaves.

A great example of consistency is how we build our navigation interactions. Instead of starting from scratch, we use the system’s navigation model our users are well used to. This way, users won’t need to learn new ways to navigate between screens, and we won’t put potentially flawed interactions in place.

This is extremely important with gestures. If a screen comes into view from bottom to top, users may expect they can dismiss it just by dragging down.

Lastly, and as a bonus for us designers, it’s a time-saver! We can make decisions faster based on existing metaphors.

Tips:

  • Avoid creating entirely new types of interactions.
  • Rely on well-known interactions from the system.
  • Commit to metaphors introduced by your product, and be mindful about them.

Show, Don’t Tell

“A user interface is like a joke. If you have to explain it, it’s not that good.”

— Martin Leblanc

An effective user interface doesn’t need instructions. Users shouldn’t have to be told what we expect them to accomplish or how to do it. If a screen requires an explanation in order for users to complete a task, it’s flawed and needs re-thinking (like a bad joke).

A common mistake is to point things out instead of making them obvious. For example, a label that reads “click here to complete your purchase” if less intuitive than a big button that just reads “Purchase”.

Tips:

  • Avoid communicating intended interactions through words.
  • Make important elements stand out by themselves.
  • The use of color, animation, and affordances can help users understand your interface.

Affordances

“Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

— Donald Norman

Your design must be intuitive enough for users to understand how to interact with it naturally, just by looking at it. This can be accomplished by the use of visual cues, like colors and shadows.

For example, users can easily understand that an element is a button just by making it rounded and colored. Combining visual styles with animated cues, like “lifting” the button when hovered, can convey additional meaning.

It’s extremely helpful to observe objects from the real world and see how they behave. This will aid in making a user interface element feel authentic and intuitive by borrowing cues and behaviors from reality. For instance, when scrolling reaches a limit on an iPhone, it bounces back just like a spring in the real world.

Tips:

  • Look at real world objects when designing your interfaces. There are so many good examples.
  • More often than not, simple details have a great impact on conveying meaning and purpose.

Reflect User’s Mental Model

“You’ve got to start with the customer experience and work back toward the technology—not the other way around.”

—Steve Jobs

Users already have a mental model that describes the task your product is enabling. This model arises from a combination of real-world experiences, the use of other products, and with computers in general.

For example, users have real-world experience with grocery stores and online shopping. Based on this, a user has a conceptual model of “shopping” that includes certain expectations, such the ability to add products to a cart. A grocery shopping app that ignores this model and does not meet at least some of the user’s expectations would be difficult to use. This is because such a product imposes an unfamiliar conceptual model on its users instead of building on the knowledge and experiences those users already have.

Tips:

  • Try to discover your users’ mental models of the task your interface helps them perform.
  • Be aware of the model’s inherent metaphors, so you meet your user’s expectations.
  • Use familiar words and icons to reflect the model’s terminology and symbology.

Data Driven Informed

*During World War II, researchers at the Center for Naval Analysis faced a critical problem. Many bombers were getting shot down on runs over Germany. The naval researchers knew they needed hard data to solve this problem and went to work. After each mission, the bullet holes and damage from each bomber was painstakingly reviewed and recorded.

The data began to show a clear pattern (see picture). Most damage was to the wings and body of the plane. The solution to their problem was clear. Increase the armor on the plane’s wings and body.

[…] The researchers had only looked at bombers who’d returned to base. Missing from the data? Every plane that had been shot down. […] These surviving bombers rarely had damage in the cockpit, engine, and parts of the tail. This wasn’t because of superior protection to those areas. In fact, these were the most vulnerable areas on the entire plane.*

—Excerpt from “When data gives you the wrong solution”, Trevor Bragdon.

User testing must be conducted every time a new design or prototype is made. This process enables turning feedback and real-world use into better products, and incentives iteration. While a product is never really “finished”, and iteration and refinement continues even when your design leaves the door—don’t be tempted to ship unfinished or uninspired versions of your vision.

Do not ship any sort of user test to customers (like A/B tests), nor ask users, co-workers, or other people to make these decisions for you—most people don’t have the skills, knowledge, or experience to make good informed choices about your product.

This also applies to using raw data to drive product decisions. Metrics such as “most clicks” or “highest conversion rate” don’t translate to better products. Let data act as a check on your intuition and taste.

Tips:

  • Don’t let data guide the decision-making process.
  • Use your intuition and trust your judgment.
  • Understand the data and do not rush into conclusions.

Forgiveness

“It’s very difficult to design something for someone if you have no empathy.”

—Stewart Butterfield

Try to put in your users’ shoes and anticipate problems they may encounter when using your product. For example, on an iPhone you might want to increase the tappable area of a button beyond their visual boundary so it’s easier to interact even when users miss their target.

Encourage users to explore your product by making most actions easily reversible. People need to feel that they can try things without damaging the product or losing their data. Safety nets must be put in place, like an “Undo” button, so that people will feel comfortable learning about the product.

Always warn users when they initiate a task that will cause irreversible loss of data. Anticipate common problems and alert users about side effects. Be mindful about feedback—you don’t want to annoy users with too many alerts and diminish their effects (if that’s the case, chances are your design is flawed).

In some cases users will attempt to perform actions regardless of if the interface is disabled or if additional user input is required. For instance, dimming a button so it looks disabled may not be enough for certain users—you might want to provide additional feedback for users who attempt to interact with it and don’t fully understand how to complete their task.

Tips:

  • Provide extensive feedback so users feel they have enough information to make right choices.
  • Keep in mind your design and mental model is not the same for everybody—people have their own unique interpretation. Try to accommodate this in your designs.
  • Most users won’t have a vast knowledge of how your product works.

Accessible

Products are best when they can be used by everyone. See our Accessibility guidelines.

Global

“You take delight not in a city’s seven or seventy wonders, but in the answer it gives to a question of yours.”

— Italo Calvino, Invisible Cities

User interfaces serve the needs of people from all cultures and places. Designers need to learn how to think outside of their cultural context. You may not be even aware of things that could be any other way—from letters in the alphabet to the numbers of hours in a day.

Be aware of the linguistic and cultural conventions of your users, which include:

  • Language and Orthography
  • Use of Symbols, Colors, and Iconography
  • Text Direction and Layout
  • Keyboards and Input Methods
  • Personal Name Formatting
  • Calendar and Date Formatting
  • Currency and Number Formatting
  • Units and Measurement Formatting

Tips:

  • Do everything with internationalization in mind.
  • Always test your prototypes in different languages and locales.
  • Ensure developers understand they need to meet these requirements so they use the correct tooling and APIs from the start of a project.