Prototyping
Outline
•
•
•
•
•
1
Risk Management
Prototyping
Kinds of Prototypes
Example
Activity
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
•
•
•
•
•
•
•
•
•
•
6
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
Outline
•
•
•
•
•
7
Risk Management
Prototyping
Kinds of Prototypes
Example
Activity
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
Requirements analysis
Prototyping
Design
Implementation
Testing
Operation
9
Spiral Process
Draft a menu of
program designs
Analyze risk &
prototype
Draft a menu of
architecture designs
Draft a menu of
requirements
Establish
architecture
Plan
10
Analyze risk &
prototype
Establish
requirements
Plan
Operation
Analyze risk &
prototype
Testing
Implementation
Establish
program design
Outline
•
•
•
•
•
11
Risk Management
Prototyping
Kinds of Prototypes
Example
Activity
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
•
•
•
•
14
Photoshop
PowerPoint
HTML
Etc. (anything else that’s cheap / easy to use)
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
•
•
•
•
•
19
Risk Management
Prototyping
Kinds of Prototypes
Example
Activity
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
new
(just reported)
claim
unclaim
claimed
(by volunteer)
21
done
(visited by volunteer)
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:
•
•
•
•
22
User selects a city
User enters information about panhandler
System validates inputs
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
23
Use Case #2: Process Panhandler
•
•
•
•
Actor: volunteer
Preconditions: volunteer logged in via mobile browser
Postconditions: panhandler marked “done” in system
Flow of events:
•
•
•
•
•
•
24
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 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
http://www.flickr.com/photos/juhansonin/347137175/sizes/o/
Prototype splash-screen for Anaconda,
an installer framework for Linux
http://www.flickr.com/photos/sstorari/3671284171/sizes/o/
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
•
•
•
•
•
34
Risk Management
Prototyping
Kinds of Prototypes
Example
Activity
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