Prototyping

Outline Risk Management Prototyping Kinds of Prototypes Example Activity 1

Risk Management Risk: an unwanted event that has negative consequences Risk impact: the loss if risk turns into problem Measured in time, quality cost Risk likelihood: probability that risk will turn into problem Risk exposure = impact * likelihood Risk control: the degree to which you can reduce exposure 2

Risk Management Risk assessment Identification Analysis Prioritization Risk control Reduction Management planning Resolution 3

Example Risks in E-Commerce Application Risk: mobile phones (unexpectedly) need to be supported Impact: 30% of revenue?? Likelihood: ??? Risk: credit card validation cannot handle debit cards Impact: 10% of revenue? Likelihood: ??? 4

Risk Management and Prototyping Traditional requirements-gathering Good for controlling risks regarding what system should do Don’t know what system should look like Prototyping Good for controlling risks regarding what system should look like Not good for non-visual aspects of system 5

Top Ten Risks Personnel shortfalls Unrealistic schedule and budgets Developing the wrong software functions Developing the wrong user interface Gold plating Continuing stream of requirements changes Shortfalls in externally performed tasks Shortfalls in externally furnished components Real-time performance shortfalls Straining computer science capabilities 6

Outline Risk Management Prototyping Kinds of Prototypes Example Activity 7

General Idea of Prototyping Depict You depict what you think the system should look like Test You test prototypes with customers or users Fix You fix the prototypes Informs real system implementation 8

Waterfall Process 9 Requirements analysis Design Implementation Operation Testing Prototyping

Spiral Process 10 Draft a menu of requirements Establish requirements Plan Analyze risk & prototype Draft a menu of architecture designs Analyze risk & prototype Draft a menu of program designs Establish architecture Establish program design Implementation Testing Operation Plan

Outline Risk Management Prototyping Kinds of Prototypes Example Activity 11

Different Kinds of Prototypes Throwaway prototypes Paper prototypes Low-fidelity prototypes Evolutionary prototypes High-fidelity prototypes 12

Paper prototypes Sketch on paper and/or post-it notes Don’t worry about colors, fonts, icons, etc. Doesn’t need to be beautiful Does need to show all important UI elements Does need to be intelligible by users 13

Low-fidelity Prototypes Fidelity = closeness to final product Paper prototypes are ultra low fidelity Low-fidelity prototypes can be made with Photoshop PowerPoint HTML Etc. (anything else that’s cheap / easy to use) 14

High-fidelity Prototypes Fidelity = closeness to final product High-fidelity means closer to final product Implemented on target platform Not fully functional Destined to be incorporated into final product 15

“Testing” Prototypes Customers and Users should be your friends They know more about the problem than you do They have some ideas about how to solve the problem They are best resource for discovering your mistakes before you start coding So.. LISTEN!! 16

“Testing” Prototypes Pretend to be computer User tries to perform use case with prototype Let the user interface speak for itself!! See if user can figure it out based on prototype If user misunderstands the UI, fix it on the spot Principle: use is always right (in prototyping) 17

Break Time!!! 18

Outline Risk Management Prototyping Kinds of Prototypes Example Activity 19

Example System: Functional Requirements System will have web pages for mobile phones where citizens can report panhandlers Certain users (volunteers) will view reports and “claim” panhandlers Volunteer offers social services to “claimed” panhandler Panhandler's report marked “done” 20

Examples System: Panhandler Report State Chart 21 new (just reported) claimed (by volunteer) done (visited by volunteer) claim unclaim mark done succeeds

Use Case #1: Report panhandler Actor: any user Preconditions: user views site in mobile browser Postconditions: system records report Flow of events: User selects a city User enters information about panhandler System validates inputs System records report in database 22

23 1.User selects a city 2.User enters information about the panhandler 3.System validates inputs 4.System records report in database 1.User selects a city 2.User enters information about the panhandler 3.System validates inputs 4.System records report in database

Use Case #2: Process Panhandler Actor: volunteer Preconditions: volunteer logged in via mobile browser Postconditions: panhandler marked “done” in system Flow of events: Volunteer reviews list or map of panhandlers Volunteer marks report as “claimed” System records report as claimed Volunteer visits the panhandler Volunteer marks report as “done” System records report as done 24

1.Volunteer reviews list or map of panhandlers 2.Volunteer marks report as “claimed” 3.System records report as claimed 4.Volunteer visits the panhandler 5.Volunteer marks report as “done” 6.System records report as done 1.Volunteer reviews list or map of panhandlers 2.Volunteer marks report as “claimed” 3.System records report as claimed 4.Volunteer visits the panhandler 5.Volunteer marks report as “done” 6.System records report as done

1.Volunteer reviews list or map of panhandlers 2.Volunteer marks report as “claimed” 3.System records report as claimed 4.Volunteer visits the panhandler 5.Volunteer marks report as “done” 6.System records report as done 1.Volunteer reviews list or map of panhandlers 2.Volunteer marks report as “claimed” 3.System records report as claimed 4.Volunteer visits the panhandler 5.Volunteer marks report as “done” 6.System records report as done

Examples: Problems Revealed by Prototype What happens during “validation” of panhandler report? How does the volunteer navigate from “list” to “map” view? What happens if there are lots of report? How does user make sense of it? What happens when user marks panhandler as “done”? 27

Non-visual Problems Prototype Might NOT catch Duplicate reports New cities User authentication Mapping interface in mobile browser? Identifying such problems requires techniques beyond prototyping 28

Example Low-Fidelity Prototypes Low-fidelity prototypes “Close to” the real deal but NOT implemented Care about what system will LOOK like Photoshop, PowerPoint, etc. 29

Promoting health awareness with a “know your numbers” card & system

Prototype splash-screen for Anaconda, an installer framework for Linux

Prototype of a site for managing and sharing photos

Paper vs. Low-fidelity Low-fidelity Let’s you explore colors, fonts, icons, etc. Paper does not But low-fidelity Is more expensive than paper Requires somebody with design skills Is harder to fix on the fly And neither can detect certain problems.. 33

Outline Risk Management Prototyping Kinds of Prototypes Example Activity 34

Activity Get into groups of 3 1 person will be custom / user 2 people will be engineers Your group’s task is to: Create use case(s) Create “paper” prototype(s) … for the following functional requirements.. Each team’s customer will decide if prototypes are “good” (Not me..) 35

Activity: Functional Requirements System will have web pages that allow users to upload status reports about mountain bike trails Status reports MUST include: location, quality, and date Status reports MAY include: photos, text System will allow users to view reports by: Location, quality, or date How the paper prototype(s) “look” is up to your team’s customer 36