User Experience 102

768 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
768
On SlideShare
0
From Embeds
0
Number of Embeds
131
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

User Experience 102

  1. 1. UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
  2. 2. UX 102 • Why does User Experience Design exist? • Information Architecture: it's a big deal • What is a wireframe and how do I get my client to understand it? • Interaction design and how it's different from visual design • Usability is good manners • How does UX work? Agenda
  3. 3. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 Why does User Experience Design exist?
  4. 4. We make sure digital stuff works for the people in front of the interface User Experience Design
  5. 5. We See It Differently
  6. 6. We See It Differently Programming Data Hosting People who make websites
  7. 7. Text Images Feeds Videos Stuff Games We See It Differently Programming Data Hosting People who make websites
  8. 8. Interface Text Images Feeds Videos Stuff Games We See It Differently Programming Data Hosting People who make websites
  9. 9. Interface People who visit websites Interface Text Images Feeds Videos Stuff Games We See It Differently Programming Data Hosting People who make websites
  10. 10. Interface People who visit websites Interface Text Images Feeds Videos Stuff Games We See It Differently MAGIC Programming Data Hosting People who make websites
  11. 11. Interface How it should go Text Images Feeds Videos Stuff Games Interface Text Images Feeds Videos Stuff Games Building Websites Programming Data Hosting How it usually goes Programming Data Hosting
  12. 12. Interface How it should go Text Images Feeds Videos Stuff Games Interface Text Images Feeds Videos Stuff Games Building Websites Programming Data Hosting How it usually goes Programming Data Hosting
  13. 13. Interface How it should go Text Images Feeds Videos Stuff Games Interface Text Images Feeds Videos Stuff Games Building Websites Programming Data Hosting How it usually goes Programming Data Hosting
  14. 14. THE USER! YOUare not (and neither is UX)
  15. 15. What do you call the sweetened carbonated beverage in this can?
  16. 16. Well, most people don’t.
  17. 17. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 Information architecture: it’s a big deal
  18. 18. The art and science of organizing and labeling information Information Architecture
  19. 19. We identify these: People Content Context
  20. 20. Then we map them together
  21. 21. Then we map them together Linear
  22. 22. Then we map them together Linear Hub and Spoke
  23. 23. Then we map them together Linear Hub and Spoke Narrow and Deep
  24. 24. Then we map them together Linear Hub and Spoke Wide and Shallow Narrow and Deep
  25. 25. You can’t have navigation without IA
  26. 26. You can’t have navigation without IA People Content Context Navigation Design Sitemap
  27. 27. “Information architecture is the stuff that is never rendered in pixels and it’s never rendered in code.” - Dan Klyn, The Understanding Group
  28. 28. Information architecture disasters
  29. 29. Information architecture disasters
  30. 30. Information architecture disasters
  31. 31. Information architecture disasters
  32. 32. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 And how do I get my client to understand it? What’s a wireframe
  33. 33. The skeleton of a website Wireframe
  34. 34. Wireframe
  35. 35. content priorities Wireframe
  36. 36. content priorities interactions Wireframe
  37. 37. content priorities interactions initial layout Wireframe
  38. 38. content priorities interactions initial layout limited colors + images Wireframe
  39. 39. content priorities interactions initial layout visual design limited colors + images Wireframe
  40. 40. content priorities interactions initial layout visual design final layout limited colors + images Wireframe
  41. 41. content priorities interactions initial layout visual design final layout limited colors + images filled with content Wireframe
  42. 42. functional elements “skeleton” Wireframe ≠ Visual Design
  43. 43. functional elements “skeleton” graphical elements “surface” Wireframe ≠ Visual Design
  44. 44. Wireframes = Prototypes
  45. 45. Can’t we just go straight to visual design? that sounds expensive.
  46. 46. What happens when you skip UX:
  47. 47. • critical functional decisions aren’t made What happens when you skip UX:
  48. 48. • critical functional decisions aren’t made • scope creep What happens when you skip UX:
  49. 49. • critical functional decisions aren’t made • scope creep • endless design revisions What happens when you skip UX:
  50. 50. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop What happens when you skip UX:
  51. 51. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop • endless development revisions What happens when you skip UX:
  52. 52. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop • endless development revisions • obliterated budgets What happens when you skip UX:
  53. 53. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop • endless development revisions • obliterated budgets • ux ends up fixing things anyway What happens when you skip UX:
  54. 54. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop • endless development revisions • obliterated budgets • ux ends up fixing things anyway • clients get mad What happens when you skip UX:
  55. 55. it’s our job to educate our clients. Wireframes can be hard to understand
  56. 56. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 and how it’s different from visual design Interaction design
  57. 57. planning how a person might move through a system Interaction Design
  58. 58. the aesthetic and emotional expression of a brand Visual Design (@ BR)
  59. 59. Interaction Design... is goal-driven
  60. 60. Interaction Design... 1 is goal-driven 2 3 4 5 6
  61. 61. Interaction Design... is goal-driven
  62. 62. Interaction Design... is goal-driven
  63. 63. Interaction Design... is goal-driven 1
  64. 64. Interaction Design... is goal-driven 1 2
  65. 65. Interaction Design... is goal-driven 1 2 3
  66. 66. Interaction Design... is goal-driven 1 2 3 4
  67. 67. Interaction Design... is goal-driven 1 2 3 4 ?
  68. 68. Interaction Design... is goal-driven 1 2 3 4 ?
  69. 69. Interaction Design... provides affordances
  70. 70. Interaction Design... provides affordances
  71. 71. Interaction Design... provides affordances
  72. 72. Interaction Design... makes things learnable
  73. 73. Interaction Design... makes things learnable old: tag clouds
  74. 74. Interaction Design... makes things learnable old: tag clouds new: recommended posts
  75. 75. Interaction Design... makes things learnable
  76. 76. Interaction Design... makes things learnable NO
  77. 77. Interaction Design... makes things learnable YESNO
  78. 78. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 it’s good manners Usability
  79. 79. A quality attribute used to evaluate how easy interfaces are to use. Usability
  80. 80. Usability Evaluation Principles of Usability Usability Recommendations
  81. 81. Usability Evaluation Principles of Usability Usability Recommendations
  82. 82. Usability Testing
  83. 83. Usability Testing • always done post-design
  84. 84. Usability Testing • always done post-design • measures task completion
  85. 85. Usability Testing • always done post-design • measures task completion • should be observed, repeatable
  86. 86. Usability Testing • always done post-design • measures task completion • should be observed, repeatable • other kinds of user research may be done pre-design
  87. 87. Usability Testing ≠ Focus Groups
  88. 88. Usability Testing ≠ Focus Groups what people do
  89. 89. Usability Testing ≠ Focus Groups what people do what people say
  90. 90. Users are not designers
  91. 91. Good Usability
  92. 92. makes things discoverable Good Usability
  93. 93. makes things discoverable gives users feedback and context Good Usability
  94. 94. makes things discoverable gives users feedback and context lets users recover from errors Good Usability
  95. 95. Bad Usability
  96. 96. makes people feel dumb Bad Usability
  97. 97. makes people feel dumb Bad Usability is disrespectful
  98. 98. makes people feel dumb Bad Usability is disrespectful damages our clients’ credibility
  99. 99. usability usability
  100. 100. usability usability visual design, content + development
  101. 101. usability usability user experience visual design, content + development
  102. 102. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 How does User Experience Design work?
  103. 103. The Digital Flower
  104. 104. The Digital Flower Developer
  105. 105. The Digital Flower Developer AS/PR
  106. 106. The Digital Flower Developer Creative, content, BAMAS/PR
  107. 107. The Digital Flower Developer User Experience Creative, content, BAMAS/PR
  108. 108. The Digital Flower Developer User Experience Creative, content, BAMAS/PR Producer
  109. 109. The Digital Process
  110. 110. The Digital Process strategy session
  111. 111. The Digital Process strategy session work work work
  112. 112. The Digital Process strategy session checkpoint work work work
  113. 113. The Digital Process strategy session checkpoint work work work client review
  114. 114. The Digital Process strategy session checkpoint work work work work work work client review
  115. 115. The Digital Process strategy session checkpoint work work work work work work checkpoint client review
  116. 116. The Digital Process strategy session checkpoint work work work work work work checkpoint client review client review
  117. 117. The User Experience Design Process sitemap navigation design 1 2 3 4 5 6 user flows wireframes visual designusability assessment 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 coding
  118. 118. The User Experience Design Process sitemap navigation design 1 2 3 4 5 6 user flows wireframes visual designusability assessment 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 coding
  119. 119. Throughout the process, UX Design:
  120. 120. Throughout the process, UX Design: • gets involved as early as possible
  121. 121. Throughout the process, UX Design: • gets involved as early as possible • represents the user
  122. 122. Throughout the process, UX Design: • gets involved as early as possible • represents the user • incorporates user needs with business needs
  123. 123. Throughout the process, UX Design: • gets involved as early as possible • represents the user • incorporates user needs with business needs • asks questions you may never think of
  124. 124. Throughout the process, UX Design: • gets involved as early as possible • represents the user • incorporates user needs with business needs • asks questions you may never think of • thinks holistically
  125. 125. Throughout the process, UX Design: • gets involved as early as possible • represents the user • incorporates user needs with business needs • asks questions you may never think of • thinks holistically • zooms in and out (strategic and tactical)
  126. 126. Make nice memories with your UX Designer
  127. 127. Make nice memories with your UX Designer • allow early access to the client to clarify needs
  128. 128. Make nice memories with your UX Designer • allow early access to the client to clarify needs • avoid playing “telephone”
  129. 129. Make nice memories with your UX Designer • allow early access to the client to clarify needs • avoid playing “telephone” • we always present our own work
  130. 130. Make nice memories with your UX Designer • allow early access to the client to clarify needs • avoid playing “telephone” • we always present our own work • use us to identify opportunities for new work
  131. 131. UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 Thanks.

×