1. Prototypes, Storyboards, and Flowcharts Ike Choi

3. Prototype? “A prototype is a shallow rendition of how a program may look and work. It is a mock-up of the program that portrays the look and feel, the methodology and the metaphor you will use.” –Alessi & Trollip, 2001, pp. 502-503 Prototyping is “a method of brainstorming, designing, creating, testing and communicating user interfaces.” –Snyder, 2003, p. 3

4. Four Dimensions of Prototype Breadth: the percentage of the products’ actual functionality that is represented in the prototype Depth: the degree to which underlying functions are in place. Look: the degree to which the visual aspects of the prototype accurately represent the intended appearance (fonts, colors, graphics) Interaction: the way that prototype handles the inputs and outputs with the user (are the I/O methods simulated in a realistic manner?) (Snyder, 2003, p. 260-262)

5. Comparison of Prototype Methods Kind of prototypeInteractionLook Working versionHighMedium-high Slide showMedium-high Paper prototypeLow-mediumLow Cost High Low

6. Example of Slide show

7. Example of Paper Prototype Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work." (Snyder, 2003, p. 4)

12. Paper Prototyping Examples http://www.youtube.com/watch?v=GrV2SZuRPv0 http://www.youtube.com/watch?v=Aa-svs5mQD8 http://www.youtube.com/watch?v=ppnRQD06ggY http://www.youtube.com/watch?v=8Qdj30w4zMQ http://www.youtube.com/watch?v=80oD4x-xAP0 http://www.youtube.com/watch?v=YuRa-ijLOYI

13. Cost vs. Experience Trade-off Fidelity Communication/ Experience Costs “How closely a prototype imitates a final product”

14. A prototype of e-learning A sample section of a proposed e-learning course. The prototype may be prepared online, working fully or partially. Or the prototype may be prepared on paper, with figures resembling completed screens. Sponsors and potential learners can review the sample section and offer suggestions for making it more effective. saulcarliner.home.att.net/oll/glossary.htm

15. Storyboards? Prototypes vs. Storyboards

16. Storyboards

17. Storyboards? “A series of drawings or images that represents how an interface would be used to accomplish a particular task.” “A common and powerful way of communicating your design to clients, programmers, and other people.” “A visual representation of the design and the details that programmers will need to implement it.” –Alessi & Trollip, 2001, pp. 514 (see samples)

20. Flowcharts? Prototypes, Storyboards, and Flowcharts

21. Flowcharts “Flowcharts are a bird’s-eye view showing the structure and sequence of the program, whereas storyboards, which show the details of what learners see.” Alessi & Trollip, 2001, p. 503.

22. Myoungjin Yang Tollett

23. Different layouts.

24. 6200 requirements Prototypes (proposed due: week 8) Sample screen designs (sample storyboards) Flowcharts of the lesson Student Examples –http://cnbishop.myweb.uga.edu/edit6200/pr ototype.html