home  /  blog  /  on-design-principles

On Design Principles

September 9, 2023 (1y ago)

     

1223 Words

     

7 Min Read

by Mike Stern - Apple WWDC18

Purpose of Human Interface Design : Serving the human being, a positively effecting the live people who use the app, the only thing really matter is how well your app satisfy the emotional and the practical needs of the people you designing for.

Design Principle don't tell us how to do specific things in our design, they tell us why we should do those things. Why, not how. How is developer task.

Apps Should Provide

  • Predictability and stability → The consequences, Solid, Trustworth
  • Clear and helpful information
  • Streamlined and simple workflows → Effectively and efficiently accompolish their task
  • A delightful experience

Everyone Needs to..

  • Feel safe → Predictability
  • Understand → Knowledge, Meaning, Understanding
  • Archive → Accompolish task, Archieve professional or personal goal
  • Experience beauty → Consistent, Ease to use

Designing so often resolving those differences

Wayfinding System

  • Help people navigate complex enviroment, quicky and successfuly, they critical to make people oriented and save
  • Good wayfinding system offer a comperhensive and understandablae list of general locations that people can visit.
  • They provide needed details about what is on those locations.
  • Highly contextual, highly specific as we going to deeper and deeper into the system.
  • They help people orient themself by clearly highlighting their current location relative to other locations .
  • They provide clear exit path
  • Help us to feel safe, by answering :
    • Where am I? → Title
    • Where can I go? → Navigation (Top Nav, Footer)
    • What will I find when I get there? → The name of the navigation link
    • What's nearby? → Top Nav, Sidebar, Views, Footer
    • How do I get out? → Exit button

    Every screen in your app should answer these question or your user will feel lose

Feedback

  • Status → let us know how the (object) is doing
  • Completion → let us know wheater action we perform are completed successfuly or fail
  • Warning → let us know potential problem
  • Errors → let us know what we do cause an error
  • Good Feedback Answers...
    • What can I do?
    • What just happened?
    • What's happening?
    • What will happen in the future?

Visibility

  • It's important to service key status information in higher level whenever possible
  • Visibility has its limit

Consistency

  • Internal Consistency → designing control to share a similar look and feel → Provide Cohesion → Product Integrity
  • Being consistence take self control and restrain
  • Make your app more approable and usable
  • Always trying to be consistence unless you have really strong justification of otherwise
  • Internal Consistency
    • Designing control to share simillar look and feel that match each other
    • Make app feel cohesive
    • When everything matches, or fits, people get a sense of product integrity
    • We intuitively that design choise is deliberate and thorougly considered

Mental Model

  • We have a mental model of every system we have interactive with
  • Mental model are oversimplification. They do not fully capture the inner working of the system. The more experience you with the system the more sophisicated your model become.
  • Develop through personal experience, and based on incomplete set of facts, so everyone mental model is unique.
  • System Model → mental model about how system works
  • Interaction Model → mental model about how we interact with the system
  • Expectation lead to Intuitivity
    • If mental model of a system match our expectation, that system become intuitive to use
    • If system does not match to our mental model, it breaks our expectation and we perceive it as unintuitive

Proximity

  • The distance between the control and the object that its effects. The closer the control to its object, the more connection we assume between the two.
  • The closer the control and the object or the region of interest the more like you want to interact with it and control it.

Grouping

  • Helps people understand the relationship between elements. Its key to give a design structure

Mapping

  • Designing control to resamble the object that they affect
  • How controls arrange relative to each other

Affordance

  • UI represent what they are afford to us
  • Looks like physical characteristic that make certain action possible, and other less possible
  • It is not the object itself, it more the relationship that the user have with the object
  • Varies base on physical abilities
  • Lettting people know what action that possible
  • The obviousness and the visibility of those cues help people know the correct or the intented way to interact
  • It must clear what action possibility it afford, if not, people won’t know how to properly interact with it

Progressive Disclosure

  • Technique for reduce clutter, managing complexity, and simplifying decision making
  • Gradually direct people from simple to complex
  • Hiding away complexity, so people can accomplish basic tasks with simple and more approchable interaface
  • Less likely to be overwhelmed

Pareto Principle

  • 80/20
  • Roughly 80 effect comes from 20 effort

Symmetry

  • Type
    • Reflectional symmetry
    • Radial/rotational symetry
    • Translational symmetry
  • It happen and uniquotus in nature, and we tend to associate them with good health, stability, balance, and orderliness.
  • Symmetrical elements, even though they are not physically connect to each other, they perceived they are
  • We consider symmetry as aesthetically pleasing, probably for very good evolutionary reason
  • An attractive interface tend to demostrate a mixture of reflectional and translational symmetry
  • Translational symmetry gives the interface a sense of structure and order through the repetition of light element

Summary

  • Design principles express fundamental truth about human perception and congition
  • They are simple, but powerful reminder about the true nature and purpose of design
  • They provide a framework for understanding and a language for articulating a design strengths and a shortcoming
  • After learn this design principles, I hope we will have a clear sense of how your app designed can help to fulfill basic needs that all we share; the need to feel safe, the need to understand, the need to experiece beauty and joy.

Challanges Applying Design Principles

  • They can conflict with each other
  • Too much of a good thing
  • Their relevance varies

Notes

  • Designing is a lot easier if you understanding the fundamental
  • Let the design principles be our north star, they will guide us to making app that better serve the human being that we designing for, and that is what matters most
  • The people that you designing for will recognize, at some level, all the hard work you are invested, they will appreciate the thougfullness and they will sense the humanity of the people who made it.

Feedback

/home
Home
/experiences
Experiences
/blog
Blog
/experiments
Experiments
/pure
Pure