#02 Design principles

Notes from WWDC 2017 talks

Design principles overview

This slide is a good overview of core ideas in this session.

Talking about design principles, especially very universal and generic ones, will easily lead to a boring session. The speaker uses a trip to Hawaii as the thread of this talk.

Different situations in the trip become the best examples to help explaining the principles and the timeline of a trip serves as the sequence order of these principles. So later, when I try to recall those principles, I can firstly think about the steps which are much easier to remember, e.g. go to airport, drive to hotel, stay in hotel, order food and go diving, and then correlate each step with one principle.

👶🏻 Human

The keyword the speaker started with is “human”. Apple always use the term “Human Interface” since the beginning.

It is “Human interface” not “user interface”.

What does Human mean?

  • One side is having shortcoming, limits and imperfection
  • Another side is having humanity, kindness, generosity, compassion and goodness.

Serving Human is the goal

  • The real & fundamental goal of interfaces is to serving “Human” in their life for their emotional & practical needs.
  • Not making a beautiful app
  • not making a simple-to-use app

Fundamental human needs:

  • Feel safe: security
  • Understand: search for meaning, knowledge and understanding
  • Achieve: accomplish tasks, achieve personal & professional goals
  • Experience beauty & joy

Correspondingly, a well designed app should provide:

  • Predictability & stability: so people feel it stable, solid and trustworthy
  • Clear & helpful information: so people gets knowledge
  • Streamlined & simple workflows: so people can effectively and efficiently accomplish their tasks
  • Aesthetically pleasing, enjoyable & delightful experience

With all these considerations, the app just feel so human. People can feel the humanity who designed it.

Great design is guided by deeper understanding of what design is in a more fundamental and human level. These deep understandings are the core truths, universal & timeless, on how we process information, make decisions and communicate. It is about why the design is great, not how.

We document these understandings as “Design Principles”.

Let’s dive into the design principles.

✈️ Airport

👉🏼 #1 Way-finding

When navigating in a complex environment, people wants to feel oriented, safe and comforting.

At the airport, all kinds of signs help answer the way-finding questions. Your app should offer “signs” too. Plz, review each screen with the questions.

🚘 Driving

👉🏼 #2 Feedback

It’s like the product having a conversation with whom you are designing for. People have questions, and the product gives them feedbacks.

To have a better conversation with users, you can try to just sit with someone and explain “what just happened,” “what’s happening.” Just say it. You will do it in a natural and human way. Then compare how the current app expresses.

Feedbacks should be in an informative, understandable, immediate way. Feedbacks are needed for:

  • Status: e.g. fuel, speed
  • Completion: sound and light are good ways to give completion feedback. e.g., the sound for the door lock, gear change.
  • Warning: potential problems, e.g., low oil
  • Errors: the product should try to help people avoid situations in this category.

👉🏼 #3 Visibility

Apparently, visibility improves usability. The tradeoff is the interfaces may be too overwhelming.

👉🏼 #4 Consistency

Consistency also improves usability.

All cars share consistency in design. No need for us to learn how to drive with different cars.

Always accelerate is at right side and brake is at left side.

Always gear options are: Park, Reverse, Neutral, Drive, Signal.

What our app should do:

  • External consistency: On the one hand, check other apps on common workflow for typical tasks and align with the existing patterns. On the other hand, be different and don’t be afraid to try out new ideas because that’s how innovation come from.
Use this “Sharrow” to feel native on iOS or the other to be consistent across platforms?
  • Internal consistency: Everything matches and fits which provide a cohesive experience. Users feel the product’s integrity. To achieve this, design decisions should be deliberate and thoroughly considered because being consistent takes reasoning & control.

Be consistent unless you have strong justification to do so.

🏨 Hotel

👉🏼 #5 Mental model

Mental model is highly based on everyone’s personal experience and is usually deeply ingrained notion.

When the interaction model doesn’t match with people’s mental model, they say: it’s un-intuitive.

People’s mental model on how a faucet works, two handles: one hot, one cold
New design, same with two handles, but one changes the temperature, one controls the water flow

👉🏼 #6 Proximity

Of course, the switch for hallway lights is in the hallway; the the switch for bathroom lights is in the bathroom.

👉🏼 #7 Grouping

Similar things come together as a group. Grouping gives design a structure and establishes the relationship.

Switches for shade and for lights are separated into two groups

👉🏼 #8 Mapping

Mapping is to resemble the objects. Naturally, you assume moving the slider down means bringing the shade down.

🍔 Dinner

👉🏼 #9 Affordance

The concept of “perceived affordance” means when people see some objects, what are the actions they perceive as possible.

When you see a plate, you know it’s for putting food on.

When you see a gate, you know you can walk through.

👉🏼 #10 Progressive disclosure

It is an important principle to prevent an overwhelmingly task, to manage complexity and to simplify people’s decision making efforts.

The example is about ordering a hamburger. It will be way more easier if someone steps you through and asks one decision at a time than showing you all the possibilities. It is helpful to hide irrelevant and unimportant information.

The former decision will be relevant to the latter ones. If I didn’t order French fries, no need to tell me different flavors of French fries I can choose from.

But…

If you tells me, there is garlic French fries available. I will directly go for it. This tricky part brings up the next principle.

👉🏼 #11 80/20 rule

Not all features and functionalities are created equally. Some are much more important than the others. It’s okay to make 20% easy to find and hide the other 80%.

Classic example is the printing interface.

🐠 Diving

👉🏼 #12 Symmetry

Finally, it is the most fun part of the trip, diving to the underwater wonderland. There are a swarm of tuna fish, beautiful corals, squid. Why do they look utterly beautiful?

That’s the last principle: Symmetry.

There are three types of symmetry ubiquitous in nature:

  • Reflection
  • Rotation
  • Translation

We associate them to good health, stability, balance and orderliness. For some evolutionary reasons, our brain thinks them aesthetically pleasing.

Reflection in the weather app
Translation: repetition of likely items

Interestingly, among the 12 principles above, only the last one is about beautiful looking and 11 of them are about how to make things understandable. So it seems much easier to manipulate our brain to judge at a glance if the thing looks good or not, but much harder to make the brain understand, decide and react properly.

It is very essential for the designers to get familiar with these principles and practice how to use these terms help articulate the design decisions.

User experience designer @Ginetta, from Shanghai to Zurich