Successfully reported this slideshow.
Your SlideShare is downloading. ×

User centered design workshop

Ad

User-Centered Design
A r e l a t i v e l y b r i e f i n t r o d u c t i o n t o
u s e r - c e n t e r e d d e s i g n .

Ad

Designer’s are crazy

Ad

We are particular about type
My favorite font!

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 178 Ad
1 of 178 Ad

More Related Content

User centered design workshop

  1. 1. User-Centered Design A r e l a t i v e l y b r i e f i n t r o d u c t i o n t o u s e r - c e n t e r e d d e s i g n .
  2. 2. Designer’s are crazy
  3. 3. We are particular about type My favorite font!
  4. 4. Stretched type is not fun A kitten dies every time this happens – but it’s still not ok
  5. 5. What’s wrong here? Sounds…awkward? Kerning matters!
  6. 6. Programmers are crazy too
  7. 7. No matter what: The previous guys code is crap.
  8. 8. JavaScript sucks…ex: Every script is executed in a single global namespace that is accessible in browsers with the window object.
  9. 9. Interactive designers are no different
  10. 10. Save the floppy disk
  11. 11. Buttons vs links Good: Bad: Sample debate: http://www.ixda.org/node/15621
  12. 12. Should designers learn to code? 011110010110010101110011
  13. 13. It’s not crazy… it’s passion
  14. 14. Are you this enthusiastic about Interactive Design? I f s o , U s e r - C e n t e r e d D e s i g n wi l l h e l p y o u a c h i e v e h e b e s t r e s u l t s p o s s i b l e .
  15. 15. Hello, I’m Patrick A n d I h a v e a n o b s e s s i o n wi t h t h e we b
  16. 16. About me I teach at the Univ. of Missouri St. Louis About 15 years in the web industry Started in tech – shifted to design – and back again
  17. 17. Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
  18. 18. Today's agenda 1. An overview of the User-Centered Design Process (90 min) 2. Deep dives into key topics (70 min)
  19. 19. PDF download at the end Got links?
  20. 20. I loathe bulleted presentations… Warning, impending hypocrisy
  21. 21. This is the tip of the iceberg Caution,
  22. 22. The User-Centered Design Process Part 1:
  23. 23. Backgrounds The background of UX professionals
  24. 24. Your backgrounds From the pre-conference survey: A previous group:
  25. 25. User-centered design (UCD) is a design philosophy that puts the user of a product, application, or experience, at the center of the design process.
  26. 26. The foundation The three basic principles behind UCD: 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
  27. 27. Sure seems reasonable
  28. 28. Peeling potatoes vs
  29. 29. users define concept designdevelop deploy UCD Process overview UCD is a state of mind & it is not a one man show Start here…
  30. 30. UCD Step 1: Defining the project users define concept designdevelop deploy
  31. 31. Define the scale • Replacement or brand new product • Update to an existing product
  32. 32. Documentation Many options to select from
  33. 33. Define basic requirements • What should it do (features, functionality, what it does etc)? Or what are we working on? • How will we measure our success? • Incremental changes in revenue (direct or indirect) • Customer leads or other activity • What are the environmental factors (physical & technical)? • Who is the user (demographics, skill level, frequency of use & physical)?
  34. 34. Generate documentation Site maps – defines the sites content and information architecture Information Architecture (IA) is an entire field of work Awesome resource: http://iainstitute.org/en/learn/ Source: http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/
  35. 35. Sitemap tools – text editor Sitemaps can be simple outlines and remind us that the purpose is more important than the tool.
  36. 36. Flowcharts Sometimes the flow is more important than a chart of all the pages. Source: http://www.codeproject.com/Articles/111949/Excerpt-from-Designing-the-iPhone-User-Experience
  37. 37. Generate documentation • Activity diagrams – Flowcharts showing how a process will work Source: http://www.edmullen.com/work/project/free-people-retail & http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/
  38. 38. Generate documentation Content Inventories: A catalog of an entire websites content. 1.Title/logo 2.Input field labels 3.Remember me 4.Login button 5.Lost password link
  39. 39. Content inventories Learn more: Responsive Design Workflow by Stephen Hay
  40. 40. Site planning answers the question: What am I designing?
  41. 41. User research happens in concert with the fundamental project definition
  42. 42. Documenting users • Write personas – A rich description of typical users • http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience • Write use case scenarios – Written descriptions of how a product will be used describing common scenarios • http://www.gatherspace.com/static/use_case_example.html
  43. 43. Methods for researching users • Interviews (great for exploring ideas) (requirements) • Questionnaires / surveys (a great preliminary tool) (requirements) • Focus groups (basically group interviews) (requirements) • Direct observation (observe users completing a task) (flowchart) • Card sorts (to discover how users view the content) (sitemaps)
  44. 44. As a result we have: • A clear description of the project • A plan for what we are building • A detailed understanding of the user • Vision for how the product will be used • Best of all, tangible assets the team can share
  45. 45. Learn more If you would like to learn more about this phase: Learn to make: • Personas • Concept models • Site maps • Flowcharts • Wireframes • Design Briefs • Usability plans • Usability reports
  46. 46. UCD boils down to seeking meaningful design insights over random acts of design
  47. 47. In the Define phase we include the user by inquiring of them
  48. 48. Activity time
  49. 49. Our product: A new tool to help holiday shoppers stay organized, find gift ideas & score the best deals
  50. 50. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
  51. 51. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
  52. 52. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
  53. 53. Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals
  54. 54. Share some results
  55. 55. My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag
  56. 56. User research isn’t as hard as it might sound
  57. 57. UCD Step 2: Create concepts users define concept designdevelop deploy
  58. 58. Developing concepts includes • Interpret the documentation to develop possible solutions • Shift from listening to problem solving • Build wireframes and prototypes • User testing
  59. 59. Wireframes A schematic or blueprint that represents the structure of a website. Wireframes are nonfunctional, static image. Start with low-fidelity. Less detail and quick to produce. Move towards higher fidelity as you shape and improve it. Work from the documentation project requirements and research from step 1!
  60. 60. Prototypes Creating the illusion of functionality They don’t need to be complete and typically only simulate a small set of features in an interface Allows you to test out how an interface flows from screen to screen Can start as paper prototypes and move up to full functional high-fidelity prototypes
  61. 61. Workflow A note on:
  62. 62. Iterations are the key Wireframe something Visual design Test with a prototype Discover something
  63. 63. Lean on your user insights and work magic Beautiful, unicorn magic
  64. 64. Video time Source: http://www.youtube.com/watch?v=9wQkLthhHKA Usability test with a paper prototype
  65. 65. Observations • You DO NOT need a finished app to test! • It takes practice • Focus on the user experience of the app and not technical or secondary issues – it is about the essence of the app • Paper prototype allows to accommodate the unexpected • You could quickly change it and test with a new subject • He isn’t trying to get her to do what he wants and prove his design is right – genuine interest in improving
  66. 66. More on usability testing in the second half.
  67. 67. In the Concept phase we include the user via Exploratory based usability tests
  68. 68. UCD Step 3: Design visual solutions users define design concept develop deploy
  69. 69. Design the interface using the blueprints Finally,
  70. 70. So much more than a suggestion Wireframes,
  71. 71. Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
  72. 72. Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB
  73. 73. Be an interior designer
  74. 74. Style Tiles A stepping stone towards the full design: Minimize the radical leap from idea to visual design:
  75. 75. A design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Style tiles:
  76. 76. Establish the visual voice before committing to a full blown design Style tiles:
  77. 77. An iterative tool for visual design Style tiles:
  78. 78. UI Design tools http://www.adobe.com/products/photoshop.html http://html.adobe.com/edge/reflow/
  79. 79. UI Design tools http://macaw.co/ http://www.bohemiancoding.com/sketch/
  80. 80. UI Design tools
  81. 81. UI Design tools Question: What is your primary tool for designing websites (the actual look and feel of the interface)? Out of 274 respondents 22% 53% 18%
  82. 82. In the Design phase we include the user via assessment based usability test
  83. 83. UCD Step 4: Development users define develop design concept deploy
  84. 84. Documentation can really pay off This is when all that
  85. 85. Toss it over the fence and forget about it You do not get to
  86. 86. In the Develop phase we include the user via Validation based usability test
  87. 87. UCD Step 5: Deploy into the wild users define deploy designdevelop concept
  88. 88. In the Deploy phase we include the user by measuring the use of the product
  89. 89. The foundation 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
  90. 90. Google Analytics Who What When From Events Goals Conversions And much more http://www.google.com/analytics/
  91. 91. Crazy Egg http://www.crazyegg.com/
  92. 92. Inspectlet http://www.inspectlet.com/
  93. 93. The definition of the next project Ideas and insights from here become
  94. 94. User Centered Design users define designdevelop deploy concept UX Designers & Information Architects UI Designers Front end dev’s & programmers SEO and web optimization folks Interaction Designers (IxD)
  95. 95. x x Did you notice something missing?
  96. 96. Do you like to read?
  97. 97. Sources Books referenced in this presentation & others I recommend:
  98. 98. Take 10 minutes… Break time Come back for some free books
  99. 99. Thank you for completing the survey!
  100. 100. Deep dives Part 2:
  101. 101. The foundation The three basic principles behind UCD: 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
  102. 102. users UCD Recap Because it is a lot to absorb:
  103. 103. Part 2 Outline What we will cover: 1.Interviews & Surveys 2.Wireframes & prototypes 3.Usability testing
  104. 104. Interviewing users A b r i e f g u i d e
  105. 105. Interviews will humanize your apps problems
  106. 106. Interviews almost always lead to ideas, solutions and features that you had not thought of.
  107. 107. Tips for interviewing users
  108. 108. 1) Interviewing is not selling – don’t defend your app – ask more questions
  109. 109. “Why is that feature important to you?” “Describe what you wanted to happen”
  110. 110. 2) Get actual users – not just your office neighbor
  111. 111. 3) Don’t ask hypothetical questions
  112. 112. 4) Embrace awkward silence
  113. 113. 5) Shut up – it’s not a conversation
  114. 114. After a round of interviews, use a survey to validate the results
  115. 115. Survey tips Simple tips for a good survey: • Know what you want to learn • Write questions that everyone: • will interpret the same way (ex: avoid “do you frequently do x”) • can answer accurately • Avoid leading questions: • Do you agree with most people that Windows 8 is terrible? • Do not make people predict their own behavior • Have follow up questions!!!
  116. 116. Wireframes & Prototypes A b r i e f g u i d e
  117. 117. Finding problems early 1x cost to change during requirements / design 5x cost to change during development 25x cost to change during formal testing 100x cost to change in production You can’t afford not to do it. Researchers at Hewlett-Packard, IBM, Hughes Aircraft, TRW, and other organizations have found that purging an error by the beginning of construction allows rework to be done 10 to 100 times less expensively than when it’s done in the last part of the process, during system test or after release. (Fagan 1976; Humphrey, Snyder, and Willis 1991; Leffingwell 1997; Willis et al. 1998; Grady 1999; Shull et al. 2002; Boehm and Turner 2004).
  118. 118. Elements of Wireframes Wireframes address three core elements 1) Information design – the placement and prioritization of the layout. Very inline with graphic design. 2) Navigation design – the location and structure of the navigation systems. 3) Interface design – expose the features that the app offers. What does it do? How does the structure expose this to users?
  119. 119. Wireframing tools
  120. 120. Wireframing tools http://inspirationhut.net/printable-paper/
  121. 121. Wireframing tools http://www.interfacesketch.com/
  122. 122. Wireframing tools http://www.uistencils.com/
  123. 123. My kit
  124. 124. Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML
  125. 125. Wireframing methods
  126. 126. Wireframing: move fast • Sketch 6 to 8 thumbnail sketches in 5 minutes • Asses the results • Take a break • Rinse and repeat • Identify a solid solution – flush out variants on that idea • Move up to larger sketches • Rapidly iterate on variations of your favorite thumbnail • Slowly move towards a more refined result (lookup Prototyping by Todd Zaki Warfel)
  127. 127. Wireframes should be iterative
  128. 128. From wireframe to prototype
  129. 129. Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML
  130. 130. Demo PDF prototype Demo Axure prototype
  131. 131. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
  132. 132. Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )
  133. 133. Consider your workflow Again,
  134. 134. Not every prototype is made for the same purpose
  135. 135. The 5 types of prototypes
  136. 136. Type 1: To unify groups of people (often diverse people)
  137. 137. Type 2: To work through ideas
  138. 138. Type 3: Get buy in to the idea of UX design practices
  139. 139. Type 4: For usability testing
  140. 140. Type 5: Is it technically possible?
  141. 141. Build only what you need
  142. 142. Prototype formats • Digital prototypes • Paper Prototypes • Storyboards • Video based
  143. 143. Activity time
  144. 144. Our product: A mobile weather application… with a twist
  145. 145. Why do you check the weather? • What to wear? • Type of hat to wear • Type of shoes to wear • Type of jacket/coat • Bring an umbrella? • Drive the convertible? • Bike or bus? • Surfing related • Ski related • Biking related • Phases of the moon • Tide related • Hunting related •Tornado watching • Snow days • Global warming related • Spelunking • Water the garden? • Good day for the beach? • Leave early for work? • Monitor weather on a target date: like a vacation etc •Historical weather patterns for a day in relation to planning an event like a wedding • BBQ weather? • Planning to view changing leaves or any other seasonal event
  146. 146. What does this do? Test on at least 3 users in each round. 5 second test:
  147. 147. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
  148. 148. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
  149. 149. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
  150. 150. Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app
  151. 151. Testing designs can be easy. & Wireframes can be packed with meaning.
  152. 152. Usability testing A n e x t r e m e l y b r i e f i n t r o d u c t i o n .
  153. 153. What is usability? • In essence, how easy it is to use an interface • Good usability = easy to use = positive user experience • Poor usability = hard to use = negative user experience • Attributes that describe the usability of a design: • Usefulness • Efficiency • Effectiveness • Learnability • Satisfaction • Accessibility
  154. 154. What we are looking for: • Usefulness – Does it do what users need and want? • Efficiency – Does it perform its tasks efficiently? • Effectiveness – Does it perform its tasks the way it is intended to? • Learnability – Is it easy to learn use the interface? • Satisfaction – Does the user enjoy using it? • Accessibility – Is the product usable by those with disabilities?
  155. 155. Is this usable?
  156. 156. We can craft the usability as a way to influence the user experience
  157. 157. Accessibility: What’s good for a few, is often good for everyone.
  158. 158. Usability testing is our attempt to answer these questions – is it usable?
  159. 159. Nano Tests T h e 5 m i n u t e g e t s t a r t e d g u i d e t o u s a b i l i t y t e s t i n g .
  160. 160. Nano-usability tests as described in Observing the User Experience What we are going to do:
  161. 161. Bite sized guerilla usability testing designed to get you started in 5 minutes. Nano-usability testing
  162. 162. Nano-usability testing Our simple process: 1. Find one person who cares about your product. It doesn’t matter who. Seriously, anyone. 2. Arrange to watch them use the product. (in person) 3. Ask them to use the product to do something. Any function of the application. (I suggest you focus on the core feature) 4. Watch them do it. Keep your mouth shut. Just watch. 5. Ask yourself: what did I learn?
  163. 163. Keep your mouth shut. Did I mention,
  164. 164. You want to learn what is wrong. You are not trying to defend your creation. Remember,
  165. 165. Five users will find 80% of the problems (typically)
  166. 166. Many small tests, not one big test. Goal:
  167. 167. There is much more to usability testing. But this is a totally legit way to start. Naturally,
  168. 168. Beyond digital interfaces T h i s m o d e l wo r k s i n m a n y s c e n a r i o s
  169. 169. Presentation Planning a
  170. 170. New business Starting a
  171. 171. Wrapping up We a r e a l m o s t d o n e !
  172. 172. The foundation The three basic principles behind UCD: 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design
  173. 173. users UCD Recap
  174. 174. Get a PDF of this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com
  175. 175. 1) Mini Brochure Site The good old content driven brochure style website. Assuming responsive web design is required. Involving users on this type of project feels hard at first. Investigate the user •Interview users •Use analytics Content Inventory Sitemap Wireframes Style Tile UI Design 5 Second tests Development Measure the results
  176. 176. 2) New iPhone app Interview users Survey users Flowchart Wireframes Prototype Usability testing Style Tile UI Design Usability testing Development Usability testing

Editor's Notes

  • This is not a view of the entire web site dev process
  • This is not a view of the entire web site dev process
  • This is not a view of the entire web site dev process

×