User Experience Prototyping

1,710 views
1,543 views

Published on

Slides I shared about User Experience Prototyping in a recent sharing session.

Published in: Design

User Experience Prototyping

  1. 1. A Quick Introduction To…UX PROTOTYPING (For Software Development)Alan Ho12 March 2012
  2. 2. Agenda 5 minutes 1 Understanding Prototyping 10 minutes 2 Doing Prototyping 10 minutes 3 Prototyping Methods & Tools 2 minutes 4 Conclusion
  3. 3. Understanding Prototyping 1 2 3 4
  4. 4. Prototyping T he use of simplified and complete models of a design to explore ideas, elaborate requirements, refine specifications, and test functionality - William Lidwell et al, Universal Principles of Design, 2003
  5. 5. PrototypingA means to an end; its purpose is to identify the flaws in your work, early in the process, while you still have time to do something about it - Dennis G. Jerz, 2000
  6. 6. So What Does This Means (For Us)?
  7. 7. Prototyping Technique used to express the strategyDesign Your Strategy for an Effective (User) Experience
  8. 8. PrototypingI t’s one thing to talk about them and have storyboards and another thing to see them for real. - Robert Hoekman, Jr
  9. 9. Prototyping Why… Benefits… Explore • • Verifies or disproves assumptions Clarifies requirements – helps set Validate expectations and avoid confusion Test • Helps identify issues early on • Brings user perspective early in Communicate the process • Minimizes risks/costs Reduce • Keeps coding rework to a minimum
  10. 10. Prototyping Without it, the success of the project relies on a high risk gamble of chance
  11. 11. What Are They? • Complete or partial model of a design concept • Planned for a specific planned purpose • Customized for a distinct audiencePrototypes • Framed by assumptions - articulated in requirements • Planned with specific characteristics • Portraying specific content and fidelity • Performed using a specific method • Created with a specific tool
  12. 12. The challenges of gathering How the Customer How the Project Leader How the Analyst How the Programmer How the Businessand analyzing requirements… explained it understood it designed it wrote it Consultant described it Prototypes can aid matching requirements! How the project was What was actually How the customer was How it was supported What the customer documented built billed really needed
  13. 13. Adapted from a true story… Product management wants a 1000W mobile hairdryer… Product management likes the sketch so we created a prototype… The initial prototype was great, but customers want it in green then blue and eventually red
  14. 14. Can you imagine if there’s no prototyping and validation? Product management wants a 1000W mobile hairdryer… A likely result 
  15. 15. Doing Prototyping1 2 3 4
  16. 16. B est practice prototyping requires a process -- an effective one. Prototyping should not be a random act of design Michael Arent, Director of user interface standards, SAP
  17. 17. Diagram of the iterative design and critique processWarfel, Todd Zaki. 2009. Prototyping: A Practitioners Guide
  18. 18. The PrototypingProcess Plan •Verify Requirements •Define Users •Develop Task Flows •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & Tool Design •Define Design Criteria •Create the Design •Review the Design Results •Validate the Design •Deploy the Design
  19. 19. •Verify Requirements Plan •Define Users •Develop Task Flows Business •Marketing •Salability •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & ToolDevelopment Design •Define Design Criteria •Create the Design•Technical•Functional•Usage •Review the Design Results •Validate the Design •Deploy the Design
  20. 20. •Verify RequirementsPlan •Define Users •Develop Task Flows •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & Tool Design •Define Design Criteria •Create the Design •Review the Design Results •Validate the Design •Deploy the Design
  21. 21. •Verify RequirementsPlan •Define Users •Develop Task Flows •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & Tool Design •Define Design Criteria •Create the Design •Review the Design Results •Validate the Design •Deploy the Design
  22. 22. •Verify RequirementsPlan •Define Users •Develop Task Flows •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & Tool Design •Define Design Criteria •Create the Design •Review the Design Results •Validate the Design •Deploy the Design
  23. 23. •Verify RequirementsPlan •Define Users •Develop Task Flows •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & Tool Design •Define Design Criteria •Create the Design •Review the Design Results •Validate the Design •Deploy the Design
  24. 24. •Verify RequirementsPlan •Define Users •Develop Task Flows •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & Tool Design •Define Design Criteria •Create the Design •Review the Design Results •Validate the Design •Deploy the Design
  25. 25. QUIS Plan •Verify Requirements •Define Users •Develop Task Flows NAU PUEU USE •Determine Characteristics Prepare SUS •Define Content & Fidelity •Choose a Method & ToolCSUQ ASQ Design •Define Design Criteria •Create the Design PHUE PUTQ NHE •Review the Design Results •Validate the Design •Deploy the Design
  26. 26. 16 •Verify Requirements 14 Plan •Define Users •Develop Task FlowsNumber of Unique Usability Issues 12 10 •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & Tool Low 8 Medium High 6 Design •Define Design Criteria •Create the Design 4 2 •Review the Design Results •Validate the Design •Deploy the Design 0 Design 1 Design 2 Design 3
  27. 27. •Verify RequirementsPlan •Define Users •Develop Task Flows •Determine Characteristics Prepare •Define Content & Fidelity •Choose a Method & Tool Design •Define Design Criteria •Create the Design •Review the Design Results •Validate the Design •Deploy the Design
  28. 28. Prototyping Methods & Tools 1 2 3 4
  29. 29. Prototyping Tools…• Keynote (3%) • Illustrator (23%)• PowerPoint (43%) • HTML Editor (4%)• Excel (0.1%) • Dreamweaver (47%)• Visio (59%) • Fireworks (18%)• Paper (77%) • Flash (21%)• Acrobat (19%) • Expression Blend• Photoshop (10%) • OmmiGraffle (30%)• iRise (0.1%) • InDesign (12%)• Axure (30%) • Balsamiq Mockups• Flex (2%)
  30. 30. BalsamiqMockups
  31. 31. Microsoft Visio
  32. 32. Expression Blend
  33. 33. Paper
  34. 34. You can prototype with just about anything• Software you already know is usually better than specialized tools• There is no one size tool that fits all
  35. 35. The method of prototyping you use will change as your software product develops and evolves…
  36. 36. Common Mistakes• Focusing too much on a particular tool• Prototyping either too much or too little• Prototyping the wrong thing• Not setting expectations for what the prototype will be• Prototyping late and infrequently
  37. 37. Conclusion1 2 3 4
  38. 38. In Summary…1. Aids the definition of important design artefacts in a software project2. Achieving a rational design outcome with or without user-centered design3. Facilitates a process that supports timely design iterations and explorations4. Prototyping itself also needs a process5. You can prototype with just about anything6. We need to start ASAP!

×