The Elements Of User Experience

15,453 views

Published on

The Elements Of User Experience

Published in: Marketing
3 Comments
86 Likes
Statistics
Notes
No Downloads
Views
Total views
15,453
On SlideShare
0
From Embeds
0
Number of Embeds
186
Actions
Shares
0
Downloads
872
Comments
3
Likes
86
Embeds 0
No embeds

No notes for slide

The Elements Of User Experience

  1. 1. The Elements of User Experience Jesse James Garrett
  2. 2. Meet The Elements
  3. 3. “Worst Movie Ever!” © 2003 Adaptive Path 3
  4. 4. Who Gets the Blame? “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. 5. Products Are People Too © 2003 Adaptive Path 5
  6. 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. 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. 8. Surface © 2003 Adaptive Path 8
  9. 9. Skeleton © 2003 Adaptive Path 9
  10. 10. Structure © 2003 Adaptive Path 10
  11. 11. Scope © 2003 Adaptive Path 11
  12. 12. Strategy © 2003 Adaptive Path 12
  13. 13. The Five Planes Concrete surface skeleton structure scope strategy Abstract © 2003 Adaptive Path 13
  14. 14. The Language Barrier Information Design Functional Specifications Interaction Design Information Architecture Interface Design Content Requirements Navigation Design © 2003 Adaptive Path 14
  15. 15. Web as information © 2003 Adaptive Path 15
  16. 16. Web as application © 2003 Adaptive Path 16
  17. 17. A Basic Duality Web as software interface Web as hypertext system © 2003 Adaptive Path 17
  18. 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. 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. 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. 21. User Segmentation Make identifying user needs more manageable Break your audience down into segments based on shared characteristics © 2003 Adaptive Path 21
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. Top-down vs. Bottom-up Top-down starts with categories and slots content into them categories content © 2003 Adaptive Path 32
  33. 33. Top-down vs. Bottom-up Bottom-up starts with content and builds up to categories categories content © 2003 Adaptive Path 33
  34. 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. 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. 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. 37. © 2003 Adaptive Path 37
  38. 38. Interface Design Provides a means for users to interact with application functionality © 2003 Adaptive Path 38
  39. 39. Navigation Design Communicates the choices available to the user Facilitates movement Different designs have different effects © 2003 Adaptive Path 39
  40. 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. 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. 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. 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. 44. The Elements of User Experience © 2003 Adaptive Path 44
  45. 45. Intermission
  46. 46. The Elements Applied
  47. 47. Search Engines Almost every site has one Every site seems to take a slightly different approach © 2003 Adaptive Path 47
  48. 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. 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. 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. 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. 52. Surface Visual Design color typography layout © 2003 Adaptive Path 52
  53. 53. Asking the Right Questions 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. 54. The Marathon and the 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. 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. 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. 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. 58. effort Waterfalls Are Dangerous time effort time © 2003 Adaptive Path 58
  59. 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. 60. Roles The specific roles you choose don’t matter – if you’ve got all the planes covered © 2003 Adaptive Path 60
  61. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 72. What It’s All About Plan before you build Have conscious reasons for your choices Articulate them explicitly Make things people love! © 2003 Adaptive Path 72
  73. 73. Thanks!

×