Intro to user centered design

Download Intro to user centered design

Post on 28-Nov-2014

151 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

Intro to the user-centered design process

TRANSCRIPT

  • 1. intro to user-centered design
  • 2. User-centered design? Business idea Try it out Launch! User-centered design | @rebeccadestello
  • 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. User-centered design? Much less funny when you think about how much this can cost. User-centered design | @rebeccadestello
  • 5. User-centered design ! ? Business idea Try it out Launch! Research problem Ideate Evaluate goal Prototype Iterate User-centered design | @rebeccadestello
  • 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. Why have a process for design? User-centered design | @rebeccadestello
  • 8. A designers 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. 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. Good design requires iteration High fidelity Wireframe Ideate Sketch Paper Prototype User-centered design | @rebeccadestello
  • 11. Phase I: Research Discover the users goals and needs User-centered design | @rebeccadestello
  • 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. Why start with research? You cannot design apart from the world in which your users live. User-centered design | @rebeccadestello
  • 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. 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. 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. 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. 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 masters program. Where would you begin? 1 2 3 4 5 Focus groups User-centered design | @rebeccadestello
  • 19. Phase II: Ideate Generate lots, and lots, and lots of ideas User-centered design | @rebeccadestello
  • 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. 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. a few ideation methods User-centered design | @rebeccadestello
  • 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. Phase III: Prototype Create something tangible to test User-centered design | @rebeccadestello
  • 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. first... a note about sketch vs. prototype User-centered design | @rebeccadestello
  • 27. Sketch vs. Prototype exploring ideas testing ideas User-centered design | @rebeccadestello
  • 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. 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. fun / cheap prototyping technique: paper prototype User-centered design | @rebeccadestello
  • 31. fun / unusual prototyping technique: body storming User-centered design | @rebeccadestello
  • 32. fun / unusual prototyping technique: wizard of oz http://youtu.be/DL9cAcQ-gKQ User-centered design | @rebeccadestello
  • 33. Phase IV: Evaluate Determine ease of use User-centered design | @rebeccadestello
  • 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. 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. Some evaluation methods Heuristic Evaluation Cognitive Walkthrough Usability Testing User-centered design | @rebeccadestello
  • 37. Heuristic evaluation Expert review of an interface against a set of guidelines or principles. For example, Jakob Nielsens 10 Heuristics: User-centered design | @rebeccadestello
  • 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. 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. Phase V: Launch Build, measure, and learn User-centered design | @rebeccadestello
  • 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. 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. Some measurement methods Site analytics Surveys A/B or multivariate testing Benchmark testing User-centered design | @rebeccadestello
  • 44. https://visualwebsiteoptimizer.com/ab-testing/ A/B testing User-centered design | @rebeccadestello
  • 45. http://visualwebsiteoptimizer.com/multivariate-testing.php Multivariate testing User-centered design | @rebeccadestello
  • ...