Prototyping
2
Outline
• Risk Management• Prototyping• Kinds of Prototypes• Example• Activity
3
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
4
Risk Management
• Risk assessment• Identification• Analysis• Prioritization
• Risk control• Reduction• Management planning• Resolution
5
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: ???
6
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
7
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
8
Outline
• Risk Management• Prototyping• Kinds of Prototypes• Example• Activity
9
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
10
Waterfall Process
Requirements analysis
Design
Implementation
Operation
Testing
Prototyping
11
Spiral Process
Draft a menu ofrequirements
EstablishrequirementsPlan
Analyze risk &prototype
Draft a menu ofarchitecture designs
Analyze risk &prototype
Analyze risk &prototype
Draft a menu ofprogram designs
Establisharchitecture
Establishprogram design
Implementation
TestingOperation
Plan
12
Outline
• Risk Management• Prototyping• Kinds of Prototypes• Example• Activity
13
Different Kinds of Prototypes
• Throwaway prototypes• Paper prototypes• Low-fidelity prototypes
• Evolutionary prototypes• High-fidelity prototypes
14
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
15
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)
16
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
17
“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!!
18
“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)
19
Break Time!!!
20
Outline
• Risk Management• Prototyping• Kinds of Prototypes• Example• Activity
21
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”
22
Examples System: Panhandler Report State Chart
new(just reported)
claimed(by volunteer)
done(visited by volunteer)
claimunclaim
mark donesucceeds
23
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
24
1. User selects a city2. User enters
information about the panhandler
3. System validates inputs
4. System records report in database
25
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
1. Volunteer reviews list or map of panhandlers
2. Volunteer marks report as “claimed”3. System records report as claimed4. Volunteer visits the panhandler5. 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 claimed4. Volunteer visits the panhandler5. Volunteer marks report as “done”6. System records report as done
28
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”?
29
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
30
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.
http://www.flickr.com/photos/juhansonin/347137175/sizes/o/
Promoting health awareness with a“know your numbers” card & system
http://www.flickr.com/photos/sstorari/3671284171/sizes/o/
Prototype splash-screen for Anaconda, an installer framework for Linux
Prototype of a site for managing and sharing photos
34
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..
35
Outline
• Risk Management• Prototyping• Kinds of Prototypes• Example• Activity
36
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..)
37
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