EECS 3461 - Week 6A: Prototyping

Week 6A

What are the steps of the Interaction Design Process (DraPE)?

1. Discovering Requirements

2. Designing Alternatives

3. Prototyping

4. Evaluating

What is a Prototype?

A model of an imagined entity, which can be a variety of things

What are some examples of Prototypes?

Wireframe, Storyboard, Sketch, Mock-up, Working model

Who said this quote on prototypes?

Tim Brown

What are four of the prototype materials?

Paper, cardboard, software, hardware

Why should we prototype (PRE-FACES)?

• Puzzle over ideas

• Refine ideas

• Envision possibilities

• Feedback

• Alternatives comparison

• Communicate ideas

• Evaluate designs

• Saving of STEAM

What are the prototype types (excluding materials)?

• Sketches

• Wireframe

• Storyboards

• Wizard of Oz

What prototype fidelity level is Wireframe considered?

Low-Medium fidelity

What is the overall focus for wireframe and prototype?

The overall focus of wireframe is the overall structure
The overall focus of prototype is the interaction in the final design

Between Wireframe and Prototype, which takes more STEAM (skill, time, effort, attention, money)?

Prototype

What is the aim for wireframe and prototype?

The aim for wireframe is to get an idea across
The aim for prototype is to assess the technical feasibility of an idea

What is the target audience for wireframe and prototype respectively?

Design team members (for brainstorming), users (to test effectiveness and get feedback)

What are the main steps/tips for wireframing?

Focus on structure (layout, hierarchy)

Add basic content

Keep it clean

Be practical

What fidelity prototype level is Sketches?

Low-Fidelity Prototype

What prototype example is this

Sketches

What fidelity prototype level is this wireframe?

Low

What fidelity prototype level is this wireframe?

Medium

Which prototype fidelity level is used at the advanced stages of the product design cycle, and provides a more realistic look and feel of the final product?

High-Fidelity

Which prototype fidelity level serves as a starting point in the design process, and is usually rough, messy, black and white, and contains only basic shapes?

Low-Fidelity

Out of the three fidelity levels, which of them are most commonly used?

Medium-Fidelity

Which prototype fidelity level serves as a starting point for the development process, and may be created on device templates?

High-Fidelity

What are the two dangers in high-fidelity prototyping?

Users may think the prototype is a fully functional system, and they may be less likely to suggest changes/imagine other possibilities

What are some advantages of Low-Fidelity Prototyping?

Cheap

Helps to identify requirements

Evaluates multiple deigns

Addresses layout issues

Useful communication tool

What are some advantages of High-Fidelity Prototyping?

Supports more functionality

Interactive

Useful for exploration and testing

Has look and feel of final product

Marketing/sales tool

What are some disadvantages for Low-Fidelity Prototyping?

Limited error checking

Poor spec for coding

Limited use

Limited usefulness for user testing

What are some disadvantages of High-Fidelity Prototyping?

Expensive

Time-consuming

Ineffective for requirement gathering

Users less willing to critique

What is the end goal for Low and High-Fidelity prototyping?

Low - Exploring ideas, proof-of-concept, and requirements gathering

High - User feedback for usability improvement

What are Storyboards?

A series of sketches that show how the user progresses through a task within the system

What is the main focus and stage of use for Storyboards?

The main focus of storyboards is to illustrate user interactions with a system in context, and they are used in the early stages of the design process

What are the main components of Storyboards?

Persona

Scenario

Visuals

Caption

What are the steps to create a storyboard?

1. Collect Data

2. Decide level

3. Define persona and scenarios

4. Plan out panels

5. Add visuals/captions

6. Distribute

What is the Wizard of Oz prototype?

A technique where the user imagines interacting with the system, but someone else simulates or controls the system responses

What are the Steps of Data Gathering for the Wizard of Oz Method (The 5 P’s)?

1. Create the Prototype

2. Decide Facilitator’s Prompts

3. Create a Study Protocol

4. Choose and Prepare the responder

5. Pilot the study

What are the two common types of compromises in prototyping?

Horizontal - Broad but shallow (only top level)

Vertical - Deep but narrow (few functions)

Which type of compromise in prototyping provides a wide range of functions with little detail?

Horizontal

Which type of compromise in prototyping gives in-depth functionality of a few selected features?

Vertical