1. AN OVERVIEW BY JAMIE STARKE The Role of Prototyping

2. Outline What is a prototype Why should we prototype Benefits and Drawbacks of Prototyping Where it is used How to create a prototype How Prototypes differ

3. What is a prototype A model of an eventual system  Interface prototyping usually includes visual aspects  Limited functionality or features

4. Why should we prototype Obtain early feedback on design alternatives Give concrete examples to elicit feedback Show what is possible Create better designs Useful in communicating concepts

5. Benefits of Prototyping Fast and Cheap (compared to the full system) Elicit more and better feedback Early Identify design problems before coding begins Reduces cost of design errors (as they are identified earlier) Encourages Creativity

6. Drawbacks to Prototyping Viewed by some as a duplication of effort Can give the impression that the product is nearly complete (depending on appearance of the prototype) Not all ideas that can be prototyped are implementable.

7. Where Prototyping is used Early  Gives concrete examples of what’s possible to discuss and elicit feedback  Helps when trying to elicit requirements  Helps ensure we get the right design Midway  Useful for testing difficult concepts before solidifying design  Finding problems in difficult tasks, ensuring users can accomplish their goals  Helps to ensure that the design is right

8. How to create a prototype Choose a task you are interested in Prototyping  What is the Goal of the task, what does a person want to accomplish  What inputs or assumptions are needed  That steps would be required by the user to reach the goal Create screens for each step in the task  Don’t forget to make sure that any inputs or assumptions are taken into account

9. What information is needed for a Prototype Goal: What is the user trying to accomplish, should be realistic Input: What information or resources will the user need to accomplish the task Assumptions: These are assumptions about the state of the system before you begin. May be interesting for error cases Steps: What steps will the user need to perform to make it to the goal.

10. Exercise You are building a new phone that can take pictures of a book’s barcode, and present the user with a “buy this book” page. For this example, we are interested in the task of buying a book. What is the Goal of the User?

11. Exercise You are building a new phone that can take pictures of a book’s barcode, and present the user with a “buy this book” page. For this example, we are interested in the task of buying a book. What Inputs do we need?

12. Exercise You are building a new phone that can take pictures of a book’s barcode, and present the user with a “buy this book” page. For this example, we are interested in the task of buying a book. What Assumptions do we have?

13. Exercise You are building a new phone that can take pictures of a book’s barcode, and present the user with a “buy this book” page. For this example, we are interested in the task of buying a book. What Steps does the user need?

14. Example Prototyping at this point can be divided among the team, which different people creating different screens, or collaborating on them. Different alternatives to screens can also be created We will divide the steps we came up with among the class (if we have time)

15. One possible solution Goal: To order a copy of Paper Prototyping by Snyder Inputs: Barcode for Paper Prototyping Assumptions: Shipping and payment information stored in phone

16. One possible solution Steps: 1. On main screen, open camera 2. Take picture of Barcode for Paper Prototyping 3. Buy “Buy Now” form 4. Place Order

17. How Prototypes Differ Scope Fidelity

18. Scope Nielson, Usability Engineering, 1993

19. Scope Scenario  Used to understand how the users will interact with the system  Used in early in design to elicit feedback without having to create a working prototype  The previous example would be considered a scenario Nielson, Usability Engineering, 1993

20. Scope Vertical Prototype  Reduced amount of functions  In-depth functionality for those few features  Allows for testing users under realistic conditions, without creation of the complete system  In some cases this means linking to the actual data Nielson, Usability Engineering, 1993

21. Scope Horizontal Prototype  Used to demonstrate how the features fit together  Reduced functionality  Does not likely contain link to real data  Testing does not have a very high level of realism as the features lack functionality Nielson, Usability Engineering, 1993

22. Fidelity Low FidelityHigh Fidelity Rudd, Low vs High Fidelity, 1996 Low Cost Useful for Requirements Identification Evaluate multiple design concepts Limited Usefulness for Usability Testing Navigational and flow limitations Poor detailed specification to code Complete Functionality Full Interactive Look and Feel of final product More Expensive Not effective for requirements gathering Time Consuming to create

23. Outline Why should we prototype Benefits and Drawbacks of Prototyping Where it is used How to create a prototype How Prototypes differ