Design Principles:
The Philosophy of UX


     Whitney Hess
           @whitneyhess
      http://whitneyhess.com
     whitney@whitneyhess.com
Hi, I’m Whitney Hess

 User Experience Designer
        Consultant
        New Yorker


      @whitneyhess
stakeholder interviews
web analytics       storyboards
  sketching                surveys            A/B testing
           prototyping               flow diagrams


 What we usually talk about
  when we talk about UX
 wireframes                                     scenarios
                               sitemaps
                personas                    card sorts
                    heuristic evaluation
usability testing
                                        user research
User Experience is the
   establishment
   of a philosophy
    about how to
     treat people
Visual Design is the
   establishment
  of a philosophy
    about how to
  make an impact
Principles of
Visual Design
Contrast
Emphasis
Variety
Balance
Proportion
Repetition
Movement
Texture
Harmony
Unity
Why principles?
    Consistency.
    Constraints.
   Shared vision.
Objective evaluation.
good
  design




   good
experience
good
L e t ’s
                        design
         do t h
t o ge           is
         the r




                        =
               !




                         good
                      experience
Principles of
Experience Design
Principles of Experience Design
   1. Stay out of people’s way.
   2. Create a hierarchy that matches people’s needs.
   3. Limit distractions.
   4. Provide strong information scent.
   5. Provide signposts and cues.
   6. Provide context.
   7. Use constraints appropriately.
   8. Make actions reversible.
   9. Provide feedback.
   10. Make a good first impression.
1. Stay out of people’s way
1. Stay out of people’s way
1. Stay out of people’s way
2. Create a hierarchy that
matches people’s needs
2. Create a hierarchy that
matches people’s needs
2. Create a hierarchy that
matches people’s needs
3. Limit distractions
3. Limit distractions
3. Limit distractions
4. Provide strong
information scent
4. Provide strong
information scent
4. Provide strong
information scent
5. Provide signposts and cues
5. Provide signposts and cues
5. Provide signposts and cues
6. Provide context
6. Provide context
6. Provide context
7. Use constraints appropriately
7. Use constraints appropriately
7. Use constraints appropriately
8. Make actions reversible
8. Make actions reversible
8. Make actions reversible
9. Provide feedback
9. Provide feedback
9. Provide feedback
10. Make a good first impression
10. Make a good first impression
10. Make a good first impression
Logos
                      consistency, logic




                     Persuasion


  Ethos                                       Pathos
credibility, trust                         emotions, imagination
Knowledge
                     consistency, logic




                      Purpose


 Ethics                                      Empathy
credibility, trust                        emotions, imagination
Are
universal principles
     enough?
Design principles for
companies you know
“Ten principles that contribute
to a Googley user experience”
 Focus on people – their lives, their work, their dreams.
 Every millisecond counts.
 Simplicity is powerful.
 Engage beginners and attract experts.
 Dare to innovate.
 Design for the world.
 Plan for today’s and tomorrow’s business.
 Delight the eye without distracting the mind.
 Be worthy of people‘s trust.
 Add a human touch.
“Ten principles that contribute
to a Googley user experience”
 Focus on people – their lives, their work, their dreams.
 Every millisecond counts.
 Simplicity is powerful.
 Engage beginners and attract experts.
 Dare to innovate.
 Design for the world.
 Plan for today’s and tomorrow’s business.
 Delight the eye without distracting the mind.
 Be worthy of people’s trust.
 Add a human touch.                              http://www.google.com/corporate/ux.html
Facebook Design Principles

          Universal.
          Human.
          Clean.
          Consistent.
          Useful.
          Fast.
          Transparent.
Facebook Design Principles

          Universal.
          Human.
          Clean.
          Consistent.
          Useful.
          Fast.
          Transparent.

                         http://www.facebook.com/note.php?note_id=118951047792
Windows User Experience
   Design Principles
Reduce concepts to increase confidence.
Small things matter, good and bad.
Be great at “look” and “do”.
Solve distractions, not discoverability.
UX before knobs and questions.
Personalization, not customization.
Value the life cycle of the experience.
Time matters, so build for people on the go.
Windows User Experience
   Design Principles
Reduce concepts to increase confidence.
Small things matter, good and bad.
Be great at “look” and “do”.
Solve distractions, not discoverability.
UX before knobs and questions.
Personalization, not customization.
Value the life cycle of the experience.
Time matters, so build for people on the go.
                                    http://msdn.microso.com/en-us/library/dd834141.aspx
Burning Man
Keep good company.
Notice the ordinary.
Preserve the ephemeral.
Design not for the elite but for the masses.
Explain it to a child.
Get lost in the content.
Get to the heart of the matter.
Never tolerate “OK anything.”
Remember your responsibility as a storyteller.
Zoom out.
Switch.
Prototype it.
Pun.
Make design your life… and life, your design.
Leave something behind.
Charles and Ray Eames
  Keep good company.
  Notice the ordinary.
  Preserve the ephemeral.
  Design not for the elite but for the masses.
  Explain it to a child.
  Get lost in the content.
  Get to the heart of the matter.
  Never tolerate “OK anything.”
  Remember your responsibility as a storyteller.
  Zoom out.
  Switch.
  Prototype it.
  Pun.
  Make design your life… and life, your design.
  Leave something behind. http://www.amazon.com/Fieen-ﬔings-Charles-Ray-Teach/dp/193031700X
Burning Man
 Radical Inclusion.
 Giing.
 Decommodification.
 Radical Self-reliance.
 Radical Self-expression.
 Communal Effort.
 Civic Responsibility.
 Leaving No Trace.
 Participation.
 Immediacy.
Burning Man
 Radical Inclusion.
 Giing.
 Decommodification.
 Radical Self-reliance.
 Radical Self-expression.
 Communal Effort.
 Civic Responsibility.
 Leaving No Trace.
 Participation.
 Immediacy.
              http://www.burningman.com/whatisburningman/about_burningman/principles.html
ﬔe Starbucks Experience


       Make it your own.
       Everything matters.
       Surprise and delight.
       Embrace resistance.
       Leave your mark.
ﬔe Starbucks Experience


       Make it your own.
       Everything matters.
       Surprise and delight.
       Embrace resistance.
       Leave your mark.




                               http://www.starbucksexperience.net/excerpts.html
What are
your company’s
  principles?
Steps to Craing Your
Own Design Principles
1. Research available principles for competitors
   and related organizations (even aspirational)
2. Gather, list and print out the business goals,
   user needs and brand attributes
3. Brainstorm with key collaborators across
   capabilities and functions
4. Narrow down to no more than 10, preferably 7
5. Ensure they don’t conflict or overlap
6. Ensure they’re pithy and memorable
1. Does it come directly from research?
2. Does it help you say ‘No’ most of the time?
3. Does it distinguish your design from your competitors’?
4. Is it something you might reverse in a future release?
5. Have you evaluated it for this project?
6. Is its meaning constantly tested?

                                                            http://www.uie.com/articles/creating-design-principles/
When to Use Your
Design Principles
1. During the project kickoff meeting
2. When prioritizing features
3. Brainstorming sessions
4. Design critiques
5. Stakeholder presentations
6. Resolving conflict
7. Postmortems
8. Web metrics analysis
User Experience is the
   establishment
   of a philosophy
    about how to
     treat people
Bathroom mirror
Seaport Boston Hotel
Help people
make their
lives better
ﬔank you.
      Whitney Hess
      @whitneyhess
 http://whitneyhess.com
whitney@whitneyhess.com

Design principles philopsohy of ux -Whitney Hess

  • 1.
    Design Principles: The Philosophyof UX Whitney Hess @whitneyhess http://whitneyhess.com whitney@whitneyhess.com
  • 2.
    Hi, I’m WhitneyHess User Experience Designer Consultant New Yorker @whitneyhess
  • 3.
    stakeholder interviews web analytics storyboards sketching surveys A/B testing prototyping flow diagrams What we usually talk about when we talk about UX wireframes scenarios sitemaps personas card sorts heuristic evaluation usability testing user research
  • 4.
    User Experience isthe establishment of a philosophy about how to treat people
  • 5.
    Visual Design isthe establishment of a philosophy about how to make an impact
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
    Why principles? Consistency. Constraints. Shared vision. Objective evaluation.
  • 18.
    good design good experience
  • 21.
    good L e t’s design do t h t o ge is the r = ! good experience
  • 22.
  • 23.
    Principles of ExperienceDesign 1. Stay out of people’s way. 2. Create a hierarchy that matches people’s needs. 3. Limit distractions. 4. Provide strong information scent. 5. Provide signposts and cues. 6. Provide context. 7. Use constraints appropriately. 8. Make actions reversible. 9. Provide feedback. 10. Make a good first impression.
  • 24.
    1. Stay outof people’s way
  • 25.
    1. Stay outof people’s way
  • 26.
    1. Stay outof people’s way
  • 27.
    2. Create ahierarchy that matches people’s needs
  • 28.
    2. Create ahierarchy that matches people’s needs
  • 29.
    2. Create ahierarchy that matches people’s needs
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
    7. Use constraintsappropriately
  • 43.
    7. Use constraintsappropriately
  • 44.
    7. Use constraintsappropriately
  • 45.
    8. Make actionsreversible
  • 46.
    8. Make actionsreversible
  • 47.
    8. Make actionsreversible
  • 48.
  • 49.
  • 50.
  • 51.
    10. Make agood first impression
  • 52.
    10. Make agood first impression
  • 53.
    10. Make agood first impression
  • 54.
    Logos consistency, logic Persuasion Ethos Pathos credibility, trust emotions, imagination
  • 55.
    Knowledge consistency, logic Purpose Ethics Empathy credibility, trust emotions, imagination
  • 56.
  • 57.
  • 58.
    “Ten principles thatcontribute to a Googley user experience” Focus on people – their lives, their work, their dreams. Every millisecond counts. Simplicity is powerful. Engage beginners and attract experts. Dare to innovate. Design for the world. Plan for today’s and tomorrow’s business. Delight the eye without distracting the mind. Be worthy of people‘s trust. Add a human touch.
  • 59.
    “Ten principles thatcontribute to a Googley user experience” Focus on people – their lives, their work, their dreams. Every millisecond counts. Simplicity is powerful. Engage beginners and attract experts. Dare to innovate. Design for the world. Plan for today’s and tomorrow’s business. Delight the eye without distracting the mind. Be worthy of people’s trust. Add a human touch. http://www.google.com/corporate/ux.html
  • 61.
    Facebook Design Principles Universal. Human. Clean. Consistent. Useful. Fast. Transparent.
  • 62.
    Facebook Design Principles Universal. Human. Clean. Consistent. Useful. Fast. Transparent. http://www.facebook.com/note.php?note_id=118951047792
  • 64.
    Windows User Experience Design Principles Reduce concepts to increase confidence. Small things matter, good and bad. Be great at “look” and “do”. Solve distractions, not discoverability. UX before knobs and questions. Personalization, not customization. Value the life cycle of the experience. Time matters, so build for people on the go.
  • 65.
    Windows User Experience Design Principles Reduce concepts to increase confidence. Small things matter, good and bad. Be great at “look” and “do”. Solve distractions, not discoverability. UX before knobs and questions. Personalization, not customization. Value the life cycle of the experience. Time matters, so build for people on the go. http://msdn.microso.com/en-us/library/dd834141.aspx
  • 67.
    Burning Man Keep goodcompany. Notice the ordinary. Preserve the ephemeral. Design not for the elite but for the masses. Explain it to a child. Get lost in the content. Get to the heart of the matter. Never tolerate “OK anything.” Remember your responsibility as a storyteller. Zoom out. Switch. Prototype it. Pun. Make design your life… and life, your design. Leave something behind.
  • 68.
    Charles and RayEames Keep good company. Notice the ordinary. Preserve the ephemeral. Design not for the elite but for the masses. Explain it to a child. Get lost in the content. Get to the heart of the matter. Never tolerate “OK anything.” Remember your responsibility as a storyteller. Zoom out. Switch. Prototype it. Pun. Make design your life… and life, your design. Leave something behind. http://www.amazon.com/Fieen-ﬔings-Charles-Ray-Teach/dp/193031700X
  • 69.
    Burning Man RadicalInclusion. Giing. Decommodification. Radical Self-reliance. Radical Self-expression. Communal Effort. Civic Responsibility. Leaving No Trace. Participation. Immediacy.
  • 70.
    Burning Man RadicalInclusion. Giing. Decommodification. Radical Self-reliance. Radical Self-expression. Communal Effort. Civic Responsibility. Leaving No Trace. Participation. Immediacy. http://www.burningman.com/whatisburningman/about_burningman/principles.html
  • 71.
    ﬔe Starbucks Experience Make it your own. Everything matters. Surprise and delight. Embrace resistance. Leave your mark.
  • 72.
    ﬔe Starbucks Experience Make it your own. Everything matters. Surprise and delight. Embrace resistance. Leave your mark. http://www.starbucksexperience.net/excerpts.html
  • 73.
  • 74.
    Steps to CraingYour Own Design Principles 1. Research available principles for competitors and related organizations (even aspirational) 2. Gather, list and print out the business goals, user needs and brand attributes 3. Brainstorm with key collaborators across capabilities and functions 4. Narrow down to no more than 10, preferably 7 5. Ensure they don’t conflict or overlap 6. Ensure they’re pithy and memorable
  • 75.
    1. Does itcome directly from research? 2. Does it help you say ‘No’ most of the time? 3. Does it distinguish your design from your competitors’? 4. Is it something you might reverse in a future release? 5. Have you evaluated it for this project? 6. Is its meaning constantly tested? http://www.uie.com/articles/creating-design-principles/
  • 76.
    When to UseYour Design Principles 1. During the project kickoff meeting 2. When prioritizing features 3. Brainstorming sessions 4. Design critiques 5. Stakeholder presentations 6. Resolving conflict 7. Postmortems 8. Web metrics analysis
  • 77.
    User Experience isthe establishment of a philosophy about how to treat people
  • 78.
  • 79.
  • 80.
    ﬔank you. Whitney Hess @whitneyhess http://whitneyhess.com whitney@whitneyhess.com