Download as PDF, PPTX
Uploaded byJohn Chen, Jun
The Elements Of User Experience
The document discusses the elements of user experience design. It introduces the five planes of user experience - strategy, scope, structure, skeleton, and surface. Each plane contains different aspects of design such as user needs, information architecture, and visual design. The document uses these planes to break down the design of common elements like search engines. It emphasizes the importance of an iterative and user-centered design process.
More Related Content
Similar to The Elements Of User Experience
The Elements Of User Experience
- 1. The Elements of UserExperience Jesse James Garrett
- 2.
- 3. “Worst Movie Ever!” ©2003 Adaptive Path 3
- 4. Who Gets theBlame? “I probably overlooked the right choice.” ?!? “I must not have read the instructions closely enough.” “I guess I’m not smart enough to use this.” © 2003 Adaptive Path 4
- 5. Products Are PeopleToo © 2003 Adaptive Path 5
- 6. User-Centered Design A philosophy of product development The product is not an end in itself The product is a means toward the end of providing a good experience for the user Suite of methods emphasizing understanding people rather than technology © 2003 Adaptive Path 6
- 7. User Experience How a product behaves and is used in the real world Beyond the product to its context in people’s lives Incorporates diverse range of factors © 2003 Adaptive Path 7
- 8. Surface © 2003 AdaptivePath 8
- 9. Skeleton © 2003 AdaptivePath 9
- 10. Structure © 2003 AdaptivePath 10
- 11. Scope © 2003 AdaptivePath 11
- 12. Strategy © 2003 AdaptivePath 12
- 13. The Five Planes Concrete surface skeleton structure scope strategy Abstract © 2003 Adaptive Path 13
- 14. The Language Barrier Information Design Functional Specifications Interaction Design Information Architecture Interface Design Content Requirements Navigation Design © 2003 Adaptive Path 14
- 15. Web as information ©2003 Adaptive Path 15
- 16. Web as application ©2003 Adaptive Path 16
- 17. A Basic Duality Web as software interface Web as hypertext system © 2003 Adaptive Path 17
- 18. The Strategy Plane User Needs: what the site must do for the people who use it Site Objectives: what the site must do for the people who build it © 2003 Adaptive Path 18
- 19. User Needs Some are fundamental – users need products that: work they can use meet their expectations But most are specific to your users and your product © 2003 Adaptive Path 19
- 20. User Research Best way to discover user needs Many techniques, ranging from quick and cheap to lengthy and expensive Read the book! © 2003 Adaptive Path 20
- 21. User Segmentation Make identifying user needs more manageable Break your audience down into segments based on shared characteristics © 2003 Adaptive Path 21
- 22. Personas Character sketches based Janet on user “I don’t have time to sort through a lot of information. I need quick answers.” research Janet is frustrated with working in a corporate environment and wants to start her own accounting practice. Extrapolate Age: 42 Occupation: Accounting firm vice president Technical profile: Fairly comfortable with technology; Dell laptop (about one year old) running Windows XP; DSL from a general Family: Married, two children Internet connection; 8-10 hours/week online Household income: $140,000/year Internet use: 75% at home; news and information, shopping set of Favorite sites: characteristics to a specific WSJ.com Salon.com Travelocity.com case © 2003 Adaptive Path 22
- 23. Site Objectives Often framed in terms of business Business goals Business drivers Business requirements Should be specific to the site Independent of your organization’s other activities © 2003 Adaptive Path 23
- 24. Success Metrics 10 The only way to 9 know if changing 8 target your site has 7 6 made a difference 5 Closely tied to 4 3 site objectives 2 launch of More on this 1 redesigned site tomorrow! Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec visits per month (registered users only) © 2003 Adaptive Path 24
- 25. The Scope Plane Functional Specifications: application features the site must include Content Requirements: content elements the site must include © 2003 Adaptive Path 25
- 26. Functional Specifications What application features will users need to fulfill their goals? Focus on “what it does” not “how it works” not “what it doesn’t do” Be specific, but don’t dictate system design © 2003 Adaptive Path 26
- 27. Content Requirements What information will users need or want from the site? What form should it take? Where will it come from? Who’s responsible? Define elements according to their purpose © 2003 Adaptive Path 27
- 28. Keeping Documentation “Docs are a waste of time.” No one reads them They’re never up-to-date They’re too much trouble to maintain Time spent planning the site becomes time saved producing the site Integrate documentation into the process, rather than making it a separate step © 2003 Adaptive Path 28
- 29. The Structure Plane Interaction Design: how the user moves from one step in a process to the next Information Architecture: how the user moves from one content element to the next © 2003 Adaptive Path 29
- 30. Interaction Design Inter-action Actions the user can take with the system Actions the system can take in response to the user © 2003 Adaptive Path 30
- 31. Information Architecture Defines conceptual relationships between content elements Reflects the way users think about the subject matter Often hierarchical, but not necessarily © 2003 Adaptive Path 31
- 32. Top-down vs. Bottom-up Top-down starts with categories and slots content into them categories content © 2003 Adaptive Path 32
- 33. Top-down vs. Bottom-up Bottom-up starts with content and builds up to categories categories content © 2003 Adaptive Path 33
- 34. Documenting Structure Visual representations home tend to work best media info products support Diagrams can be as home products simple or as complex as press releases file archives office products you need Visual Vocabulary: continue from: home login flow latest news jjg.net/ia/visvocab (2c) entry page continue to: member list technical papers © 2003 Adaptive Path 34
- 35. The Skeleton Plane Information Design: facilitates comprehension of information Interface Design: facilitates user input and system output Navigation Design: facilitates movement through the site © 2003 Adaptive Path 35
- 36. Information Design How can we present this information so that people can understand and use it? Communicate relative importance of different pieces of information Guide the user from one piece to the next Draw attention to important details Communicate relationships between elements © 2003 Adaptive Path 36
- 37. © 2003 AdaptivePath 37
- 38. Interface Design Provides a means for users to interact with application functionality © 2003 Adaptive Path 38
- 39. Navigation Design Communicates the choices available to the user Facilitates movement Different designs have different effects © 2003 Adaptive Path 39
- 40. Wireframes Brings all skeleton issues together into LOGO COURTESY NAV one high-level GLOBAL NAV WAYFINDING CUES “sketch” HEADER GRAPHIC SEARCH QUERY dropdown Pack my box with five dozen liquor jugs. LOCAL Illustrates relative How razorback-jumping frogs can level six text field NAV piqued gymnasts! We dislike to exchange job lots of sizes varying from a quarter up. The job requires extra pluck and zeal from button priority of page every young wage earner. A quart jar of oil mixed with zinc oxide PARTNER CONTENT makes a very bright paint. Six big juicy The job requires extra elements SUPP. NAV steaks sizzled in a pan as five workmen left the quarry. The juke box music puzzled a gentle visitor from a quaint valley town. pluck and zeal from every young wage earner. A quart jar of oil mixed with zinc oxide makes a very Pack my box with five dozen liquor jugs. Suggests page bright paint. Pack my box How razorback-jumping frogs can level six with five dozen liquor jugs. piqued gymnasts! COURTESY NAV layout approaches © 2003 Adaptive Path 40
- 41. The Surface Plane Visual Design: the “look” in “look and feel” Usually the part people think of when you say “Web design” More than just aesthetics © 2003 Adaptive Path 41
- 42. Color Palettes r:102 r:255 g:153 g:255 b:204 b:204 r:0 r:204 g:102 g:204 b:204 b:153 r:0 r:153 g:51 g:153 b:153 b:102 r:0 r:51 g:153 g:51 b:0 b:51 r:255 r:204 g:153 g:204 b:0 b:204 © 2003 Adaptive Path 42
- 43. Typography Apple Garamond is Apple's custom corporate identity font. Lucida Grande is used for body text and navigation. Helvetica Black is used for some graphics. Geneva is used for legibility at small sizes. © 2003 Adaptive Path 43
- 44. The Elements ofUser Experience © 2003 Adaptive Path 44
- 45.
- 46. The Elements Applied
- 47. Search Engines Almost every site has one Every site seems to take a slightly different approach © 2003 Adaptive Path 47
- 48. Strategy User Needs Do users want a search engine? Are there limits to the kind of search functionality users need? Site Objectives Is implementing search feasible given our resources? Would implementing search limit our ability to fulfill other goals for the site? © 2003 Adaptive Path 48
- 49. Scope Functional Specifications keyword entry other fields for specifying criteria ability to narrow result set Content Requirements labeling result data help docs © 2003 Adaptive Path 49
- 50. Structure Interaction Design continue from: any page advanced search choices available to users at each step no results refine search system behavior under exactly one result various conditions search results Information Architecture architectural scope as search criterion content pages metadata structures © 2003 Adaptive Path 50
- 51. Skeleton Information Design layout of search results communicating error conditions Interface Design user input mechanisms Navigation Design moving into and out of search flow moving through search results © 2003 Adaptive Path 51
- 52. Surface Visual Design color typography layout © 2003 Adaptive Path 52
- 53. Asking the RightQuestions What problem are we trying to solve? What are the consequences of our proposed solution to the problem? Will this solution force us to re-think other problems? © 2003 Adaptive Path 53
- 54. The Marathon andthe Sprint A sprint is a short race Get a quick start Burn energy as quickly as possible A marathon is a long race Pace yourself Choose when to burn energy Which race are you trying to run? Which race are you actually in? © 2003 Adaptive Path 54
- 55. Answering Objections “Our market research tells us everything we need to know about our users.” Demographic data is not user insight “We’ll just follow this list of guidelines we found on the Internet.” Rules of thumb are necessarily general “Interface is easy – technology is hard.” Which is more complicated: machines or people? © 2003 Adaptive Path 55
- 56. Answering Objections “We can’t afford to hire experts.” You don’t need experts for everything “We’ll figure it out as we go.” Improvisation is for jazz, not design “We’ll fix it in QA.” By that time, it’s already too late “There’s no time in the schedule.” You’ll be saving time on the next release © 2003 Adaptive Path 56
- 57. Pitfalls to Avoid Design by default: “We should do whatever is easiest to implement.” Design by mimicry: “If it’s good enough for Amazon, it’s good enough for us.” Design by fiat: “Because I said so.” © 2003 Adaptive Path 57
- 58. effort Waterfalls Are Dangerous time effort time © 2003 Adaptive Path 58
- 59. Iterative Development Your site is never finished Do what you can right now Always look ahead to the next release January (now) April July October (next) January Version 1.0 Version 1.1 © 2003 Adaptive Path 59
- 60. Roles The specific roles you choose don’t matter – if you’ve got all the planes covered © 2003 Adaptive Path 60
- 61. The Nine Pillars project management Core competencies concrete design common to tactical technology content successful teams implementation production Must be reflected abstract design strategic in the team’s: technology content strategy strategy Roles site Processes strategy user research © 2003 Adaptive Path 61
- 62. User Research project management The foundation of user-centered design concrete design Informs all strategic decisions tactical technology content implementation production Primary abstract responsibility for design strategic identifying user needs technology content strategy strategy Titles: site User Researcher strategy Usability Analyst user research © 2003 Adaptive Path 62
- 63. Site Strategy project management Primary responsibility for concrete design defining site objectives tactical technology content implementation production Decides priorities abstract and success metrics design strategic Titles: technology strategy content strategy Business Analyst site strategy Product Manager Executive Producer user research © 2003 Adaptive Path 63
- 64. Technology Strategy project management Often responsible for functional concrete design specifications tactical Decides technical technology implementation content production platforms and abstract standards to adopt design strategic Titles: technology strategy content strategy Senior Engineer site strategy Development Manager Technical Lead user research © 2003 Adaptive Path 64
- 65. Content Strategy project management Often responsible for content requirements concrete design Decides appropriate tactical technology content implementation production format and subject matter abstract design strategic Titles: technology content strategy strategy Content Strategist Content Editor site strategy Editor-in-Chief user research © 2003 Adaptive Path 65
- 66. Abstract Design project management Turns strategy into design concepts concrete design Always responsible for Structure plane tactical technology content implementation production Sometimes responsible for Scope and Skeleton abstract design planes strategic technology content Titles: strategy strategy Information Architect site strategy Interaction Designer UI Specialist user research © 2003 Adaptive Path 66
- 67. Technology Implementation project management Tactical execution of technology strategy concrete design May incorporate many tactical technology content implementation production roles, from coding to integration to testing abstract design strategic Titles: technology content strategy strategy Software Engineer HTML Developer site strategy QA Tester user research © 2003 Adaptive Path 67
- 68. Content Production project management Tactical execution of content strategy concrete design Gathering, editing, tactical producing, and technology implementation content production deploying content (not abstract just text) design strategic Titles: technology strategy content strategy Content Producer site strategy Writer Editor user research © 2003 Adaptive Path 68
- 69. Concrete Design project management Tactical realization of abstract design concrete design Always responsible for Surface plane tactical technology content implementation production Sometimes responsible abstract design for Skeleton and strategic Structure planes technology strategy content strategy Titles: site strategy Interface Designer Visual Designer user research © 2003 Adaptive Path 69
- 70. Project Management project management Binds together all concrete design tactical competencies tactical technology content implementation production Often overlooked in smaller organizations abstract design strategic Titles: technology content strategy strategy Producer Project Manager site strategy user research © 2003 Adaptive Path 70
- 71. The Nine Pillars project management Not a nine-member concrete team design Not a nine-step tactical technology content implementation production process abstract design You should be able strategic technology content to look at both and strategy strategy see the pillars site strategy beneath them user research © 2003 Adaptive Path 71
- 72. What It’s AllAbout Plan before you build Have conscious reasons for your choices Articulate them explicitly Make things people love! © 2003 Adaptive Path 72
- 73.