Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to user centered design

1,238 views

Published on

Intro to the user-centered design process

Published in: Technology
  • Be the first to comment

Intro to user centered design

  1. 1. intro to user-centered design
  2. 2. User-centered design? Business idea Try it out Launch! User-centered design | @rebeccadestello
  3. 3. User-centered design? “Merely being the victim of a particular problem does not automatically bestow on one the power to see its solution. Alan Cooper “The Inmates Are Running the Asylum” p123 User-centered design | @rebeccadestello
  4. 4. User-centered design? Much less funny when you think about how much this can cost. User-centered design | @rebeccadestello
  5. 5. User-centered design ! ? Business idea Try it out Launch! Research problem Ideate Evaluate goal Prototype Iterate User-centered design | @rebeccadestello
  6. 6. II. Ideate Generate ideas User-centered design V. Launch Build, Measure, Learn I. Research Discover goals & needs Design → Evaluate → Iterate III. Prototype Produce something tangible IV. Evaluate Determine ease of use User-centered design | @rebeccadestello
  7. 7. Why have a process for design? User-centered design | @rebeccadestello
  8. 8. A designer’s expertise lies not in the thing he or she is designing. You do not have to be a widget expert to be a designer of a widget-manufacturing interface. Instead, you must be an expert in the process of design.
  9. 9. Why follow a design process? • It helps us know where to begin • It helps us keep the user first • It prevents us from omitting important steps • It's more reliable than intuition • It reminds us to iterate User-centered design | @rebeccadestello
  10. 10. Good design requires iteration High fidelity Wireframe Ideate Sketch Paper Prototype User-centered design | @rebeccadestello
  11. 11. Phase I: Research Discover the user’s goals and needs User-centered design | @rebeccadestello
  12. 12. II. Ideate Generate ideas I. Research V. Launch Build, Measure, Learn I. Research Discover goals & needs Design → Evaluate → Iterate III. Prototype Produce something tangible IV. Evaluate Determine ease of use User-centered design | @rebeccadestello
  13. 13. Why start with research? You cannot design apart from the world in which your users live. User-centered design | @rebeccadestello
  14. 14. How do we learn what we want to know? First, identify users and their needs • Who is the target audience? • Who are the stakeholders? • What are the user and business requirements? User-centered design | @rebeccadestello
  15. 15. How do we learn what we want to know? Then develop a research question • How do users do it now? • What do users want? • What do users need? • What else have they tried? • Is there already another solution? User-centered design | @rebeccadestello
  16. 16. Qualitative (insights) landscape of Contextual inquiry Field studies research methodologies Quantitative (validation) Goals & Attitudes (what people say) Behaviors (what people do) Diary studies User interviews Participatory design Card sorting Usability testing Site traffic A/B testing User surveys User-centered design | @rebeccadestello
  17. 17. for best results, use triangulation to learn about your user Qualitative research A/B test results Survey data APPARENT TRUTH User-centered design | @rebeccadestello
  18. 18. Qualitative (insights) Field studies Quantitative (validation) Goals & Attitudes (what people say) Behaviors (what people do) Diary studies User interviews Participatory design Card sorting Usability testing Site traffic A/B testing User surveys Contextual inquiry For example: Your business goal is to… Attract prospective students who look at the UW website to register for the master’s program. Where would you begin? 1 2 3 4 5 Focus groups User-centered design | @rebeccadestello
  19. 19. Phase II: Ideate Generate lots, and lots, and lots of ideas User-centered design | @rebeccadestello
  20. 20. II. Ideate Generate ideas V. Launch Build, Measure, Learn I. Research Discover goals & needs Design → Evaluate → Iterate III. Prototype Produce something tangible IV. Evaluate Determine ease of use II. Ideate User-centered design | @rebeccadestello
  21. 21. Ideate to increase the chances for success by considering a huge volume of ideas in a systematic way. One of the worst things you can do is go with the first idea that you get. Remember: You can always come back to it later. User-centered design | @rebeccadestello 2013 | Rebecca Destello
  22. 22. a few ideation methods… User-centered design | @rebeccadestello
  23. 23. Design mapping Cardboard mockups Sketching Story telling w/props Affinity diagramming Intro to the UCD Process | R. Destello, T. Zeiler | UX Research, Nordstrom User-centered design | @rebeccadestello Direct, 2014
  24. 24. Phase III: Prototype Create something tangible to test User-centered design | @rebeccadestello
  25. 25. II. Ideate Generate ideas III. Prototype V. Launch Build, Measure, Learn I. Research Discover goals & needs Design → Evaluate → Iterate III. Prototype Produce something tangible IV. Evaluate Determine ease of use User-centered design | @rebeccadestello
  26. 26. first... a note about sketch vs. prototype User-centered design | @rebeccadestello
  27. 27. Sketch vs. Prototype exploring ideas testing ideas User-centered design | @rebeccadestello
  28. 28. Why prototype? • You can test ideas • It brings the user into the design process early on • Prototyping brings subtleties and nuances into the light • Begin to wrestle with the technical constraints User-centered design | @rebeccadestello
  29. 29. Prototyping techniques • Body storming • Cardboard / foam core mockups • Paper prototypes • Wizard of Oz • Screenshots • Video mock-ups • Digital prototypes Lo-fidelity Hi-fidelity User-centered design | @rebeccadestello
  30. 30. fun / cheap prototyping technique: paper prototype User-centered design | @rebeccadestello
  31. 31. fun / unusual prototyping technique: body storming User-centered design | @rebeccadestello
  32. 32. fun / unusual prototyping technique: wizard of oz http://youtu.be/DL9cAcQ-gKQ User-centered design | @rebeccadestello
  33. 33. Phase IV: Evaluate Determine ease of use User-centered design | @rebeccadestello
  34. 34. I. Research Discover goals & needs II. Ideate Generate ideas V. Launch Build, Measure, Learn Design → Evaluate → Iterate III. PrototypeProduce something tangible IV. Evaluate Determine ease of use Prototype Produce something tangible IV. Evaluate User-centered design | @rebeccadestello
  35. 35. Why evaluate? Evaluation helps answer.. • If a product is learnable, efficient, memorable, error tolerant, and satisfying • If there is a problem, “why” it might exist • If we built it right It also helps drive iterations :-) User-centered design | @rebeccadestello
  36. 36. Some evaluation methods • Heuristic Evaluation • Cognitive Walkthrough • Usability Testing User-centered design | @rebeccadestello
  37. 37. Heuristic evaluation Expert review of an interface against a set of guidelines or principles. For example, Jakob Nielsen’s 10 Heuristics: User-centered design | @rebeccadestello
  38. 38. Cognitive walkthrough (streamlined) For each action a user has to take to complete a task, the reviewer needs to describe the user's immediate goal and answer 2 questions: 1. Will the user know what to do at this step? 2. If the user does the right thing, will they know that they did the right thing, and are making progress towards their goal? User-centered design | @rebeccadestello
  39. 39. Usability testing Usability assesses how easy user interfaces are to use. Usability is defined by 5 quality components: • Learnability • Efficiency • Memorability • Errors • Satisfaction User-centered design | @rebeccadestello
  40. 40. Phase V: Launch Build, measure, and learn User-centered design | @rebeccadestello
  41. 41. II. Ideate Generate ideas V. Launch V. Launch Build, Measure, Learn I. Research Discover goals & needs Design → Evaluate → Iterate III. Prototype Produce something tangible IV. Evaluate Determine ease of use User-centered design | @rebeccadestello
  42. 42. Why measure at launch? • Product is fully developed and in actual environment • Assess in a quantitative way which design performs better • Helps answer “Did we get it right?” User-centered design | @rebeccadestello
  43. 43. Some measurement methods • Site analytics • Surveys • A/B or multivariate testing • Benchmark testing User-centered design | @rebeccadestello
  44. 44. https://visualwebsiteoptimizer.com/ab-testing/ A/B testing User-centered design | @rebeccadestello
  45. 45. http://visualwebsiteoptimizer.com/multivariate-testing.php Multivariate testing User-centered design | @rebeccadestello
  46. 46. If problems are in . . . I. Research Discover goals & needs II. Ideate Generate ideas User’s performance User’s understanding Usefulness / Appropriateness V. Launch Build, Measure, Learn IV. Evaluate Determine ease of use Design → Evaluate → Iterate III. Prototype Produce something tangible Evaluation drives iteration User-centered design | @rebeccadestello
  47. 47. In summary Research, ideate, prototype, evaluate, launch User-centered design | @rebeccadestello Intro to the UCD Process | R. Destello | UX Research, Nordstrom, 2014
  48. 48. Summary of the UCD process • Research to understand the user’s problem space, goals, and needs • Ideate to generate ideas for solving the user’s needs, and problem space • Prototype to create something tangible to test • Evaluate the prototype to assess performance • Iterate! Iterate! Iterate! • Launch, build, measure, learn…. repeat User-centered design | @rebeccadestello
  49. 49. Thank you! Rebecca Destello @rebeccadestello

×