1. Prototyping 1

2. Design Document How express your design ideas. How express your design ideas. Key notions Key notions Cheap, FastCheap, Fast Flexibility to changeFlexibility to change Promotes feedbackPromotes feedback 2

3. The Problem Can’t evaluate until built? Can’t evaluate until built? After building, changes to the design are difficult After building, changes to the design are difficult SOLUTION: Simulate the design, in low-cost manner SOLUTION: Simulate the design, in low-cost manner 3

4. Terminology Early prototyping Early prototyping Late prototyping Late prototyping Low-fidelity prototype Low-fidelity prototype High-fidelity prototype High-fidelity prototype 4

5. Prototyping 5 Low-fidelity Medium-fidelityHigh-fidelity Sketches, mock-ups Slide shows Simulations System prototypes Scenarios Storyboards

6. Rapid Prototyping Methods Non-computer vs. computer-based Non-computer vs. computer-based 6 Typically earlier in processTypically later in process

7. Non-Computer Methods Goal: Want to express design ideas and get quick & cheap opinions on system Goal: Want to express design ideas and get quick & cheap opinions on system Methods?.......our Design Plan Document Methods?.......our Design Plan Document 7

8. Sketches, Mock-ups….our Design Sheets “drawings” of interfaces “drawings” of interfaces Good for brainstorming Good for brainstorming Focuses people on high-level design notions Focuses people on high-level design notions Not so good for illustrating flow and the details Not so good for illustrating flow and the details Quick and cheap -> helpful feedback Quick and cheap -> helpful feedback 8

9. Another idea…..Storyboarding Pencil and paper simulation or walkthrough of system look and functionality Pencil and paper simulation or walkthrough of system look and functionality Use sequence of diagrams/drawingsUse sequence of diagrams/drawings Show key snap shotsShow key snap shots Quick & easyQuick & easy 9

10. Example 10

11. Another idea…Scenarios Hypothetical or fictional situations of use Hypothetical or fictional situations of use Typically involving some person, event, situation and environment Typically involving some person, event, situation and environment Provide context of operation Provide context of operation Often in narrative form, but can also be sketches or even videos Often in narrative form, but can also be sketches or even videos Engaging and interesting Engaging and interesting Allows designer to look at problem from another person’s point of view Allows designer to look at problem from another person’s point of view Facilitates feedback and opinions Facilitates feedback and opinions Can be very futuristic and creative Can be very futuristic and creative 11

12. Other Techniques Tutorials & Manuals Tutorials & Manuals 12

13. Computer Methods Simulate more (not necessarily all) of system functionality Simulate more (not necessarily all) of system functionality Focus on interactivity, more seamless flowFocus on interactivity, more seamless flow More details of design/UI givenMore details of design/UI given More engaging.More engaging. Danger: Users are more reluctant to suggest changes once they see more realistic prototypeDanger: Users are more reluctant to suggest changes once they see more realistic prototype 13

14. More Terminology Horizontal prototype Horizontal prototype Vertical prototype Vertical prototype 14 Very broad, does or shows much of the interface, but does this in a shallow manner Fewer features or aspects of the interface simulated, but done in great detail

15. Prototyping Tools – Draw/Paint Draw each screen, good for lookDraw each screen, good for look 15 Thin, horizontal prototypePhotoShop, …. IP Address CancelOK

16. Tool – slide show Put storyboard-like views down with (animated) transitions between themPut storyboard-like views down with (animated) transitions between them Can give user very specific script to followCan give user very specific script to follow Often called chauffeured prototypingOften called chauffeured prototyping Examples: PowerPoint, Macromedia Director, HTML, …Examples: PowerPoint, Macromedia Director, HTML, … 16

17. Powerpoint Transition Controls Mouse click actions: Next slide Previous slide First slide Last slide Last slide viewed End show Custom show URLFile

18. Multimedia Tool – e.g. Macromedia Director Media + interactions + script/Lingo language Media + interactions + script/Lingo language Place and Time concepts Place and Time concepts Objects positioned in space on “stage”Objects positioned in space on “stage” Objects positioned in time on “score”Objects positioned in time on “score” Easy to transition between screens Easy to transition between screens Can export as executable or as Web Shockwave file Can export as executable or as Web Shockwave file 18

19. 19

20. Prototyping Technique Wizard of Oz - Person simulates and controls system from “behind the scenes” Wizard of Oz - Person simulates and controls system from “behind the scenes” Use mock interface and interact with usersUse mock interface and interact with users Good for simulating system that would be difficult to buildGood for simulating system that would be difficult to build 20 Can be either computer-based or not

21. Wizard of Oz Method: Method: Behavior should be algorithmicBehavior should be algorithmic Good for voice recognition systemsGood for voice recognition systems Advantages: Advantages: Allows designer to immerse oneself in situationAllows designer to immerse oneself in situation See how people respond, how specify tasksSee how people respond, how specify tasks 21