Design Principles: The Philosophy of UX

of 80 /80
Whitney Hess @whitneyhess http://whitneyhess.com [email protected] Design Principles: The Philosophy of UX

description

The visual principles of harmony, unity, contrast, emphasis, variety, balance, proportion, repetition, texture and movement (and others) are widely recognized and practiced, even when they aren’t formally articulated. But creating a good design doesn’t automatically mean creating a good experience. In order for us to cultivate positive experiences for our users, we need to establish a set of guiding principles for experience design. Guiding principles are the broad philosophy or fundamental beliefs that steer an organization, team or individual’s decision making, irrespective of the project goals, constraints, or resources. Whitney will share a universally-applicable set of experience design principles that we should all strive to follow, and will explore how you can create and use your own guiding principles to take your site or product to the next level.

Transcript of Design Principles: The Philosophy of UX

Page 1: Design Principles: The Philosophy of UX

Whitney Hess @whitneyhess

http://[email protected]

Design Principles:The Philosophy of UX

Page 2: Design Principles: The Philosophy of UX

Hi, I’m Whitney Hess

User Experience DesignerConsultantNew Yorker

@whitneyhess

Page 3: Design Principles: The Philosophy of UX

What we usually talk about when we talk about UX

usability testing user research

stakeholder interviewsweb analytics

personas

scenarioswireframes

flow diagrams

storyboards

sitemaps

sketching A/B testing

heuristic evaluation

prototyping

card sorts

surveys

Page 4: Design Principles: The Philosophy of UX

User Experience is the establishmentof a philosophyabout how totreat people

Page 5: Design Principles: The Philosophy of UX

Visual Design is the establishmentof a philosophyabout how to

make an impact

Page 6: Design Principles: The Philosophy of UX

Principles of Visual Design

Page 7: Design Principles: The Philosophy of UX

Contrast

Page 8: Design Principles: The Philosophy of UX

Emphasis

Page 9: Design Principles: The Philosophy of UX

Variety

Page 10: Design Principles: The Philosophy of UX

Balance

Page 11: Design Principles: The Philosophy of UX

Proportion

Page 12: Design Principles: The Philosophy of UX

Repetition

Page 13: Design Principles: The Philosophy of UX

Movement

Page 14: Design Principles: The Philosophy of UX

Texture

Page 15: Design Principles: The Philosophy of UX

Harmony

Page 16: Design Principles: The Philosophy of UX

Unity

Page 17: Design Principles: The Philosophy of UX

Why principles?Consistency.Constraints.

Shared vision.Objective evaluation.

Page 18: Design Principles: The Philosophy of UX

good design

good experience

Page 19: Design Principles: The Philosophy of UX
Page 20: Design Principles: The Philosophy of UX
Page 21: Design Principles: The Philosophy of UX

good design

good experience

=Let’s do thistogether!

Page 22: Design Principles: The Philosophy of UX

Principles of Experience Design

Page 23: Design Principles: The Philosophy of UX

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.

Principles of Experience Design

Page 24: Design Principles: The Philosophy of UX

1. Stay out of people’s way

Page 25: Design Principles: The Philosophy of UX

1. Stay out of people’s way

Page 26: Design Principles: The Philosophy of UX

1. Stay out of people’s way

Page 27: Design Principles: The Philosophy of UX

2. Create a hierarchy that matches people’s needs

Page 28: Design Principles: The Philosophy of UX

2. Create a hierarchy that matches people’s needs

Page 29: Design Principles: The Philosophy of UX

2. Create a hierarchy that matches people’s needs

Page 30: Design Principles: The Philosophy of UX

3. Limit distractions

Page 31: Design Principles: The Philosophy of UX

3. Limit distractions

Page 32: Design Principles: The Philosophy of UX

3. Limit distractions

Page 33: Design Principles: The Philosophy of UX

4. Provide strong information scent

Page 34: Design Principles: The Philosophy of UX

4. Provide strong information scent

Page 35: Design Principles: The Philosophy of UX

4. Provide strong information scent

Page 36: Design Principles: The Philosophy of UX

5. Provide signposts and cues

Page 37: Design Principles: The Philosophy of UX

5. Provide signposts and cues

Page 38: Design Principles: The Philosophy of UX

5. Provide signposts and cues

Page 39: Design Principles: The Philosophy of UX

6. Provide context

Page 40: Design Principles: The Philosophy of UX

6. Provide context

Page 41: Design Principles: The Philosophy of UX

6. Provide context

Page 42: Design Principles: The Philosophy of UX

7. Use constraints appropriately

Page 43: Design Principles: The Philosophy of UX

7. Use constraints appropriately

Page 44: Design Principles: The Philosophy of UX

7. Use constraints appropriately

Page 45: Design Principles: The Philosophy of UX

8. Make actions reversible

Page 46: Design Principles: The Philosophy of UX

8. Make actions reversible

Page 47: Design Principles: The Philosophy of UX

8. Make actions reversible

Page 48: Design Principles: The Philosophy of UX

9. Provide feedback

Page 49: Design Principles: The Philosophy of UX

9. Provide feedback

Page 50: Design Principles: The Philosophy of UX

9. Provide feedback

Page 51: Design Principles: The Philosophy of UX

10. Make a good first impression

Page 52: Design Principles: The Philosophy of UX

10. Make a good first impression

Page 53: Design Principles: The Philosophy of UX

10. Make a good first impression

Page 54: Design Principles: The Philosophy of UX

Logos

Ethos Pathos

consistency, logic

credibility, trust emotions, imagination

Persuasion

Page 55: Design Principles: The Philosophy of UX

Knowledge

Ethics Empathy

consistency, logic

credibility, trust emotions, imagination

Purpose

Page 56: Design Principles: The Philosophy of UX

Are universal principles

enough?

Page 57: Design Principles: The Philosophy of UX

Design principles forcompanies you know

Page 58: Design Principles: The Philosophy of UX

“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.

Page 59: Design Principles: The Philosophy of UX

“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

Page 60: Design Principles: The Philosophy of UX
Page 61: Design Principles: The Philosophy of UX

Facebook Design Principles

Universal.

Human.

Clean.

Consistent.

Useful.

Fast.

Transparent.

Page 62: Design Principles: The Philosophy of UX

Facebook Design Principles

Universal.

Human.

Clean.

Consistent.

Useful.

Fast.

Transparent.

http://www.facebook.com/note.php?note_id=118951047792

Page 63: Design Principles: The Philosophy of UX
Page 64: Design Principles: The Philosophy of UX

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.

Page 65: Design Principles: The Philosophy of UX

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

Page 66: Design Principles: The Philosophy of UX
Page 67: Design Principles: The Philosophy of UX

Burning ManKeep 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.

Page 68: Design Principles: The Philosophy of UX

Charles and Ray EamesKeep 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/Fieen-մեings-Charles-Ray-Teach/dp/193031700X

Page 69: Design Principles: The Philosophy of UX

Burning ManRadical Inclusion.

Giing.

Decommodification.

Radical Self-reliance.

Radical Self-expression.

Communal Effort.

Civic Responsibility.

Leaving No Trace.

Participation.

Immediacy.

Page 70: Design Principles: The Philosophy of UX

Burning ManRadical Inclusion.

Giing.

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

Page 71: Design Principles: The Philosophy of UX

մեe Starbucks Experience

Make it your own.

Everything matters.

Surprise and delight.

Embrace resistance.

Leave your mark.

Page 72: Design Principles: The Philosophy of UX

մեe Starbucks Experience

Make it your own.

Everything matters.

Surprise and delight.

Embrace resistance.

Leave your mark.

http://www.starbucksexperience.net/excerpts.html

Page 73: Design Principles: The Philosophy of UX

What are your company’s

principles?

Page 74: Design Principles: The Philosophy of UX

Steps to Craing Your Own Design Principles1. 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

Page 75: Design Principles: The Philosophy of UX

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/

Page 76: Design Principles: The Philosophy of UX

When to Use Your Design Principles1. 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

Page 77: Design Principles: The Philosophy of UX

User Experience is the establishmentof a philosophyabout how totreat people

Page 78: Design Principles: The Philosophy of UX

Bathroom mirror Seaport Boston Hotel

Page 79: Design Principles: The Philosophy of UX

Help people make their lives better