Prototypes, Storyboards, and Flowcharts Ike Choi

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 Prototyping is “a method of brainstorming, designing, creating, testing and communicating user interfaces.” –Snyder, 2003, p. 3

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 )

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

Example of Slide show

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)

Paper Prototyping Examples

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

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

Storyboards? Prototypes vs. Storyboards

Storyboards

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)

Flowcharts? Prototypes, Storyboards, and Flowcharts

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.

Myoungjin Yang Tollett

Different layouts.

6200 requirements Prototypes (proposed due: week 8) Sample screen designs (sample storyboards) Flowcharts of the lesson Student Examples – ototype.html