1. Chapter 9 Prototyping

2. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce a simple prototype  Enable you to attempt some aspects of physical design  Describes types of prototyping  Describes the benefits of prototyping

3. Introduction  Design activities begin once a set of requirements has been established.  There are two types of design: – Conceptual design – Physical design  Conceptual design – developing conceptual model that capture what the product/system will do and how it will behave.  Physical design – concerned with of the design such as screen and menu structures, icons, graphic and other interaction styles.  Iterative process : repeated design – evaluation – redesign cycles, which involving users.

4. Introduction  For users to effectively evaluate the design of an interactive product, the designers must produce an interactive version of their ideas.  At early stage, the early versions may be made of paper and cardboard.  While as design progresses and ideas become more detailed, they may be polished software, metal or plastic that resemble the final product.

5. Introduction  Two distinct circumstances for design: – Start from scratch – Modifying an existing product

6. Prototyping Process model/ paradigm

7. Prototyping  Prototyping is a technique, not a specific tool.  A prototype can be anything from a paper-based storyboard through to a complex piece of software, and from a cardboard mockup to a molded or pressed piece of metal.  A prototype allows stakeholders to: – Interact with an envisioned product – Gain some experience of using it – Explore imagined users

8. Prototyping  Example: When the idea for the PalmPilot was being developed, the founder-Jeff Hawkin carved a piece of wood about the size and shape of the device he had imagined. He used to carry this piece of wood around with him and pretend to enter information into it. This is just to see what it would like to own such a device (Bergman & Haitani, 2000)

9. Prototyping  In other words, a prototype is a limited representation of a design that allows users to interact with it and to explore its suitability.

10. Why prototypes? Evaluation and feedback are central to interaction design Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing Team members can communicate effectively You can test out ideas for yourself It encourages reflection: very important aspect of design Prototypes answer questions, and support designers in choosing between alternatives

11. Why prototypes?  Refers to the handout. The figure 8.1 shows a paper-based prototype of the design for a handheld device to help an autistic child communicate.  This prototype shows the intended functions and buttons, their positioning and labeling and the overall shape of the device, but none of the buttons work.  This kind of prototype is sufficient to investigate scenarios of use and to decide for example whether the buttons are appropriate and the functions sufficient, but not to test the response time or whether the speech is loud enough.

12. What to prototype? Technical issues Work flow, task design Screen layouts and information display Difficult, controversial, critical areas

13. Low-Fidelity prototyping  A low-fidelity prototype is one that does not look very much like the final product.  The prototype of Palm pilot described in the previous slide is a low-fidelity prototype.  It is useful because it tends to be simple, cheap and quick to produce and quick to modify.  Apply at the early design stage, during conceptual design. This is because prototype are used for exploring ideas and it should be flexible and encourage.

14. Low-Fidelity prototyping  Examples: sketches of screens, task sequences, etc ‘Post-it’ notes storyboards ‘Wizard-of-Oz’

15. Storyboard Often used with scenarios, bringing more detail, and a chance to role play It is a series of sketches showing how a user might progress through a task using the device Used early in design

16. Sketching Sketching is important to low-fidelity prototyping Don’t be inhibited about drawing ability. Practice simple symbols

17. Using Index Card Index cards (3 X 5 inches) Each card represents one screen Often used in website development

18. Wizard of OZ The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. Usually done early in design to understand users’ expectations What is ‘wrong’ with this approach?

19. High-fidelity prototyping Uses materials that you would expect to be in the final product. Prototype looks more like the final system than a low-fidelity version. For a high-fidelity software prototype common environments include Macromedia Director, Visual Basic, and Smalltalk. Danger that users may think they have a full system…

20. High-fidelity prototyping  Matt Rettig (1994) identifies problems with high- fidelity prototype: – They take too long to build – Reviewers and testers tend to comment on superficial aspects rather than content – Developers reluctant to change something they have worked for hours – A software prototype can set expectations too high – Just one bug in a high-fidelity prototype can bring the testing to a halt.  High-fidelity prototyping is useful for selling ideas to people and for testing out technical issues.

21. Prototyping on Web  Basic terminology: – Design – One or more prototypes, each followed by testing and redesign – Implementation – Site goes live  If a prototype becomes so nearly complete – evolutionary prototype.  Developers can start from scratch  If the developers use the prototype only as a specification – throwaway prototype. They may use it to guide the implementation but then it will be discarded.

22. Prototyping on Web  Horizontal prototype- has little depth of functionality (or no functionality), only to show number of features it presents prototyped Not prototyped

23. Prototyping on Web  Vertical prototype presents only a limited number of features, but the functionality of those features is fully developed. Ex. On web, one set of links leading from the home page to a terminal page. prototyped Not prototyped

24. Summary Different kinds of prototyping are used for different purposes and at different stages Prototypes answer questions, so use prototype appropriately