Rapid Prototyping

What is revolutionary maturation?

throw out old one

What are scenarios?

- Hypothetical or fictional situations of use - Typically involving some person, event, situation, and environment - Provide context of operation - Often in narrative form, but can also be sketches or even videos - Also used in cognitive walkthrough

What are some strengths of flowcharts?

- More detailed, useful for quick evaluation - Also more advanced (though sometimes more rigid) than simpler mockups

What are storyboards?

- Pencil and paper simulation or walkthrough of system look and functionality - Use sequence of diagrams/drawings - Show key snap shots

What are some examples of page-based prototypes?

Photoshop, GIMP2, Axure, AutoDesk, Sketchbook, Invision, Flinto, Mockup.io, Marvel, Balsamiq, Sketch, Adobe XD, Illustrator, etc.

What are sketches/mockups?

Paper-based drawings of interfaces

What is a benefit for page-based prototype?

Medium/high-fidelity, good for look

What are the advantages of Wizard of Oz prototyping?

o Allows designer to immerse oneself in situation o See how people respond, how to specify tasks

What are some examples of interface builders?

Android Studio, Visual Basic

What is chauffeured prototyping?

Another term for linear/slide presentation approach for medium/high fidelity prototypes.

What is a benefit of code-based prototype?

Can save re-coding time down the road

What are physical mockups?

Can use tools such as laser cutters or 3D printers or Arduino/Raspberry Pi. Or can build with styrofoam and buttons or wood, etc.

Describe flow charts.

Functional specification of how the system operates, in a step-by-step flow

Explain page-based approach for medium/high fidelity prototypes.

1. draw/paint programs 2. draw each screen 3. thin, horizontal prototype

What are strengths of sketches/mockups?

1. good for brainstorming 2. quick and cheap 3. can get helpful feedback 4. can use paper, whiteboard, drawing tablet, etc.

What is late prototyping?

A late prototype informs design details

What is a con of design description?

Far from the eventual system and doesn't do a good job presenting visual aspects of the interface?

What are some libraries you can use for code-based prototypes?

Framer.js, React, Bootstrap

What is a benefit of layer-based approach for medium/high fidelity prototypes?

Good for trying out entirely new interactions

Describe design descriptions.

Simply a textual description of a system design?

What is glue code?

code to which back-end functionality can be added through programming

What is evolutionary maturation?

keep changing previous design

What is online collaboration (for prototyping)?

- Allows real-time editing, collaboration, and project management - Work can be demoed on mobile devices - Supports mobile apps and wireframes

What is a low-fidelity prototype?

A "cocktail napkin" prototype - a prototype that is sketchy and incomplete, that has some characteristics of the target product but is otherwise simple

What is a high-fidelity prototype?

A complete or nearly complete implementation on a reference device

What is a horizontal prototype?

A very broad prototype that does or shows much of the interface but in a shallow manner

Explain layer-based approach for medium/high fidelity prototypes.

All assets are tappable, swipe-able, draggable, animated

What are some examples of linear/slide presentation approach for medium/high fidelity prototypes?

PowerPoint, Keynotopia

What is early prototyping?

Product may be in requirements stage

What are the strengths of scenarios?

o Engaging and interesting o Allows designer to look at problem from another person's point of view o Facilitates feedback and opinions o Can be very futuristic and creative o Can involve social and interpersonal aspects of the task

What is a vertical prototype?

o Fewer features or aspects of interface simulated, but done in great detail o Generally used to test a specific interaction or flow

What are some cons for code-based prototypes?

o Less useful for rapid prototyping o More constrained in look and feel o Constrained to traditional interaction styles and methods o Hard to think outside the box

Explain linear/slide presentation approach for medium/high fidelity prototypes.

o Scripted simulations/slide shows o Put storyboard-like views down with (animated) transitions o Can give user very specific script to follow o Often called chauffeured prototyping

What are interface builders?

o Tools for laying out windows, controls, etc. of interface o Have build and test modes that are good for exhibiting look and feel

What are weaknesses of sketches/mockups?

1. Focuses people on high-level design notions 2. not so good for illustrating flow and details

What are drawbacks of computer-aided methods to lo-fi prototypes?

- Can lead to "stale" design - Can focus user (or customer) too much on details of interface too early in the design process

What are benefits to computer-aided methods to lo-fi prototypes?

- Can support more rapid changes to simple mockups - Can support more functionality for prototypes

What are the benefits of tutorials and manuals?

- Can write them ahead of time to flesh out functionality - Forces designer to be explicit about decisions - Putting it on paper is valuable

What is the general workflow of making a page-based prototype?

- Create pages - (if interactive) - connect pages through hotspots, set up page transitions

What is meant by "Wizard of Oz"

- Person simulates and controls system from "behind the scenes" - Use mock interface and interact with users - Good for simulating system that would be difficult to build - Can be either computer-based or not - Good for voice recognition systems and non-traditional interfaces - Behavior should be algorithmic

What are some techniques used for low fidelity/planning steps?

1. Design description 2. Flow chart 3. Sketches, mock-ups 4. Physical mock-ups 5. Storyboarding 6. Scenarios (Use Cases) 7. Tutorials and Manuals 8. Computer-aided methods

What are some examples of medium/high-fidelity prototypes?

1. linear/slide presentation 2. page-based 3. layer-based 4. code-based

What is a weakness of flow charts?

1. no visual layout or interface specified 2. sometimes more rigid than simpler mock-ups 3. requires more commitment of resources to produce

What are some strengths of storyboards?

1. quick and easy 2. solves the issue of user reluctance to suggest changes to what might look like a finished product 3. solves issue of user focusing too much on the details of a UI rather than the big picture

What are the four scales/dimensions regarding prototyping?

1. representation 2. scope 3. executability 4. maturation

What are some examples of online collaboration for prototyping?

InvisionApp, Axure, Balsamiq, UXPin, Cloud9

What are some examples of layer-based approach for medium/high fidelity prototypes?

ProtoPie, Pixate, Framer, Origami, Form

Research existing/competing applications and existing patterns (like how your favorite application does something) for a prototype. (T/F)

True

What is meant by maturation for prototyping?

What are the stages of the product as it comes along?

What is a dilemma of prototyping and how do we address it?

You can't evaluate a design until it's built, but after building it, changes to the design are difficult. Building is also expensive. So, we simulate the design in a low-cost manner.

What is meant by executability for prototyping?

a. Can the prototype be "run"? b. If coding, there will be periods when it can't

What is meant by representation for prototyping?

a. How is the design depicted or represented? b. Can be just textual description or can be visuals and diagrams

What is meant by scope for prototyping?

a. Is it just the interface (mock-up)? b. Or does it include some computational component?

What are the key notions of rapid prototyping?

o Make it fast o Allow lots of flexibility for radically different designs o Make it cheap o Promote valuable feedback o No (hardcore) software coding at this stage o Facilitate iterative design and evaluation