Design Principles: The Philosophy of UX
•619 likes•150,086 views
Report
Share
Download to read offline
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.
More Related Content
What's hot
What's hot(20)
![[UX Series] 1 - UX Introduction](https://cdn.slidesharecdn.com/ss_thumbnails/uxintroduction-150804131237-lva1-app6891-thumbnail.jpg?width=768&fit=bounds)
Similar to Design Principles: The Philosophy of UX
Similar to Design Principles: The Philosophy of UX(20)
More from Whitney Hess
More from Whitney Hess(12)
Recently uploaded
Recently uploaded(20)
Design Principles: The Philosophy of UX
- 1. Design Principles: The Philosophy of UX Whitney Hess @whitneyhess http://whitneyhess.com whitney@whitneyhess.com
- 2. Hi, I’m Whitney Hess 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 is the establishment of a philosophy about how to treat people
- 5. Visual Design is the establishment of a philosophy about how to make an impact
- 7. Contrast
- 8. Emphasis
- 9. Variety
- 10. Balance
- 11. Proportion
- 12. Repetition
- 13. Movement
- 14. Texture
- 15. Harmony
- 16. Unity
- 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
- 23. 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.
- 24. 1. Stay out of people’s way
- 25. 1. Stay out of people’s way
- 26. 1. Stay out of people’s way
- 27. 2. Create a hierarchy that matches people’s needs
- 28. 2. Create a hierarchy that matches people’s needs
- 29. 2. Create a hierarchy that matches people’s needs
- 33. 4. Provide strong information scent
- 34. 4. Provide strong information scent
- 35. 4. Provide strong information scent
- 36. 5. Provide signposts and cues
- 37. 5. Provide signposts and cues
- 38. 5. Provide signposts and cues
- 42. 7. Use constraints appropriately
- 43. 7. Use constraints appropriately
- 44. 7. Use constraints appropriately
- 45. 8. Make actions reversible
- 46. 8. Make actions reversible
- 47. 8. Make actions reversible
- 51. 10. Make a good first impression
- 52. 10. Make a good first impression
- 53. 10. Make a good 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. Are universal principles enough?
- 57. Design principles for companies you know
- 58. “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.
- 59. “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
- 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 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.
- 68. 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/Fieen-ﬔings-Charles-Ray-Teach/dp/193031700X
- 69. Burning Man Radical Inclusion. Giing. Decommodification. Radical Self-reliance. Radical Self-expression. Communal Effort. Civic Responsibility. Leaving No Trace. Participation. Immediacy.
- 70. Burning Man Radical 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
- 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. What are your company’s principles?
- 74. Steps to Craing 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
- 75. 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/
- 76. 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
- 77. User Experience is the establishment of a philosophy about how to treat people
- 78. Bathroom mirror Seaport Boston Hotel
- 79. Help people make their lives better
- 80. ﬔank you. Whitney Hess @whitneyhess http://whitneyhess.com whitney@whitneyhess.com
Editor's Notes
- I’ve got a lot I want to talk about today, so let’s jump in.\n
- If you want to tweet at me, I’m @whitneyhess\n\nAs a consultant, I spend a lot of time thinking about UX, talking about UX, teaching my clients what I know and trying to learn more to do the best job for them that I can.\n
- Methods. Deliverables. Process.\n
- A way of behaving as an organization and a vision for how your constituents should be treated\n
- Now what that impact is naturally varies from situation to situation.\n\nBut there’s a fairly commonly known set of principles about how to create impactful designs.\n
- They might not be things we commonly discuss or critique on, and we may not formally articulate what they are at all. But they are defined standards, or principles.\n\nPrinciple: a rule or belief governing our behavior. It’s the foundation of a philosophy for creating impact.\n\nContrast. Emphasis. Variety. Balance. Proportion. Repetition. Movement. Texture. Harmony. Unity.\n
- Contrast occurs when two elements are different, using size, value, color, and type.\n\nWork at Play\n
- Emphasis provides the focal point for the piece.\n\nJason Santa Maria\n
- The complement to unity and is needed to create visual interest.\n\nGirl Scouts of Middle Tennessee by James Mathias\n
- The psychological sense of equilibrium, distributing weighs in the space\n
- The relationship between sizes - scale.\n\nComplete Washroom Solutions\n
- Sometimes called Rhythm. Repetition or alternation of elements, often with defined intervals between them.\n\nAdaptd\n
- Give the feeling of action to guide the viewer's eyes.\n\nNew Deal Festival\n
- It defines the surface of objects. While in Web design, texture is purely visual, it can imply a tactile sensation as well.\n\nDesign Sponge\n
- Using similar elements throughout the work. All parts relate to and complement each other.\n\nNeutron Creations by Elliot Jay Stocks\n
- All components of a layout work as a single piece. Tie the composition together, to give it a sense of wholeness\n\nTypographica\n
- The purpose of agreed upon principles is to have some basis for your design decisions. \n\nAre our designs successful? Do they communicate well? Are they telling the story we want them to tell of our brand or organizations. Ultimately: is the design good?\n\n
- But a good design does not automatically equal a good experience. \n\nWhat we consider to be beautiful or well composed or visually impactful doesn’t always work, or help people do better work, or live better, or make them happy.\n\nWe create designs that are meant to be used over time, that real people interact with in real time. I think we spend an inordinate amount of time concerned with the quality of our designs but not with the quality of the experiences they create.\n\nFor example...[next]\n
- The Power Mac G4 Cube. It was beautiful. It was innovative. It was a space saver. It was chic. It was silent, because it didn’t have a cooling fan. \n\nBut because it didn’t have a fan, you couldn’t put it up against the wall; it had to sit in the middle of your desk. The power switch was on the top of the Cube. \n\nSwipe it by accident and the Cube would shut down. If you set it down the wrong way, the case cracked at the screws. Not a good experience after all.\n\nAnother example of good design not equalling good experience... \n
- How do we measure the effectiveness of our designs over the passage of time, BEYOND their initial impact?\n\n
- Good design CAN equal good experience. My determination to make this a reality is the reason I get up every morning. But I need your help.\n
- I want to propose a set of principles for designing experiences that I consider to be universally applicable.\n\nThis is my personal mantra for all of the work that I do, and I hope you can make it yours as well.\n
- I’ll go one by one to show where these principles ARE and are NOT being followed to explain them in further detail.\n
- I collect photos of experience fails, and a friend sent this to me from a parking garage. Yes, fire safety is important. Crucial even. But 99.99% of the time, people are just trying to go upstairs.\n\n
- Now on the other hand, here’s a win...this is at the amazing Stone Brewery just outside San Diego. They have reserved parking for common activities that they know don’t take much time, so why waste your time looking for a parking spot -- the place is always packed.\n\nAnd at the same time they’re giving you a cue as to how long to expect either of these to take.\n
- On the web.... Tumblr -- get in, get out, get going. If you’re looking for education, you can go get it, but it doesn’t assume you need it so it isn’t thrust in your face. Additionally, the whole page layout adjusts as the user resizes the browser window. It’s listening.\n\nWhen someone is trying to get something done, they’re on a mission. Don’t interrupt them unnecessarily, don’t set up obstacles for them to overcome, just pave the road for an easy ride. Your designs should have intentional and obvious paths, and should allow people to complete tasks quickly and freely.\n
- I suppose you can take solace in the fact that American Airlines creates as poor an experience for their staff as they do their customers.\n\n
- Now on the other hand... I spotted this at a nursing home. It’s the Honeywell Easy-to-See Thermostat. It’s just a plate that pops on top of the thermostat to make the numbers easier to read.\n\n
- On the web....Dramatic difference in font sizes around the page, highlights behind the most crucial piece of information -- the amount of money saved. Icons at the top are in order of frequency of use, from left to right. In the filters on the left, APR is prioritized above Reward Type, or Issuer.\n\n…by giving the most crucial elements the greatest prominence. Hierarchy is a combination of several dimensions to aid in the processing of information, such as color, size, position, contrast, shape, proximity to like items, etc. Not only must a page be well organized so that it’s easy to scan, but the prioritization of information and functionality ought to mimic real world usage scenarios. Don’t make the most commonly used items the furthest out of reach.\n
- People shopping for condoms don't need to spoil the mood by seeing a pregnancy test. and people shopping for a pregnancy test don't need to be reminded that they didn't use a condom. and worst of all, the feminine deodorant spray at the bottom.\n\n
- Now on the other hand... I passed by a pharmacy in Paris that was closed on a Sunday.... and they’re smart enough to offer a condom vending machine OUTSIDE the store.\n\n
- Wanderfly so gets this right. You go there to book travel, and they take you down one simple path. It’s totally self-contained.\n\nIt’s a myth that people can multitask. They end up giving less attention to both tasks and the quality of the interaction suffers. An effective design allows people to focus on the task at hand without having their attention diverted to less critical tasks. Design for tasks to be carried out consecutively instead of concurrently in order to keep people in the moment.\n
- How many types of orange juice do you see in this picture?\n\nTHERE ARE 5 DIFFERENT VARIATIONS HERE. \n\n
- I passed by this store, never having heard of it before, and noticed that the essentially have their entire inventory pasted up on their window. Given that the store is very minimalistic, this really catches the eye and helps to explain what’s available there without having to go in.\n
- Quora does a great job of this with their suggestive search. It’s got apples and oranges in there, but it shows an avatar for a profile, and tags for the question. Actively helping you to choose the right one.\n\nPeople don’t like to guess. When they click around your site or product, they aren’t doing so haphazardly; they’re trying to follow their nose. If what they find when they get there isn’t close to what they predicted, chances are they’re going to give up and go elsewhere. Make sure that you use clear language and properly set expectations so that you don’t lead people down the wrong path.\n
- Near my old apartment, I used to walk past this building every day. This is on the outside of the building, and each bell rings a different apartment. I am not shitting you, this is real. West Broadway between Murray St and Warren St, you can go see for yourself.\n
- This is the very first Barnes & Noble in NYC, on 18th St and Fifth Avenue. There’s a guy at the front of the store behind an information booth. You tell him what you’re looking for, and he tells you which line to follow. It’s particularly helpful because it isn’t like the newer Barnes & Nobles that are all open, this store is actually quite a maze.\n
- Just a basic ecommerce site that’s doing this world’s better than most. Everything is appropriately highlighted. Top nav item.....[point]... I mean, it’s 2011. This should be standard, but it isn’t.\n\nNever let people get lost. Signposts are one of the most important elements of any experience, especially one on the web where there are an infinite number of paths leading in all directions. The design should keep people aware of where they are within the overall experience at all times in a consistent and clear fashion. If you show them where they came from and where they’re going, they’ll have the confidence to sit back and relax and enjoy the ride.\n
- Left Happy Cog office in Philly with Ethan Marcotte after a full-day meeting. Had 5 minutes to make my train, but I was starving. Should I wait?\n\n
- Pret A Manger in London Healthrow Airport. They’re being upfront about the extra fee they’re required to charge you, and displaying it in the most appropriate context possible -- on the register.\n
- This is Airbnb, one of my latest obsessions. Everything you need to know about a listing is all here in one snapshot.\n\nContext sets the stage for a successful delivery. By communicating how everything interrelates, people are much more likely to understand the importance of what they’re looking at. Ensure that the design is self-contained and doesn’t break people out of the experience except for when it’s entirely necessary to communicate purpose.\n
- I don’t know about you, but once I’ve used the toilet paper, I flush it down the toilet it. If their toilets can’t handle such things, they need to get new toilets, not try to encourage me do something else with the toilet paper. Like...take it out of the stall with me and throw it out?\n
- We’ve got a bathroom theme going here. You can’t really see from this image what’s so great about this design and how it fulfills the principle. But I’m assuming you’ve all been in an airplane lavatory at some point? The lock also turns the light on, thus ensuring that you’ll remember to lock the door and save you from the embarrassment of someone walking in on you -- and it prevents you from not turning the light off when you leave.\n
- Also on an airplane... I just love this. It isn’t pretty, but it’s refreshingly helpful. Don’t you hate when the plane lands before you find out who did it?\n\nPreventing error is a lot better than just recovering from it. If you know ahead of time that there are certain restrictions on data inputs or potential dead ends, stop people from going down the wrong road. By proactively indicating what is not possible, you help to establish what is possible, and guide people to successful interactions. But make sure the constraints are worthwhile — don’t be overly cautious or limiting when it’s just to make things easier for the machine.\n
- Do we have any Glee fans in the house?\n\nI’m pretty much giddy that I got a Glee reference in this presentation. For those of who who don’t watch, the character’s name is Sue SYLVESTER.\n
- Where are my New Yorkers at? We’re the last state in the union to still use a lever voting machine. They’re taking them away from us and the new ballots are PAPER and they’re ATROCIOUS. Ask Dana Chisnell for more info.\n\nIn any case, even though there are plenty of problems with the lever machines -- like no paper trail -- the best thing about them is you can take your time to decide. You turn the knobs and when you’re sure you’re done, you flip the lever. On the paper one...\n
- Remember the Milk... my lifesaver. Any time you complete or edit or delete a task, it shows you this confirmation message and lets you Undo.\n\nThere is no such thing as a perfect design. No one and nothing can prevent all errors, so you’re going to need a contingency plan. Ensure that if people make mistakes (either because they misunderstood the directions or mistyped or were misled by you), they are able to easily fix them. Undo is probably the most powerful control you can give a person — if only we had an undo button in life.\n
- Anyone here with asthma or use an inhaler? How do you know when it’s empty? .... You often find out it’s empty at the worst possible time.\n
- I was baking cookies and tore a sheet of wax paper out of its carton, and this was on it.\n
- On Hipmunk, when you’re waiting for your flights to load, you get a notification that it’s working as well as a tip on how to better use the interface to meet your needs.\n\n…tell them why they’re waiting. Tell them that you’re working. Tell them you heard them and offer the next step along their path. Design is not a monologue, it’s a conversation.\n
- This doesn’t exactly inspire confidence. The doors swing in different directions despite having the same exact handles. Oh, and I love that they’re open at 11am every 3rd Thursday. Who the hell knows when it’s the 3rd Thursday of the month? Because I don’t.\n
- This is at the train station in Philadelphia again. I’d never seen a restroom with a mission statement before -- or since. [READ IT] Now, I have to admit that it wasn’t exactly clean in there. But they really WANTED IT to be. So I was more tolerant of it. And really who wants to use a restroom at a train station? I know I don’t. But this made me feel like it would be okay.\n
- Vimeo has one of the best first time user experiences I know. It’s just so simple: “Welcome, you’re new, aren’t you?” But how good does it make you feel that they noticed?\n\nYou don’t get a second chance! Designing a digital experience is really no different than establishing a set of rules for how to conduct yourself in a relationship. You want to make people feel comfortable when you first meet them, you want to set clear expectations about what you can and can’t offer, you want to ease them into the process, you want to be attractive and appealing and strong and sensible. Ultimately you want to ensure that they can see themselves with you for a long time.\n.........So these are my 10 principles for experience design....\n
- The basis for all of my principles is essentially Aristotle’s modes of persuasion -- though I didn’t realize it until after the fact. Sometimes this is called the Rhetorical Triangle.\n
- Or put another way....\n
- Are universal principles enough to achieve that purpose? Since all of our companies have different purposes, probably not.\n\nEvery project has its own goals -- whether you’re clear on what they are or not -- and these 10 principles might not get you all of the way there.\n\nYou can create your own.\n
- There are a few companies out there who have done the work to define their principles and publish them publicly as a means to differentiate themselves in the market.\n\nI’ll show you the principles and see if you can guess who the company is.\n
- [READ THE PRINCIPLES]\nAsk: Does anyone know what company this is?\n
- \n
- How are they doing at designing to their principles?\n\nI see speed. Beginner vs. expert. Little distraction. Trustworthiness. I’m not sure what else.\n
- Does anyone know whose these are?\n
- How do you think they’re doing at them?\n
- Do you see those principles enacted here?\n
- This is a doozy.\n\nWho is it?\n
- How are they doing?\n
- I’d argue that they probably don’t have their principles posted up in their cubicles.\n
- Now....Guiding Principles aren’t only for tech companies. Can you guess whose principles these are?\n
- Arguably the most famous designers of the 20th century had their own principles to measure against.\n
- Can you guess what organization this is?\n
- They’re clear on the kind of experience they’re trying to create, and anyone who has been would say that there’s very much a shared experience there year after year.\n
- This company teaches the leaders at its outposts that this is how they should approach designing experiences for their customers...\n
- Embrace resistance... Don’t you love that one? I would’ve loved to have been in the boardroom for that one.\n
- Without principles we don't know what we're trying to achieve, and how we'll know when we achieved it.\n
- [Read]\n
- Jared Spool at UIE recently published his tips for pressure testing your design principles\n
- Once you have them, when should you use them? In short, always. But more specifically...\n
- Design principles are the definition of our philosophy about how we as a company, and as a community, want to treat people.\n
- This says everything about how they want to treat their customers\n
- This is what I hope we’re all really doing here.\n
- Thank you for listening\n